Moving The Dice Rolling To Quick Reply.

Hello Forumotion,
I have a question about the dice rolling.

Is there a way to move/copy the dice rolling section from the advanced reply to the simple reply?
As in rolling from the quick reply box.

Note: I know there's the BBC but I don't want that.

Bump~

Hello @RsS.YuGi,

Go to Administration Panel > Modules > JavaScript codes management > Create a new script

Title : faroll
Placement : In all the pages
Paste the following code and submit :

Code:

$(function(){$(function() {
  if (!$.sceditor || $('.sceditor-button-faroll').length) return; // return if the editor isn't present or the dice exist
  var a = document.createElement('A'), b = document.createElement('DIV'), c = $('.sceditor-button-emoticon')[0], sce = $('#text_editor_textarea').sceditor('instance'), i = 0, j = dice.length, opt, n;
 
  // button attributes
  a.className = 'sceditor-button sceditor-button-faroll';
  a.title = $.sceditor.commands.faroll.tooltip;
  a.innerHTML = '<div unselectable="on"></div>';
  a.onclick = function() { b.style.display.match(/none/) ? b.style.display = '' : b.style.display = 'none' };
  a.onmouseover = function() { a.className.match(/disabled/) && (a.className = a.className.replace(/disabled/,'')) }; // remove disabled caused by source change
 
  // dropdown attributes
  b.className = 'sceditor-dropdown sceditor-faroll-picker';
  b.style.display = 'none';
  b.style.marginTop = '25px';
 
  // create dice roll options
  for (; i<j; i++) {
    n = dice[i];
    opt = document.createElement('A');
    opt.className = 'sceditor-fontsize-option';
    opt.innerHTML = n;
    opt.onclick = function() {
      sce.inSourceMode() ? sce.sourceEditorInsertText('[roll="'+n+'"][/roll]') : sce.wysiwygEditorInsertText('[roll="'+n+'"][/roll]');
      b.style.display = 'none';
    };
    b.appendChild(opt);
  }
 
  // insert button and dropdown
  c.parentNode.insertBefore(a,c);
  c.parentNode.insertBefore(b,c);
})});

Hello "Ange Tuteur",
Thanks for replying but I think you misunderstood, That code is to make the BB codes work in the quick reply, what I seek is having the whole dice section that you'd have from the advanced reply copied under the quick reply.

I hope it's clear enough, if it's not.. I'll try including screens.

I see what you mean now. What's the version of your forum so I can include the proper HTML ?

Ange Tuteur wrote:I see what you mean now. What's the version of your forum so I can include the proper HTML ?

Hello @Ange Tuteur, sorry I forgot to mention the version, it's PHPBB2.
=)

Go to Administration Panel > Modules > JavaScript codes management and create a new script

Placement : In the topics
Paste the code below and submit :

Code:

$(function() {
  var a = document.createElement('DIV'), d, o, i = 0, j = dice.length;
  a.innerHTML = '<table class="forumline" border="0" cellpadding="0" cellspacing="1" width="100%"><tbody><tr><th class="thHead" colspan="2"><table width="100%"><tbody><tr><td width="10">&nbsp;</td><td align="center"><span class="gen"><b>Dices roll</b></span></td></tr></tbody></table></th></tr><tr><td class="row1"><table style="width:100%" id="list_dice"><tbody><tr><td><span class="postbody">Dices roll #1 :&nbsp;</span><select name="post_dice_0" id="post_dice"><option value="">-</option></select><span class="postbody">&nbsp;<label for="nb_rolls_0">Dice rolls : </label><input size="2" maxlength="3" name="nb_rolls_0" id="nb_rolls_0" class="post" value="1" type="text">&nbsp;<span id="dice_to_del"><a href="javascript:add_dice(1,\'\',1)"><img class="sprite-tabs_more" src="http://2img.net/i/fa/empty.gif" alt="plus"></a></span></span></td></tr></tbody></table></td></tr></tbody></table>';
 
  add_dice = function(dice_number,dice,number) {
    var content = document.getElementById('post_dice').innerHTML;
    document.getElementById('dice_to_del').innerHTML = '';
    document.getElementById('dice_to_del').id = '';
    var new_tr = document.createElement('tr');
    new_tr.appendChild(document.createElement('td'));
    new_tr.firstChild.innerHTML = '<span class="postbody">Dices roll #' + (dice_number + 1) + ' :&nbsp;</span><select name="post_dice_' + dice_number + '" id="post_dice_' + dice_number + '" value="' + dice + '">' + content + '</select><span class="postbody">&nbsp;<label for="nb_rolls_' + dice_number + '">Dice rolls : </label><input type="text" size="2" maxlength="3" name="nb_rolls_' + dice_number + '" id="nb_rolls_' + dice_number + '" class="post" value="' + number + '" />&nbsp;<span id="dice_to_del"><a href="javascript:add_dice(' + (dice_number + 1) + ',\'\',1)"><img class="sprite-tabs_more" src="http://2img.net/i/fa/empty.gif" alt="plus" /></a></span></span>';
    document.getElementById('list_dice').lastChild.appendChild(new_tr);
    var select_dice = document.getElementById('post_dice_' + dice_number);
    if ( dice == '' ) select_dice.selectedIndex = 0;
    for ( var i = 1; select_dice.options[i]; i++ ) select_dice.options[i].selected = ( select_dice.options[i].value == dice );
  };
 
  document.getElementById('quick_reply').appendChild(a);
  for (d = document.getElementById('post_dice'); i<j; i++) {
    o = document.createElement('OPTION');
    o.value = i + 1;
    o.innerHTML = dice[i];
    d.appendChild(o);
  }
});

