GitHub Custom Emojis

Add custom emojis from json source

当前为 2016-03-12 提交的版本,查看 最新版本

  1. // ==UserScript==
  2. // @name GitHub Custom Emojis
  3. // @version 0.1.8
  4. // @description Add custom emojis from json source
  5. // @namespace https://github.com/StylishThemes
  6. // @include /https?://((gist)\.)?github\.com/
  7. // @grant GM_addStyle
  8. // @grant GM_getValue
  9. // @grant GM_setValue
  10. // @grant GM_xmlhttpRequest
  11. // @grant GM_info
  12. // @run-at document-end
  13. // @require https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js
  14. // @require https://greasyfork.org/scripts/16936-ichord-caret-js/code/ichord-Caretjs.js?version=106431
  15. // @require https://greasyfork.org/scripts/16996-ichord-at-js-mod/code/ichord-Atjs-mod.js?version=109194
  16. // @require https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.1.2/js/ion.rangeSlider.min.js
  17. // ==/UserScript==
  18. /* global jQuery, GM_addStyle, GM_getValue, GM_setValue, GM_xmlhttpRequest, GM_info */
  19. /* eslint-disable indent, quotes */
  20. (function($) {
  21. 'use strict';
  22.  
  23. var ghe = {
  24.  
  25. version : GM_info.script.version,
  26.  
  27. vars : {
  28. // delay until package.json allowed to load
  29. delay : 8.64e7, // 24 hours in milliseconds
  30.  
  31. // base url to fetch package.json
  32. root : 'https://raw.githubusercontent.com/StylishThemes/GitHub-Custom-Emojis/master/',
  33. emojiClass : 'ghe-custom-emoji',
  34. emojiTemplate : ':_${name}:',
  35. maxEmojiZoom : 3,
  36. maxEmojiHeight : 150,
  37.  
  38. // Keyboard shortcut to open panel
  39. keyboardOpen : 'g+=',
  40. keyboardDelay : 1000
  41. },
  42.  
  43. regex : {
  44. // nodes to skip while traversing the dom
  45. skipElm : /^(script|style|svg|iframe|br|meta|link|textarea|input|code|pre)$/i,
  46. // emoji template
  47. template : /\$\{name\}/,
  48. // character to escape in regex
  49. charsToEsc : /[-\/\\^$*+?.()|[\]{}]/g
  50. },
  51.  
  52. defaults : {
  53. activeZoom : 1.8,
  54. caseSensitive : false,
  55. rangeHeight : '20;40', // min;max as set by ion.rangeSlider
  56. insertAsImage : false,
  57. // emoji json sources
  58. sources : [
  59. 'https://raw.githubusercontent.com/StylishThemes/GitHub-Custom-Emojis/master/collections/emoji-custom.json',
  60. 'https://raw.githubusercontent.com/StylishThemes/GitHub-Custom-Emojis/master/collections/emoji-crazy-rabbit.json',
  61. 'https://raw.githubusercontent.com/StylishThemes/GitHub-Custom-Emojis/master/collections/emoji-onion-head.json'
  62. ]
  63. },
  64.  
  65. // emoji json stored here
  66. collections : {},
  67.  
  68. // GitHub ajax containers
  69. containers : [
  70. '#js-pjax-container',
  71. '#js-repo-pjax-container',
  72. '.js-contribution-activity',
  73. '.more-repos'
  74. ],
  75.  
  76. // mutant observers to disconnect after ajax load
  77. previewObserver : [],
  78. // promises used when loading JSON
  79. promises : {},
  80.  
  81. getStoredValues : function() {
  82. var defaults = this.defaults;
  83. this.settings = {
  84. rangeHeight : GM_getValue('rangeHeight', defaults.rangeHeight),
  85. activeZoom : GM_getValue('activeZoom', defaults.activeZoom),
  86. caseSensitive : GM_getValue('caseSensitive', defaults.caseSensitive),
  87. insertAsImage : GM_getValue('insertAsImage', defaults.insertAsImage),
  88. sources : GM_getValue('sources', defaults.sources),
  89.  
  90. date : GM_getValue('date', 0)
  91. };
  92.  
  93. this.collections = GM_getValue('collections', {});
  94.  
  95. debug('Retrieved stored values', this.settings);
  96. },
  97.  
  98. storeVal : function(key, set, $el) {
  99. var tmp,
  100. val = set[key];
  101. GM_setValue(key, val);
  102. if (typeof val === 'boolean') {
  103. $el.prop('checked', val);
  104. } else {
  105. $el.val(val);
  106. }
  107. // update sliders
  108. if ($el.hasClass('ghe-height')) {
  109. tmp = val.split(';');
  110. $el.data('ionRangeSlider').update({
  111. from: tmp[0],
  112. to: tmp[1]
  113. });
  114. } else if ($el.hasClass('ghe-zoom')) {
  115. $el.data('ionRangeSlider').update({
  116. from: val
  117. });
  118. }
  119. },
  120.  
  121. setStoredValues : function(reset) {
  122. var $el, tmp, len, indx,
  123. s = ghe.settings,
  124. d = ghe.defaults,
  125. $panel = $('#ghe-settings-inner');
  126.  
  127. ghe.busy = true;
  128. ghe.storeVal('caseSensitive', reset ? d : s, $panel.find('.ghe-case'));
  129. ghe.storeVal('insertAsImage', reset ? d : s, $panel.find('.ghe-image'));
  130. ghe.storeVal('activeZoom', reset ? d : s, $panel.find('.ghe-zoom'));
  131. ghe.storeVal('rangeHeight', reset ? d : s, $panel.find('.ghe-height'));
  132.  
  133. GM_setValue('collections', this.collections);
  134. GM_setValue('date', s.date);
  135.  
  136. if (reset) {
  137. // add defaults back into source list; but don't remove any new stuff
  138. len = d.sources.length;
  139. for (indx = 0; indx < len; indx++) {
  140. if (s.sources.indexOf(d.sources[indx]) < 0) {
  141. s.sources[s.sources.length] = d.sources[indx];
  142. }
  143. }
  144. }
  145. tmp = s.sources;
  146. len = tmp.length;
  147. GM_setValue('sources', tmp);
  148. for (indx = 0; indx < len; indx++) {
  149. if ($panel.find('.ghe-source').eq(indx).length) {
  150. $el = $panel
  151. .find('.ghe-source-input')
  152. .eq(indx)
  153. .attr('data-url', tmp[indx]);
  154. } else {
  155. $el = $(ghe.sourceHTML)
  156. .appendTo($panel.find('.ghe-sources'))
  157. .find('.ghe-source-input')
  158. .attr('data-url', tmp[indx]);
  159. }
  160. // only show file name when not focused
  161. ghe.showFileName($el);
  162. }
  163. // remove extras
  164. $panel.find('.ghe-source').filter(':gt(' + len + ')').remove();
  165. if (reset) {
  166. this.updateSettings();
  167. }
  168.  
  169. debug((reset ? 'Resetting' : 'Saving') + ' current values & updating panel', s);
  170. ghe.busy = false;
  171. },
  172.  
  173. updateSettings : function() {
  174. this.isUpdating = true;
  175. var settings = this.settings,
  176. $panel = $('#ghe-settings-inner');
  177. settings.rangeHeight = $panel.find('.ghe-height').val();
  178. settings.activeZoom = $panel.find('.ghe-zoom').val();
  179. settings.insertAsImage = $panel.find('.ghe-image').is(':checked');
  180. settings.caseSensitive = $panel.find('.ghe-case').is(':checked');
  181. settings.sources = $panel.find('.ghe-source-input').map(function(){
  182. return $(this).attr('data-url');
  183. }).get();
  184.  
  185. // update case-sensitive regex
  186. this.setRegex();
  187.  
  188. debug('Updating user settings', settings);
  189. this.updateStyleSheet();
  190. this.isUpdating = false;
  191. },
  192.  
  193. loadEmojiJson : function(update) {
  194. // only load emoji.json once a day, or after a forced update
  195. if (update || (new Date().getTime() > this.settings.date + this.vars.delay)) {
  196. var indx,
  197. promises = [],
  198. sources = this.settings.sources,
  199. len = sources.length;
  200. for (indx = 0; indx < len; indx++) {
  201. promises[promises.length] = this.fetchCustomEmojis(sources[indx]);
  202. }
  203. $.when.apply(null, promises).done(function(){
  204. ghe.checkPage();
  205. ghe.promises = [];
  206. ghe.settings.date = new Date().getTime();
  207. GM_setValue('date', ghe.settings.date);
  208. GM_setValue('collections', ghe.collections);
  209. });
  210. }
  211. },
  212.  
  213. fetchCustomEmojis : function(url) {
  214. if (!this.promises[url]) {
  215. this.promises[url] = $.Deferred(function(defer) {
  216. debug('Fetching custom emoji list', url);
  217. GM_xmlhttpRequest({
  218. method : 'GET',
  219. url : url,
  220. onload : function(response) {
  221. var json = false;
  222. try {
  223. json = JSON.parse(response.responseText);
  224. } catch (err) {
  225. debug('Invalid JSON', url);
  226. return defer.reject();
  227. }
  228. if (json && json[0].name) {
  229. // save url to make removing the entry easier
  230. json[0].url = url;
  231. ghe.collections[json[0].name] = json;
  232. debug('Adding "' + json[0].name + '" Emoji Collection');
  233. }
  234. return defer.resolve();
  235. }
  236. });
  237. }).promise();
  238. }
  239. return this.promises[url];
  240. },
  241.  
  242. // Using: document.evaluate('//*[text()[contains(.,":_")]]', document.body, null,
  243. // XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null).snapshotItem(0);
  244. // to find matching content as it is much faster than scanning each node
  245. // sometimes it misses things...
  246. checkPage : function() {
  247. this.isUpdating = true;
  248. var node,
  249. indx = 0,
  250. parts = this.vars.emojiTemplate.split('${name}'), // parts = [':_', ':']
  251. // adding "//" starts from document, so if node is defined, don't
  252. // include it so the search starts from the node
  253. path = '//*[text()[contains(.,"' + parts[0] + '")]]',
  254. nodes = document.evaluate(path, document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null),
  255. len = nodes.snapshotLength;
  256. try {
  257. node = nodes.snapshotItem(indx);
  258. while (node && indx++ < len) {
  259. if (!ghe.regex.skipElm.test(node.nodeName)) {
  260. ghe.findEmoji(node);
  261. }
  262. node = nodes.snapshotItem(indx);
  263. }
  264. } catch (e) {
  265. debug('Nothing to replace!', e);
  266. }
  267. this.isUpdating = false;
  268. },
  269.  
  270. findEmoji : function(node) {
  271. var indx, len, group, match, matchesLen, name,
  272. regex = ghe.regex.nameRegex,
  273. matches = [],
  274. emojis = this.collections,
  275. str = node.textContent;
  276. while ((match = regex.exec(str)) !== null) {
  277. matches[matches.length] = match[1];
  278. }
  279. if (matches && matches[0]) {
  280. matchesLen = matches.length;
  281. for (group in emojis) {
  282. if (emojis.hasOwnProperty(group)) {
  283. len = emojis[group].length;
  284. for (indx = 1; indx < len; indx++) {
  285. name = emojis[group][indx].name;
  286. for (match = 0; match < matchesLen; match++) {
  287. if (name === matches[match]) {
  288. debug('found "' + matches[match] + '" in "' + node.textContent + '"');
  289. ghe.replaceText(node, emojis[group][indx]);
  290. }
  291. }
  292. }
  293. }
  294. }
  295. }
  296. },
  297.  
  298. replaceText : function(node, emoji) {
  299. var data, pos, imgnode, middlebit, endbit,
  300. isCased = this.settings.caseSensitive,
  301. name = this.vars.emojiTemplate.replace(ghe.regex.template, emoji.name),
  302. skip = 0;
  303. name = isCased ? name : name.toUpperCase();
  304. // Code modified from highlight-5 (MIT license)
  305. // http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html
  306. if (node.nodeType === 3) {
  307. data = isCased ? node.data : node.data.toUpperCase();
  308. pos = data.indexOf(name);
  309. pos -= (data.substr(0, pos).length - node.data.substr(0, pos).length);
  310. if (pos >= 0) {
  311. imgnode = ghe.createEmoji(emoji);
  312. middlebit = node.splitText(pos);
  313. endbit = middlebit.splitText(name.length);
  314. middlebit.parentNode.replaceChild(imgnode, middlebit);
  315. skip = 1;
  316. }
  317. } else if (node.nodeType === 1 && node.childNodes) {
  318. for (var i = 0; i < node.childNodes.length; ++i) {
  319. i += ghe.replaceText(node.childNodes[i], emoji);
  320. }
  321. }
  322. return skip;
  323. },
  324.  
  325. // This function does the surrounding for every matched piece of text
  326. // and can be customized to do what you like
  327. // <img class="emoji" title=":smile:" alt=":smile:" src="x.png" height="20" width="20" align="absmiddle">
  328. createEmoji : function(emoji) {
  329. var el = document.createElement('img');
  330. el.src = emoji.url;
  331. el.className = ghe.vars.emojiClass + ' emoji';
  332. el.title = el.alt = ghe.vars.emojiTemplate.replace(ghe.regex.template, emoji.name);
  333. // el.align = 'absmiddle'; // deprecated attribute
  334. return el;
  335. },
  336.  
  337. // used by autocomplete (atwho) filter function
  338. matches : function(query, labels) {
  339. if (query === '') {
  340. return 1;
  341. }
  342. labels = labels || '';
  343. var i, partial,
  344. count = 0,
  345. isCS = this.settings.caseSensitive,
  346. arry = (isCS ? labels : labels.toUpperCase()).split(/[\s,_]+/),
  347. parts = (isCS ? query : query.toUpperCase()).split(/[,_]/),
  348. len = parts.length;
  349. for (i = 0; i < len; i++) {
  350. // full match or partial
  351. partial = arry.join('_').indexOf(parts.join('_'));
  352. if (arry.indexOf(parts[i]) > -1 || partial > -1) {
  353. count++;
  354. }
  355. // give more weight to results with indexOf closer to zero
  356. if (partial > -1 && partial < len / 2) {
  357. count++;
  358. }
  359. }
  360. // return fraction of query matches
  361. return count / len;
  362. },
  363.  
  364. // init when comment textarea is focused
  365. initAutocomplete : function($el) {
  366. if (!$el.data('atwho')) {
  367. var indx, len, name, group,
  368. data = [];
  369. // combine data
  370. for (name in ghe.collections) {
  371. if (ghe.collections.hasOwnProperty(name)) {
  372. group = ghe.collections[name].slice(1);
  373. data = data.concat(group);
  374. }
  375. }
  376. len = data.length;
  377. // alphabetic sort
  378. data = data.sort(function(a, b) {
  379. return a.name > b.name ? 1 : a.name < b.name ? -1 : 0;
  380. });
  381. // add prepend name to labels
  382. for (indx = 0; indx < len; indx++) {
  383. data[indx].labels = data[indx].name.replace(/_/g, ' ') + ' ' + data[indx].labels;
  384. }
  385. // add emoji autocomplete to comment textareas
  386. $el.atwho({
  387. at : ':_', // first two characters from emojiTemplate
  388. data : data,
  389. searchKey: 'labels',
  390. displayTpl : '<li><span><img src="${url}" height="30" /></span>${name}</li>',
  391. insertTpl : ghe.vars.emojiTemplate,
  392. delay : 400,
  393. callbacks : {
  394. matcher: function(flag, subtext) {
  395. var regexp = ghe.regex.emojiFilter,
  396. match = regexp.exec(subtext);
  397. // this next line does some magic...
  398. // for some reason, without it, moving the caret from "p" to "r" in
  399. // ":_people,fear," opens & closes the popup with each letter typed
  400. subtext.match(regexp);
  401. if (match) {
  402. return match[2] || match[1];
  403. } else {
  404. return null;
  405. }
  406. },
  407. filter: function(query, data, searchKey) {
  408. var i, item,
  409. len = data.length,
  410. _results = [];
  411. for (i = 0; i < len; i++) {
  412. item = data[i];
  413. item.atwho_order = ghe.matches(query, item[searchKey]);
  414. if (item.atwho_order > 0.9) {
  415. _results[_results.length] = item;
  416. }
  417. }
  418. return query === '' ? _results : _results.sort(function(a, b) {
  419. // descending sort
  420. return b.atwho_order - a.atwho_order;
  421. });
  422. },
  423. sorter: function(query, items) {
  424. // sorted by filter
  425. return items;
  426. },
  427. // event parameter adding in atwho.js mod
  428. beforeInsert: function(value, $li, event) {
  429. if (event.shiftKey || ghe.settings.insertAsImage) {
  430. // add image tag directly if shift is held
  431. return '<img title="' +
  432. ghe.vars.emojiTemplate.replace(ghe.regex.template, $li.text()) +
  433. '" src="' + $li.find('img').attr('src') + '">';
  434. }
  435. return value;
  436. }
  437. }
  438. });
  439. // use classes from GitHub-Dark to make theme match GitHub-Dark
  440. $('.atwho-view').addClass('popover suggester');
  441. }
  442. },
  443.  
  444. setupPreviews : function() {
  445. // Add mutant observer to previews
  446. var previews = document.querySelectorAll('.preview-content .comment-body');
  447. if (ghe.previewObserver.length) {
  448. // disconnect previous observers
  449. $.each(ghe.previewObserver, function() {
  450. this.disconnect();
  451. });
  452. ghe.previewObserver = [];
  453. }
  454. Array.prototype.forEach.call(previews, function(target) {
  455. var obs = new MutationObserver(function(mutations) {
  456. mutations.forEach(function(mutation) {
  457. // preform checks before adding code wrap to minimize function calls
  458. if (mutation.target === target && !ghe.isUpdating) {
  459. ghe.checkPage();
  460. }
  461. });
  462. });
  463. obs.observe(target, {
  464. childList : true,
  465. subtree : false
  466. });
  467. ghe.previewObserver[ghe.previewObserver.length] = obs;
  468. });
  469. },
  470.  
  471. addToolbarIcon : function() {
  472. // add Emoji setting icons
  473. var indx, $el,
  474. $toolbars = $('.toolbar-commenting'),
  475. len = $toolbars.length;
  476. for (indx = 0; indx < len; indx++) {
  477. $el = $toolbars.eq(indx);
  478. if (!$el.find('.ghe-settings-icon').length) {
  479. $el.prepend([
  480. '<button type="button" class="ghe-settings-open toolbar-item tooltipped tooltipped-n tooltipped-multiline" aria-label="Browse collections & Set Emojis Options" tabindex="-1">',
  481. '<svg class="ghe-settings-icon" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none" stroke="currentColor">',
  482. '<path d="M7.205 3.233c0 .952-.753 1.73-1.722 1.73-.953 0-1.707-.793-1.707-1.73 0-.937.762-1.73 1.707-1.73.97 0 1.73.793 1.73 1.73h-.008zm6.904 0c0 .952-.794 1.73-1.747 1.73-.95 0-1.722-.793-1.722-1.73 0-.937.795-1.73 1.73-1.73.938 0 1.747.793 1.747 1.73h-.008zM7.204 10.1v5.19c0 1.728 6.904 1.728 6.904 0V10.1M10.642 10.1v3.46"/>',
  483. '<path d="M.878 8.777s3.167 1.893 8.002 1.92c4.365.02 8.135-1.92 8.135-1.92"/>',
  484. '</svg>',
  485. '</button>'
  486. ].join(''));
  487. }
  488. }
  489. },
  490.  
  491. // dynamic stylesheet
  492. updateStyleSheet : function() {
  493. var range = this.settings.rangeHeight.split(';');
  494. ghe.$style.text([
  495. // img styling - vertically center with set height range
  496. '.atwho-view li img, #ghe-popup .select-menu-item img, img[alt="ghe-emoji"], .' +
  497. this.vars.emojiClass + ' { ' +
  498. 'margin-bottom:.25em; vertical-align:middle; ' +
  499. 'min-height: ' + (range[0] || 'none') + 'px;' +
  500. 'max-height: ' + (range[1] || 'none') + 'px }',
  501. // click (make active) on image to zoom
  502. '.' + this.vars.emojiClass + ':active, a:active img[alt="ghe-emoji"] { zoom:' +
  503. this.settings.activeZoom + ' }'
  504. ].join(''));
  505. },
  506.  
  507. addBindings : function() {
  508. var lastKey,
  509. $popup = $('#ghe-popup'),
  510. $settings = $('#ghe-settings');
  511. // Delegated bindings
  512. $('body')
  513. .on('click', '.ghe-settings-open', function() {
  514. // open all collections panel
  515. ghe.openCollections($(this));
  516. return false;
  517. })
  518. .on('click', '.ghe-collection', function() {
  519. // open targeted collection
  520. var name = $(this).attr('data-group');
  521. ghe.showCollection(name);
  522. })
  523. .on('click', '.ghe-emoji', function(e) {
  524. // click on emoji in collection to add to textarea
  525. ghe.addEmoji(e, $(this));
  526. })
  527. .on('click keypress keydown', function(e) {
  528. clearTimeout(ghe.timer);
  529. var panelVisible = $popup.hasClass('in') || $settings.hasClass('in'),
  530. openPanel = ghe.vars.keyboardOpen.split('+'),
  531. key = String.fromCharCode(e.which).toLowerCase();
  532. // press escape or click outside to close the panel
  533. if (panelVisible && e.which === 27 || e.type === 'click' && !$(e.target).closest('#ghe-wrapper').length) {
  534. ghe.closePanels();
  535. return;
  536. }
  537. // keydown is only needed for escape key detection
  538. if (e.type === 'keydown' || /(input|textarea)/i.test(document.activeElement.nodeName)) {
  539. return;
  540. }
  541. // shortcut keys need keypress
  542. if (lastKey === openPanel[0] && key === openPanel[1]) {
  543. if ($settings.hasClass('in')) {
  544. ghe.closePanels();
  545. } else {
  546. ghe.openSettings();
  547. }
  548. }
  549. lastKey = key;
  550. ghe.timer = setTimeout(function() {
  551. lastKey = null;
  552. }, ghe.vars.keyboardDelay);
  553.  
  554. // add shortcut to help menu
  555. if (key === '?') {
  556. // table doesn't exist until user presses "?"
  557. setTimeout(function() {
  558. if (!$('.ghe-shortcut').length) {
  559. $('.keyboard-mappings:eq(0) tbody:eq(0)').append([
  560. '<tr class="ghe-shortcut">',
  561. '<td class="keys">',
  562. '<kbd>' + openPanel[0] + '</kbd> <kbd>' + openPanel[1] + '</kbd>',
  563. '</td>',
  564. '<td>GitHub Emojis: open settings</td>',
  565. '</tr>'
  566. ].join(''));
  567. }
  568. }, 300);
  569. }
  570. });
  571.  
  572. // popup & settings interactions
  573. $('#ghe-popup .octicon-gear').on('click keyup', function(e) {
  574. if (e.type === 'keyup' && e.which !== 13) {
  575. return;
  576. }
  577. ghe.openSettings();
  578. });
  579. $('#ghe-settings, #ghe-settings-close, #ghe-settings-inner').on('click', function(e) {
  580. if (this.id === 'ghe-settings-inner') {
  581. e.stopPropagation();
  582. } else {
  583. ghe.closePanels();
  584. }
  585. });
  586. // ghe-checkbox added to checkboxes
  587. $('.ghe-checkbox').on('change', function() {
  588. ghe.updateSettings();
  589. });
  590. // go back - switch from single collection to showing all collections
  591. $('#ghe-popup .ghe-back').on('click', function(){
  592. $('.ghe-single-collection, .ghe-back').hide();
  593. $('.ghe-all-collections').show();
  594. });
  595.  
  596. // add new source input
  597. $('#ghe-add-source').on('click', function() {
  598. var $panel = $('#ghe-settings-inner');
  599. // lets not get crazy!
  600. if ($panel.find('.ghe-source').length < 20) {
  601. $(ghe.sourceHTML).appendTo($panel.find('.ghe-sources'));
  602. }
  603. return false;
  604. });
  605. $('#ghe-refresh-sources, #ghe-restore').on('click', function() {
  606. // update sources from settings panel
  607. ghe.setStoredValues(this.id === 'ghe-restore');
  608. // load json files
  609. ghe.loadEmojiJson(true);
  610. return false;
  611. });
  612.  
  613. // Init range slider
  614. $('.ghe-height')
  615. .val(ghe.settings.rangeHeight)
  616. .ionRangeSlider({
  617. type : 'double',
  618. min : 0,
  619. max : ghe.vars.maxEmojiHeight,
  620. onChange : function() {
  621. ghe.updateSettings();
  622. },
  623. force_edges : true,
  624. hide_min_max : true
  625. });
  626. $('.ghe-zoom')
  627. .val(ghe.settings.activeZoom)
  628. .ionRangeSlider({
  629. min : 0,
  630. max : ghe.vars.maxEmojiZoom,
  631. step : 0.1,
  632. onChange : function() {
  633. ghe.updateSettings();
  634. },
  635. force_edges : true,
  636. hide_min_max : true
  637. });
  638.  
  639. // Remove source input - delegated binding
  640. $('.ghe-settings-wrapper')
  641. .on('click', '.ghe-remove', function(e) {
  642. var $wrapper = $(this).closest('.ghe-source'),
  643. url = $wrapper.find('.ghe-source-input').attr('data-url');
  644. ghe.removeSource(url);
  645. $wrapper.remove();
  646. ghe.setStoredValues();
  647. return false;
  648. })
  649. .on('focus blur input change', '.ghe-source-input', function(e) {
  650. if (ghe.busy) { return; }
  651. ghe.busy = true;
  652. var val,
  653. $this = $(this);
  654. switch (e.type) {
  655. case 'focus':
  656. case 'focusin':
  657. // show entire url when focused
  658. $this.val( $this.attr('data-url') );
  659. break;
  660. case 'blur':
  661. case 'focusout':
  662. ghe.showFileName($this);
  663. break;
  664. default:
  665. $this.attr('data-url', $this.val());
  666. }
  667. if (e.type === 'change' || e.which === 13) {
  668. val = $this.val();
  669. $this.attr('data-url', val);
  670. ghe.fetchCustomEmojis(val);
  671. }
  672. ghe.busy = false;
  673. });
  674.  
  675. // initialize autocomplete that add emojis, but only on focus
  676. // since every comment has a hidden textarea
  677. $('body').on('focus', '.comment-form-textarea', function() {
  678. ghe.initAutocomplete($(this));
  679. });
  680. },
  681.  
  682. showFileName : function($el) {
  683. var str = $el.attr('data-url'),
  684. v = str.substring( str.lastIndexOf('/') + 1, str.length );
  685. // show only the file name in the input when blurred
  686. // unless there is no file name
  687. $el.val(v === '' ? str : '...' + v);
  688. },
  689.  
  690. closePanels : function() {
  691. $('#ghe-popup').removeClass('in');
  692. $('#ghe-settings').removeClass('in');
  693. ghe.$currentInput = null;
  694. },
  695.  
  696. openSettings : function() {
  697. $('.modal-backdrop').click();
  698. $('#ghe-settings').addClass('in');
  699. },
  700.  
  701. openCollections : function($el) {
  702. ghe.addCollections();
  703. var pos = $el.offset();
  704. $('#ghe-settings').removeClass('in');
  705. $('#ghe-popup')
  706. .addClass('in')
  707. .css({
  708. left: pos.left + 25,
  709. top: pos.top
  710. });
  711. ghe.$currentInput = $el.closest('.previewable-comment-form').find('.comment-form-textarea');
  712. },
  713.  
  714. addCollections : function() {
  715. var indx, len, key, group, img,
  716. collections = ghe.collections,
  717. range = ghe.settings.rangeHeight.split(';'),
  718. list = [],
  719. items = [];
  720. // build collections list -
  721. for (key in collections) {
  722. if (collections.hasOwnProperty(key)) {
  723. list[list.length] = key;
  724. }
  725. }
  726. list = list.sort(function(a, b) {
  727. return a > b ? 1 : (a < b ? -1 : 0);
  728. });
  729. len = list.length;
  730. // add random image from group
  731. for (indx = 0; indx < len; indx++) {
  732. group = collections[list[indx]];
  733. // random image (skip first entry)
  734. img = Math.round(Math.random() * (group.length - 2)) + 1;
  735. items[items.length] = '<div class="select-menu-item js-navigation-item ghe-collection" ' +
  736. 'data-group="' + list[indx] + '">' +
  737. // collection info stored in first entry
  738. group[0].name + ' <span class="ghe-right"><img src="' +
  739. group[img].url + '" title="' +
  740. ghe.vars.emojiTemplate.replace(ghe.regex.template, group[img].name) + '" style="' +
  741. 'min-height:' + (range[0] || 'none') + 'px;' +
  742. 'max-height:' + (range[1] || 'none') + 'px;">' +
  743. '</span></div>';
  744. }
  745. $('.ghe-single-collection, .ghe-back').hide();
  746. $('.ghe-all-collections').html(items.join('')).show();
  747. },
  748.  
  749. showCollection : function(name) {
  750. var indx,
  751. range = ghe.settings.rangeHeight.split(';'),
  752. group = ghe.collections[name].sort(function(a, b) {
  753. return a.name > b.name ? 1 : ( a.name < b.name ? -1 : 0 );
  754. }),
  755. list = [],
  756. len = group.length;
  757. for (indx = 1; indx < len; indx++) {
  758. list[indx - 1] = '<div class="select-menu-item js-navigation-item ghe-emoji" ' +
  759. 'data-name="' + group[indx].name + '">' +
  760. group[indx].name + '<span class="ghe-right"><img src="' +
  761. group[indx].url + '" style="min-height:' + (range[0] || 'none') + 'px;' +
  762. 'max-height:' + (range[1] || 'none') + 'px"></span></div>';
  763. }
  764. $('.ghe-all-collections').hide();
  765. $('.ghe-single-collection').html(list.join('')).show();
  766. $('.ghe-back').show();
  767. },
  768.  
  769. // add emoji from collection
  770. addEmoji : function(e, $el) {
  771. var val, emoji,
  772. name = $el.attr('data-name'),
  773. caretPos = ghe.$currentInput.caret('pos');
  774. // insert into textarea
  775. if (e.shiftKey || ghe.settings.insertAsImage) {
  776. // add image tag directly if shift is held;
  777. // GitHub does NOT allow class names so we are forced to use alt
  778. emoji = '<img alt="ghe-emoji" title="' +
  779. ghe.vars.emojiTemplate.replace(ghe.regex.template, name) +
  780. '" src="' + $el.find('img').attr('src') + '">';
  781. } else {
  782. emoji = ghe.vars.emojiTemplate.replace(ghe.regex.template, name);
  783. }
  784. val = ghe.$currentInput.val();
  785. ghe.$currentInput
  786. .val(val.slice(0, caretPos) + emoji + ' ' + val.slice(caretPos))
  787. .focus()
  788. .caret('pos', caretPos + emoji.length + 1);
  789. ghe.closePanels();
  790. },
  791.  
  792. removeSource : function(url) {
  793. var indx,
  794. list = [],
  795. collections = this.collections,
  796. sources = this.settings.sources,
  797. len = sources.length;
  798. // remove from source
  799. for (indx = 0; indx < len; indx++) {
  800. if (sources[indx] !== url) {
  801. list[list.length] = sources[indx];
  802. }
  803. }
  804. this.settings.sources = list;
  805. for (indx in collections) {
  806. if (collections.hasOwnProperty(indx) && collections[indx][0].url === url) {
  807. delete collections[indx];
  808. debug('Removing "' + indx + '" collection', collections);
  809. }
  810. }
  811. },
  812.  
  813. update : function() {
  814. this.isUpdating = true;
  815. this.setupPreviews();
  816. this.addToolbarIcon();
  817. // checkPage clears isUpdating flag
  818. this.checkPage();
  819. },
  820.  
  821. addPanels : function() {
  822. /* https://github.com/ichord/At.js styles for autocomplete */
  823. GM_addStyle([
  824. // settings panel
  825. '#ghe-menu:hover { cursor:pointer }',
  826. '#ghe-settings { position:fixed; z-index:65535; top:0; bottom:0; left:0; right:0; opacity:0; visibility:hidden }',
  827. '#ghe-settings.in { opacity:1; visibility:visible; background:rgba(0,0,0,.5) }',
  828. '#ghe-settings-inner { position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); width:25rem; box-shadow:0 .5rem 1rem #111; color:#c0c0c0 }',
  829. '#ghe-settings label { margin-left:.5rem; position:relative; top:-1px }',
  830. '#ghe-settings .ghe-remove { float:right; margin-top:2px; padding:4px; cursor:pointer }',
  831. '#ghe-settings .ghe-remove-icon { position:relative; top:3px }',
  832. '#ghe-settings-close { fill:#666; float:right; cursor:pointer }',
  833. '#ghe-settings-close:hover { fill:#ccc }',
  834. '#ghe-settings .ghe-settings-wrapper { max-height:60vh; overflow-y:auto; padding: 1px 10px }',
  835. '#ghe-settings .ghe-right, #ghe-popup .ghe-right { float:right }',
  836. '#ghe-settings p { line-height:25px; }',
  837. '#ghe-settings .checkbox input { margin-top:.35em }',
  838. '#ghe-settings input[type="checkbox"] { width:16px !important; height:16px !important; border-radius:3px !important }',
  839. '#ghe-settings .boxed-group-inner { padding:0; }',
  840. '#ghe-settings .ghe-footer { padding: 10px; border-top: #555 solid 1px; }',
  841. '#ghe-settings .ghe-min-height, #ghe-settings .ghe-max-height, .ghe-zoom { width: 5em; }',
  842. '#ghe-settings .ghe-source-input { width: 90%; }',
  843. '#ghe-settings .ghe-slider-wrapper { height:40px; }',
  844. '#ghe-settings .ghe-slider-wrapper label { position:relative; top:22px }',
  845. '#ghe-settings .ghe-range-slider, #ghe-settings .ghe-zoom-slider { position:relative; height:40px; width:250px; float:right }',
  846.  
  847. // show emoji collections
  848. '#ghe-popup { display:none }',
  849. '#ghe-popup .ghe-content, #ghe-popup .ghe-content > div { max-height: 200px }',
  850. '#ghe-popup .octicon-gear { margin-left:4px }',
  851. '#ghe-popup .ghe-back svg { height:20px; padding:4px 14px 4px 4px }',
  852. '#ghe-popup .select-menu-item { font-size:1.1em; font-weight:bold; line-height:40px; padding:8px }',
  853. '.ghe-settings-icon, #ghe-popup.in { display:inline-block }',
  854.  
  855. // autocomplete popup in comment
  856. '.atwho-view { position:absolute; top:0; left:0; display:none; margin-top:18px; background:#fff; color:#000; border:1px solid #ddd; border-radius:3px; box-shadow:0 0 5px rgba(0,0,0,.1); min-width:300px; max-width:none!important; max-height:225px; overflow:auto; z-index:11110!important }',
  857. '.atwho-view .navigation-focus { background:#36f; color:#fff }',
  858. '.atwho-view .navigation-focus small { color:#fff }',
  859. '.atwho-view strong { color:#36F }',
  860. '.atwho-view .navigation-focus strong { color:#fff; font:700 }',
  861. '.atwho-view ul { list-style:none; padding:0; margin:auto }',
  862. '.atwho-view ul li { display:block; padding:5px 10px; border-bottom:1px solid #ddd; cursor:pointer }',
  863. '.atwho-view li span { display:inline-block; min-width:60px; padding-right:4px }',
  864. '.atwho-view small { font-size:smaller; color:#777; font-weight:400 }',
  865.  
  866. // rangeSlider
  867. '.irs{position:relative;display:block;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}',
  868. '.irs-line{position:relative;display:block;overflow:hidden;outline:none !important}.irs-line-left,.irs-line-mid,.irs-line-right{position:absolute;display:block;top:0}',
  869. '.irs-line-left{left:0;width:9%}.irs-line-mid{left:9%;width:82%}.irs-line-right{right:0;width:9%}.irs-bar{position:absolute;display:block;left:0;width:0}.irs-bar-edge{position:absolute;display:block;top:0;left:0}',
  870. '.irs-shadow{position:absolute;display:none;left:0;width:0}.irs-slider{position:absolute;display:block;cursor:default;z-index:1}.irs-slider.type_last{z-index:2}.irs-min{position:absolute;display:block;left:0;cursor:default}',
  871. '.irs-max{position:absolute;display:block;right:0;cursor:default}.irs-from,.irs-to,.irs-single{position:absolute;display:block;top:0;left:0;cursor:default;white-space:nowrap}.irs-grid{position:absolute;display:none;bottom:0;left:0;width:100%;height:20px}',
  872. '.irs-with-grid .irs-grid{display:block}.irs-grid-pol{position:absolute;top:0;left:0;width:1px;height:8px;background:#000}.irs-grid-pol.small{height:4px}.irs-grid-text{position:absolute;bottom:0;left:0;white-space:nowrap;text-align:center;font-size:9px;line-height:9px;padding:0 3px;color:#000}',
  873. '.irs-disable-mask{position:absolute;display:block;top:0;left:-1%;width:102%;height:100%;cursor:default;background:rgba(0,0,0,0.0);z-index:2}.lt-ie9 .irs-disable-mask{background:#000;filter:alpha(opacity=0);cursor:not-allowed}.irs-disabled{opacity:0.4}',
  874. '.irs-hidden-input{position:absolute !important;display:block !important;top:0 !important;left:0 !important;width:0 !important;height:0 !important;font-size:0 !important;line-height:0 !important;padding:0 !important;margin:0 !important;outline:none !important;z-index:-9999 !important;background:none !important;border-style:solid !important;border-color:transparent !important}',
  875. '.irs-line-mid,.irs-line-left,.irs-line-right,.irs-bar,.irs-bar-edge,.irs-slider{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQQAAAC0BAMAAACAm0/4AAAAHlBMVEUAAADh5OlIPakuJnU8MZzh5Onh5Onlt8BIPamDg6ND+SBkAAAACnRSTlMAgMzMzHlXE4oe0nCEQQAAAMJJREFUeNrt1qENAkEQhtENkBDkCtCECiiBFjCgEXgMDVwJVEzGQ7KnZnJ5r4JP7E7+1tNJkCBBgoSqCQAAjNg+e6rbq717snt79GSHdu3J9hVGfE8nIVR4jgU+ZYHTVOBAAwAw4pROggQJEiRUTQAAYMRuSl9Rn/whN+UnFJizEiQUSijwKQucpgIHGgCAQatjy7a5tJkkBAlBQpAQJAQJQUJYYkKByQIA/6zPbSYJQUKQECQECUFCkBAkhCUmAMAvX+TSxQIIIKq9AAAAAElFTkSuQmCC") repeat-x}',
  876. '.irs{height:40px}.irs-with-grid{height:60px}.irs-line{height:12px;top:25px}.irs-line-left{height:12px;background-position:0 -30px}',
  877. '.irs-line-mid{height:12px;background-position:0 0}.irs-line-right{height:12px;background-position:100% -30px}.irs-bar{height:12px;top:25px;background-position:0 -60px}',
  878. '.irs-bar-edge{top:25px;height:12px;width:9px;background-position:0 -90px}.irs-shadow{height:3px;top:34px;background:#000;opacity:.25}',
  879. '.lt-ie9 .irs-shadow{filter:alpha(opacity=25)}.irs-slider{width:16px;height:18px;top:22px;background-position:0 -120px}',
  880. '.irs-slider.state_hover,.irs-slider:hover{background-position:0 -150px}.irs-min,.irs-max{color:#fff;font-size:10px;line-height:1.333;text-shadow:none;top:0;padding:1px 3px;background:#7D7E81;-moz-border-radius:4px;border-radius:4px}',
  881. '.irs-from,.irs-to,.irs-single{color:#fff;font-size:10px;line-height:1.333;text-shadow:none;padding:1px 5px;background:#534AA1;-moz-border-radius:4px;border-radius:4px}',
  882. '.irs-from:after,.irs-to:after,.irs-single:after{position:absolute;display:block;content:"";bottom:-6px;left:50%;width:0;height:0;margin-left:-3px;overflow:hidden;border:3px solid transparent;border-top-color:#534AA1}',
  883. '.irs-grid-pol{background:#e1e4e9}.irs-grid-text{color:#999}'
  884. ].join(''));
  885.  
  886. // Settings panel markup
  887. $('body').append([
  888. '<div id="ghe-wrapper">',
  889. '<div id="ghe-popup" class="select-menu-modal-holder js-menu-content js-navigation-container js-active-navigation-container">',
  890. '<div class="select-menu-modal">',
  891. '<div class="select-menu-header">',
  892. '<span class="select-menu-title">',
  893. '<text>Emoji Collections</text>',
  894. '<span class="octicon tooltipped tooltipped-w" aria-label="Change GitHub Custom Emoji Settings">',
  895. '<svg class="octicon-gear" viewBox="0 0 16 14" style="height: 16px; width: 14px;"><path d="M14 8.77V7.17l-1.94-0.64-0.45-1.09 0.88-1.84-1.13-1.13-1.81 0.91-1.09-0.45-0.69-1.92H6.17l-0.63 1.94-1.11 0.45-1.84-0.88-1.13 1.13 0.91 1.81-0.45 1.09L0 7.23v1.59l1.94 0.64 0.45 1.09-0.88 1.84 1.13 1.13 1.81-0.91 1.09 0.45 0.69 1.92h1.59l0.63-1.94 1.11-0.45 1.84 0.88 1.13-1.13-0.92-1.81 0.47-1.09 1.92-0.69zM7 11c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3z"/></svg>',
  896. '</span>',
  897. '<span class="octicon tooltipped tooltipped-w ghe-back" aria-label="Go back to see all collections">',
  898. '<svg xmlns="http://www.w3.org/2000/svg" width="6.5" height="10" viewBox="0 0 6.5 10"><path d="M5.008 0l1.497 1.504-3.76 3.49 3.743 3.51L4.984 10l-4.99-5.013L5.01 0z"/></svg>',
  899. '</span>',
  900. '</span>',
  901. '</div>',
  902. '<div class="js-select-menu-deferred-content ghe-content">',
  903. '<div class="select-menu-list ghe-all-collections"></div>',
  904. '<div class="select-menu-list ghe-single-collection"></div>',
  905. '</div>',
  906. '</div>',
  907. '</div>',
  908. '<div id="ghe-settings">',
  909. '<div id="ghe-settings-inner" class="boxed-group">',
  910. '<h3>GitHub Custom Emoji Settings',
  911. '<svg id="ghe-settings-close" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="160 160 608 608"><path d="M686.2 286.8L507.7 465.3l178.5 178.5-45 45-178.5-178.5-178.5 178.5-45-45 178.5-178.5-178.5-178.5 45-45 178.5 178.5 178.5-178.5z"/></svg>',
  912. '</h3>',
  913. '<div class="boxed-group-inner">',
  914. '<form>',
  915. '<div class="ghe-settings-wrapper">',
  916. '<p>',
  917. '<label>Insert as Image:',
  918. '<sup class="tooltipped tooltipped-e" aria-label="Or Shift + select the emoji">?</sup>',
  919. '<input class="ghe-image ghe-checkbox ghe-right" type="checkbox">',
  920. '</label>',
  921. '</p>',
  922. '<p class="checkbox">',
  923. '<label>Case Sensitive <input class="ghe-case ghe-checkbox ghe-right" type="checkbox"></label>',
  924. '</p>',
  925. '<div class="ghe-slider-wrapper">',
  926. '<div class="ghe-range-slider">',
  927. '<input type="text" class="ghe-height" value="" />',
  928. '</div>',
  929. '<label>Emoji Height',
  930. '<sup class="tooltipped tooltipped-e" aria-label="Set emoji minimum & maximum&#10;height in pixels">?</sup>',
  931. '</label>',
  932. '</div>',
  933. '<div class="ghe-slider-wrapper">',
  934. '<div class="ghe-zoom-slider">',
  935. '<input class="ghe-zoom ghe-right" type="text">',
  936. '</div>',
  937. '<label>Emoji Zoom',
  938. '<sup class="tooltipped tooltipped-e" aria-label="Set Emoji zoom factor&#10;while actively clicked">?</sup>',
  939. '</label>',
  940. '</div>',
  941. '<p>',
  942. '<hr>',
  943. '<h3>Sources',
  944. '<a href="https://github.com/StylishThemes/GitHub-Custom-Emojis/wiki/Add-Emojis" class="tooltipped tooltipped-e tooltipped-multiline" aria-label="Click to get more details on how to set up an Emoji source JSON file">',
  945. '<sup>?</sup>',
  946. '</a>',
  947. '</h3>',
  948. '<div class="ghe-sources"></div>',
  949. '</p>',
  950. '</div>',
  951. '<div class="ghe-footer">',
  952. '<div class="btn-group">',
  953. '<a href="#" id="ghe-add-source" class="btn btn-sm">Add Source</a>',
  954. '<a href="#" id="ghe-refresh-sources" class="btn btn-sm">Refresh Sources</a>&nbsp;',
  955. '</div>',
  956. '<a href="#" id="ghe-restore" class="btn btn-sm btn-danger tooltipped tooltipped-n ghe-right" aria-label="Default sources are restored;&#10;other source will remain">Restore Defaults</a>',
  957. '</div>',
  958. '</form>',
  959. '</div>',
  960. '</div>',
  961. '</div>',
  962. '</div>'
  963. ].join(''));
  964. },
  965.  
  966. // JSON source inputs
  967. sourceHTML : [
  968. '<div class="ghe-source">',
  969. '<input class="ghe-source-input" type="text" value="" placeholder="Add JSON sources only">',
  970. '<a href="#" class="ghe-remove btn btn-sm btn-danger">',
  971. '<svg class="ghe-remove-icon" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="160 160 608 608" fill="currentColor"><path d="M686.2 286.8L507.7 465.3l178.5 178.5-45 45-178.5-178.5-178.5 178.5-45-45 178.5-178.5-178.5-178.5 45-45 178.5 178.5 178.5-178.5z"/></svg>',
  972. '</a>',
  973. '</div>'
  974. ].join(''),
  975.  
  976. setRegex : function() {
  977. var isCS = this.settings.caseSensitive,
  978. // parts = [':_', ':']
  979. parts = this.vars.emojiTemplate.split('${name}');
  980.  
  981. // emojiFilter = /:_([a-zA-Z\u00c0-\u00ff0-9_,'.+-]*)$|:_([^\x00-\xff]*)$/gi
  982. // used by atwho.js autocomplete
  983. this.regex.emojiFilter = new RegExp(
  984. parts[0] + '([a-zA-Z\u00c0-\u00ff0-9_,\'\.\+\-]*)$|' +
  985. parts[0] + '([^\\x00-\\xff]*)$',
  986. (isCS ? 'g' : 'gi')
  987. );
  988.  
  989. this.regex.nameRegex = new RegExp(
  990. parts[0] + '([\\w_]+)' + parts[1],
  991. (isCS ? 'g' : 'gi')
  992. );
  993. },
  994.  
  995. init : function() {
  996. debug('GitHub-Emoji Script initializing!');
  997.  
  998. // add style tag to head
  999. this.$style = $('<style class="ghe-style">').appendTo('head');
  1000.  
  1001. this.getStoredValues();
  1002. this.loadEmojiJson();
  1003. this.updateStyleSheet();
  1004. this.isUpdating = true;
  1005. // regex based on case sensitive setting
  1006. this.setRegex();
  1007.  
  1008. var targets = document.querySelectorAll(this.containers.join(','));
  1009. Array.prototype.forEach.call(targets, function(target) {
  1010. new MutationObserver(function(mutations) {
  1011. mutations.forEach(function(mutation) {
  1012. // preform checks before adding code wrap to minimize function calls
  1013. if (mutation.target === target && !$.isEmptyObject(ghe.collections) &&
  1014. !(ghe.isUpdating || target.querySelector('.ghe-processed'))) {
  1015. ghe.update();
  1016. }
  1017. });
  1018. }).observe(target, {
  1019. childList : true,
  1020. subtree : true
  1021. });
  1022. });
  1023.  
  1024. this.addPanels();
  1025.  
  1026. // Add emoji autocomplete & watch for preview rendering
  1027. this.setupPreviews();
  1028. this.addToolbarIcon();
  1029. this.addBindings();
  1030. // update panel values after bindings (rangeslider)
  1031. this.setStoredValues();
  1032.  
  1033. // checkPage clears isUpdating flag
  1034. this.checkPage();
  1035. }
  1036. };
  1037.  
  1038. // add style at document-start
  1039. ghe.init();
  1040.  
  1041. // include a "?debug" anywhere in the browser URL to enable debugging
  1042. function debug() {
  1043. if (/\?debug/.test(window.location.href)) {
  1044. console.log.apply(console, arguments);
  1045. }
  1046. }
  1047. })(jQuery.noConflict(true));