Monthly Archives: March 2018

TinyMCE Plugin: revert

tinymce.PluginManager.add("revert", function (editor) {
    var content;
    editor.on("LoadContent", function () {
        content = editor.getContent();
    });
    editor.addMenuItem("revert", {
        text: "Revert changes",
        context: "file",
        onclick: function () {
            editor.undoManager.transact(function () {
                editor.setContent(content);
            });
        }
    });
});

jQuery/Bootstrap Widget: fileinput

<script type="text/html" id="file-input-template">
    <div class="input-group">
        <input type="text" readonly="readonly" class="form-control" />
        <label class="input-group-btn">
            <span class="btn btn-primary">
                Browse
                <input type="file" class="sr-only" />
            </span>
        </label>
    </div>
</script>

<script type="text/javascript">
    $.widget("scw.fileinput", {
        options: {
            id: "file",
            name: "file",
            disabled: false
        },

        _create: function () {
            var self = this;
            self.$group = $($("#file-input-template").html()).appendTo(self.element);
            self.$file = self.$group.find("input[type='file']");
            self.$file.attr("id", self.options.id);
            self.$file.attr("name", self.options.name);
            self.$text = self.$group.find("input[type='text']");
            self.$button = self.$group.find(".btn");
            self._setDisabled(self.options.disabled);
            self.$file.change(function () {
                self.$text.val(self.$file.val());
            });
        },

        _setDisabled: function (disabled) {
            var self = this;
            self.$text.prop("disabled", disabled);
            self.$file.prop("disabled", disabled);
            self.$button.toggleClass("disabled", disabled);
        },

        _setOption: function (key, value) {
            var self = this;
            self._super(key, value);
            if (key === "disabled") {
                self._setDisabled(value);
            }
        }
    });
</script>

jQuery/Bootstrap Widget: dialog

<script type="text/html" id="modal-template">
    <div class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <span class="modal-title"></span>
                </div>
                <div class="modal-body"></div>
                <div class="modal-footer"></div>
            </div>
        </div>
    </div>
</script>

<script type="text/javascript">
    $.widget("scw.dialog", {
        options: {
            size: "sm",
            title: "",
            body: "",
            buttons: [
                {
                    style: "primary",
                    text: "OK"
                }
            ]
        },

        _create: function () {
            var self = this;
            self.$modal = $($("#modal-template").html()).appendTo(self.element);
            self.$modal.find(".modal-dialog").addClass("modal-" + self.options.size);
            self.$modal.find(".modal-title").text(self.options.title);
            self.$modal.find(".modal-body").html(self.options.body);
            var $footer = self.$modal.find(".modal-footer");
            $.each(self.options.buttons, function () {
                var defaults = {
                    command: $.noop,
                    argument: null
                };
                var options = $.extend(defaults, this);
                var $button = $("<button type='button' class='btn'></button>");
                $button.addClass("btn-" + options.style);
                $button.text(options.text);
                $button.click(function () {
                    self.$modal.one("hidden.bs.modal", function () {
                        options.command(options.argument);
                        self.destroy();
                    });
                    self.$modal.modal("hide");
                });
                $footer.append($button);
            });
            self.$modal.modal({
                backdrop: "static",
                keyboard: false
            });
        },

        _destroy: function () {
            var self = this;
            self.$modal.remove();
        }
    });
</script>