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.
-[](http://img253.imageshack.us/i/newrow.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..2537af2 100644
--- a/tabbedSmiley.js
+++ b/tabbedSmiley.js
@@ -5,31 +5,50 @@
* @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 = {},
+ editor,
+ $btn_tabs;
+
+ /**
+ * Create the button of a tab
+ */
+ function createBtn(idx, target, text, cssclass, callback)
+ {
+ tab_btns[idx] = $('')
+ .data('target', target);
+
+ if (callback)
{
- tab_btns[idx] = $('')
- .data('target', target);
+ tab_btns[idx].click(function (e)
+ {
+ e.preventDefault();
+ callback(e);
+ });
+ }
+ else
+ {
+ 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,109 +56,148 @@
$(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 + '.attr()
' + end);
-
- e.preventDefault();
- });
- }
+ tab_btns[idx].text(editor._(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;
- }
+ let start = '',
+ end = '';
- // For any smileys that go in the more popup
- if (popup_exists)
- {
- var emots = $.extend({}, base.opts.emoticons.popup);
+ if (editor.opts.emoticonsCompat)
+ {
+ start = ' ';
+ end = ' ';
+ }
- if ($btn_tabs === null)
+ if (editor.inSourceMode())
+ {
+ editor.sourceEditorInsertText(' ' + $(this).attr('alt') + ' ');
+ }
+ else
{
- var count = 0, ccount = 0;
+ editor.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()
+ {
+ // For any smileys that go in the popup
+ if (editor.opts.emoticons.hasOwnProperty('popup'))
+ {
+ let emots = {},
+ tabName = '',
+ count = 0,
+ ccount = 0;
+
+ // On this we build our system
+ Object.assign(emots, editor.opts.emoticons.popup);
+ $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" which holds the smiles not in "more"
+ $.each(emots, function (idx, val) {
+ // Start of a smiley row, starts a new tab
+ if (count === 0 || idx === '-' + ccount)
+ {
+ // Prepare a new tab
+ tabs['sceditor-tabs-' + count] = $('');
+ ccount = count;
+ tabName = TabbedSmileyLang.tabs.replace('{%d}', count + 1);
- $.each(emots, function (idx, val) {
- if (count == 0 || val == '')
- {
- // Prepare a new panel
- tabs['sceditor-tabs-' + count] = $('');
- ccount = count;
- $btn_tabs.append(createBtn('sceditor-tabs-' + count++, 'sceditor-tabs-' + ccount + '-tab', TabbedSmileyLang.tabs.replace('{%d}', parseInt(count))));
- }
+ $btn_tabs.append(createBtn('sceditor-tabs-' + count++, 'sceditor-tabs-' + ccount + '-tab', tabName));
+ }
- tabs['sceditor-tabs-' + ccount].append(buildEmoticon(idx, val));
- });
- content.before($btn_tabs);
+ // Add the smiley to the current tab
+ tabs['sceditor-tabs-' + ccount].append(buildEmoticon(idx, val));
+ });
+ }
+ }
- $editor.find('.sceditor-insertemoticon').before($btn_tabs);
- }
+ /**
+ * Waits for an element to appear in the DOM and then triggers
+ *
+ * @param {string} selector wait for this element to show up in DOM
+ * @returns {Promise}
+ */
+ function waitForElm(selector) {
+ return new Promise(resolve =>
+ {
+ if (document.querySelector(selector))
+ {
+ return resolve(document.querySelector(selector));
}
- }
+
+ const observer = new MutationObserver(mutations =>
+ {
+ if (document.querySelector(selector))
+ {
+ resolve(document.querySelector(selector));
+ observer.disconnect();
+ }
+ });
+
+ observer.observe(document.body, {
+ childList: true,
+ subtree: true
+ });
+ });
+ }
/**
- * Mentioning plugin interface to SCEditor
+ * Plugin interface to SCEditor
* - Called from the editor as a plugin
*/
$.sceditor.plugins.tabbedemotes = function() {
- var base = this;
+ let base = this;
/**
* Initialize, called when sceditor starts and initializes plugins
*/
- base.signalReady = function() {
- addTabbed();
+ base.init = function() {
+ editor = this;
+
+ // Create/Insert the tabs as soon as the DOM supports it (e.g. editor has created the smiley div)
+ // Could use base.signalReady but that is taking over 10seconds to fire
+ waitForElm('#sceditor-smileycontainer').then((elm) => {
+ // Build those beautiful tabs
+ addTabbed();
+
+ let $editor = $('#editor_toolbar_container'),
+ content = $('');
+
+ content.before($btn_tabs);
+ $editor.find('.sceditor-insertemoticon').before($btn_tabs);
+ })
};
};
-})(jQuery, window, document);
\ No newline at end of file
+})(jQuery, window, document);