richard
/
SemanSemantic-UItic-UI
mirror of https://github.com/Semantic-Org/Semantic-UI.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Gets progress module to a point where it is ready to be published

pull/1129/head
jlukic 10 years ago
parent
ba1f8b060d
commit
41f2d0123a
6 changed files with 472 additions and 155 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 349
      server/documents/elements/progress.html.eco
  2. 35
      server/files/javascript/progress.js
  3. 31
      src/definitions/behaviors/state.js
  4. 170
      src/definitions/modules/progress.js
  5. 35
      src/definitions/modules/progress.less
  6. 7
      src/themes/packages/default/modules/progress.variables

349
server/documents/elements/progress.html.eco
View File

@ -12,162 +12,285 @@ type : 'UI Module'
themes : ['Default', 'Striped']
---
<link rel="stylesheet/less" type="text/css" href="/build/less/definitions/modules/progress.less" />
<script src="/javascript/progress.js"></script>
<%- @partial('header') %>
<%- @partial('header', { tabs: { definition: 'Definition', usage: 'Usage' } }) %>
<div class="main container">
<h2 class="ui dividing header">Types</h2>
<div class="ui tab" data-tab="definition">
<div class="example">
<h4 class="ui header">Progress Bar</h4>
<p>A standard progress bar</p>
<div class="ui progress">
<div class="bar">
<div class="progress"></div>
<h2 class="ui dividing header">Types</h2>
<div class="example">
<h4 class="ui header">Progress Bar</h4>
<p>A standard progress bar</p>
<div class="ui progress">
<div class="bar">
<div class="progress"></div>
</div>
<div class="label">Uploading Files</div>
</div>
<div class="label">Uploading Files</div>
</div>
</div>
<h2 class="ui dividing header">Content</h2>
<h2 class="ui dividing header">Content</h2>
<div class="example">
<h4 class="ui header">Bar</h4>
<p>A progress element can contain a bar to indicate the current level of progress</p>
<div class="ui progress">
<div class="bar"></div>
<div class="example">
<h4 class="ui header">Bar</h4>
<p>A progress element can contain a bar to indicate the current level of progress</p>
<div class="ui progress">
<div class="bar"></div>
</div>
</div>
</div>
<div class="example">
<h4 class="ui header">Current Progress</h4>
<p>A progress bar can contain a reading of the current progress</p>
<div class="ui progress">
<div class="bar">
<div class="progress">22%</div>
<div class="example">
<h4 class="ui header">Current Progress</h4>
<p>A progress bar can contain a reading of the current progress</p>
<div class="ui progress">
<div class="bar">
<div class="progress"></div>
</div>
</div>
</div>
</div>
<div class="example">
<h4 class="ui header">Label</h4>
<p>A progress element can contain a label</p>
<div class="ui progress">
<div class="bar">
<div class="progress">22%</div>
<div class="example">
<h4 class="ui header">Label</h4>
<p>A progress element can contain a label</p>
<div class="ui progress">
<div class="bar">
<div class="progress"></div>
</div>
<div class="label">Uploading Files</div>
</div>
<div class="label">Uploading Files</div>
</div>
</div>
<h2 class="ui dividing header">States</h2>
<h2 class="ui dividing header">States</h2>
<div class="example">
<h4 class="ui header">Active</h4>
<p>A progress bar can show activity</p>
<div class="ui active progress">
<div class="bar">
<div class="progress">22%</div>
<div class="example">
<h4 class="ui header">Active</h4>
<p>A progress bar can show activity</p>
<div class="ui active progress">
<div class="bar">
<div class="progress"></div>
</div>
<div class="label">Uploading Files</div>
</div>
<div class="label">Uploading Files</div>
</div>
</div>
<div class="example">
<h4 class="ui header">Successful</h4>
<p>A progress bar can show success</p>
<div class="ui successful progress">
<div class="bar"></div>
<div class="example">
<h4 class="ui header">Success</h4>
<p>A progress bar can show a success state</p>
<div class="ui progress success">
<div class="bar">
<div class="progress"></div>
</div>
<div class="label">Everything worked, your file is all ready.</div>
</div>
</div>
</div>
<div class="example">
<h4 class="ui header">Warning</h4>
<p>A progress bar can show a warning state</p>
<div class="ui warning progress">
<div class="bar"></div>
<div class="example">
<h4 class="ui header">Warning</h4>
<p>A progress bar can show a warning state</p>
<div class="ui progress warning">
<div class="bar">
<div class="progress"></div>
</div>
<div class="label">Your file didn't meet the minimum resolution requirements.</div>
</div>
</div>
</div>
<div class="example">
<h4 class="ui header">Failed</h4>
<p>A progress bar can show failure</p>
<div class="ui failed progress">
<div class="bar"></div>
<div class="example">
<h4 class="ui header">Error</h4>
<p>A progress bar can show an error state</p>
<div class="ui progress error">
<div class="bar">
<div class="progress"></div>
</div>
<div class="label">There was an error.</div>
</div>
</div>
</div>
<div class="example">
<h4 class="ui header">Disabled</h4>
<p>A progress bar can be disabled</p>
<div class="ui disabled progress">
<div class="bar"></div>
<div class="example">
<h4 class="ui header">Disabled</h4>
<p>A progress bar can be disabled</p>
<div class="ui disabled progress">
<div class="bar"></div>
</div>
</div>
</div>
<h2 class="ui dividing header">Variations</h2>
<h2 class="ui dividing header">Variations</h2>
<div class="example">
<h4 class="ui header">Attached</h4>
<p>A progress bar can show progress of an element</p>
<div class="ui top attached progress">
<div class="bar"></div>
</div>
<div class="ui attached segment">
<p>La la la la</p>
<div class="example">
<h4 class="ui header">Attached</h4>
<p>A progress bar can show progress of an element</p>
<div class="ui top attached progress">
<div class="bar"></div>
</div>
<div class="ui attached segment">
<p>La la la la</p>
</div>
<div class="ui bottom attached progress">
<div class="bar"></div>
</div>
</div>
<div class="ui bottom attached progress">
<div class="bar"></div>
<div class="example">
<h4 class="ui header">Color</h4>
<p>Can have different colors:</p>
<div class="ui black progress">
<div class="bar"></div>
</div>
<div class="ui blue progress">
<div class="bar"></div>
</div>
<div class="ui green progress">
<div class="bar"></div>
</div>
<div class="ui orange progress">
<div class="bar"></div>
</div>
<div class="ui pink progress">
<div class="bar"></div>
</div>
<div class="ui purple progress">
<div class="bar"></div>
</div>
<div class="ui red progress">
<div class="bar"></div>
</div>
<div class="ui teal progress">
<div class="bar"></div>
</div>
<div class="ui yellow progress">
<div class="bar"></div>
</div>
</div>
</div>
<div class="ui tab" data-tab="usage">
<div class="example">
<h4 class="ui header">Color</h4>
<p>Can have different colors:</p>
<div class="ui black progress">
<div class="bar"></div>
</div>
<div class="ui blue progress">
<div class="bar"></div>
</div>
<div class="ui green progress">
<div class="bar"></div>
</div>
<div class="ui orange progress">
<div class="bar"></div>
</div>
<div class="ui pink progress">
<div class="bar"></div>
</div>
<div class="ui purple progress">
<div class="bar"></div>
</div>
<div class="ui red progress">
<div class="bar"></div>
<h2 class="ui header">Initializing a progress bar</h2>
<div class="example">
<h4 class="ui header">With metadata</h4>
<p>A progress bar can be initialized with its</p>
<div class="code" data-type="javascript" data-demo="true">
$('#example1').progress();
</div>
<div class="code" data-type="html" data-preview="true">
<div class="ui progress" data-percent="74" id="example1">
<div class="bar"></div>
<div class="label">Creating Profile</div>
</div>
</div>
</div>
<div class="ui teal progress">
<div class="bar"></div>
<div class="example">
<h4 class="ui header">With javascript</h4>
<p>A progress bar can be initialized with its</p>
<div class="code" data-type="javascript" data-demo="true">
$('#example2').progress({
percent: 22
});
</div>
<div class="code" data-type="html" data-preview="true">
<div class="ui progress" id="example2">
<div class="bar"></div>
<div class="label">Creating Profile</div>
</div>
</div>
</div>
<div class="ui yellow progress">
<div class="bar"></div>
<h2 class="ui header">Task Completion Percent</h2>
<div class="example">
<h4 class="ui header">Adding a total value</h4>
<p>A progress bar can keep track of the current value as a ratio of a total value. This is useful for tracking the progress of a series of events with a known quantity, for example "uploading 1 of 20" photos.</p>
<p>Each call to increment will increase the value by 1, or the value specified as the second parameter</p>
<div class="code" data-type="javascript" data-demo="true">
$('#example3')
.progress('increment')
;
</div>
<div class="code" data-type="html" data-preview="true">
<div class="ui progress" id="example3">
<div class="bar">
<div class="progress"></div>
</div>
<div class="label">Adding Photos</div>
</div>
</div>
<div class="evaluated code" data-type="javascript">
$('#example3')
.progress({
total: 3
})
;
</div>
</div>
</div>
<div class="example">
<h4 class="ui header">Striped</h4>
<p>A progress bar can be striped</p>
<div class="ui striped progress">
<div class="bar"></div>
<div class="example">
<h4 class="ui header">Initializing with metadata and using custom labels</h4>
<p>A progress bar can keep track of the current value as a ratio of a total value. This is useful for tracking the progress of a series of events with a known quantity, for example "uploading 1 of 20" photos.</p>
<p>Each call to increment will increase the value by 1, or the value specified as the second parameter</p>
<p>In addition you can pass in templates text for each state available to your progress bar which will automatically be updated when your progress bar reaches that state</p>
<div class="code" data-type="javascript" data-demo="true">
$('#example4')
.progress('increment')
;
</div>
<div class="code" data-type="html" data-preview="true">
<div class="ui progress" data-value="15" data-total="20" id="example4">
<div class="bar">
<div class="progress"></div>
</div>
<div class="label">Adding Photos</div>
</div>
</div>
<div class="evaluated code" data-type="javascript">
$('#example4')
.progress({
text: {
active : 'Adding {value} of {total} photos',
success : '{total} Photos Uploaded!'
}
})
;
</div>
</div>
</div>
<div class="another example">
<div class="ui active striped progress">
<div class="bar" style="width: 30%;"></div>
<div class="example">
<h4 class="ui header">Alternate bar labels</h4>
<p>Progress bar labels can be set to either a percentage or ratio with percentage being the default state. If you need to translate a progress bar label simply pass in a new templated value as the accompanying text.</p>
<p>The following example shows how to localize for <b>Spanish</b>.</p>
<div class="code" data-type="javascript" data-demo="true">
$('#example5')
.progress('increment')
;
</div>
<div class="code" data-type="html" data-preview="true">
<div class="ui progress" data-value="15" data-total="20" id="example5">
<div class="bar">
<div class="progress"></div>
</div>
<div class="label">Carga de archivos</div>
</div>
</div>
<div class="evaluated code" data-type="javascript">
$('#example5')
.progress({
label: 'ratio',
text: {
ratio: '{value} de {total}'
}
})
;
</div>
</div>
</div>
</div>

