sanj/oxjs
1
0
Fork 0
forked from 0x2620/oxjs
Code Pull requests Activity

add InsertHTMLDialog to VideoEditor

Browse source
This commit is contained in:
rlx 2012-02-16 16:35:59 +00:00
commit 4dd2c5706d
7 changed files with 249 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

203
source/Ox.UI/js/Form/Ox.InsertHTMLDialog.js Normal file
View file

@ -0,0 +1,203 @@
'use strict';
Ox.InsertHTMLDialog = function(options, self) {
var that;
self = self || {};
self.options = Ox.extend({
callback: void 0,
end: 0,
selection: '',
start: 0
}, options || {});
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({
id: 'text',
label: 'Text',
labelWidth: 128,
width: 384,
value: self.options.selection
}),
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,
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({
id: 'text',
height: 128,
type: 'textarea',
width: 384,
value: self.options.selection
})
];
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({
id: 'text',
label: 'Text',
labelWidth: 128,
width: 384,
value: self.options.selection
})
];
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() {
Ox.print('SFV:::::', self.$form.values())
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();
}
})
],
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;
self.$form && self.$form.remove();
if (items.length) {
self.$form = Ox.Form({
items: items
})
.css({paddingTop: '8px'})
.appendTo(self.$content);
}
}
return that;
};