Dropdown for class library [#1510746]

I read this on your homepage:
http://ufku.com/drupal/bueditor/contributions/class-library

I know how i can add dropdowns with markup that will be inserted:

js: E.tagChooser([
['span', 'Blue', {'class': 'blue-text'}]
]);

I am not sure how i can add this t oa dropdown

E.toggleClass('error', 'div');

Another idea that i had was to make a dropdown with some "html templates". Like when i click it it adds som html structure to the textarea.

An example would be much appreciated.

thanks.

Comments

Comment #1

marcoka CreditAttribution: marcoka commented 31 March 2012 at 23:15

did some experiments, one solution i found for having some kind of class-library-dropdown

js:

/*Make sure these classes are defined in your theme css*/

var classes = {
 'error': 'Error message', 
 'warning': 'Warning message', 
 'ok': 'OK message', 
 'primary': 'Primary list', 
 'secondary': 'Secondary list', 
 'menu': 'Menu list', 
 'links': 'Links list', 
 'nowrap': 'Disable text wrap', 
 'form-item': 'Form item', 
 'clear-block': 'Clear floating'
 };
 
var html = '', 
default_tag = 'div';
$.each(classes, function(cname, title){  html += '<a href="#" title="'+ cname +'">'+ title +'</a>';
 });
 
 html = BUE.$html(html).click(function(){  E.classSelection(this.title, default_tag);  return false;
 });
 
 E.quickPop.open($('<div class="janjan-classes"></div>').append(html), 'slideDown');

Comment #2

ufku CreditAttribution: ufku commented 1 April 2012 at 09:29

Status:

Active

» Fixed

You can also use E.tagChooser as the popup generator and then alter the links in it.

js:
// Open tag chooser as usual with some class data.
E.tagChooser([['span', 'Ok', {'class': 'ok'}], ['span', 'Error', {'class': 'error'}]]);
// Unbind default click events of the links
var $links = $('.choice-link', E.quickPop).unbind('click');
// Set new click events.
$links.click(function() {
  E.classSelection(this.firstChild.className, 'div');
  return false;
});

Comment #3

marcoka CreditAttribution: marcoka commented 1 April 2012 at 10:26

Status:

Fixed

» Active

ok that works. i kind have another problem. when i only want to add some code when clicking a button in the dropdown.

Lets say if i click the button "template1" in the dropdown i want the following to be inserted:

<h1>sample</h1>
<div class="text">div with text sample</div>

i came up with

js:

/*Make sure these classes are defined in your theme css*/

//array holding template code
var templates= new Array();
templates["error"]    = "Brummbär";
templates["warning"]    = "<div>sadads</div>";

//buttons
var classes = {
 'error': 'Error message', 
 'warning': 'Warning message', 
 'ok': 'OK message', 
 'primary': 'Primary list', 
 'secondary': 'Secondary list', 
 'menu': 'Menu list', 
 'links': 'Links list', 
 'nowrap': 'Disable text wrap', 
 'form-item': 'Form item', 
 'clear-block': 'Clear floating'
 };
 
var html = '', 
default_tag = 'div';

$.each(classes, function(cname, title){  
  html += '<a href="#" title="'+ cname +'">'+ title +'</a>';
 });
 
html = BUE.$html(html).click(function(){  
  E.replaceSelection(templates[this.title]);
});
 
 E.quickPop.open($('<div class="janjan-classes"></div>').append(html), 'slideDown');