smileys button [#336975]

I managed to make this code for loading a button with the smileys. It gets data via ajax from the smilyes module, but this means that is also slow.
I am looking for a way of caching that data or at least not loading it on each usage of the button...

js:
editor.dialog.open(editor.buttons[E.bindex][0], '')
$.get('/live/smileys', function(data){ 
  html = data.replace('<div class="smileysWindowtext">Click to insert acronym. [<span class="smiley-class" id="closeSmileys">Close</span>]</div><div class="smileysWindow">', '<div id="dialogSmile" style="width:250px">');
  editor.dialog.open(editor.buttons[E.bindex][0], html)
  $('#dialogSmile').ready(function(){
    $('img.smiley-class').click(function(){
      editor.active.replaceSelection(this.alt);
      editor.dialog.close();
    })
  })
})

Comments

Comment #1

websites-development.com commented 24 November 2008 at 14:51

with a little optimization:

js:
if ( window['loadsmilies'] !== undefined ) {
  editor.dialog.open(editor.buttons[E.bindex][0], window['loadsmilies'])
  $('#dialogSmile').ready(function(){
    $('img.smiley-class').click(function(){
      editor.active.replaceSelection(this.alt)
      editor.dialog.close()
    })
  })
} else {
  editor.dialog.open(editor.buttons[E.bindex][0], '')
  $.get('/live/smileys', function(data){ 
    window['loadsmilies'] = data.replace('<div class="smileysWindowtext">Click to insert acronym. [<span class="smiley-class" id="closeSmileys">Close</span>]</div><div class="smileysWindow">', '<div id="dialogSmile" style="width:250px">');
    editor.dialog.open(editor.buttons[E.bindex][0], window['loadsmilies'] )
    $('#dialogSmile').ready(function(){
      $('img.smiley-class').click(function(){
        editor.active.replaceSelection(this.alt)
        editor.dialog.close()
      })
    })
  })
}

Comment #2

websites-development.com commented 15 December 2008 at 09:58

to get a loading icon:
instead of

editor.dialog.open(editor.buttons[E.bindex][0], '')

put

editor.dialog.open(editor.buttons[E.bindex][0], '<div style="width: 200px; height: 50px; background-image: url(/modules/system/../../misc/throbber.gif); background-position: 50% -18px; background-repeat: no-repeat"></div>')