(function() {
tinymce.create('tinymce.plugins.Infoblock', {
/**
* Initializes the plugin, this will be executed after the plugin has been created.
* This call is done before the editor instance has finished it's initialization so use the onInit event
* of the editor instance to intercept that event.
*
* @param {tinymce.Editor} ed Editor instance that the plugin is initialized in.
* @param {string} url Absolute URL to where the plugin is located.
*/
init : function(ed, url) {
ed.addButton('infoblock', {
title : 'Info Block',
cmd : 'infoblock',
image : url + '/../images/icon/095-box-add.png'
});
ed.addCommand( 'infoblock', function() {
ed.windowManager.open({
title: 'Fill Info Block Data',
data: ['data'],
body: [
{name: 'width', type: 'textbox', size: 10, label: "Element's width (%)",
onchange: function() {
//e.data.title = this.value();
}},
{name: 'title', type: 'textbox', size: 40, label: 'Title',
onchange: function() {
//e.data.title = this.value();
}},
{name: 'url', type: 'textbox', size: 40, label: 'URL (can be empty)',
onchange: function() {
//e.data.url = this.value();
}},
{name: 'text', type: 'textbox', size: 40, label: 'Text',
onchange: function() {
//e.data.text = this.value();
}},
{name: 'pict', type: 'textbox', size: 40, label: 'URL to pictograph (can be empty)',
onchange: function() {
//e.data.url = this.value();
}}
],
onSubmit: function(e) {
//var data = e.data, href = data.href;
var res =
'
';
ed.insertContent(res);
}
});
});
ed.addButton('infoblock2', {
title : 'Info Block 2',
cmd : 'infoblock2',
image : url + '/../images/icon/095-box-add.png'
});
ed.addCommand( 'infoblock2', function() {
ed.windowManager.open({
title: 'Fill Info Block 2 Data',
data: ['data'],
body: [
{name: 'width', type: 'textbox', size: 10, label: "Element's width (%)",
onchange: function() {
//e.data.title = this.value();
}},
{name: 'title', type: 'textbox', size: 40, label: 'Title',
onchange: function() {
//e.data.title = this.value();
}},
{name: 'url', type: 'textbox', size: 40, label: 'URL (can be empty)',
onchange: function() {
//e.data.url = this.value();
}},
{name: 'text', type: 'textbox', size: 40, label: 'Text',
onchange: function() {
//e.data.text = this.value();
}},
{name: 'pict', type: 'textbox', size: 40, label: 'URL to pictograph (can be empty)',
onchange: function() {
//e.data.url = this.value();
}}
],
onSubmit: function(e) {
//var data = e.data, href = data.href;
var res =
'
';
ed.insertContent(res);
}
});
});
ed.addButton('imageblock', {
title : 'Image Block',
cmd : 'imageblock',
image : url + '/../images/icon/095-box-add.png'
});
ed.addCommand( 'imageblock', function() {
ed.windowManager.open({
title: 'Fill Image Block Data',
data: ['data'],
body: [
{name: 'width', type: 'textbox', size: 10, label: "Element's width (%)",
onchange: function() {
//e.data.title = this.value();
}},
{name: 'height', type: 'textbox', size: 10, label: "Element's height (px)",
onchange: function() {
//e.data.title = this.value();
}},
{name: 'caption', type: 'textbox', size: 40, label: 'Caption',
onchange: function() {
//e.data.title = this.value();
}},
{name: 'image', type: 'textbox', size: 40, label: 'Image URL',
onchange: function() {
//e.data.text = this.value();
}},
{name: 'url', type: 'textbox', size: 40, label: 'URL (can be empty)',
onchange: function() {
//e.data.url = this.value();
}}
],
onSubmit: function(e) {
//var data = e.data, href = data.href;
var res =
'
';
ed.insertContent(res);
}
});
});
ed.addButton('imageblock2', {
title : 'Image Block 2',
cmd : 'imageblock2',
image : url + '/../images/icon/095-box-add.png'
});
ed.addCommand( 'imageblock2', function() {
ed.windowManager.open({
title: 'Fill Image Block 2 Data',
data: ['data'],
body: [
{name: 'width', type: 'textbox', size: 10, label: "Element's width (%)",
onchange: function() {
//e.data.title = this.value();
}},
{name: 'height', type: 'textbox', size: 10, label: "Element's height (px)",
onchange: function() {
//e.data.title = this.value();
}},
{name: 'caption', type: 'textbox', size: 40, label: 'Caption',
onchange: function() {
//e.data.title = this.value();
}},
{name: 'image', type: 'textbox', size: 40, label: 'Image URL',
onchange: function() {
//e.data.text = this.value();
}},
{name: 'url', type: 'textbox', size: 40, label: 'URL (can be empty)',
onchange: function() {
//e.data.url = this.value();
}}
],
onSubmit: function(e) {
//var data = e.data, href = data.href;
var grey = '';
var res =
'
';
ed.insertContent(res);
}
});
});
ed.addButton('on_hover_transition', {
title : 'On Hover Effect',
cmd : 'on_hover_transition',
image : url + '/../images/icon/163-mug.png'
});
ed.addCommand( 'on_hover_transition', function() {
ed.windowManager.open({
title: 'Fill Data For On Hover Effect (apply to selected element)',
data: ['data'],
body: [
{
type: 'listbox',
name: 'effect',
label: 'Effect',
'values': [
{text: 'Hover Move Left', value: '1'},
{text: 'Hover Move Right', value: '2'},
{text: 'Hover Increase Size', value: '3'},
{text: 'Hover Decrease Size', value: '4'},
{text: 'Hover Rotate 5 degree CW', value: '5'},
{text: 'Hover Rotate 5 degree CCW', value: '6'},
]
}
],
onSubmit: function(e) {
//var data = e.data, href = data.href;
var eff = "";
switch (e.data.effect)
{
case "1": eff = "init_transition move_on_hover_left";
break;
case "2": eff = "init_transition move_on_hover_right";
break;
case "3": eff = "init_transition increase_on_hover";
break;
case "4": eff = "init_transition decrease_on_hover";
break;
case "5": eff = "init_transition rotate_on_hover_cw";
break;
case "6": eff = "init_transition rotate_on_hover_ccw";
break;
}
tinyMCE.activeEditor.dom.addClass(tinymce.activeEditor.selection.getNode(), eff);
}
});
});
ed.addButton('flipper', {
title : 'Flip Block',
cmd : 'flipper',
image : url + '/../images/icon/172-magnet.png'
});
ed.addCommand( 'flipper', function() {
ed.windowManager.open({
title: 'Fill HTML content of flip blocks',
data: ['data'],
body: [
{name: 'width', type: 'textbox', label: "Block Width (point %,px at the end)",
onchange: function() {
//e.data.title = this.value();
}},
{name: 'height', type: 'textbox', label: "Block Height (point px at the end)",
onchange: function() {
//e.data.title = this.value();
}},
{name: 'front_html', type: 'textbox', multiline:true, label: "Front HTML Content",
onchange: function() {
//e.data.title = this.value();
}},
{name: 'front_background', type: 'textbox', label: "Front Background Image URL",
onchange: function() {
//e.data.title = this.value();
}},
{name: 'front_background_color', type: 'textbox', label: "Block Front Background Color (without #)",
onchange: function() {
//e.data.title = this.value();
}},
{name: 'back_html', type: 'textbox', multiline:true, label: "Back HTML Content",
onchange: function() {
//e.data.title = this.value();
}},
{name: 'back_background', type: 'textbox', label: "Back Background Image URL",
onchange: function() {
//e.data.title = this.value();
}},
{name: 'back_background_color', type: 'textbox', label: "Block Back Background Color (without #)",
onchange: function() {
//e.data.title = this.value();
}}
],
onSubmit: function(e) {
//var data = e.data, href = data.href;
var fbi = (e.data.front_background!='') ? 'background:url('+e.data.front_background+') repeat;' : '';
var bbi = (e.data.back_background!='') ? 'background:url('+e.data.back_background+') repeat;' : '';
var fbc = (e.data.front_background_color!='') ? 'background-color:#'+e.data.front_background_color+';' : '';
var bbc = (e.data.back_background_color!='') ? 'background-color:#'+e.data.back_background_color+';' : '';
var res = ''+e.data.front_html+'
'+e.data.back_html+'
';
ed.insertContent(res);
}
});
});
ed.addButton('nummered_list', {
title : 'Apply 3-level nummered list',
cmd : 'nummered_list',
image : url + '/../images/icon/187-list.png'
});
ed.addCommand( 'nummered_list', function() {
ed.windowManager.open({
title: 'Apply 3-level numered list (apply to selected numered list)',
data: ['data'],
body: [
],
onSubmit: function(e) {
//var data = e.data, href = data.href;
tinyMCE.activeEditor.dom.addClass(tinymce.activeEditor.selection.getNode(), 'multilist');
}
});
});
}, /**
* Creates control instances based in the incomming name. This method is normally not
* needed since the addButton method of the tinymce.Editor class is a more easy way of adding buttons
* but you sometimes need to create more complex controls like listboxes, split buttons etc then this
* method can be used to create those.
*
* @param {String} n Name of the control to create.
* @param {tinymce.ControlManager} cm Control manager to use inorder to create new control.
* @return {tinymce.ui.Control} New control instance or null if no control was created.
*/
createControl : function(n, cm) {
return null;
},
/**
* Returns information about the plugin as a name/value array.
* The current keys are longname, author, authorurl, infourl and version.
*
* @return {Object} Name/value array containing information about the plugin.
*/
getInfo : function() {
return {
longname : 'Blue Squirrel Theme Buttons',
author : 'AlexDtn',
authorurl : 'http://insportgame.org/uk/wp_articles',
infourl : 'http://insportgame.org/uk/wp_article?id=1',
version : "0.1"
};
}
});
// Register plugin
tinymce.PluginManager.add( 'infoblock', tinymce.plugins.Infoblock );
})();