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

225 lines
7 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-22 13:14:40 +00:00
Ox.InsertHTMLDialog <f:Ox.Dialog> Insert HTML Dialog
([options[, self]]) -> <o> Insert HTML Dialog
2012-05-21 10:38:18 +00:00
options <o> Options
self <o> Shared private variable
@*/
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 = [
{id: 'img', title: 'Image'},
{id: 'a', title: 'Link'},
{id: 'li', title: 'List'},
{},
{id: 'blockquote', title: 'Blockquote'},
{id: 'h1', title: 'Headline'},
{id: 'p', title: 'Paragraph'},
{id: 'div', title: 'Right-to-Left'},
{},
{id: 'b', title: 'Bold'},
{id: 'i', title: 'Italic'},
{id: 'code', title: 'Monospace'},
{id: 's', title: 'Strike'},
{id: 'sub', title: 'Subscript'},
{id: 'sup', title: 'Superscript'},
{id: 'u', title: 'Underline'},
{},
{id: 'br', title: 'Linebreak'}
].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: [
{id: 'ul', title: 'Bullets'},
{id: 'ol', title: 'Numbers'}
],
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) {
2012-03-23 18:03:56 +00:00
//Ox.print(self.options.selection.indexOf('\n'), '?????????')
2012-02-16 16:35:59 +00:00
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,
label: 'Insert',
labelWidth: 128,
value: 'img',
width: 384
})
.bindEvent({
change: renderForm
})
.appendTo(self.$content);
renderForm();
that = Ox.Dialog({
buttons: [
Ox.Button({
id: 'cancel',
title: 'Cancel',
width: 64
})
.bindEvent({
click: function() {
that.close();
}
}),
Ox.Button({
id: 'insert',
title: 'Insert',
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,
value: self.options.value.substr(0, self.options.start)
+ value
+ self.options.value.substr(self.options.end)
});
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'},
title: 'Insert HTML',
width: 416 + Ox.UI.SCROLLBAR_SIZE
});
function renderForm() {
var items = Ox.getObjectById(self.items, self.$select.value()).form;
2012-03-23 18:03:56 +00:00
//Ox.print('??::""""????', self.$select.value())
2012-02-16 16:35:59 +00:00
self.$form && self.$form.remove();
if (items.length) {
self.$form = Ox.Form({
items: items
})
.css({paddingTop: '8px'})
.appendTo(self.$content);
}
}
return that;
};