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

fixing performance logging 

Former-commit-id: d176221483
Former-commit-id: 94c675e4c4
pull/258/head
Jack Lukic 11 years ago
parent
2bef4005c6
commit
f0cce6c9cd
5 changed files with 91 additions and 231 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 40
      node/src/documents/module.html
  2. 130
      node/src/documents/modules/checkbox.html
  3. 10
      node/src/files/components/semantic/src/collections/message.css
  4. 71
      node/src/files/components/semantic/src/modules/checkbox.js
  5. 71
      src/modules/checkbox.js

40
node/src/documents/module.html
View File

@ -1,6 +1,6 @@
--- ---
layout : 'default' layout : 'default'
css : 'index'
css : 'module'
title : 'UI Modules' title : 'UI Modules'
type : 'Semantic' type : 'Semantic'
@ -74,29 +74,37 @@ type : 'Semantic'
<h3>Changing Settings</h3> <h3>Changing Settings</h3>
<ol> <ol>
<li>A settings object can be passed in when initializing the plugin <li>A settings object can be passed in when initializing the plugin
<br> <div class="code">$('.foo')
.module({
moduleName: 'Godzilla',
verbose: true
})
;</div>
<br>
<div class="code">
$('.foo')
.module({
moduleName: 'Godzilla',
verbose: true
})
;
</div>
</li> </li>
<li>Default settings for the module can be overridden by modifying $.fn.module.settings. <li>Default settings for the module can be overridden by modifying $.fn.module.settings.
<br><div class="code">$.fn.module.settings.moduleName = 'Godzilla';</div> <br><div class="code">$.fn.module.settings.moduleName = 'Godzilla';</div>
</li> </li>
<li>Settings can be changed after a module is initialized by calling the 'settings' method on the module with either a settings object or a name, value pair. <li>Settings can be changed after a module is initialized by calling the 'settings' method on the module with either a settings object or a name, value pair.
<br><div class="code">$('.foo')
// lets initialize that!
.module()
// oh wait forgot something
.module('setting', 'moduleName', 'Godzilla')
;</div>
<br>
<div class="code">
$('.foo')
// lets initialize that!
.module()
// oh wait forgot something
.module('setting', 'moduleName', 'Godzilla')
;
</div>
</li> </li>
</ol> </ol>
<h3>Reading Settings</h3> <h3>Reading Settings</h3>
<p>Settings can also be read programmatically: <div class="code">$('.foo').module('setting', 'moduleName');
// outputs godzilla</div>
<p>Settings can also be read programmatically:
<div class="code">
$('.foo').module('setting', 'moduleName');
// outputs godzilla
</div>
</div> </div>
</body> </body>

130
node/src/documents/modules/checkbox.html
View File

