Tabbed Smiley v0.1.1IntroductionTabbed Smiley is the first mod I released for SMF and (at the time) the most tricky. Now I rewrote it to work with SCEditor and ElkArte in just few lines of code. :D
At the moment it's in the most basic form, it doesn't even have support for localization that will be added in the future.
Future development:
- Of course localization
- better admin interface and configuration
- Restore all the features including "tabbify" everything on the post screen (including subject, icons, bbcode, attachments and options... unless for 1.1 there is consensus on a radical change of the post interface :P)
Licenseo This ElkArte Addon is subject to the terms of the BSD "3-clause" license. You can obtain a copy of the License at http://opensource.org/licenses/BSD-3-Clause
CreditsThanks to
Sam Clarke (http://www.sceditor.com/) for creating SCEditor! :D
Repository / Download
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)
Coolness ... editor plugins :D
I think you are missing the modifications.xml file in the repo? (and your repo link above should have tree/elk O:-) )
Well, the first time I missed the css and the js, then I forgot to actually modify the modification.xml, and finally I forgot to add the xml file... O:-)
It's too late. lol
Thanks! ;D
Yep! :D
For me it's always a bit difficult find out how to do any, because javascript is not my friend lol, but then copying what we already have around (drafts and mentions mainly) it's usually "easy".
And compared to the original SMF mod, it's a dream being able to just have two very minor file edits (actually one could be avoided using hooks, though it would require several hooks to catch all the actions where the editor is used, and it still wouldn't load on custom pages, so the file edit still make sense <= i.e. Elk needs a hook for the editor :P).
As I wrote above it doesn't support localization yet, so the only thing you can do is replace it in tabbedSmiley.js:
'Base', 'active'));
and
'Tab ' + count
Okay, thank you. I'll try this in the meantime. :)
Um, would it be possible to add border lines below the "inactive" tabs, like the red line on the example image?
I think at the moment the html markup is not good enough to accommodate it...
I have to fix it.
ETA: memo http://css-tricks.com/css3-tabs/
There is a small error when uninstalling this addon ;)
2. Elimina File ./themes/default/css/tabbedSmiley.js Errore durante il parsing della modifica
it should be tabbedSmiley.css and not tabbedSmiley.js
/me takes note.
Thanks. ;D
How rename tabs?
Where "Tabs names and appearance" box?
I have not created after you drag a new tab
(ElkArte 1.0.3, Tabbed Smiley v0.1.1)
Gonna start messing with this. You have been warned. :D
ETA: Just noticed that any smiley set to "Popup" in admin automatically goes to Tab 1 on the post form, which is cool. However, it does mean that the default "More" button becomes redundant, so ideally that would be hidden if this mod was enabled.
Should be possible with the existing markup. You have a different class on the active tab anyway, so just targeting that should sort things out. I'll play around with it as soon as I have time.
Aha. No can do with existing markup. It doesn't need more HTML elements added to the markup, but it does need a change to the way classes are added to the markup.
The problem is that if any tab other than the base tab is active, the base tab will still have the sceditor-tabs-active class assigned to it. That's definitely a bug, since only the currently selected tab should have that class.
If that bug gets fixed, then styling it up so the active tab was different to the others would be easy.
Taking things further, although this mod is basically a good one it would be better if the admin was able to create tabs, and then assign smileys to a chosen tab. At the moment you can't do this, which can be a PITA sometimes (depending on how daft and extensive your smiley collection is).
The images in the readme file that show how to create new tabs are dead links.
How do you create new tabs?
Ops... sorry, that slipped through... :-[
In Elk you can put the smiley in the editor or in a popup. The popup can have lines of smiley.
This addon takes any line of smiley in the popup and converts it to a "tab", so you move the smiley to the popup and then to multiple lines and here you go with as many tabs as you want!
O:-) It's me again...
I have installed this addon right now in my testforum.
Creating more tabs is working perfect, but the button "More" is still there in the editor and the smiley-popup. But both should disappaer, if tabs are there?
The tabs have just numbers? ("Tab 1", "Tab 2", and so on) I can't give them other names?
We need a lot of tabs for our smileys. :-[
People would not remind which smiley is in which tab, if the tabs have just numbers...
I guess my problem is I don't know what makes a line of smilies a line. I have 3 tabs right now. Base, Tab 1 and Tab 2. How do I start a new line? I've tried selecting a smilie and clicking the various arrows that appear to be on their own separate line, but doing so doesn't put the selected smilie in a new tab. It just moves the smilie to the bottom of the existing tab.
I thought I created tab 2 with a drag-and-drop to the bottom of tab 1, but I haven't been able to reproduce whatever I did the first time.
It is working with drag and drop, you don't need to use the arrows you can see there.
The smiley for a new tab has to be in the editor first.
Than you "fetch him with the mouse and pull him down to a new line in the smiley-pop-up-window". (I don't know how to say this in English) O:-)
There is always a warning-popup, that it did not work, but it is working. If I close this warnig-popup, the smiley will be there in his line and a new tab is created.
Edit: Maybe you or me are using the wrong version of this addon? I downloaded and installed this one yesterday: http://www.elkarte.net/community/index.php?topic=2117.msg25752#msg25752 Tabbed-Smileys-elk.zip
But here in this topic it is Tabbed-Smiley_0-1-1.zip
I added this in tabbedSmiley.css and now the "More-Button" has disappeared:
.sceditor-more {
display: none;
}
Where can I find this, to give the tabs other names? Is it possible?
Ruth, I've installed tabbed smilies 1.1. Thanks for pointing that out! I'll try the one you installed.
Argh... I forgot to update the package in the first post of the topic...
Go to:
https://github.com/emanuele45/Tabbed-Smileys/tree/elk
click on the "clone or download" on the right and select "download zip". Use this package. ;)
I have installed it now, but it seems to me the same as I used yesterday, emanuele, the same files.
I can't do this... :'( there is nothing in the admin panel like this:
Likely the old (in the sense before being ported to Elk) description.
In the current level, the text can be changed via language file (TabbedSmiley.english.php) with the string:
$txt['tabbedSmiley_tabs'] = 'Tab {%d}';where {%d} represents the number (i.e. Tab 1, Tab 2, Tab 3, etc.).
I know it's limited, but for now it's better than nothing.
With some time I'll add back the full customization.
I don't understand this, sorry emanuele. O:-)
How can I change it? It is just one string for all the tabs, they will only have different numbers, not different names?
Can I add something like this with html in the tabbedSmiley.integration.php? One for each tab?
(http://www.elkarte.net/community/index.php?action=dlattach;topic=1749.0;attach=3798;image)
And, it works! The previous install was apparently missing a .js file or the file didn't install for some reason.
I was just saying to Oblivion that you could actually rename the tabs with CSS tweaks. Hide the default text in the tabs with text-indent, and use nth-child and a :before pseudo to put whatever visible names you want in each tab. Not that you'd use that method for a revamped version of the mod, but it would enable people to have custom names on their tabs with this version.
Just sayin' and all.
Are you addressing me, Antechinus? ;D
I have tried something like this in CSS, but I cannot figure it out. O:-) I know nothing about coding.
I would be very glad, if someone can show or explain me this css-trick
Should be easy enough, although I haven't tested this yet. I'd start by changing the language file to this:
$txt['tabbedSmiley_tabs'] = ' ';
That's just to give it some content that won't be visible, which is easier than what I was thinking before.
Anyway, the important part is assigning a :before pseudo element in the CSS and putting text there. Something like this should work:
sceditor-emot-head-tabs>li:nth-child(2):before {
content: "Any text you want";
}
sceditor-emot-head-tabs>li:nth-child(3):before {
content: "Another tab title";
}
sceditor-emot-head-tabs>li:nth-child(4):before {
content: "My penguin likes chocolate cake";
}
sceditor-emot-head-tabs>li:nth-child(5):before {
content: "There is chewing gum stuck to my seat";
}Etc.
Provided you don't need more than one language it would of course work. :)
Thank you very much, Antechinus.
I have tried that one (and several other things, which did not work):
$txt['tabbedSmiley_tabs'] = ' ';
sceditor-emot-head-tabs>li:nth-child(2):before { content: "Any text you want";}You will only see the
  in all tabs.
With this one, it is working nearly...but the
  is also there...
.sceditor-emot-head-tabs>li:nth-child(2):before {content: "Mehr";}
Oh!
It is working with this one:
$txt['tabbedSmiley_tabs'] = '';
.sceditor-emot-head-tabs>li:nth-child(2):before {content: "Mehr";}
.sceditor-emot-head-tabs>li:nth-child(3):before {content: "Typen";}
.sceditor-emot-head-tabs>li:nth-child(4):before {content: "Lustig";}
.sceditor-emot-head-tabs>li:nth-child(5):before {content: "Traurig";}
Emanuele, I did not change the english language file, it is still as before.
I made a TabbedSmiley.german.php for the changing
And there are no errors in the log. ;D
You made my day, Antechinus! Thank you!
This will be enough for the moment.
Emanuele, are you sure, that you will complete this addon one day? It is a lot of work, to sort all our smileys into tabs. If you don't finish the work on this addon, I will sort them now that way.
But if you will finish it, I will wait until the addon is complete. O:-)
You have the test in the css, so you have an empty string in the German file.
My comments means that if some any of your members is using another language (e.g. English) he will see the tabs in German anyway.
I guess it was mostly the same in the original mod as well, but it's such a long time ago I don't remember. LOL
Who knows.
It all depends on the various priorities.
Anyway, it's not that the way smiley are put into tabs will change in the future, so sorting them now or later will not change anything.
It is always difficult for me to understand proper, what I am reading here...sorry, Emanuele. O:-)
I know the words (well, most of them) ;) but very often I don't understand the context of meaning.
The complete addon would be very comfortable to use, because you can also sort the smileys on the side "change smileys" by the checkboxes and the dropdown, which would show all the tabs, which are existing.
If I sort them now into the tabs, I have to take each single smiley by "drag and drop", to bring him into his tab. It will take much more time that way. (We have got a lot of smileys)
But it is fine for me, to do it that way... I just wanted to know, if maybe the addon would be finished some day... ;)
My hoster deleted the database of my testforum yesterday, :( where I had tested this addon.
I don't want to upload a lot of smileys again, just for testing. I would like to install the addon now in my real forum.
But I need to know this first... please tell me, Emanuele:
The number of tabs is not limited? O:-) Can I be sure with this?
I offered this few days back if you need it.
As long as you can add new lines of smiley there will be tabs.
TBH I don't remember the limit of the database (I'd guess at least 128), but I don't know either how would look
many tabs.
Once upon a time I think I wrote a script to import bunches of smiley from a text fiel or maybe directly from the file names... I should search it or rewrite it.
Thank you very much, Ahrasis...this is a great offer from you. :) I read it here a few days ago. It is very kind of you, but I think , I will not need it. Yesterday my hoster prepared a new database for me and installed me a new ElkArte, so I have a testforum again. I have still all files on my pc, but a lot of tests, code-snippets, tests with color-combinations, etc. I had written there, have gone. :(
Emanuele, thank you very much.
We had about 50 O:-) Smiley-Tabs, while we were using SMF. The "Buttons" for the tabs, which took to much space in the first line in the editor, were automatically "jumping" into a new line. Maybe it will be the same now? I will try this addon today... ;)
It was looking like this with SMF:
:D I can't believe it. This is absolutly fantastic!
The smileys were still "sorted in lines" in the smiley-popup after the migration. So I tried to left them there and installed the addon. O:-) I need not to sort them all again, they are now in each tab to which they belong. (Normally it takes me a few weeks of work to sort them all). I am so glad! :)
I just add a margin-bottom: 2px; in tabbed.smiley.css to have a little space between the rows of tabs.
Emanuele , I will kiss your hands and feet for this addon! ;) (I don't know, if you can say so in English). It is really great! :)
That's luck for you! :P
Glad it worked so smooth. :)
Okay I have to ask this, but I installed this and I don't see any options about adding a tab or anything. All I see are the default settings for adding sets and smileys.
https://github.com/emanuele45/Tabbed-Smileys/tree/elk#configuration
I needed a version that would work with ElkArte 1.1, so here it is for anyone else in need. I made a PR to the official repo as well. Note this version will only work with 1.1
As with the 1.0 version, you need to use CSS to provide custom names your tabs, otherwise you will get the default Tab 1 ... Tab X. See the css file for details, simply each defined smiley row in the popup window can be given a tab name.
I've made another update to fix a performance issue.
The previous version waited for the editor to trigger a signalReady event to build the tabs. For some reason there is a long delay on that happening. The delay is not unique to Elk 1.1, which does use a newer version of the editor, as I noticed a similar delay on Elk 1.0, just not as long and annoying.
The updated version instead adds a DOM element watch, and as soon as the editor creates the needed smiley div, this runs and the tabs are created. So really as soon as you see the editor window the tabs are created, vs the previous 5ish second delay.