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.

410 lines
11 KiB

  1. /*
  2. * # Semantic - Rating
  3. * http://github.com/jlukic/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. invokedResponse
  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. .addClass(className.active)
  137. ;
  138. },
  139. disable: function() {
  140. module.debug('Setting rating to read-only mode');
  141. $icon
  142. .off(eventNamespace)
  143. ;
  144. $module
  145. .removeClass(className.active)
  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. if(value !== undefined) {
  174. if( $.isPlainObject(name) ) {
  175. $.extend(true, settings, name);
  176. }
  177. else {
  178. settings[name] = value;
  179. }
  180. }
  181. else {
  182. return settings[name];
  183. }
  184. },
  185. internal: function(name, value) {
  186. if(value !== undefined) {
  187. if( $.isPlainObject(name) ) {
  188. $.extend(true, module, name);
  189. }
  190. else {
  191. module[name] = value;
  192. }
  193. }
  194. else {
  195. return module[name];
  196. }
  197. },
  198. debug: function() {
  199. if(settings.debug) {
  200. if(settings.performance) {
  201. module.performance.log(arguments);
  202. }
  203. else {
  204. module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':');
  205. module.debug.apply(console, arguments);
  206. }
  207. }
  208. },
  209. verbose: function() {
  210. if(settings.verbose && settings.debug) {
  211. if(settings.performance) {
  212. module.performance.log(arguments);
  213. }
  214. else {
  215. module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':');
  216. module.verbose.apply(console, arguments);
  217. }
  218. }
  219. },
  220. error: function() {
  221. module.error = Function.prototype.bind.call(console.error, console, settings.name + ':');
  222. module.error.apply(console, arguments);
  223. },
  224. performance: {
  225. log: function(message) {
  226. var
  227. currentTime,
  228. executionTime,
  229. previousTime
  230. ;
  231. if(settings.performance) {
  232. currentTime = new Date().getTime();
  233. previousTime = time || currentTime;
  234. executionTime = currentTime - previousTime;
  235. time = currentTime;
  236. performance.push({
  237. 'Element' : element,
  238. 'Name' : message[0],
  239. 'Arguments' : [].slice.call(message, 1) || '',
  240. 'Execution Time' : executionTime
  241. });
  242. }
  243. clearTimeout(module.performance.timer);
  244. module.performance.timer = setTimeout(module.performance.display, 100);
  245. },
  246. display: function() {
  247. var
  248. title = settings.name + ':',
  249. totalTime = 0
  250. ;
  251. time = false;
  252. clearTimeout(module.performance.timer);
  253. $.each(performance, function(index, data) {
  254. totalTime += data['Execution Time'];
  255. });
  256. title += ' ' + totalTime + 'ms';
  257. if(moduleSelector) {
  258. title += ' \'' + moduleSelector + '\'';
  259. }
  260. if($allModules.size() > 1) {
  261. title += ' ' + '(' + $allModules.size() + ')';
  262. }
  263. if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) {
  264. console.groupCollapsed(title);
  265. if(console.table) {
  266. console.table(performance);
  267. }
  268. else {
  269. $.each(performance, function(index, data) {
  270. console.log(data['Name'] + ': ' + data['Execution Time']+'ms');
  271. });
  272. }
  273. console.groupEnd();
  274. }
  275. performance = [];
  276. }
  277. },
  278. invoke: function(query, passedArguments, context) {
  279. var
  280. maxDepth,
  281. found,
  282. response
  283. ;
  284. passedArguments = passedArguments || queryArguments;
  285. context = element || context;
  286. if(typeof query == 'string' && instance !== undefined) {
  287. query = query.split(/[\. ]/);
  288. maxDepth = query.length - 1;
  289. $.each(query, function(depth, value) {
  290. var camelCaseValue = (depth != maxDepth)
  291. ? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1)
  292. : query
  293. ;
  294. if( $.isPlainObject( instance[value] ) && (depth != maxDepth) ) {
  295. instance = instance[value];
  296. }
  297. else if( $.isPlainObject( instance[camelCaseValue] ) && (depth != maxDepth) ) {
  298. instance = instance[camelCaseValue];
  299. }
  300. else if( instance[value] !== undefined ) {
  301. found = instance[value];
  302. return false;
  303. }
  304. else if( instance[camelCaseValue] !== undefined ) {
  305. found = instance[camelCaseValue];
  306. return false;
  307. }
  308. else {
  309. module.error(error.method);
  310. return false;
  311. }
  312. });
  313. }
  314. if ( $.isFunction( found ) ) {
  315. response = found.apply(context, passedArguments);
  316. }
  317. else if(found !== undefined) {
  318. response = found;
  319. }
  320. if($.isArray(invokedResponse)) {
  321. invokedResponse.push(response);
  322. }
  323. else if(typeof invokedResponse == 'string') {
  324. invokedResponse = [invokedResponse, response];
  325. }
  326. else if(response !== undefined) {
  327. invokedResponse = response;
  328. }
  329. return found;
  330. }
  331. };
  332. if(methodInvoked) {
  333. if(instance === undefined) {
  334. module.initialize();
  335. }
  336. module.invoke(query);
  337. }
  338. else {
  339. if(instance !== undefined) {
  340. module.destroy();
  341. }
  342. module.initialize();
  343. }
  344. })
  345. ;
  346. return (invokedResponse !== undefined)
  347. ? invokedResponse
  348. : this
  349. ;
  350. };
  351. $.fn.rating.settings = {
  352. name : 'Rating',
  353. namespace : 'rating',
  354. verbose : true,
  355. debug : true,
  356. performance : true,
  357. initialRating : 0,
  358. interactive : true,
  359. clearable : false,
  360. onRate : function(rating){},
  361. error : {
  362. method : 'The method you called is not defined'
  363. },
  364. metadata: {
  365. rating: 'rating'
  366. },
  367. className : {
  368. active : 'active',
  369. hover : 'hover',
  370. loading : 'loading'
  371. },
  372. selector : {
  373. icon : '.icon'
  374. }
  375. };
  376. })( jQuery, window , document );