@ -35,7 +35,7 @@ type : 'UI Module'
</div> </div>
<div class="example"> <div class="example">
<h4>Check Box</h4>
<h4>Static Check Box</h4>
<p>A checkbox can function without javascript</p> <p>A checkbox can function without javascript</p>
<div class="ui checkbox"> <div class="ui checkbox">
<input type="checkbox" id="unique-id" /> <input type="checkbox" id="unique-id" />
@ -47,24 +47,18 @@ type : 'UI Module'
<h4>Form Checkbox</h4> <h4>Form Checkbox</h4>
<p>A checkbox can be found inside a form</p> <p>A checkbox can be found inside a form</p>
<div class="ui form segment"> <div class="ui form segment">
<div class="two fields">
<div class="field">
<label>First Name</label>
<input placeholder="First Name" type="text">
</div>
<div class="field">
<label>Last Name</label>
<input placeholder="Last Name" type="text">
</div>
<div class="field">
<label>Name</label>
<input placeholder="Name" type="text">
</div> </div>
<div class="inline field"> <div class="inline field">
<div class="ui checkbox"> <div class="ui checkbox">
<input type="checkbox" /> <input type="checkbox" />
<div class="box"></div> <div class="box"></div>
</div> </div>
<label>Join Us</label>
<label>Accept all our evil terms and conditions</label>
</div> </div>
<div class="ui button">Submit</div>
<div class="ui teal button">Submit</div>
</div> </div>
</div> </div>
@ -177,110 +171,6 @@ type : 'UI Module'
<div class="box"></div> <div class="box"></div>
</div> </div>
</div> </div>
<!--
<p>You can enable, disable, or toggle all checkboxes initialized at the same time.</p>
<div class="ignore evaluated code">
var
$someCheckbox = $('.example .grid .checkbox:nth-child(3n)')
;
$someCheckbox
.checkbox()
;
$('.toggle-all')
.on('click', function() {
$someCheckbox
.checkbox('all.toggle')
;
})
;
</div>
<div class="ui three fluid buttons">
<div class="toggle-all ui button">Toggle All</div>
</div>
<div class="ui grid">
<div class="column">
<div class="ui checkbox">
<input type="checkbox" />
<div class="box"></div>
</div>
</div>
<div class="column">
<div class="ui checkbox">
<input type="checkbox" />
<div class="box"></div>
</div>
</div>
<div class="column">
<div class="ui checkbox">
<input type="checkbox" />
<div class="box"></div>
</div>
</div>
<div class="column">
<div class="ui checkbox">
<input type="checkbox" />
<div class="box"></div>
</div>
</div>
<div class="column">
<div class="ui checkbox">
<input type="checkbox" />
<div class="box"></div>
</div>
</div>
<div class="column">
<div class="ui checkbox">
<input type="checkbox" />
<div class="box"></div>
</div>
</div>
<div class="column">
<div class="ui checkbox">
<input type="checkbox" />
<div class="box"></div>
</div>
</div>
<div class="column">
<div class="ui checkbox">
<input type="checkbox" />
<div class="box"></div>
</div>
</div>
<div class="column">
<div class="ui checkbox">
<input type="checkbox" />
<div class="box"></div>
</div>
</div>
<div class="column">
<div class="ui checkbox">
<input type="checkbox" />
<div class="box"></div>
</div>
</div>
<div class="column">
<div class="ui checkbox">
<input type="checkbox" />
<div class="box"></div>
</div>
</div>
<div class="column">
<div class="ui checkbox">
<input type="checkbox" />
<div class="box"></div>
</div>
</div>
</div>
!-->
<p>You can disable a checkbox programmatically using the disable method</p>
<div class="code">
$('.ui.checkbox')
.checkbox('disable')
;
</div>
<h2>Getting Started</h2> <h2>Getting Started</h2>
<h3>Initializing a check box</h3> <h3>Initializing a check box</h3>
@ -360,9 +250,11 @@ type : 'UI Module'
<tr> <tr>
<td>errors</td> <td>errors</td>
<td colspan="2"> <td colspan="2">
<div class="code">errors : {
method : 'The method you called is not defined.'
}</div>
<div class="code">
errors : {
method : 'The method you called is not defined.'
}
</div>
</td> </td>
</tr> </tr>
</tbody> </tbody>

10
node/src/files/components/semantic/src/collections/message.css
View File

