oxjs/source/UI/js/Form/InsertHTMLDialog.js

223 lines
6.9 KiB
JavaScript
Raw Normal View History

2012-02-16 16:35:59 +00:00
'use strict';
2012-05-21 10:38:18 +00:00
/*@
2012-05-31 10:32:54 +00:00
Ox.InsertHTMLDialog <f> Insert HTML Dialog
2012-05-21 10:38:18 +00:00
options <o> Options
self <o> Shared private variable
([options[, self]]) -> <o:Ox.Dialog> Insert HTML Dialog
2012-05-21 10:38:18 +00:00
@*/
2012-02-16 16:35:59 +00:00
Ox.InsertHTMLDialog = function(options, self) {
var that;
self = self || {};
self.options = Ox.extend({
callback: void 0,
end: 0,
selection: '',
start: 0
}, options || {});
2012-02-16 18:04:25 +00:00
self.type = self.options.selection.indexOf('\n') > -1
? 'textarea' : 'input';
2012-02-16 16:35:59 +00:00
self.items = [
2013-05-09 13:03:33 +00:00
{id: 'img', title: Ox._('Image')},
{id: 'a', title: Ox._('Link')},
{id: 'li', title: Ox._('List')},
2012-02-16 16:35:59 +00:00
{},
2013-05-09 13:03:33 +00:00
{id: 'blockquote', title: Ox._('Blockquote')},
{id: 'h1', title: Ox._('Headline')},
{id: 'p', title: Ox._('Paragraph')},
{id: 'div', title: Ox._('Right-to-Left')},
2012-02-16 16:35:59 +00:00
{},
2013-05-09 13:03:33 +00:00
{id: 'b', title: Ox._('Bold')},
{id: 'i', title: Ox._('Italic')},
{id: 'code', title: Ox._('Monospace')},
{id: 's', title: Ox._('Strike')},
{id: 'sub', title: Ox._('Subscript')},
{id: 'sup', title: Ox._('Superscript')},
{id: 'u', title: Ox._('Underline')},
2012-02-16 16:35:59 +00:00
{},
2013-05-09 13:03:33 +00:00
{id: 'br', title: Ox._('Linebreak')}
2012-02-16 16:35:59 +00:00
].map(function(item, i) {
var form, format;
if (item.id == 'img') {
form = [
Ox.Input({
id: 'url',
label: 'URL',
labelWidth: 128,
width: 384
})
];
format = function(values) {
return '<img src="' + values.url + '"/>';
};
} else if (item.id == 'a') {
form = [
Ox.Input({
2012-02-16 18:04:25 +00:00
height: 104,
2012-02-16 16:35:59 +00:00
id: 'text',
label: 'Text',
labelWidth: 128,
2012-02-16 18:04:25 +00:00
type: self.type,
2012-02-16 16:35:59 +00:00
width: 384,
value: self.options.selection
2012-02-16 18:04:25 +00:00
})
.css({background: 'transparent'}),
2012-02-16 16:35:59 +00:00
Ox.Input({
id: 'url',
label: 'URL',
labelWidth: 128,
width: 384
})
];
format = function(values) {
return '<a href="' + values.url + '">' + values.text + '</a>';
};
} else if (item.id == 'li') {
form = [
Ox.Select({
id: 'style',
items: [
2013-05-09 13:03:33 +00:00
{id: 'ul', title: Ox._('Bullets')},
{id: 'ol', title: Ox._('Numbers')}
2012-02-16 16:35:59 +00:00
],
label: 'Style',
labelWidth: 128,
width: 384
}),
Ox.ArrayInput({
id: 'items',
label: 'Items',
max: 10,
2012-02-16 18:04:25 +00:00
value: self.options.selection.split('\n'),
2012-02-16 16:35:59 +00:00
width: 384
})
];
format = function(values) {
return '<' + values.style + '>\n' + values.items.map(function(value) {
return '<li>' + value + '</li>\n';
}).join('') + '</' + values.style + '>';
};
} else if (['p', 'blockquote', 'div'].indexOf(item.id) > -1) {
form = [
Ox.Input({
height: 128,
2012-02-16 18:04:25 +00:00
id: 'text',
label: 'Text',
labelWidth: 128,
2012-02-16 16:35:59 +00:00
type: 'textarea',
2012-02-16 18:04:25 +00:00
value: self.options.selection,
width: 384
2012-02-16 16:35:59 +00:00
})
2012-02-16 18:04:25 +00:00
.css({background: 'transparent'})
2012-02-16 16:35:59 +00:00
];
format = function(values) {
return '<' + item.id + (
item.id == 'div' ? ' style="direction: rtl"' : ''
) + '>' + values.text + '</' + item.id + '>';
};
} else if (['h1', 'b', 'i', 'code', 's', 'sub', 'sup', 'u'].indexOf(item.id) > -1) {
form = [
Ox.Input({
2012-02-16 18:04:25 +00:00
height: 128,
2012-02-16 16:35:59 +00:00
id: 'text',
label: 'Text',
labelWidth: 128,
2012-02-16 18:04:25 +00:00
type: self.type,
value: self.options.selection,
width: 384
2012-02-16 16:35:59 +00:00
})
2012-02-16 18:04:25 +00:00
.css({background: 'transparent'})
2012-02-16 16:35:59 +00:00
];
format = function(values) {
return '<' + item.id + '>' + values.text + '</' + item.id + '>';
};
} else if (item.id == 'br') {
form = [];
format = function() {
return '<br/>';
};
}
return item.id ? Ox.extend(item, {
form: form,
format: format
}) : item;
});
self.$content = $('<div>')
.css({padding: '16px'});
self.$select = Ox.Select({
items: self.items,
2013-07-17 10:19:57 +00:00
label: Ox._('Insert'),
2012-02-16 16:35:59 +00:00
labelWidth: 128,
value: 'img',
width: 384
})
.bindEvent({
change: renderForm
})
.appendTo(self.$content);
renderForm();
that = Ox.Dialog({
buttons: [
Ox.Button({
id: 'cancel',
2013-05-09 13:03:33 +00:00
title: Ox._('Cancel'),
2012-02-16 16:35:59 +00:00
width: 64
})
.bindEvent({
click: function() {
that.close();
}
}),
Ox.Button({
id: 'insert',
2013-05-09 13:03:33 +00:00
title: Ox._('Insert'),
2012-02-16 16:35:59 +00:00
width: 64
})
.bindEvent({
click: function() {
var item = Ox.getObjectById(self.items, self.$select.value()),
value = item.format(
item.form.length ? self.$form.values() : void 0
);
self.options.callback({
position: self.options.start + value.length,
2012-05-24 09:47:33 +00:00
value: self.options.value.slice(0, self.options.start)
2012-02-16 16:35:59 +00:00
+ value
2012-05-24 09:47:33 +00:00
+ self.options.value.slice(self.options.end)
2012-02-16 16:35:59 +00:00
});
that.close();
}
})
],
2012-02-16 18:04:25 +00:00
closeButton: true,
2012-02-16 16:35:59 +00:00
content: self.$content,
height: 184,
keys: {enter: 'insert', escape: 'cancel'},
2013-05-09 13:03:33 +00:00
title: Ox._('Insert HTML'),
2014-09-26 12:18:11 +00:00
width: 416 + Ox.UI.SCROLLBAR_SIZE
2012-02-16 16:35:59 +00:00
});
function renderForm() {
var items = Ox.getObjectById(self.items, self.$select.value()).form;
self.$form && self.$form.remove();
if (items.length) {
self.$form = Ox.Form({
items: items
})
.css({paddingTop: '8px'})
.appendTo(self.$content);
}
}
return that;
};