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

'use strict';

/*@
Ox.InsertHTMLDialog <f> Insert HTML Dialog
    ([options[, self]]) -> <o:Ox.Dialog> Insert HTML Dialog
    options <o> Options
    self <o> Shared private variable
@*/
Ox.InsertHTMLDialog = function(options, self) {

    var that;

    self = self || {};
    self.options = Ox.extend({
        callback: void 0,
        end: 0,
        selection: '',
        start: 0
    }, options || {});

    self.type = self.options.selection.indexOf('\n') > -1
        ? 'textarea' : 'input';

    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({
                    height: 104,
                    id: 'text',
                    label: 'Text',
                    labelWidth: 128,
                    type: self.type,
                    width: 384,
                    value: self.options.selection
                })
                .css({background: 'transparent'}),
                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,
                    value: self.options.selection.split('\n'),
                    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,
                    id: 'text',
                    label: 'Text',
                    labelWidth: 128,
                    type: 'textarea',
                    value: self.options.selection,
                    width: 384
                })
                .css({background: 'transparent'})
            ];
            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({
                    height: 128,
                    id: 'text',
                    label: 'Text',
                    labelWidth: 128,
                    type: self.type,
                    value: self.options.selection,
                    width: 384
                })
                .css({background: 'transparent'})
            ];
            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.slice(0, self.options.start)
                                + value
                                + self.options.value.slice(self.options.end)
                        });
                        that.close();
                    }
                })
        ],
        closeButton: true,
        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;

};