@ -30,12 +30,7 @@
-moz-border-radius: 4px 4px 4px 4px; -moz-border-radius: 4px 4px 4px 4px;
border-radius: 4px 4px 4px 4px; border-radius: 4px 4px 4px 4px;
} }
.ui.message :first-child {
margin-top: 0em;
}
.ui.message :last-child {
margin-bottom: 0em;
}
/*-------------- /*--------------
Content Content
@ -52,6 +47,9 @@
opacity: 0.85; opacity: 0.85;
margin: 1em 0em; margin: 1em 0em;
} }
.ui.message p:first-child {
margin-top: 0em;
}
/* block with child list */ /* block with child list */
.ui.message ul.list { .ui.message ul.list {

71
node/src/files/components/semantic/src/modules/checkbox.js
View File

@ -73,15 +73,6 @@ $.fn.checkbox = function(parameters) {
; ;
}, },
toggle: function() {
if( $input.prop('checked') === undefined || !$input.prop('checked') ) {
module.enable();
}
else {
module.disable();
}
},
enable: function() { enable: function() {
module.debug('Enabling checkbox'); module.debug('Enabling checkbox');
$module $module
@ -106,27 +97,15 @@ $.fn.checkbox = function(parameters) {
$.proxy(settings.onDisable, $input.get())(); $.proxy(settings.onDisable, $input.get())();
}, },
all: {
enable: function() {
module.debug('Enabling all checkbox');
$allModules
.checkbox('enable')
;
},
disable: function() {
module.debug('Disabling all checkbox');
$allModules
.checkbox('toggle')
;
},
toggle: function() {
module.debug('Toggling all checkbox');
$allModules
.checkbox('toggle')
;
toggle: function() {
if( $input.prop('checked') === undefined || !$input.prop('checked') ) {
module.enable();
}
else {
module.disable();
} }
}, },
setting: function(name, value) { setting: function(name, value) {
if(value !== undefined) { if(value !== undefined) {
if( $.isPlainObject(name) ) { if( $.isPlainObject(name) ) {
@ -183,6 +162,7 @@ $.fn.checkbox = function(parameters) {
executionTime = currentTime - previousTime; executionTime = currentTime - previousTime;
time = currentTime; time = currentTime;
performance.push({ performance.push({
'Element' : element,
'Name' : message, 'Name' : message,
'Execution Time' : executionTime 'Execution Time' : executionTime
}); });
@ -192,12 +172,15 @@ $.fn.checkbox = function(parameters) {
}, },
display: function() { display: function() {
var var
title = settings.moduleName + ' Performance (' + selector + ')',
title = settings.moduleName,
caption = settings.moduleName + ': ' + selector + '(' + $allModules.size() + ' elements)', caption = settings.moduleName + ': ' + selector + '(' + $allModules.size() + ' elements)',
totalExecutionTime = 0 totalExecutionTime = 0
; ;
if(selector) {
title += 'Performance (' + selector + ')';
}
if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) { if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) {
console.groupCollapsed(title );
console.groupCollapsed(title);
if(console.table) { if(console.table) {
$.each(performance, function(index, data) { $.each(performance, function(index, data) {
totalExecutionTime += data['Execution Time']; totalExecutionTime += data['Execution Time'];
@ -209,7 +192,7 @@ $.fn.checkbox = function(parameters) {
totalExecutionTime += data['Execution Time']; totalExecutionTime += data['Execution Time'];
}); });
} }
console.log('Total Execution Time:', totalExecutionTime);
console.log('Total Execution Time:', totalExecutionTime +'ms');
console.groupEnd(); console.groupEnd();
performance = []; performance = [];
time = false; time = false;
@ -235,7 +218,7 @@ $.fn.checkbox = function(parameters) {
found = instance[value]; found = instance[value];
return true; return true;
} }
module.error(error.method);
module.error(errors.method);
return false; return false;
}); });
} }
@ -247,7 +230,6 @@ $.fn.checkbox = function(parameters) {
} }
}; };
// check for invoking internal method
if(methodInvoked) { if(methodInvoked) {
if(instance === undefined) { if(instance === undefined) {
module.initialize(); module.initialize();
@ -262,7 +244,6 @@ $.fn.checkbox = function(parameters) {
} }
}) })
; ;
// chain or return queried method
return (invokedResponse) return (invokedResponse)
? invokedResponse ? invokedResponse
: this : this
@ -271,20 +252,20 @@ $.fn.checkbox = function(parameters) {
$.fn.checkbox.settings = { $.fn.checkbox.settings = {
// module info
moduleName : 'Checkbox Module',
verbose : false,
debug : true,
namespace : 'checkbox',
moduleName : 'Checkbox Module',
namespace : 'checkbox',
// delegated event context
context : false,
verbose : true,
debug : true,
performance : true,
onChange : function(){},
onEnable : function(){},
onDisable : function(){},
// delegated event context
context : false,
onChange : function(){},
onEnable : function(){},
onDisable : function(){},
// errors
errors : { errors : {
method : 'The method you called is not defined.' method : 'The method you called is not defined.'
}, },

71
src/modules/checkbox.js
View File

@ -73,15 +73,6 @@ $.fn.checkbox = function(parameters) {
; ;
}, },
toggle: function() {
if( $input.prop('checked') === undefined || !$input.prop('checked') ) {
module.enable();
}
else {
module.disable();
}
},
enable: function() { enable: function() {
module.debug('Enabling checkbox'); module.debug('Enabling checkbox');
$module $module
@ -106,27 +97,15 @@ $.fn.checkbox = function(parameters) {
$.proxy(settings.onDisable, $input.get())(); $.proxy(settings.onDisable, $input.get())();
}, },
all: {
enable: function() {
module.debug('Enabling all checkbox');
$allModules
.checkbox('enable')
;
},
disable: function() {
module.debug('Disabling all checkbox');
$allModules
.checkbox('toggle')
;
},
toggle: function() {
module.debug('Toggling all checkbox');
$allModules
.checkbox('toggle')
;
toggle: function() {
if( $input.prop('checked') === undefined || !$input.prop('checked') ) {
module.enable();
}
else {
module.disable();
} }
}, },
setting: function(name, value) { setting: function(name, value) {
if(value !== undefined) { if(value !== undefined) {
if( $.isPlainObject(name) ) { if( $.isPlainObject(name) ) {
@ -183,6 +162,7 @@ $.fn.checkbox = function(parameters) {
executionTime = currentTime - previousTime; executionTime = currentTime - previousTime;
time = currentTime; time = currentTime;
performance.push({ performance.push({
'Element' : element,
'Name' : message, 'Name' : message,
'Execution Time' : executionTime 'Execution Time' : executionTime
}); });
@ -192,12 +172,15 @@ $.fn.checkbox = function(parameters) {
}, },
display: function() { display: function() {
var var
title = settings.moduleName + ' Performance (' + selector + ')',
title = settings.moduleName,
caption = settings.moduleName + ': ' + selector + '(' + $allModules.size() + ' elements)', caption = settings.moduleName + ': ' + selector + '(' + $allModules.size() + ' elements)',
totalExecutionTime = 0 totalExecutionTime = 0
; ;
if(selector) {
title += 'Performance (' + selector + ')';
}
if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) { if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) {
console.groupCollapsed(title );
console.groupCollapsed(title);
if(console.table) { if(console.table) {
$.each(performance, function(index, data) { $.each(performance, function(index, data) {
totalExecutionTime += data['Execution Time']; totalExecutionTime += data['Execution Time'];
@ -209,7 +192,7 @@ $.fn.checkbox = function(parameters) {
totalExecutionTime += data['Execution Time']; totalExecutionTime += data['Execution Time'];
}); });
} }
console.log('Total Execution Time:', totalExecutionTime);
console.log('Total Execution Time:', totalExecutionTime +'ms');
console.groupEnd(); console.groupEnd();
performance = []; performance = [];
time = false; time = false;
@ -235,7 +218,7 @@ $.fn.checkbox = function(parameters) {
found = instance[value]; found = instance[value];
return true; return true;
} }
module.error(error.method);
module.error(errors.method);
return false; return false;
}); });
} }
@ -247,7 +230,6 @@ $.fn.checkbox = function(parameters) {
} }
}; };
// check for invoking internal method
if(methodInvoked) { if(methodInvoked) {
if(instance === undefined) { if(instance === undefined) {
module.initialize(); module.initialize();
@ -262,7 +244,6 @@ $.fn.checkbox = function(parameters) {
} }
}) })
; ;
// chain or return queried method
return (invokedResponse) return (invokedResponse)
? invokedResponse ? invokedResponse
: this : this
@ -271,20 +252,20 @@ $.fn.checkbox = function(parameters) {
$.fn.checkbox.settings = { $.fn.checkbox.settings = {
// module info
moduleName : 'Checkbox Module',
verbose : false,
debug : true,
namespace : 'checkbox',
moduleName : 'Checkbox Module',
namespace : 'checkbox',
// delegated event context
context : false,
verbose : true,
debug : true,
performance : true,
onChange : function(){},
onEnable : function(){},
onDisable : function(){},
// delegated event context
context : false,
onChange : function(){},
onEnable : function(){},
onDisable : function(){},
// errors
errors : { errors : {
method : 'The method you called is not defined.' method : 'The method you called is not defined.'
}, },

Write Preview
Loading…
Cancel
Save