You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

314 lines
9.1 KiB

  1. /* ******************************
  2. Semantic Module: Checkbox
  3. Author: Jack Lukic
  4. Notes: First Commit March 25, 2013
  5. Simple plug-in which maintains the state for ui checkbox
  6. This can be done without javascript, only in instances
  7. where each checkbox is assigned a unique ID. This provides a separate
  8. programmatic option when that is not possible.
  9. ****************************** */
  10. ;(function ( $, window, document, undefined ) {
  11. $.fn.checkbox = function(parameters) {
  12. var
  13. $allModules = $(this),
  14. settings = $.extend(true, {}, $.fn.checkbox.settings, parameters),
  15. eventNamespace = '.' + settings.namespace,
  16. moduleNamespace = 'module-' + settings.namespace,
  17. selector = $allModules.selector || '',
  18. time = new Date().getTime(),
  19. performance = [],
  20. query = arguments[0],
  21. methodInvoked = (typeof query == 'string'),
  22. queryArguments = [].slice.call(arguments, 1),
  23. invokedResponse
  24. ;
  25. $allModules
  26. .each(function() {
  27. var
  28. $module = $(this),
  29. $input = $(this).find(settings.selector.input),
  30. selector = $module.selector || '',
  31. element = this,
  32. instance = $module.data('module-' + settings.namespace),
  33. className = settings.className,
  34. namespace = settings.namespace,
  35. errors = settings.errors,
  36. module
  37. ;
  38. module = {
  39. initialize: function() {
  40. if(settings.context && selector !== '') {
  41. module.verbose('Initializing checkbox with delegated events', $module);
  42. $(element, settings.context)
  43. .on(selector, 'click' + eventNamespace, module.toggle)
  44. .data(moduleNamespace, module)
  45. ;
  46. }
  47. else {
  48. module.verbose('Initializing checkbox with bound events', $module);
  49. $module
  50. .on('click' + eventNamespace, module.toggle)
  51. .data(moduleNamespace, module)
  52. ;
  53. }
  54. },
  55. destroy: function() {
  56. module.verbose('Destroying previous module for', $module);
  57. $module
  58. .off(namespace)
  59. ;
  60. },
  61. is: {
  62. radio: function() {
  63. return $module
  64. .hasClass(className.radio)
  65. ;
  66. }
  67. },
  68. can: {
  69. disable: function() {
  70. return (typeof settings.required === 'boolean')
  71. ? settings.required
  72. : !module.is.radio()
  73. ;
  74. }
  75. },
  76. enable: function() {
  77. module.debug('Enabling checkbox');
  78. $module
  79. .addClass(className.active)
  80. ;
  81. $input
  82. .prop('checked', true)
  83. ;
  84. $.proxy(settings.onChange, $input.get())();
  85. $.proxy(settings.onEnable, $input.get())();
  86. },
  87. disable: function() {
  88. module.debug('Disabling checkbox');
  89. $module
  90. .removeClass(className.active)
  91. ;
  92. $input
  93. .prop('checked', false)
  94. ;
  95. $.proxy(settings.onChange, $input.get())();
  96. $.proxy(settings.onDisable, $input.get())();
  97. },
  98. toggle: function() {
  99. module.verbose('Toggling checkbox state');
  100. if($input.prop('checked') === undefined || !$input.prop('checked')) {
  101. module.enable();
  102. }
  103. else if( module.can.disable() ) {
  104. module.disable();
  105. }
  106. },
  107. setting: function(name, value) {
  108. if(value !== undefined) {
  109. if( $.isPlainObject(name) ) {
  110. module.verbose('Modifying settings object', name, value);
  111. $.extend(true, settings, name);
  112. }
  113. else {
  114. module.verbose('Modifying setting', name, value);
  115. settings[name] = value;
  116. }
  117. }
  118. else {
  119. return settings[name];
  120. }
  121. },
  122. internal: function(name, value) {
  123. if(value !== undefined) {
  124. if( $.isPlainObject(name) ) {
  125. module.verbose('Modifying internal property', name, value);
  126. $.extend(true, module, name);
  127. }
  128. else {
  129. module.verbose('Changing internal method to', value);
  130. module[name] = value;
  131. }
  132. }
  133. else {
  134. return module[name];
  135. }
  136. },
  137. debug: function() {
  138. if(settings.debug) {
  139. if(settings.performance) {
  140. module.performance.log(arguments);
  141. }
  142. else {
  143. module.debug = Function.prototype.bind.call(console.info, console, settings.moduleName + ':');
  144. }
  145. }
  146. },
  147. verbose: function() {
  148. if(settings.verbose && settings.debug) {
  149. if(settings.performance) {
  150. module.performance.log(arguments);
  151. }
  152. else {
  153. module.verbose = Function.prototype.bind.call(console.info, console, settings.moduleName + ':');
  154. }
  155. }
  156. },
  157. error: function() {
  158. module.error = Function.prototype.bind.call(console.log, console, settings.moduleName + ':');
  159. },
  160. performance: {
  161. log: function(message) {
  162. var
  163. currentTime,
  164. executionTime,
  165. previousTime
  166. ;
  167. if(settings.performance) {
  168. currentTime = new Date().getTime();
  169. previousTime = time || currentTime,
  170. executionTime = currentTime - previousTime;
  171. time = currentTime;
  172. performance.push({
  173. 'Element' : element,
  174. 'Name' : message[0],
  175. 'Arguments' : message[1] || 'None',
  176. 'Execution Time' : executionTime
  177. });
  178. clearTimeout(module.performance.timer);
  179. module.performance.timer = setTimeout(module.performance.display, 100);
  180. }
  181. },
  182. display: function() {
  183. var
  184. title = settings.moduleName,
  185. caption = settings.moduleName + ': ' + selector + '(' + $allModules.size() + ' elements)',
  186. totalExecutionTime = 0
  187. ;
  188. if(selector) {
  189. title += ' Performance (' + selector + ')';
  190. }
  191. if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) {
  192. console.groupCollapsed(title);
  193. if(console.table) {
  194. $.each(performance, function(index, data) {
  195. totalExecutionTime += data['Execution Time'];
  196. });
  197. console.table(performance);
  198. }
  199. else {
  200. $.each(performance, function(index, data) {
  201. totalExecutionTime += data['Execution Time'];
  202. });
  203. }
  204. console.log('Total Execution Time:', totalExecutionTime +'ms');
  205. console.groupEnd();
  206. performance = [];
  207. time = false;
  208. }
  209. }
  210. },
  211. invoke: function(query, passedArguments, context) {
  212. var
  213. maxDepth,
  214. found
  215. ;
  216. passedArguments = passedArguments || queryArguments;
  217. context = element || context;
  218. if(typeof query == 'string' && instance !== undefined) {
  219. query = query.split('.');
  220. maxDepth = query.length - 1;
  221. $.each(query, function(depth, value) {
  222. if( $.isPlainObject( instance[value] ) && (depth != maxDepth) ) {
  223. instance = instance[value];
  224. return true;
  225. }
  226. else if( instance[value] !== undefined ) {
  227. found = instance[value];
  228. return true;
  229. }
  230. module.error(errors.method);
  231. return false;
  232. });
  233. }
  234. if ( $.isFunction( found ) ) {
  235. module.verbose('Executing invoked function', found);
  236. return found.apply(context, passedArguments);
  237. }
  238. return found || false;
  239. }
  240. };
  241. if(methodInvoked) {
  242. if(instance === undefined) {
  243. module.initialize();
  244. }
  245. invokedResponse = module.invoke(query);
  246. }
  247. else {
  248. if(instance !== undefined) {
  249. module.destroy();
  250. }
  251. module.initialize();
  252. }
  253. })
  254. ;
  255. return (invokedResponse)
  256. ? invokedResponse
  257. : this
  258. ;
  259. };
  260. $.fn.checkbox.settings = {
  261. moduleName : 'Checkbox Module',
  262. namespace : 'checkbox',
  263. verbose : true,
  264. debug : true,
  265. performance : true,
  266. // delegated event context
  267. context : false,
  268. required : 'auto',
  269. onChange : function(){},
  270. onEnable : function(){},
  271. onDisable : function(){},
  272. errors : {
  273. method : 'The method you called is not defined.'
  274. },
  275. selector : {
  276. input : 'input'
  277. },
  278. className : {
  279. active : 'active',
  280. radio : 'radio'
  281. }
  282. };
  283. })( jQuery, window , document );