35
server/files/javascript/progress.js
View File

@ -0,0 +1,35 @@
semantic.progress = {};
// ready event
semantic.progress.ready = function() {
var
$progress = $('.ui.progress').not('.success, .error, .warning'),
$stateProgress = $('.ui.success.progress, .ui.warning.progress, .ui.error.progress')
;
setTimeout(function() {
$progress
.progress({
random: {
min: 10,
max: 90
}
})
.progress('increment')
;
$stateProgress
.progress('set progress', 100)
;
}, 300);
};
// attach ready event
$(document)
.ready(semantic.progress.ready)
;

31
src/definitions/behaviors/state.js
View File

@ -126,6 +126,12 @@ $.fn.state = function(parameters) {
inactive: function() {
return !( $module.hasClass(className.active) );
},
state: function(state) {
if(className[state] === undefined) {
return false;
}
return $module.hasClass( className[state] );
},
enabled: function() {
return !( $module.is(settings.filter.active) );
@ -143,6 +149,9 @@ $.fn.state = function(parameters) {
},
input: function() {
return $module.is('input');
},
progress: function() {
return $module.is('.ui.progress');
}
},
@ -631,7 +640,10 @@ $.fn.state.settings = {
className: {
active : 'active',
disabled : 'disabled',
loading : 'loading'
error : 'error',
loading : 'loading',
success : 'success',
warning : 'warning'
},
selector: {
@ -648,14 +660,23 @@ $.fn.state.settings = {
button: {
disabled : true,
loading : true,
active : true
active : true,
},
progress: {
active : true,
success : true,
warning : true,
error : true
}
},
states : {
disabled: true,
loading : true,
active : true
active : true,
disabled : true,
error : true,
loading : true,
success : true,
warning : true
},
text : {

170
src/definitions/modules/progress.js
View File

@ -48,6 +48,7 @@ $.fn.progress = function(parameters) {
$module = $(this),
$bar = $(this).find(selector.bar),
$progress = $(this).find(selector.progress),
$label = $(this).find(selector.label),
element = this,
instance = $module.data(moduleNamespace),
@ -71,6 +72,20 @@ $.fn.progress = function(parameters) {
;
},
destroy: function() {
module.verbose('Destroying previous dropdown for', $module);
$module
.removeData(moduleNamespace)
;
instance = undefined;
},
complete: function() {
if(module.percent === undefined || module.percent < 100) {
module.set.percent(100);
}
},
read: {
metadata: function() {
if( $module.data(metadata.percent) ) {
@ -106,7 +121,7 @@ $.fn.progress = function(parameters) {
incrementValue = incrementValue || 1;
newValue = startValue + incrementValue;
edgeValue = module.total;
module.debug('Incrementing completed by value', incrementValue, startValue, edgeValue);
module.debug('Incrementing value by', incrementValue, startValue, edgeValue);
if(newValue > edgeValue ) {
module.debug('Value cannot decrement above total', edgeValue);
newValue = edgeValue;
@ -136,7 +151,7 @@ $.fn.progress = function(parameters) {
startValue = module.value || 0;
decrementValue = -decrementValue || -1;
newValue = startValue + decrementValue;
module.debug('Decrementing completed by value', decrementValue, startValue);
module.debug('Decrementing value by', decrementValue, startValue);
if(newValue > module.total ) {
newValue = module.total;
}
@ -152,6 +167,21 @@ $.fn.progress = function(parameters) {
},
get: {
text: function(templateText) {
var
value = module.value || 0,
total = module.total || 0,
percent = module.percent || 0
;
templateText = templateText || '';
templateText = templateText
.replace('{value}', value)
.replace('{total}', total)
.replace('{percent}', percent)
;
module.debug('Adding variables to progress bar text', templateText);
return templateText;
},
randomValue: function() {
module.debug('Generating random increment percentage');
return Math.floor((Math.random() * settings.random.max) + settings.random.min);
@ -168,8 +198,10 @@ $.fn.progress = function(parameters) {
},
set: {
complete: function() {
module.set.percent(100);
barWidth: function(value) {
$bar
.css('width', value + '%')
;
},
initials: function() {
if(settings.value) {
@ -184,21 +216,91 @@ $.fn.progress = function(parameters) {
module.verbose('Current percent set in settings', settings.percent);
module.percent = settings.percent;
}
if(module.percent) {
module.set.percent(module.percent);
}
else if(module.value) {
module.set.progress(module.value);
}
},
percent: function(value) {
value = (typeof value == 'string')
? +(value.replace('%', ''))
: value
percent: function(percent) {
percent = (typeof percent == 'string')
? +(percent.replace('%', ''))
: percent
;
console.log(value);
if(value > 0 && value < 1) {
if(percent > 0 && percent < 1) {
module.verbose('Module percentage passed as decimal, converting');
value = value * 100;
percent = percent * 100;
}
// round percentage
if(settings.precision === 0) {
percent = Math.round(percent);
}
else {
percent = Math.round(percent * (10 * settings.precision) / (10 * settings.precision) );
}
module.percent = percent;
if(module.total) {
module.value = Math.round( (percent / 100) * module.total);
}
module.set.barWidth(percent);
module.set.barLabel();
if(percent === 100 && settings.autoSuccess) {
module.debug('Automatically triggering success at 100%');
module.set.success();
}
else if(settings.text.active) {
module.set.label(settings.text.active);
}
$.proxy(settings.onChange, element)(percent, module.value, module.total);
},
label: function(text) {
text = text || '';
if(text) {
text = module.get.text(text);
module.debug('Setting label to text', text);
$label.text(text);
}
},
barLabel: function(text) {
if(text !== undefined) {
$progress.text( module.get.text(text) );
}
else if(settings.label == 'ratio' && module.total) {
module.debug('Adding ratio to bar label');
$progress.text( module.get.text(settings.text.ratio) );
}
else if(settings.label == 'percent') {
module.debug('Adding percentage to bar label');
$progress.text( module.get.text(settings.text.percent) );
}
},
success : function(text) {
text = text || settings.text.success;
module.debug('Setting success state');
$module.addClass(className.success);
module.complete();
if(text) {
module.set.label(text);
}
},
warning : function(text) {
text = text || settings.text.warning;
module.debug('Setting warning state');
$module.addClass(className.warning);
module.complete();
if(text) {
module.set.label(text);
}
},
error : function(text) {
text = text || settings.text.error;
module.debug('Setting error state');
$module.addClass(className.error);
module.complete();
if(text) {
module.set.label(text);
}
module.percent = value;
$bar
.css('width', value + '%')
;
},
total: function(totalValue) {
module.total = totalValue;
@ -217,7 +319,7 @@ $.fn.progress = function(parameters) {
}
if(module.total) {
module.value = numericValue;
percentComplete = (numericValue / module.total);
percentComplete = (numericValue / module.total) * 100;
module.debug('Calculating percent complete from total', percentComplete);
module.set.percent( percentComplete );
}
@ -411,26 +513,32 @@ $.fn.progress.settings = {
name : 'Progress',
namespace : 'progress',
debug : true,
debug : false,
verbose : true,
performance : true,
random : {
min: 1,
max: 3
random : {
min : 1,
max : 3
},
label : 'percent',
autoSuccess : true,
precision : 1,
percent : false,
total : false,
value : false,
onChange : function(value){},
onChange : function(percent, value, total){},
error : {
method : 'The method you called is not defined.',
nonNumeric : 'Progress value is non numeric'
error : {
method : 'The method you called is not defined.',
nonNumeric : 'Progress value is non numeric'
},
regExp: {
variable: /\{\$*[A-z0-9]+\}/g
},
metadata: {
@ -439,12 +547,26 @@ $.fn.progress.settings = {
value : 'value'
},
selector : {
bar : '> .bar',
label : '> .label',
progress : '.bar > .progress'
},
text : {
active : false,
error : false,
success : false,
warning : false,
percent : '{percent}%',
ratio : '{value} of {total}'
},
className : {
error : 'error',
success : 'success',
warning : 'warning'
}
};

35
src/definitions/modules/progress.less
View File

@ -67,6 +67,7 @@
/* Percent Complete */
.ui.progress .bar > .progress {
white-space: nowrap;
position: absolute;
width: @progressWidth;
font-size: @progressSize;
@ -77,6 +78,7 @@
color: @progressColor;
text-shadow: @progressTextShadow;
margin-top: @progressOffset;
font-weight: @progressFontWeight;
text-align: @progressTextAlign;
}
@ -90,9 +92,11 @@
left: @labelLeft;
bottom: @labelBottom;
color: @labelColor;
font-weight: @labelFontWeight;
text-shadow: @labelTextShadow;
margin-top: @labelOffset;
text-align: @labelTextAlign;
transition: @labelTransition;
}
@ -102,40 +106,49 @@
/*--------------
Successful
Success
---------------*/
.ui.successful.progress .bar {
.ui.progress.success .bar {
background-color: @successColor !important;
}
.ui.successful.progress .bar,
.ui.successful.progress .bar::after {
.ui.progress.success .bar,
.ui.progress.success .bar::after {
animation: none !important;
}
.ui.progress.success > .label {
color: @successHeaderColor;
}
/*--------------
Warning
---------------*/
.ui.warning.progress .bar {
.ui.progress.warning .bar {
background-color: @warningColor !important;
}
.ui.warning.progress .bar,
.ui.warning.progress .bar::after {
.ui.progress.warning .bar,
.ui.progress.warning .bar::after {
animation: none !important;
}
.ui.progress.warning > .label {
color: @warningHeaderColor;
}
/*--------------
Failed
Error
---------------*/
.ui.failed.progress .bar {
.ui.progress.error .bar {
background-color: @errorColor !important;
}
.ui.failed.progress .bar,
.ui.failed.progress .bar::after {
.ui.progress.error .bar,
.ui.progress.error .bar::after {
animation: none !important;
}
.ui.progress.error > .label {
color: @errorHeaderColor;
}
/*--------------
Active

7
src/themes/packages/default/modules/progress.variables
View File

@ -24,8 +24,8 @@
@barBackground: #888888;
@barBorderRadius: @borderRadius;
@barTransition:
width 0.3s ease-in-out,
background-color 1s ease-out
width 0.5s @defaultEasing,
background-color 1s @defaultEasing
;
@ -39,6 +39,7 @@
@progressOffset: -0.5em;
@progressColor: @invertedLightTextColor;
@progressTextShadow: none;
@progressFontWeight: bold;
@progressTextAlign: left;
@labelWidth: 100%;
@ -52,7 +53,9 @@
@labelOffset: 0em;
@labelColor: @textColor;
@labelTextShadow: none;
@labelFontWeight: bold;
@labelTextAlign: center;
@labelTransition: color 1s @defaultEasing;
/*-------------------
States

Write Preview
Loading…
Cancel
Save