[Tutorial] Text Shortcuts

Go down

[Tutorial] Text Shortcuts

Post by Wecoc on May 2nd 2018, 2:33 am

Create a new SCEditor button to define text shortcuts!
There are pre-defined shortcuts for everyone, and also every user can define his own shortcuts.

Here's how it works, it's very easy:
To insert an existing shortcut you simply click the new shortcut icon, select one of the options and click Insert: The text will be inserted in your text area automatically.
To create a new shortcut click in the + button and define its name and content (you can copy/paste from your textarea). After that, click Create.
To delete an existing shortcut click in the - button. You can only delete your shortcuts, not the pre-defined ones via script.

Image:

The user can define as many shortcuts as he wants.
The user-defined shortcuts are stored in a hidden profile field, so they will not be removed even if he clears the forum cookies or browser cache.

Now I'll tell you how to insert this.

1) Create the profile field

To do that you have to go to:
Users & Groups Users Profiles Profile fields Add

Most important label is the 'Display', which must be picked in Profile and not picked in Messages.

Image:

2) Get the ID of the profile field


You have to inspect the element in a profile page of the forum itself, as far as I know it's the only way...
There you will see which ID corresponds to this field, that's a crucial step.

Image:

3) Add this in your CSS

Go to Display Colors CSS Stylesheet

This is used to hide the field in the profiles directly. They are also removed via javascript but without this they would still be visible while loading the profile page.
This code uses the field ID (in my case it's 2) so you will have to replace it for the one you got.
Code:
#field_id2, #field_id2 + .separator { display: none; }

4) Create a new Javascript

Modules HTML & Javascript Javascript codes management

Title: Text Shortcuts
Placement: In all the pages

Code:
/*
* -- Text Shortcuts --
* Version: 1.1 EN (2018-05-17)
* Author: Wecoc
* Description: New BBCode to insert user-defined shortcuts
*
* User-defined shortcuts are stored in a profile field using Ange Tuteur's method:
* http://fmdesign.forumotion.com/t559-solved-using-ajax-to-modify-user-profile#8706
*/
 