Hello @Ange Tuteur,
The dice section has been added under the quick reply but it's empty.
http://pokit.org/get/?20b7c77c8b4b5d8cece6ccaa89d823fd.jpg

Note, I have dice games made and stuff:
http://pokit.org/get/?678b79e2a365d83b038261596e55492d.jpg

That's weird.. dice is actually a global array and is present in the editor, so I'm not sure how it was unable to create the options. Anyway, I changed up how the options are created, see if it works for you now.

Code:

$(function() {
  if (!document.getElementById('quick_reply') || !dice) return;
  var a = document.createElement('DIV'), d = '', i = 0, j = dice.length;
  for (; i<j; i++) d += '<option value="'+(i+1)+'">'+dice[i]+'</option>';
  a.innerHTML = '<table class="forumline" border="0" cellpadding="0" cellspacing="1" width="100%"><tbody><tr><th class="thHead" colspan="2"><table width="100%"><tbody><tr><td width="10"> </td><td align="center"><span class="gen"><b>Dices roll</b></span></td></tr></tbody></table></th></tr><tr><td class="row1"><table style="width:100%" id="list_dice"><tbody><tr><td><span class="postbody">Dices roll #1 : </span><select name="post_dice_0" id="post_dice"><option value="">-</option>'+d+'</select><span class="postbody"> <label for="nb_rolls_0">Dice rolls : </label><input size="2" maxlength="3" name="nb_rolls_0" id="nb_rolls_0" class="post" value="1" type="text"> <span id="dice_to_del"><a href="javascript:add_dice(1,\'\',1)"><img class="sprite-tabs_more" src="http://2img.net/i/fa/empty.gif" alt="plus"></a></span></span></td></tr></tbody></table></td></tr></tbody></table>';
 
  add_dice = function(dice_number,dice,number) {
    var content = document.getElementById('post_dice').innerHTML;
    document.getElementById('dice_to_del').innerHTML = '';
    document.getElementById('dice_to_del').id = '';
    var new_tr = document.createElement('tr');
    new_tr.appendChild(document.createElement('td'));
    new_tr.firstChild.innerHTML = '<span class="postbody">Dices roll #' + (dice_number + 1) + ' : </span><select name="post_dice_' + dice_number + '" id="post_dice_' + dice_number + '" value="' + dice + '">' + content + '</select><span class="postbody"> <label for="nb_rolls_' + dice_number + '">Dice rolls : </label><input type="text" size="2" maxlength="3" name="nb_rolls_' + dice_number + '" id="nb_rolls_' + dice_number + '" class="post" value="' + number + '" /> <span id="dice_to_del"><a href="javascript:add_dice(' + (dice_number + 1) + ',\'\',1)"><img class="sprite-tabs_more" src="http://2img.net/i/fa/empty.gif" alt="plus" /></a></span></span>';
    document.getElementById('list_dice').lastChild.appendChild(new_tr);
    var select_dice = document.getElementById('post_dice_' + dice_number);
    if ( dice == '' ) select_dice.selectedIndex = 0;
    for ( var i = 1; select_dice.options[i]; i++ ) select_dice.options[i].selected = ( select_dice.options[i].value == dice );
  };
 
  document.getElementById('quick_reply').appendChild(a);
});

