From 78ebf38e3575764b4427bff64ec1cb1efd085900 Mon Sep 17 00:00:00 2001 From: Spuds Date: Thu, 2 Mar 2023 09:27:50 -0600 Subject: [PATCH 1/2] ! Changes to allow this to work with ElkArte 1.1.x --- README.md | 5 +- TabbedSmiley.english.php | 4 - languages/english/TabbedSmiley.english.php | 6 + languages/german/TabbedSmiley.german.php | 6 + package-info.xml | 16 +- tabbedSmiley.css | 17 +- tabbedSmiley.integration.php | 4 +- tabbedSmiley.js | 202 +++++++++++---------- 8 files changed, 150 insertions(+), 110 deletions(-) delete mode 100644 TabbedSmiley.english.php create mode 100644 languages/english/TabbedSmiley.english.php create mode 100644 languages/german/TabbedSmiley.german.php diff --git a/README.md b/README.md index 46baf77..1792ea1 100644 --- a/README.md +++ b/README.md @@ -13,7 +13,7 @@ https://github.com/emanuele45/Tabbed-Smileys The number of tabs is defined by the number of rows of smileys in the popup: every row corresponds to a tab. -[![new row](http://img253.imageshack.us/img253/9926/newrow.th.png)](http://img253.imageshack.us/i/newrow.png/) +[![new row](https://img253.imageshack.us/img253/9926/newrow.th.png)](https://img253.imageshack.us/i/newrow.png/) Doing like in the picture will create a third tab: the "basic" (with all the smileys in the post form), the first line of the popup (the :'( in the picture) and the newly added.
It's possible to change the tab a smiley belongs to by changing the position both in "edit smileys" or in "set smiley order".
@@ -22,4 +22,5 @@ It's also possible to define a custom name for each tab and change the css style ## Change log * 0.1.0 - Complete rewrite for ElkArte and SCEditor - added only basic features -* 0.1.1 - Added support for ElkArte 1.0.1 (ElkArte 1.0 is no more supported) \ No newline at end of file +* 0.1.1 - Added support for ElkArte 1.0.1 (ElkArte 1.0 is no more supported) +* 0.2.0 - Added support for ElkArte 1.1.x (ElkArte 1.0 is no more supported) \ No newline at end of file diff --git a/TabbedSmiley.english.php b/TabbedSmiley.english.php deleted file mode 100644 index 2c81f3b..0000000 --- a/TabbedSmiley.english.php +++ /dev/null @@ -1,4 +0,0 @@ - - - + + emanuele:tabbed_smileys Tabbed smileys - 0.1.1 + 0.2.0 modification - + - + - + + - diff --git a/tabbedSmiley.css b/tabbedSmiley.css index 55bb11a..1823cd6 100644 --- a/tabbedSmiley.css +++ b/tabbedSmiley.css @@ -3,12 +3,13 @@ float: left; width: 100%; } + .sceditor-emot-head-tabs li { float: left; padding: 0 5px; margin-right: 2px; cursor: pointer; - border: 1px solid #000; + border: 1px solid #000000; border-bottom: 0; border-top-right-radius: 5px; border-top-left-radius: 5px; @@ -24,7 +25,15 @@ } .sceditor-tabs-active { - background: #5ba048; - background-image: linear-gradient(0deg, #4b863c, #5ba048); + background: #5BA048 linear-gradient(0deg, #4B863C, #5BA048); color: #fff; -} \ No newline at end of file +} + +/* Categorize your smileys by row in the admin panel (drag and drop) + then name your tabs using the following css, one for each row */ + +/* +.sceditor-emot-head-tabs > li:nth-child(2)::before {content: "Some Tab Name";} +.sceditor-emot-head-tabs > li:nth-child(3)::before {content: "Another Tab Name";} +... + */ \ No newline at end of file diff --git a/tabbedSmiley.integration.php b/tabbedSmiley.integration.php index fa3c128..9277006 100644 --- a/tabbedSmiley.integration.php +++ b/tabbedSmiley.integration.php @@ -6,7 +6,7 @@ * @author emanuele * @license BSD http://opensource.org/licenses/BSD-3-Clause * - * @version 0.1.2 + * @version 0.2.0 */ function tabbedSmiley($editorId) @@ -14,9 +14,11 @@ function tabbedSmiley($editorId) global $context, $txt; $context['controls']['richedit'][$editorId]['plugin_addons'][] = 'tabbedemotes'; + loadJavascriptFile('tabbedSmiley.js'); loadCSSFile('tabbedSmiley.css'); loadLanguage('TabbedSmiley'); + addJavascriptVar(array( 'TabbedSmileyLang' => '{ base: ' . JavaScriptEscape($txt['tabbedSmiley_base']) . ', diff --git a/tabbedSmiley.js b/tabbedSmiley.js index 373619d..3cbdf06 100644 --- a/tabbedSmiley.js +++ b/tabbedSmiley.js @@ -5,31 +5,48 @@ * @author emanuele * @license BSD http://opensource.org/licenses/BSD-3-Clause * - * @version 0.1.2 + * @version 0.2.0 */ -(function($, window, document) { +(function($, window, document){ 'use strict'; - var tabs = {}, tab_btns = {}; - /** - * Create the button of a tab - */ - function createBtn(idx, target, text, cssclass) + let tabs = {}, + tab_btns = {}; + + /** + * Create the button of a tab + */ + function createBtn(idx, target, text, cssclass, callback) + { + tab_btns[idx] = $('
  • ') + .data('target', target); + + if (callback) + { + tab_btns[idx].click(function (e) + { + e.preventDefault(); + callback(e); + }); + } + else { - tab_btns[idx] = $('
  • ') - .data('target', target); + tab_btns[idx].click(function (e) + { + let cur_id = $(this).attr('id'); - tab_btns[idx].click(function (e) { - var cur_id = $(this).attr('id'); e.preventDefault(); - $.each(tabs, function(idx, val) { + $.each(tabs, function (idx, val) + { $(tab_btns[idx]).removeClass('sceditor-tabs-active'); $(this).removeClass('visible').addClass('hidden'); - if ($(this).attr('id') == cur_id + '-tab' && !tab_btns[idx].added) + if ($(this).attr('id') === cur_id + '-tab' && !tab_btns[idx].added) + { $('#sceditor-smileycontainer').after(tabs[idx]); + } }); $(this).addClass('sceditor-tabs-active'); @@ -37,103 +54,106 @@ $(this).attr('src', $(this).attr('src-url')); }); }); - - tab_btns[idx].text(base._(text)); - - return tab_btns[idx]; } - /** - * Create the image of an emoticon (with events) - */ - function buildEmoticon(code, emoticon) { - if (emoticon === '') - return false; - else - return $('') - .attr({ - 'src-url': emoticon.url || emoticon, - alt: code, - title: emoticon.tooltip || emoticon - }) - .click(function (e) { - var start = '', - end = ''; - - if (base.opts.emoticonsCompat) - { - start = ' '; - end = ' '; - } - - if (base.inSourceMode()) - base.sourceEditorInsertText(' ' + $(this).attr('alt') + ' '); - else - base.wysiwygEditorInsertHtml(start + '' + end); - - e.preventDefault(); - }); - } + tab_btns[idx].text(base._(text)); - /** - * Attach the tabbed interface - */ - function addTabbed() { - var $btn_tabs = null, - $tabs = null; + return tab_btns[idx]; + } - var emoticons = $.extend({}, base.opts.emoticons.dropdown), - popup_exists = false, - smiley_popup = '', - $editor = $('#editor_toolbar_container'), - content = $('
    '); + /** + * Create the image of an emoticon (with events) + */ + function buildEmoticon(code, emoticon) + { + if (emoticon === '') + { + return false; + } - for (smiley_popup in base.opts.emoticons.popup) + return $('') + .attr({ + 'src-url': emoticon.url || emoticon, + alt: code, + title: emoticon.tooltip || emoticon + }) + .on('click', function (e) { - popup_exists = true; - break; - } + var start = '', + end = ''; - // For any smileys that go in the more popup - if (popup_exists) - { - var emots = $.extend({}, base.opts.emoticons.popup); + if (base.opts.emoticonsCompat) + { + start = ' '; + end = ' '; + } - if ($btn_tabs === null) + if (base.inSourceMode()) { - var count = 0, ccount = 0; + base.sourceEditorInsertText(' ' + $(this).attr('alt') + ' '); + } + else + { + base.wysiwygEditorInsertHtml(start + '' + end); + } - // On these two we build our system - $btn_tabs = $('
      '); - $tabs = $('
        '); + e.preventDefault(); + }); + } - $btn_tabs.append(createBtn('sceditor-smileycontainer-top', 'sceditor-smileycontainer', TabbedSmileyLang.base, 'active')); - tabs['sceditor-smileycontainer-top'] = $('#sceditor-smileycontainer'); + /** + * Attach the tabbed interface + */ + function addTabbed() + { + let $btn_tabs = null, + popup_exists = base.opts.emoticons.hasOwnProperty('popup'), + $editor = $('#editor_toolbar_container'), + content = $('
        '); + + // For any smileys that go in the more popup + if (popup_exists) + { + let emots = $.extend({}, base.opts.emoticons.popup), + tabName = '', + count = 0, + ccount = 0; + + // On this we build our system + $btn_tabs = $('
          '); + + // Start with the Base tab + $btn_tabs.append(createBtn('sceditor-smileycontainer-top', 'sceditor-smileycontainer', TabbedSmileyLang.base, 'active')); + tabs['sceditor-smileycontainer'] = $('#sceditor-smileycontainer'); + + // Each row is a tab, starting with "base" + $.each(emots, function (idx, val) { + // Start of a smiley row, starts a new tab + if (count === 0 || idx === '-' + ccount) + { + // Prepare a new panel + tabs['sceditor-tabs-' + count] = $('