[Tutorial] Text Shortcuts

Go down

[Tutorial] Text Shortcuts Empty [Tutorial] Text Shortcuts

Post by Wecoc 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:
[Tutorial] Text Shortcuts Shortc11

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:
[Tutorial] Text Shortcuts Shortc12

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:
[Tutorial] Text Shortcuts Shortc13

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
Wecoc
Wecoc
Forumember

Male Posts : 144
Reputation : 109
Language : Catalan, Spanish, English

View user profile

Back to top Go down

[Tutorial] Text Shortcuts Empty Re: [Tutorial] Text Shortcuts

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

Nice! *10*
Daemon
Daemon
Forumember

Posts : 104
Reputation : 90
Language : Português

View user profile

Back to top Go down

[Tutorial] Text Shortcuts Empty Re: [Tutorial] Text Shortcuts

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

thanks i can confirm this is working on punbb version
skouliki
skouliki
Manager
Manager

Female Posts : 10998
Reputation : 1386
Language : English,Greek
Location : Greece

View user profile http://iconskouliki.forumgreek.com

Back to top Go down

[Tutorial] Text Shortcuts Empty Re: [Tutorial] Text Shortcuts

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

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

Male Posts : 1089
Reputation : 131
Language : Spanish & English
Location : Mexico

View user profile http://asistencia.foroactivo.com/u21373

Back to top Go down

[Tutorial] Text Shortcuts Empty Re: [Tutorial] Text Shortcuts

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

This was great, man! Very Happy

Keep up the good work


[Tutorial] Text Shortcuts Sarkzk10
SarkZKalie
SarkZKalie
Support Moderator
Support Moderator

Male Posts : 1261
Reputation : 204
Language : English

View user profile https://rotavn.forumotion.com/

Back to top Go down

[Tutorial] Text Shortcuts Empty Re: [Tutorial] Text Shortcuts

Post by Wecoc 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.
Wecoc
Wecoc
Forumember

Male Posts : 144
Reputation : 109
Language : Catalan, Spanish, English

View user profile

Back to top Go down

Back to top


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