img.src = url;
}
- function applyPreview(items) {
- tinymce.each(items, function(item) {
- item.textStyle = function() {
- return editor.formatter.getCssText({inline: 'img', classes: [item.value]});
- };
- });
+ function buildListItems(inputList, itemCallback, startItems) {
+ function appendItems(values, output) {
+ output = output || [];
+
+ tinymce.each(values, function(item) {
+ var menuItem = {text: item.text || item.title};
+
+ if (item.menu) {
+ menuItem.menu = appendItems(item.menu);
+ } else {
+ menuItem.value = item.value;
+ itemCallback(menuItem);
+ }
+
+ output.push(menuItem);
+ });
+
+ return output;
+ }
- return items;
+ return appendItems(inputList, startItems || []);
}
function createImageList(callback) {
callback(tinymce.util.JSON.parse(text));
}
});
+ } else if (typeof(imageList) == "function") {
+ imageList(callback);
} else {
callback(imageList);
}
function showDialog(imageList) {
var win, data = {}, dom = editor.dom, imgElm = editor.selection.getNode();
- var width, height, imageListCtrl, classListCtrl;
-
- function buildValues(listSettingName, dataItemName, defaultItems) {
- var selectedItem, items = [];
-
- tinymce.each(editor.settings[listSettingName] || defaultItems, function(target) {
- var item = {
- text: target.text || target.title,
- value: target.value
- };
-
- items.push(item);
-
- if (data[dataItemName] === target.value || (!selectedItem && target.selected)) {
- selectedItem = item;
- }
- });
-
- if (selectedItem && !data[dataItemName]) {
- data[dataItemName] = selectedItem.value;
- selectedItem.selected = true;
- }
-
- return items;
- }
-
- function buildImageList() {
- var imageListItems = [{text: 'None', value: ''}];
-
- tinymce.each(imageList, function(image) {
- imageListItems.push({
- text: image.text || image.title,
- value: editor.convertURL(image.value || image.url, 'src'),
- menu: image.menu
- });
- });
-
- return imageListItems;
- }
+ var width, height, imageListCtrl, classListCtrl, imageDimensions = editor.settings.image_dimensions !== false;
function recalcSize() {
var widthCtrl, heightCtrl, newWidth, newHeight;
widthCtrl = win.find('#width')[0];
heightCtrl = win.find('#height')[0];
+ if (!widthCtrl || !heightCtrl) {
+ return;
+ }
+
newWidth = widthCtrl.value();
newHeight = heightCtrl.value();
function waitLoad(imgElm) {
function selectImage() {
imgElm.onload = imgElm.onerror = null;
- editor.selection.select(imgElm);
- editor.nodeChanged();
+
+ if (editor.selection) {
+ editor.selection.select(imgElm);
+ editor.nodeChanged();
+ }
}
imgElm.onload = function() {
- if (!data.width && !data.height) {
+ if (!data.width && !data.height && imageDimensions) {
dom.setAttribs(imgElm, {
width: imgElm.clientWidth,
height: imgElm.clientHeight
data.height = null;
}
- if (data.style === '') {
+ if (!data.style) {
data.style = null;
}
+ // Setup new data excluding style properties
data = {
src: data.src,
alt: data.alt,
"class": data["class"]
};
- if (!data["class"]) {
- delete data["class"];
- }
-
editor.undoManager.transact(function() {
// WP
var eventData = { node: imgElm, data: data, caption: caption };
return value;
}
- function srcChange() {
+ function srcChange(e) {
+ var meta = e.meta || {};
+
if (imageListCtrl) {
imageListCtrl.value(editor.convertURL(this.value(), 'src'));
}
- getImageSize(this.value(), function(data) {
- if (data.width && data.height) {
- width = data.width;
- height = data.height;
-
- win.find('#width').value(width);
- win.find('#height').value(height);
- }
+ tinymce.each(meta, function(value, key) {
+ win.find('#' + key).value(value);
});
+
+ if (!meta.width && !meta.height) {
+ getImageSize(this.value(), function(data) {
+ if (data.width && data.height && imageDimensions) {
+ width = data.width;
+ height = data.height;
+
+ win.find('#width').value(width);
+ win.find('#height').value(height);
+ }
+ });
+ }
}
width = dom.getAttrib(imgElm, 'width');
imageListCtrl = {
type: 'listbox',
label: 'Image list',
- values: buildImageList(),
+ values: buildListItems(
+ imageList,
+ function(item) {
+ item.value = editor.convertURL(item.value || item.url, 'src');
+ },
+ [{text: 'None', value: ''}]
+ ),
value: data.src && editor.convertURL(data.src, 'src'),
onselect: function(e) {
var altCtrl = win.find('#alt');
altCtrl.value(e.control.text());
}
- win.find('#src').value(e.control.value());
+ win.find('#src').value(e.control.value()).fire('change');
},
onPostRender: function() {
imageListCtrl = this;
name: 'class',
type: 'listbox',
label: 'Class',
- values: applyPreview(buildValues('image_class_list', 'class'))
+ values: buildListItems(
+ editor.settings.image_class_list,
+ function(item) {
+ if (item.value) {
+ item.textStyle = function() {
+ return editor.formatter.getCssText({inline: 'img', classes: [item.value]});
+ };
+ }
+ }
+ )
};
}
// General settings shared between simple and advanced dialogs
var generalFormItems = [
- {name: 'src', type: 'filepicker', filetype: 'image', label: 'Source', autofocus: true, onchange: srcChange},
+ {
+ name: 'src',
+ type: 'filepicker',
+ filetype: 'image',
+ label: 'Source',
+ autofocus: true,
+ onchange: srcChange
+ },
imageListCtrl
];
generalFormItems.push({name: 'alt', type: 'textbox', label: 'Image description'});
}
- if (editor.settings.image_dimensions !== false) {
+ if (imageDimensions) {
generalFormItems.push({
type: 'container',
label: 'Dimensions',
}
}
- // WP
- editor.addCommand( 'mceImage', function() {
- createImageList( showDialog )();
- });
-
editor.addButton('image', {
icon: 'image',
tooltip: 'Insert/edit image',
context: 'insert',
prependToContext: true
});
+
+ editor.addCommand('mceImage', createImageList(showDialog));
});