@Ange Tuteur sorry for the troubles, but still same issue :|

I want you to check if you have access to dice in the topics.

Create a new script with placement in the topics, and paste the following code :

Code:

$(function() {
  var q = document.getElementById('quick_reply'), a = document.createElement('DIV'), d = dice;
 
  if (d.length) {
    for (var i = 0, j = d.length; i<j; i++) a.innerHTML += d[i] + '<br/>';
    q.appendChild(a);
  } else {
    a.innerHTML = '<span style="color:red">dice is not available</span>';
    q.appendChild(a);
  }
});

Then go to a topic and see if the names of your dice are under the editor. If you don't have access it'll show the following message :

Yep, not available. 
So is there anything to be done  ? Sorry for troubling you so much.

We'll just have to use AJAX and localStorage to store your dice for 24h to prevent multiple requests. Replace your script with this :

Code:

$(function() {
  if (!document.getElementById('quick_reply')) return;
  var a = document.createElement('DIV'), storage = window.localStorage;
  if (storage && storage.faDice && storage.faDiceExp > +new Date - 24*60*60*1000) formDice(storage.faDice);
  else {
    $.post('/post',{
      message : 'preview',
      mode : 'reply',
      t : document.post.t.value,
      preview : 1
    },function(d){
      var opts = $('#post_dice',d)[0].innerHTML;
      formDice(opts);
      if (storage) {
        storage.faDice = opts;
        storage.faDiceExp = +new Date;
      }
    });
  }
 
  add_dice = function(dice_number,dice,number) {
    var content = document.getElementById('post_dice').innerHTML;
    document.getElementById('dice_to_del').innerHTML = '';
    document.getElementById('dice_to_del').id = '';
    var new_tr = document.createElement('tr');
    new_tr.appendChild(document.createElement('td'));
    new_tr.firstChild.innerHTML = '<span class="postbody">Dices roll #' + (dice_number + 1) + ' : </span><select name="post_dice_' + dice_number + '" id="post_dice_' + dice_number + '" value="' + dice + '">' + content + '</select><span class="postbody"> <label for="nb_rolls_' + dice_number + '">Dice rolls : </label><input type="text" size="2" maxlength="3" name="nb_rolls_' + dice_number + '" id="nb_rolls_' + dice_number + '" class="post" value="' + number + '" /> <span id="dice_to_del"><a href="javascript:add_dice(' + (dice_number + 1) + ',\'\',1)"><img class="sprite-tabs_more" src="http://2img.net/i/fa/empty.gif" alt="plus" /></a></span></span>';
    document.getElementById('list_dice').lastChild.appendChild(new_tr);
    var select_dice = document.getElementById('post_dice_' + dice_number);
    if ( dice == '' ) select_dice.selectedIndex = 0;
    for ( var i = 1; select_dice.options[i]; i++ ) select_dice.options[i].selected = ( select_dice.options[i].value == dice );
  };
  function formDice(dice) {
    a.innerHTML = '<table class="forumline" border="0" cellpadding="0" cellspacing="1" width="100%"><tbody><tr><th class="thHead" colspan="2"><table width="100%"><tbody><tr><td width="10"> </td><td align="center"><span class="gen"><b>Dices roll</b></span></td></tr></tbody></table></th></tr><tr><td class="row1"><table style="width:100%" id="list_dice"><tbody><tr><td><span class="postbody">Dices roll #1 : </span><select name="post_dice_0" id="post_dice">'+dice+'</select><span class="postbody"> <label for="nb_rolls_0">Dice rolls : </label><input size="2" maxlength="3" name="nb_rolls_0" id="nb_rolls_0" class="post" value="1" type="text"> <span id="dice_to_del"><a href="javascript:add_dice(1,\'\',1)"><img class="sprite-tabs_more" src="http://2img.net/i/fa/empty.gif" alt="plus"></a></span></span></td></tr></tbody></table></td></tr></tbody></table>';
    document.getElementById('quick_reply').appendChild(a);
  };
});

It's working perfectly!
Thank you very much Ange =)


Solved.

Super, you're welcome.

Topic archived

Have a nice day.