$(function() {
 
  /*--------------------- CONFIGURATION ---------------------*/
 
  // Define your version.
  // 0: phpBB2, 1: phpBB3, 2: punBB, 3: Invision, 4: modernBB
  var version = 1,
 
  // Default shortcuts (if any). Set it to [] if you don't want default shortcuts.
  default_shortcuts = [
    ["Hello World", "[b]This is an example[/b]"]
  ],
 
  // Shortcuts only for admins. Set it to [] if you don't want admin shortcuts.
  admin_shortcuts = [
    ["Spam", "[color=#ff3300][b]Please don't make spam[/b][/color]"],
    ["Flood", "[color=#ff3300][b]Please don't make flood[/b][/color]"]
  ],
 
  // ID of the profile field used to store the user shortcuts
  sp_id = 2,
 
  // Set here the texts to be displayed in your language
  lang = {
    insert:    "Insert",
    tooltip:  "Shortcuts",
    shortcuts: "Shortcuts:",
    add:      "Add shortcut",
    remove:    "Remove shortcut",
    name:      "Name:",
    content:  "Content:",
    create:    "Create"
  };
 
  /*------------------ END OF CONFIGURATION ------------------*/
 
  // Hide shortcuts field in profile
  var shortcut_field = document.querySelector('#field_id' + sp_id);
  var separator = document.querySelector('#field_id' + sp_id + ' + .separator');
  if (separator) separator.remove();
  if (shortcut_field) shortcut_field.remove();
  var shortcut_profile = document.querySelector('#profile_field_13_' + sp_id);
  if (shortcut_profile) shortcut_profile.parentElement.parentElement.remove();
 
  // Get shortcuts from profile field
  if (!$.sceditor) return;
  var user_shortcuts;
  $.get('/u' + _userdata.user_id, function(d) {
    var s = $('#field_id' + sp_id + ' dd input', d); if (!s) return;
    s = s[0].value; if (!s) s = "[]";
    user_shortcuts = JSON.parse(s);
  });
 
  // Set shortcuts back to the profile field (function)
  $.getScript('http://illiweb.com/rs3/25/frm/jquery/json/jquery.json-1.3.min.js', function() {
    window.$updateField = function(o, callback) {
      var c = new Array(),
          admin = $('a[href^="/admin/index.forum"]')[0],
          logout = document.getElementById('logout');
 
      c.push(new Array(o.name, o.value));
 
      $.post('/ajax_profile.forum?jsoncallback=?', {
            id : o.id.substring(8, o.id.length),
          user : o.user_id,
        active : '1',
        content : $.toJSON(c),
            tid : admin ? admin.href.replace(/.*?tid=(.*)/,'$1') : logout ? logout.href.replace(/.*?tid=(.*?)&.*/,'$1') : ''
      }, function(d) {
        callback && callback(d);
      }, 'json');
    };
    'par ange tuteur';
  });
 
  // Set new BBCode icon
  $('head').append($('<style>', {
    text: '.sceditor-button-shortcuts div{background-image: url(https://i62.servimg.com/u/f62/14/49/87/10/shortc10.png) !important}'
  }));
 
  $.sceditor.command.set('shortcuts', {
    dropDown : function(editor, caller, callback) {
      // Create shortcut select
      var a = document.createElement('DIV'), b = document.createElement('SELECT'), i;
      a.innerHTML = '<label unselectable="on">' + lang.shortcuts + '</label>';
      $(b).addClass("shortcut-select");
      ShortcutRefreshSelector(b);
      b.style.width = "100%";
      a.appendChild(b);
      editor.createDropDown(caller, 'shortcuts', a);
   
      // Create (+) button
      var plus = document.createElement('DIV');
      plus.innerHTML = '<img src="https://i62.servimg.com/u/f62/14/49/87/10/splus10.png" title="' + lang.add + '" alt="add"/>';
      plus.style.display = "inline-block";
      plus.style.margin = "2px";
      plus.style.cursor = "pointer";
      plus.onclick = function(){
        if (!document.querySelector('.shortcut-new')){
          ShortcutCreateNew(this);
        } else {
          document.querySelector('.shortcut-new').remove();
        }
      };
      a.appendChild(plus);
   
      // Create (-) button
      var minus = document.createElement('DIV');
      minus.innerHTML = '<img src="https://i62.servimg.com/u/f62/14/49/87/10/sminus10.png" title="' + lang.remove + '" alt="remove"/>';
      minus.style.display = "inline-block";
      minus.style.margin = "2px";
      minus.style.cursor = "pointer";
      minus.onclick = function(){ if (GetShortcutType(b.value) == 'user') { RemoveShortcut(b.value) }};
      a.appendChild(minus);
      ShortcutRefreshMinus();
   
      // Create insert button
      var c = document.createElement('DIV');
      c.innerHTML = '<input type="button" class="button" value="' + lang.insert + '">';
      c.onclick = function() {
        var index, text;
        index = parseInt(b.value.match(/\d+/)[0]);
        if (GetShortcutType(b.value) == 'default') {
          text = default_shortcuts[index][1];
        } else if (GetShortcutType(b.value) == 'admin') {
          text = admin_shortcuts[index][1];
        } else if (GetShortcutType(b.value) == 'user') {
          text = user_shortcuts[index][1];
        }
        callback(text);
        editor.closeDropDown(true);
        return false;
      };
      a.appendChild(c);
    },
    // wysiwyg
    exec : function(caller) {
      var editor = this; $.sceditor.command.get('shortcuts').dropDown(editor, caller, function(text) {
        editor.insert(text, '', true, true, true);
      });
    },
 
    // source
    txtExec : function(caller) {
      var editor = this; $.sceditor.command.get('shortcuts').dropDown(editor, caller, function(text) {
        editor.insert(text, '', true, true, true);
      });
    },
    tooltip : lang.tooltip
  });
  toolbar = toolbar.replace(/removeformat/,'removeformat,shortcuts'); // add the button to the toolbar
 
  function GetShortcutType(val) {
    if (val.includes('d')) {
      return 'default';
    } else if (val.includes('a')) {
      return 'admin';
    } else if (val.includes('u')) {
      return 'user';
    }
  }
 
  function ShortcutCreateNew(caller) {
    var new_div = document.createElement('DIV');
    $(new_div).addClass("sceditor-dropdown shortcut-new");
    new_div.style.padding = "10px";
    var a = document.createElement('DIV');
    a.innerHTML = '<label unselectable="on">' + lang.name +
      '</label><input type="text" class="inputbox" name="shortcut-name" value=""><label unselectable="on">' + lang.content +
      '</label><textarea class="inputbox" name="shortcut-content" rows="4"></textarea>';
    var c = document.createElement('DIV');
    c.innerHTML = '<input type="button" class="button" value="' + lang.create + '">';
    c.onclick = function() {
      var name = document.querySelector('input[name="shortcut-name"]').value;
      var content = document.querySelector('textarea[name="shortcut-content"]').value;
      AddShortcut(name, content);
      new_div.remove();
    };
    a.appendChild(c);
    new_div.appendChild(a);
    $(caller).after(new_div);
  }
 
  function ShortcutRefreshMinus() {
    var dropdown = document.querySelector('.sceditor-shortcuts'); if (!dropdown) return;
    var b = dropdown.querySelector('SELECT'), minus = dropdown.querySelector('img[alt="remove"]');
    if (GetShortcutType(b.value) == 'user') {
      minus.style.filter = 'opacity(1.0)';
    } else {
      minus.style.filter = 'opacity(0.3)';
    }
    setTimeout(function (){ ShortcutRefreshMinus() }, 200);
  }
 
  function ShortcutRefreshField() {
    $updateField({
      id: 'field_id' + sp_id,
      name: 'profile_field_13_' + sp_id,
      user_id: _userdata.user_id,
      value : JSON.stringify(user_shortcuts)
    });
  }
 
  function ShortcutRefreshSelector(selector) {
    selector.innerHTML = "";
    // Insert default shortcuts
    for (i = 0; i < default_shortcuts.length; i++) {
      var o = document.createElement('OPTION');
      o.value = 'd' + i;
      o.innerHTML = default_shortcuts[i][0];
      selector.appendChild(o);
    }
    // Insert admin shortcuts
    if (_userdata.user_level == 1) {
      for (i = 0; i < admin_shortcuts.length; i++) {
        var o = document.createElement('OPTION');
        o.value = 'a' + i;
        o.innerHTML = admin_shortcuts[i][0];
        selector.appendChild(o);
      }
    }
    // Insert user shortcuts
    for (i = 0; i < user_shortcuts.length; i++) {
      var o = document.createElement('OPTION');
      o.value = 'u' + i;
      o.innerHTML = user_shortcuts[i][0];
      selector.appendChild(o);
    }
  }
 
  function AddShortcut(name, content) {
    if (!name || !content) return;
    content = content.replace(new RegExp(/\n/, 'gm'), "<br>");
    content = content.replace(new RegExp(/\"/, 'gm'), "&" + "quot;");
    user_shortcuts.push([name, content]);
    var selector = document.querySelector('.shortcut-select');
    ShortcutRefreshField();
    ShortcutRefreshSelector(selector);
  }
 
  function RemoveShortcut(option) {
    var index = parseInt(option.match(/\d+/)[0]);
    user_shortcuts.splice(index, 1);
    var selector = document.querySelector('.shortcut-select');
    ShortcutRefreshField();
    ShortcutRefreshSelector(selector);
  }
});

The configuration part is in the beginning of the script, just follow the instructions inside the code.
There you have to set:
- The forum version
- Default shortcuts
- Default shortcuts (for admins only)
- ID of the profile field (same as before)
- Texts (language)

That's all, if there's any problem please tell me Smile


Last edited by Wecoc on May 17th 2018, 9:54 pm; edited 2 times in total
avatar
Wecoc
Forumember

Male Posts : 127
Reputation : 82
Language : Catalan, Spanish, English

http://www.mundo-maker.com/

Back to top Go down

Re: [Tutorial] Text Shortcuts

Post by Daemon on May 2nd 2018, 6:52 am

Nice! *10*
avatar
Daemon
Forumember

Posts : 100
Reputation : 79
Language : Português

Back to top Go down

Re: [Tutorial] Text Shortcuts

Post by skouliki on May 2nd 2018, 9:11 am

thanks i can confirm this is working on punbb version
avatar
skouliki
Graphic Designer
Graphic Designer

Female Posts : 3908
Reputation : 655
Language : English,Greek
Location : Greece

http://iconskouliki.forumgreek.com

Back to top Go down

Re: [Tutorial] Text Shortcuts

Post by YoshiGM on May 2nd 2018, 6:04 pm

So, in summary this is a "draft".. right ?
Good job dude Wink
avatar
YoshiGM
Forumember

Male Posts : 729
Reputation : 102
Language : Spanish, English & Italian (16%)
Location : Mexico

http://asistencia.foroactivo.com/u21373

Back to top Go down

Re: [Tutorial] Text Shortcuts

Post by SarkZKalie on May 2nd 2018, 9:08 pm

This was great, man! Very Happy

Keep up the good work
avatar
SarkZKalie
Forumember

Male Posts : 756
Reputation : 111
Language : English

http://rotavn.forumotion.com

Back to top Go down

Re: [Tutorial] Text Shortcuts

Post by Wecoc on May 17th 2018, 9:59 pm

New version 1.1 now available!
There was a bug in Internet Explorer causing the Dropbox to not always show up. It's fixed now.
avatar
Wecoc
Forumember

Male Posts : 127
Reputation : 82
Language : Catalan, Spanish, English

http://www.mundo-maker.com/

Back to top Go down

Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum