// This is a design pattern for creating ui modules in Semantic
//
// Semantic is unique in that all arbitrary data is a setting. Semantic modules also are self documenting, with module.debug calls serving to explain state, and log performance data.
// [Read more about coding conventions](http://semantic-ui.com/guide/javascriptguide.html)
/*
*#SemanticModule1.0
*http://github.com/quirkyinc/semantic
*
*
*Copyright2013Contributors
*ReleasedundertheMITlicense
*http://opensource.org/licenses/MIT
*
*Released:April172013
*/
;(function($,window,document,undefined){
$.fn.example=function(parameters){
// ## Group
// Some properties remain constant across all instances of a module.
var
// Store a reference to the module group, this can be useful to refer to other modules inside each module
$allModules=$(this),
// Extend settings to merge run-time settings with defaults
// Alias settings object for convenience and performance
namespace=settings.namespace,
error=settings.error,
className=settings.className,
// You may also find it useful to alias your own settings
text=settings.text,
// Define namespaces for storing module instance and binding events
eventNamespace='.'+namespace,
moduleNamespace='module-'+namespace,
// Preserve selector from outside each scope and mark current time for performance tracking
moduleSelector=$allModules.selector||'',
time=newDate().getTime(),
performance=[],
// Preserve original arguments to determine if a method is being invoked
query=arguments[0],
methodInvoked=(typeofquery=='string'),
queryArguments=[].slice.call(arguments,1),
invokedResponse
;
// ## Singular
// Iterate over all elements to initialize module
$allModules
.each(function(){
var
// Cache selectors using selector settings object for access inside instance of module
$module=$(this),
$text=$module.find(settings.selector.text),
// Define private variables which can be used to maintain internal state, these cannot be changed from outside the module closure so use conservatively. Default values are set using `a || b` syntax
foo=false,
// Instance is stored and retreived in namespaced DOM metadata
instance=$module.data(moduleNamespace),
element=this,
module
;
// ## Module Behavior
module={
// ### Required
// #### Initialize
// Initialize attaches events and preserves each instance in html metadata
// The instance is just a copy of the module definition, we store it in metadata so we can use it outside of scope, but also define it for immediate use
instance=module;
$module
.data(moduleNamespace,instance)
;
},
// #### Destroy
// Removes all events and the instance copy from metadata
// Sometimes it makes sense to call an event handler by its type if it is dependent on the event to behave properly
event:{
click:function(event){
module.verbose('Preventing default action');
if(!$module.hasClass(className.disabled)){
module.behavior();
}
event.preventDefault();
}
},
// #### By Function
// Other times events make more sense for methods to be called by their function if it is ambivalent to how it is invoked
behavior:function(){
module.debug('Changing the text to a new value',text);
if(!module.has.text()){
module.set.text(text);
}
},
// #### Vocabulary
// Custom methods should be defined with consistent vocabulary some useful terms: "has", "set", "get", "change", "add", "remove"
//
// This makes it easier for new developers to get to know your module without learning your schema
has:{
text:function(state){
module.verbose('Checking whether text state exists',state);
if(text[state]===undefined){
module.error(error.noText);
returnfalse;
}
returntrue;
}
},
set:{
text:function(state){
module.verbose('Setting text to new state',state);
if(module.has.text(state)){
$text
.text(text[state])
;
settings.onChange();
}
}
},
// ### Standard
// #### Setting
// Module settings can be read or set using this method
//
// Settings can either be specified by modifying the module defaults, by initializing the module with a settings object, or by changing a setting by invoking this method
// `$(.foo').example('setting', 'moduleName');`
setting:function(name,value){
if(value!==undefined){
if($.isPlainObject(name)){
$.extend(true,settings,name);
}
else{
settings[name]=value;
}
}
else{
returnsettings[name];
}
},
// #### Internal
// Module internals can be set or retrieved as well
// `$(.foo').example('internal', 'behavior', function() { // do something });`
internal:function(name,value){
if(value!==undefined){
if($.isPlainObject(name)){
$.extend(true,module,name);
}
else{
module[name]=value;
}
}
else{
returnmodule[name];
}
},
// #### Debug
// Debug pushes arguments to the console formatted as a debug statement
// Error allows for the module to report named error messages, it may be useful to modify this to push error messages to the user. Error messages are defined in the modules settings object.