view release on metacpan or  search on metacpan

static/js/lifecycleui-editor.js  view on Meta::CPAN

            templates[type] = fn;
            Handlebars.registerPartial('lifecycleui_' + type, fn);
        });
        return templates;
    };

    Editor.prototype._refreshInspector = function (refreshContent) {
        var self = this;
        var lifecycle = self.lifecycle;
        var inspector = self.inspector;
        var node = self.inspectorNode;

        var params = { lifecycle: lifecycle };

        var header = inspector.find('.header');
        header.html(self.templates.header(params));

        var refreshedNode = header;
        if (refreshContent) {
            var type = node ? node._type : 'canvas';
            params[type] = node;
            inspector.find('.content').html(self.templates[type](params));
            refreshedNode = inspector;
        }

        refreshedNode.find(".toplevel").addClass('sf-menu sf-js-enabled sf-shadow').supersubs().superfish({ speed: 'fast' });

        refreshedNode.find(':checkbox[data-show-hide]').each(function () {
            var field = jQuery(this);
            var selector = field.data('show-hide');
            var flip = field.data('show-hide-flip') ? true : false;

            var toggle = function () {
                if ((field.prop('checked') ? true : false) != flip) {
                    jQuery(selector).show();
                } else {
                    jQuery(selector).hide();
                }
            }
            field.change(function (e) { toggle() });
            toggle();
        });

        refreshedNode.find('option[data-show-hide]').each(function () {
            var option = jQuery(this);
            var field = option.closest('select');
            var selector = option.data('show-hide');
            var flip = option.data('show-hide-flip') ? true : false;

            var toggle = function () {
                if ((field.val() == option.val()) != flip) {
                    jQuery(selector).show();
                } else {
                    jQuery(selector).hide();
                }
            }
            field.change(function (e) { toggle() });
            toggle();
        });

        refreshedNode.find(".combobox input.combo-text").each(function () {
            ComboBox_Load(this.id);
        });
    };

    Editor.prototype.setInspectorContent = function (node) {
        this.inspectorNode = node;
        this._refreshInspector(true);
    };

    Editor.prototype.bindInspectorEvents = function () {
        var self = this;
        var lifecycle = self.lifecycle;
        var inspector = self.inspector;

        inspector.on('change', ':input', function () {
            var node = jQuery(this);
            var value;

            if (node.is('.combo-list')) {
                value = node.val();
                node = node.closest('.combobox').find('.combo-text');
            }
            else if (node.is(':checkbox')) {
                value = node[0].checked;
            }
            else {
                value = node.val();
            }

            var field = node.attr('name');

            var action = node.closest('li.action');
            if (action.length) {
                var action = lifecycle.itemForKey(action.data('key'));
                lifecycle.updateItem(action, field, value);
            }
            else if (inspector.find('.canvas').length) {
                lifecycle.update(field, value);
            }
            else {
                lifecycle.updateItem(self.inspectorNode, field, value);
            }
            self.renderDisplay();
        });

        inspector.on('click', 'button.change-color', function (e) {
            e.preventDefault();
            var inputContainer = jQuery(this).closest('.color-control');
            var field = inputContainer.data('field');
            var pickerContainer = jQuery('tr.color-widget[data-field="'+field+'"]');
            var picker = pickerContainer.find('.color-picker');
            jQuery(this).remove();

            var skipUpdateCallback = 0;
            var farb = jQuery.farbtastic(picker, function (newColor) {
                if (skipUpdateCallback) {
                    return;
                }
                inputContainer.find('.current-color').val(newColor);
                lifecycle.updateItem(self.inspectorNode, field, newColor, true);
                self.renderDisplay();
            });
            farb.setColor(self.inspectorNode[field]);

            // see farbtastic's implementation
            jQuery('*', picker).mousedown(function () {
                self.lifecycle.beginChangingColor();
            });

            var input = jQuery('<input class="current-color" size=8 maxlength=7>');
            inputContainer.find('.current-color').replaceWith(input);
            input.on('input', function () {
                var newColor = input.val();
                if (newColor.match(/^#[a-fA-F0-9]{6}$/)) {
                    skipUpdateCallback = 1;
                    farb.setColor(newColor);
                    skipUpdateCallback = 0;

                    lifecycle.updateItem(self.inspectorNode, field, newColor);
                    self.renderDisplay();
                }