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.

408 lines
11 KiB

10 years ago
  1. /*
  2. * # Semantic - Rating
  3. * http://github.com/semantic-org/semantic-ui/
  4. *
  5. *
  6. * Copyright 2013 Contributors
  7. * Released under the MIT license
  8. * http://opensource.org/licenses/MIT
  9. *
  10. */
  11. ;(function ($, window, document, undefined) {
  12. $.fn.rating = function(parameters) {
  13. var
  14. $allModules = $(this),
  15. moduleSelector = $allModules.selector || '',
  16. time = new Date().getTime(),
  17. performance = [],
  18. query = arguments[0],
  19. methodInvoked = (typeof query == 'string'),
  20. queryArguments = [].slice.call(arguments, 1),
  21. returnedValue
  22. ;
  23. $allModules
  24. .each(function() {
  25. var
  26. settings = ( $.isPlainObject(parameters) )
  27. ? $.extend(true, {}, $.fn.rating.settings, parameters)
  28. : $.extend({}, $.fn.rating.settings),
  29. namespace = settings.namespace,
  30. className = settings.className,
  31. metadata = settings.metadata,
  32. selector = settings.selector,
  33. error = settings.error,
  34. eventNamespace = '.' + namespace,
  35. moduleNamespace = 'module-' + namespace,
  36. element = this,
  37. instance = $(this).data(moduleNamespace),
  38. $module = $(this),
  39. $icon = $module.find(selector.icon),
  40. module
  41. ;
  42. module = {
  43. initialize: function() {
  44. module.verbose('Initializing rating module', settings);
  45. if(settings.interactive) {
  46. module.enable();
  47. }
  48. else {
  49. module.disable();
  50. }
  51. if(settings.initialRating) {
  52. module.debug('Setting initial rating');
  53. module.setRating(settings.initialRating);
  54. }
  55. if( $module.data(metadata.rating) ) {
  56. module.debug('Rating found in metadata');
  57. module.setRating( $module.data(metadata.rating) );
  58. }
  59. module.instantiate();
  60. },
  61. instantiate: function() {
  62. module.verbose('Instantiating module', settings);
  63. instance = module;
  64. $module
  65. .data(moduleNamespace, module)
  66. ;
  67. },
  68. destroy: function() {
  69. module.verbose('Destroying previous instance', instance);
  70. $module
  71. .removeData(moduleNamespace)
  72. ;
  73. $icon
  74. .off(eventNamespace)
  75. ;
  76. },
  77. event: {
  78. mouseenter: function() {
  79. var
  80. $activeIcon = $(this)
  81. ;
  82. $activeIcon
  83. .nextAll()
  84. .removeClass(className.hover)
  85. ;
  86. $module
  87. .addClass(className.hover)
  88. ;
  89. $activeIcon
  90. .addClass(className.hover)
  91. .prevAll()
  92. .addClass(className.hover)
  93. ;
  94. },
  95. mouseleave: function() {
  96. $module
  97. .removeClass(className.hover)
  98. ;
  99. $icon
  100. .removeClass(className.hover)
  101. ;
  102. },
  103. click: function() {
  104. var
  105. $activeIcon = $(this),
  106. currentRating = module.getRating(),
  107. rating = $icon.index($activeIcon) + 1
  108. ;
  109. if(settings.clearable && currentRating == rating) {
  110. module.clearRating();
  111. }
  112. else {
  113. module.setRating( rating );
  114. }
  115. }
  116. },
  117. clearRating: function() {
  118. module.debug('Clearing current rating');
  119. module.setRating(0);
  120. },
  121. getRating: function() {
  122. var
  123. currentRating = $icon.filter('.' + className.active).size()
  124. ;
  125. module.verbose('Current rating retrieved', currentRating);
  126. return currentRating;
  127. },
  128. enable: function() {
  129. module.debug('Setting rating to interactive mode');
  130. $icon
  131. .on('mouseenter' + eventNamespace, module.event.mouseenter)
  132. .on('mouseleave' + eventNamespace, module.event.mouseleave)
  133. .on('click' + eventNamespace, module.event.click)
  134. ;
  135. $module
  136. .removeClass(className.disabled)
  137. ;
  138. },
  139. disable: function() {
  140. module.debug('Setting rating to read-only mode');
  141. $icon
  142. .off(eventNamespace)
  143. ;
  144. $module
  145. .addClass(className.disabled)
  146. ;
  147. },
  148. setRating: function(rating) {
  149. var
  150. ratingIndex = (rating - 1 >= 0)
  151. ? (rating - 1)
  152. : 0,
  153. $activeIcon = $icon.eq(ratingIndex)
  154. ;
  155. $module
  156. .removeClass(className.hover)
  157. ;
  158. $icon
  159. .removeClass(className.hover)
  160. .removeClass(className.active)
  161. ;
  162. if(rating > 0) {
  163. module.verbose('Setting current rating to', rating);
  164. $activeIcon
  165. .addClass(className.active)
  166. .prevAll()
  167. .addClass(className.active)
  168. ;
  169. }
  170. $.proxy(settings.onRate, element)(rating);
  171. },
  172. setting: function(name, value) {
  173. module.debug('Changing setting', name, value);
  174. if( $.isPlainObject(name) ) {
  175. $.extend(true, settings, name);
  176. }
  177. else if(value !== undefined) {
  178. settings[name] = value;
  179. }
  180. else {
  181. return settings[name];
  182. }
  183. },
  184. internal: function(name, value) {
  185. if( $.isPlainObject(name) ) {
  186. $.extend(true, module, name);
  187. }
  188. else if(value !== undefined) {
  189. module[name] = value;
  190. }
  191. else {
  192. return module[name];
  193. }
  194. },
  195. debug: function() {
  196. if(settings.debug) {
  197. if(settings.performance) {
  198. module.performance.log(arguments);
  199. }
  200. else {
  201. module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':');
  202. module.debug.apply(console, arguments);
  203. }
  204. }
  205. },
  206. verbose: function() {
  207. if(settings.verbose && settings.debug) {
  208. if(settings.performance) {
  209. module.performance.log(arguments);
  210. }
  211. else {
  212. module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':');
  213. module.verbose.apply(console, arguments);
  214. }
  215. }
  216. },
  217. error: function() {
  218. module.error = Function.prototype.bind.call(console.error, console, settings.name + ':');
  219. module.error.apply(console, arguments);
  220. },
  221. performance: {
  222. log: function(message) {
  223. var
  224. currentTime,
  225. executionTime,
  226. previousTime
  227. ;
  228. if(settings.performance) {
  229. currentTime = new Date().getTime();
  230. previousTime = time || currentTime;
  231. executionTime = currentTime - previousTime;
  232. time = currentTime;
  233. performance.push({
  234. 'Element' : element,
  235. 'Name' : message[0],
  236. 'Arguments' : [].slice.call(message, 1) || '',
  237. 'Execution Time' : executionTime
  238. });
  239. }
  240. clearTimeout(module.performance.timer);
  241. module.performance.timer = setTimeout(module.performance.display, 100);
  242. },
  243. display: function() {
  244. var
  245. title = settings.name + ':',
  246. totalTime = 0
  247. ;
  248. time = false;
  249. clearTimeout(module.performance.timer);
  250. $.each(performance, function(index, data) {
  251. totalTime += data['Execution Time'];
  252. });
  253. title += ' ' + totalTime + 'ms';
  254. if(moduleSelector) {
  255. title += ' \'' + moduleSelector + '\'';
  256. }
  257. if($allModules.size() > 1) {
  258. title += ' ' + '(' + $allModules.size() + ')';
  259. }
  260. if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) {
  261. console.groupCollapsed(title);
  262. if(console.table) {
  263. console.table(performance);
  264. }
  265. else {
  266. $.each(performance, function(index, data) {
  267. console.log(data['Name'] + ': ' + data['Execution Time']+'ms');
  268. });
  269. }
  270. console.groupEnd();
  271. }
  272. performance = [];
  273. }
  274. },
  275. invoke: function(query, passedArguments, context) {
  276. var
  277. object = instance,
  278. maxDepth,
  279. found,
  280. response
  281. ;
  282. passedArguments = passedArguments || queryArguments;
  283. context = element || context;
  284. if(typeof query == 'string' && object !== undefined) {
  285. query = query.split(/[\. ]/);
  286. maxDepth = query.length - 1;
  287. $.each(query, function(depth, value) {
  288. var camelCaseValue = (depth != maxDepth)
  289. ? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1)
  290. : query
  291. ;
  292. if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) {
  293. object = object[camelCaseValue];
  294. }
  295. else if( object[camelCaseValue] !== undefined ) {
  296. found = object[camelCaseValue];
  297. return false;
  298. }
  299. else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) {
  300. object = object[value];
  301. }
  302. else if( object[value] !== undefined ) {
  303. found = object[value];
  304. return false;
  305. }
  306. else {
  307. return false;
  308. }
  309. });
  310. }
  311. if ( $.isFunction( found ) ) {
  312. response = found.apply(context, passedArguments);
  313. }
  314. else if(found !== undefined) {
  315. response = found;
  316. }
  317. if($.isArray(returnedValue)) {
  318. returnedValue.push(response);
  319. }
  320. else if(returnedValue !== undefined) {
  321. returnedValue = [returnedValue, response];
  322. }
  323. else if(response !== undefined) {
  324. returnedValue = response;
  325. }
  326. return found;
  327. }
  328. };
  329. if(methodInvoked) {
  330. if(instance === undefined) {
  331. module.initialize();
  332. }
  333. module.invoke(query);
  334. }
  335. else {
  336. if(instance !== undefined) {
  337. module.destroy();
  338. }
  339. module.initialize();
  340. }
  341. })
  342. ;
  343. return (returnedValue !== undefined)
  344. ? returnedValue
  345. : this
  346. ;
  347. };
  348. $.fn.rating.settings = {
  349. name : 'Rating',
  350. namespace : 'rating',
  351. debug : true,
  352. verbose : true,
  353. performance : true,
  354. initialRating : 0,
  355. interactive : true,
  356. clearable : false,
  357. onRate : function(rating){},
  358. error : {
  359. method : 'The method you called is not defined'
  360. },
  361. metadata: {
  362. rating: 'rating'
  363. },
  364. className : {
  365. active : 'active',
  366. disabled : 'disabled',
  367. hover : 'hover',
  368. loading : 'loading'
  369. },
  370. selector : {
  371. icon : '.icon'
  372. }
  373. };
  374. })( jQuery, window , document );