Plugin to install, update and delete third-party plugins using the web interface

plugins/UiPluginManager/media/js/PluginList.coffee

@@ -0,0 +1,132 @@
+class PluginList extends Class
+	constructor: (plugins) ->
+		@plugins = plugins
+
+	savePluginStatus: (plugin, is_enabled) =>
+		Page.cmd "pluginConfigSet", [plugin.source, plugin.inner_path, "enabled", is_enabled], (res) =>
+			if res == "ok"
+				Page.updatePlugins()
+			else
+				Page.cmd "wrapperNotification", ["error", res.error]
+
+		Page.projector.scheduleRender()
+
+	handleCheckboxChange: (e) =>
+		node = e.currentTarget
+		plugin = node["data-plugin"]
+		node.classList.toggle("checked")
+		value = node.classList.contains("checked")
+
+		@savePluginStatus(plugin, value)
+
+	handleResetClick: (e) =>
+		node = e.currentTarget
+		plugin = node["data-plugin"]
+
+		@savePluginStatus(plugin, null)
+
+	handleUpdateClick: (e) =>
+		node = e.currentTarget
+		plugin = node["data-plugin"]
+		node.classList.add("loading")
+
+		Page.cmd "pluginUpdate", [plugin.source, plugin.inner_path], (res) =>
+			if res == "ok"
+				Page.cmd "wrapperNotification", ["done", "Plugin #{plugin.name} updated to latest version"]
+				Page.updatePlugins()
+			else
+				Page.cmd "wrapperNotification", ["error", res.error]
+			node.classList.remove("loading")
+
+		return false
+
+	handleDeleteClick: (e) =>
+		node = e.currentTarget
+		plugin = node["data-plugin"]
+		if plugin.loaded
+			Page.cmd "wrapperNotification", ["info", "You can only delete plugin that are not currently active"]
+			return false
+
+		node.classList.add("loading")
+
+		Page.cmd "wrapperConfirm", ["Delete #{plugin.name} plugin?", "Delete"], (res) =>
+			if not res
+				node.classList.remove("loading")
+				return false
+
+			Page.cmd "pluginRemove", [plugin.source, plugin.inner_path], (res) =>
+				if res == "ok"
+					Page.cmd "wrapperNotification", ["done", "Plugin #{plugin.name} deleted"]
+					Page.updatePlugins()
+				else
+					Page.cmd "wrapperNotification", ["error", res.error]
+				node.classList.remove("loading")
+
+		return false
+
+	render: ->
+		h("div.plugins", @plugins.map (plugin) =>
+			if not plugin.info
+				return
+			descr = plugin.info.description
+			plugin.info.default ?= "enabled"
+			if plugin.info.default
+				descr += " (default: #{plugin.info.default})"
+
+			tag_version = ""
+			tag_source = ""
+			tag_delete = ""
+			if plugin.source != "builtin"
+				tag_update = ""
+				if plugin.site_info?.rev
+					if plugin.site_info.rev > plugin.info.rev
+						tag_update = h("a.version-update.button",
+							{href: "#Update+plugin", onclick: @handleUpdateClick, "data-plugin": plugin},
+							"Update to rev#{plugin.site_info.rev}"
+						)
+
+				else
+					tag_update = h("span.version-missing", "(unable to get latest vesion: update site missing)")
+
+				tag_version = h("span.version",[
+					"rev#{plugin.info.rev} ",
+					tag_update,
+				])
+
+				tag_source = h("div.source",[
+					"Source: ",
+					h("a", {"href": "/#{plugin.source}", "target": "_top"}, if plugin.site_title then plugin.site_title else plugin.source),
+					" /" + plugin.inner_path
+				])
+
+				tag_delete = h("a.delete", {"href": "#Delete+plugin", onclick: @handleDeleteClick, "data-plugin": plugin}, "Delete plugin")
+
+
+			enabled_default = plugin.info.default == "enabled"
+			if plugin.enabled != plugin.loaded or plugin.updated
+				marker_title = "Change pending"
+				is_pending = true
+			else
+				marker_title = "Changed from default status (click to reset to #{plugin.info.default})"
+				is_pending = false
+
+			is_changed = plugin.enabled != enabled_default and plugin.owner == "builtin"
+
+			h("div.plugin", {key: plugin.name}, [
+				h("div.title", [
+					h("h3", [plugin.name, tag_version]),
+					h("div.description", [descr, tag_source, tag_delete]),
+				])
+				h("div.value.value-right",
+					h("div.checkbox", {onclick: @handleCheckboxChange, "data-plugin": plugin, classes: {checked: plugin.enabled}}, h("div.checkbox-skin"))
+				h("a.marker", {
+					href: "#Reset", title: marker_title,
+					onclick: @handleResetClick, "data-plugin": plugin,
+					classes: {visible: is_pending or is_changed, pending: is_pending}
+				}, "\u2022")
+				)
+			])
+		)
+
+
+window.PluginList = PluginList

plugins/UiPluginManager/media/js/UiPluginManager.coffee

@@ -0,0 +1,71 @@
+window.h = maquette.h
+
+class UiPluginManager extends ZeroFrame
+	init: ->
+		@plugin_list_builtin = new PluginList()
+		@plugin_list_custom = new PluginList()
+		@plugins_changed = null
+		@need_restart = null
+		@
+
+	onOpenWebsocket: =>
+		@cmd("wrapperSetTitle", "Plugin manager - ZeroNet")
+		@cmd "serverInfo", {}, (server_info) =>
+			@server_info = server_info
+		@updatePlugins()
+
+	updatePlugins: (cb) =>
+		@cmd "pluginList", [], (res) =>
+			@plugins_changed = (item for item in res.plugins when item.enabled != item.loaded or item.updated)
+
+			plugins_builtin = (item for item in res.plugins when item.source == "builtin")
+			@plugin_list_builtin.plugins = plugins_builtin.sort (a, b) ->
+				return a.name.localeCompare(b.name)
+
+			plugins_custom = (item for item in res.plugins when item.source != "builtin")
+			@plugin_list_custom.plugins = plugins_custom.sort (a, b) ->
+				return a.name.localeCompare(b.name)
+
+			@projector.scheduleRender()
+			cb?()
+
+	createProjector: =>
+		@projector = maquette.createProjector()
+		@projector.replace($("#content"), @render)
+		@projector.replace($("#bottom-restart"), @renderBottomRestart)
+
+	render: =>
+		if not @plugin_list_builtin.plugins
+			return h("div.content")
+
+		h("div.content", [
+			h("div.section", [
+				if @plugin_list_custom.plugins?.length
+					[
+						h("h2", "Installed third-party plugins"),
+						@plugin_list_custom.render()
+					]
+				h("h2", "Built-in plugins")
+				@plugin_list_builtin.render()
+			])
+		])
+
+	handleRestartClick: =>
+		@restart_loading = true
+		setTimeout ( =>
+			Page.cmd("serverShutdown", {restart: true})
+		), 300
+		Page.projector.scheduleRender()
+		return false
+
+	renderBottomRestart: =>
+		h("div.bottom.bottom-restart", {classes: {visible: @plugins_changed?.length}}, h("div.bottom-content", [
+			h("div.title", "Some plugins status has been changed"),
+			h("a.button.button-submit.button-restart",
+				{href: "#Restart", classes: {loading: @restart_loading}, onclick: @handleRestartClick},
+				"Restart ZeroNet client"
+			)
+		]))
+
+window.Page = new UiPluginManager()
+window.Page.createProjector()

plugins/UiPluginManager/media/js/lib/Class.coffee

@@ -0,0 +1,23 @@
+class Class
+	trace: true
+
+	log: (args...) ->
+		return unless @trace
+		return if typeof console is 'undefined'
+		args.unshift("[#{@.constructor.name}]")
+		console.log(args...)
+		@
+		
+	logStart: (name, args...) ->
+		return unless @trace
+		@logtimers or= {}
+		@logtimers[name] = +(new Date)
+		@log "#{name}", args..., "(started)" if args.length > 0
+		@
+		
+	logEnd: (name, args...) ->
+		ms = +(new Date)-@logtimers[name]
+		@log "#{name}", args..., "(Done in #{ms}ms)"
+		@ 
+
+window.Class = Class

plugins/UiPluginManager/media/js/lib/Promise.coffee

@@ -0,0 +1,74 @@
+# From: http://dev.bizo.com/2011/12/promises-in-javascriptcoffeescript.html
+
+class Promise
+	@when: (tasks...) ->
+		num_uncompleted = tasks.length
+		args = new Array(num_uncompleted)
+		promise = new Promise()
+
+		for task, task_id in tasks
+			((task_id) ->
+				task.then(() ->
+					args[task_id] = Array.prototype.slice.call(arguments)
+					num_uncompleted--
+					promise.complete.apply(promise, args) if num_uncompleted == 0
+				)
+			)(task_id)
+
+		return promise
+
+	constructor: ->
+		@resolved = false
+		@end_promise = null
+		@result = null
+		@callbacks = []
+
+	resolve: ->
+		if @resolved
+			return false
+		@resolved = true
+		@data = arguments
+		if not arguments.length
+			@data = [true]
+		@result = @data[0]
+		for callback in @callbacks
+			back = callback.apply callback, @data
+		if @end_promise
+			@end_promise.resolve(back)
+
+	fail: ->
+		@resolve(false)
+
+	then: (callback) ->
+		if @resolved == true
+			callback.apply callback, @data
+			return
+
+		@callbacks.push callback
+
+		@end_promise = new Promise()
+
+window.Promise = Promise
+
+###
+s = Date.now()
+log = (text) ->
+	console.log Date.now()-s, Array.prototype.slice.call(arguments).join(", ")
+
+log "Started"
+
+cmd = (query) ->
+	p = new Promise()
+	setTimeout ( ->
+		p.resolve query+" Result"
+	), 100
+	return p
+
+back = cmd("SELECT * FROM message").then (res) ->
+	log res
+	return "Return from query"
+.then (res) ->
+	log "Back then", res
+
+log "Query started", back
+###

plugins/UiPluginManager/media/js/lib/Prototypes.coffee

@@ -0,0 +1,8 @@
+String::startsWith = (s) -> @[...s.length] is s
+String::endsWith = (s) -> s is '' or @[-s.length..] is s
+String::repeat = (count) -> new Array( count + 1 ).join(@)
+
+window.isEmpty = (obj) ->
+	for key of obj
+		return false
+	return true

plugins/UiPluginManager/media/js/lib/maquette.js

@@ -0,0 +1,770 @@
+(function (root, factory) {
+    if (typeof define === 'function' && define.amd) {
+        // AMD. Register as an anonymous module.
+        define(['exports'], factory);
+    } else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
+        // CommonJS
+        factory(exports);
+    } else {
+        // Browser globals
+        factory(root.maquette = {});
+    }
+}(this, function (exports) {
+    'use strict';
+    ;
+    ;
+    ;
+    ;
+    var NAMESPACE_W3 = 'http://www.w3.org/';
+    var NAMESPACE_SVG = NAMESPACE_W3 + '2000/svg';
+    var NAMESPACE_XLINK = NAMESPACE_W3 + '1999/xlink';
+    // Utilities
+    var emptyArray = [];
+    var extend = function (base, overrides) {
+        var result = {};
+        Object.keys(base).forEach(function (key) {
+            result[key] = base[key];
+        });
+        if (overrides) {
+            Object.keys(overrides).forEach(function (key) {
+                result[key] = overrides[key];
+            });
+        }
+        return result;
+    };
+    // Hyperscript helper functions
+    var same = function (vnode1, vnode2) {
+        if (vnode1.vnodeSelector !== vnode2.vnodeSelector) {
+            return false;
+        }
+        if (vnode1.properties && vnode2.properties) {
+            if (vnode1.properties.key !== vnode2.properties.key) {
+                return false;
+            }
+            return vnode1.properties.bind === vnode2.properties.bind;
+        }
+        return !vnode1.properties && !vnode2.properties;
+    };
+    var toTextVNode = function (data) {
+        return {
+            vnodeSelector: '',
+            properties: undefined,
+            children: undefined,
+            text: data.toString(),
+            domNode: null
+        };
+    };
+    var appendChildren = function (parentSelector, insertions, main) {
+        for (var i = 0; i < insertions.length; i++) {
+            var item = insertions[i];
+            if (Array.isArray(item)) {
+                appendChildren(parentSelector, item, main);
+            } else {
+                if (item !== null && item !== undefined) {
+                    if (!item.hasOwnProperty('vnodeSelector')) {
+                        item = toTextVNode(item);
+                    }
+                    main.push(item);
+                }
+            }
+        }
+    };
+    // Render helper functions
+    var missingTransition = function () {
+        throw new Error('Provide a transitions object to the projectionOptions to do animations');
+    };
+    var DEFAULT_PROJECTION_OPTIONS = {
+        namespace: undefined,
+        eventHandlerInterceptor: undefined,
+        styleApplyer: function (domNode, styleName, value) {
+            // Provides a hook to add vendor prefixes for browsers that still need it.
+            domNode.style[styleName] = value;
+        },
+        transitions: {
+            enter: missingTransition,
+            exit: missingTransition
+        }
+    };
+    var applyDefaultProjectionOptions = function (projectorOptions) {
+        return extend(DEFAULT_PROJECTION_OPTIONS, projectorOptions);
+    };
+    var checkStyleValue = function (styleValue) {
+        if (typeof styleValue !== 'string') {
+            throw new Error('Style values must be strings');
+        }
+    };
+    var setProperties = function (domNode, properties, projectionOptions) {
+        if (!properties) {
+            return;
+        }
+        var eventHandlerInterceptor = projectionOptions.eventHandlerInterceptor;
+        var propNames = Object.keys(properties);
+        var propCount = propNames.length;
+        for (var i = 0; i < propCount; i++) {
+            var propName = propNames[i];
+            /* tslint:disable:no-var-keyword: edge case */
+            var propValue = properties[propName];
+            /* tslint:enable:no-var-keyword */
+            if (propName === 'className') {
+                throw new Error('Property "className" is not supported, use "class".');
+            } else if (propName === 'class') {
+                if (domNode.className) {
+                    // May happen if classes is specified before class
+                    domNode.className += ' ' + propValue;
+                } else {
+                    domNode.className = propValue;
+                }
+            } else if (propName === 'classes') {
+                // object with string keys and boolean values
+                var classNames = Object.keys(propValue);
+                var classNameCount = classNames.length;
+                for (var j = 0; j < classNameCount; j++) {
+                    var className = classNames[j];
+                    if (propValue[className]) {
+                        domNode.classList.add(className);
+                    }
+                }
+            } else if (propName === 'styles') {
+                // object with string keys and string (!) values
+                var styleNames = Object.keys(propValue);
+                var styleCount = styleNames.length;
+                for (var j = 0; j < styleCount; j++) {
+                    var styleName = styleNames[j];
+                    var styleValue = propValue[styleName];
+                    if (styleValue) {
+                        checkStyleValue(styleValue);
+                        projectionOptions.styleApplyer(domNode, styleName, styleValue);
+                    }
+                }
+            } else if (propName === 'key') {
+                continue;
+            } else if (propValue === null || propValue === undefined) {
+                continue;
+            } else {
+                var type = typeof propValue;
+                if (type === 'function') {
+                    if (propName.lastIndexOf('on', 0) === 0) {
+                        if (eventHandlerInterceptor) {
+                            propValue = eventHandlerInterceptor(propName, propValue, domNode, properties);    // intercept eventhandlers
+                        }
+                        if (propName === 'oninput') {
+                            (function () {
+                                // record the evt.target.value, because IE and Edge sometimes do a requestAnimationFrame between changing value and running oninput
+                                var oldPropValue = propValue;
+                                propValue = function (evt) {
+                                    evt.target['oninput-value'] = evt.target.value;
+                                    // may be HTMLTextAreaElement as well
+                                    oldPropValue.apply(this, [evt]);
+                                };
+                            }());
+                        }
+                        domNode[propName] = propValue;
+                    }
+                } else if (type === 'string' && propName !== 'value' && propName !== 'innerHTML') {
+                    if (projectionOptions.namespace === NAMESPACE_SVG && propName === 'href') {
+                        domNode.setAttributeNS(NAMESPACE_XLINK, propName, propValue);
+                    } else {
+                        domNode.setAttribute(propName, propValue);
+                    }
+                } else {
+                    domNode[propName] = propValue;
+                }
+            }
+        }
+    };
+    var updateProperties = function (domNode, previousProperties, properties, projectionOptions) {
+        if (!properties) {
+            return;
+        }
+        var propertiesUpdated = false;
+        var propNames = Object.keys(properties);
+        var propCount = propNames.length;
+        for (var i = 0; i < propCount; i++) {
+            var propName = propNames[i];
+            // assuming that properties will be nullified instead of missing is by design
+            var propValue = properties[propName];
+            var previousValue = previousProperties[propName];
+            if (propName === 'class') {
+                if (previousValue !== propValue) {
+                    throw new Error('"class" property may not be updated. Use the "classes" property for conditional css classes.');
+                }
+            } else if (propName === 'classes') {
+                var classList = domNode.classList;
+                var classNames = Object.keys(propValue);
+                var classNameCount = classNames.length;
+                for (var j = 0; j < classNameCount; j++) {
+                    var className = classNames[j];
+                    var on = !!propValue[className];
+                    var previousOn = !!previousValue[className];
+                    if (on === previousOn) {
+                        continue;
+                    }
+                    propertiesUpdated = true;
+                    if (on) {
+                        classList.add(className);
+                    } else {
+                        classList.remove(className);
+                    }
+                }
+            } else if (propName === 'styles') {
+                var styleNames = Object.keys(propValue);
+                var styleCount = styleNames.length;
+                for (var j = 0; j < styleCount; j++) {
+                    var styleName = styleNames[j];
+                    var newStyleValue = propValue[styleName];
+                    var oldStyleValue = previousValue[styleName];
+                    if (newStyleValue === oldStyleValue) {
+                        continue;
+                    }
+                    propertiesUpdated = true;
+                    if (newStyleValue) {
+                        checkStyleValue(newStyleValue);
+                        projectionOptions.styleApplyer(domNode, styleName, newStyleValue);
+                    } else {
+                        projectionOptions.styleApplyer(domNode, styleName, '');
+                    }
+                }
+            } else {
+                if (!propValue && typeof previousValue === 'string') {
+                    propValue = '';
+                }
+                if (propName === 'value') {
+                    if (domNode[propName] !== propValue && domNode['oninput-value'] !== propValue) {
+                        domNode[propName] = propValue;
+                        // Reset the value, even if the virtual DOM did not change
+                        domNode['oninput-value'] = undefined;
+                    }
+                    // else do not update the domNode, otherwise the cursor position would be changed
+                    if (propValue !== previousValue) {
+                        propertiesUpdated = true;
+                    }
+                } else if (propValue !== previousValue) {
+                    var type = typeof propValue;
+                    if (type === 'function') {
+                        throw new Error('Functions may not be updated on subsequent renders (property: ' + propName + '). Hint: declare event handler functions outside the render() function.');
+                    }
+                    if (type === 'string' && propName !== 'innerHTML') {
+                        if (projectionOptions.namespace === NAMESPACE_SVG && propName === 'href') {
+                            domNode.setAttributeNS(NAMESPACE_XLINK, propName, propValue);
+                        } else {
+                            domNode.setAttribute(propName, propValue);
+                        }
+                    } else {
+                        if (domNode[propName] !== propValue) {
+                            domNode[propName] = propValue;
+                        }
+                    }
+                    propertiesUpdated = true;
+                }
+            }
+        }
+        return propertiesUpdated;
+    };
+    var findIndexOfChild = function (children, sameAs, start) {
+        if (sameAs.vnodeSelector !== '') {
+            // Never scan for text-nodes
+            for (var i = start; i < children.length; i++) {
+                if (same(children[i], sameAs)) {
+                    return i;
+                }
+            }
+        }
+        return -1;
+    };
+    var nodeAdded = function (vNode, transitions) {
+        if (vNode.properties) {
+            var enterAnimation = vNode.properties.enterAnimation;
+            if (enterAnimation) {
+                if (typeof enterAnimation === 'function') {
+                    enterAnimation(vNode.domNode, vNode.properties);
+                } else {
+                    transitions.enter(vNode.domNode, vNode.properties, enterAnimation);
+                }
+            }
+        }
+    };
+    var nodeToRemove = function (vNode, transitions) {
+        var domNode = vNode.domNode;
+        if (vNode.properties) {
+            var exitAnimation = vNode.properties.exitAnimation;
+            if (exitAnimation) {
+                domNode.style.pointerEvents = 'none';
+                var removeDomNode = function () {
+                    if (domNode.parentNode) {
+                        domNode.parentNode.removeChild(domNode);
+                    }
+                };
+                if (typeof exitAnimation === 'function') {
+                    exitAnimation(domNode, removeDomNode, vNode.properties);
+                    return;
+                } else {
+                    transitions.exit(vNode.domNode, vNode.properties, exitAnimation, removeDomNode);
+                    return;
+                }
+            }
+        }
+        if (domNode.parentNode) {
+            domNode.parentNode.removeChild(domNode);
+        }
+    };
+    var checkDistinguishable = function (childNodes, indexToCheck, parentVNode, operation) {
+        var childNode = childNodes[indexToCheck];
+        if (childNode.vnodeSelector === '') {
+            return;    // Text nodes need not be distinguishable
+        }
+        var properties = childNode.properties;
+        var key = properties ? properties.key === undefined ? properties.bind : properties.key : undefined;
+        if (!key) {
+            for (var i = 0; i < childNodes.length; i++) {
+                if (i !== indexToCheck) {
+                    var node = childNodes[i];
+                    if (same(node, childNode)) {
+                        if (operation === 'added') {
+                            throw new Error(parentVNode.vnodeSelector + ' had a ' + childNode.vnodeSelector + ' child ' + 'added, but there is now more than one. You must add unique key properties to make them distinguishable.');
+                        } else {
+                            throw new Error(parentVNode.vnodeSelector + ' had a ' + childNode.vnodeSelector + ' child ' + 'removed, but there were more than one. You must add unique key properties to make them distinguishable.');
+                        }
+                    }
+                }
+            }
+        }
+    };
+    var createDom;
+    var updateDom;
+    var updateChildren = function (vnode, domNode, oldChildren, newChildren, projectionOptions) {
+        if (oldChildren === newChildren) {
+            return false;
+        }
+        oldChildren = oldChildren || emptyArray;
+        newChildren = newChildren || emptyArray;
+        var oldChildrenLength = oldChildren.length;
+        var newChildrenLength = newChildren.length;
+        var transitions = projectionOptions.transitions;
+        var oldIndex = 0;
+        var newIndex = 0;
+        var i;
+        var textUpdated = false;
+        while (newIndex < newChildrenLength) {
+            var oldChild = oldIndex < oldChildrenLength ? oldChildren[oldIndex] : undefined;
+            var newChild = newChildren[newIndex];
+            if (oldChild !== undefined && same(oldChild, newChild)) {
+                textUpdated = updateDom(oldChild, newChild, projectionOptions) || textUpdated;
+                oldIndex++;
+            } else {
+                var findOldIndex = findIndexOfChild(oldChildren, newChild, oldIndex + 1);
+                if (findOldIndex >= 0) {
+                    // Remove preceding missing children
+                    for (i = oldIndex; i < findOldIndex; i++) {
+                        nodeToRemove(oldChildren[i], transitions);
+                        checkDistinguishable(oldChildren, i, vnode, 'removed');
+                    }
+                    textUpdated = updateDom(oldChildren[findOldIndex], newChild, projectionOptions) || textUpdated;
+                    oldIndex = findOldIndex + 1;
+                } else {
+                    // New child
+                    createDom(newChild, domNode, oldIndex < oldChildrenLength ? oldChildren[oldIndex].domNode : undefined, projectionOptions);
+                    nodeAdded(newChild, transitions);
+                    checkDistinguishable(newChildren, newIndex, vnode, 'added');
+                }
+            }
+            newIndex++;
+        }
+        if (oldChildrenLength > oldIndex) {
+            // Remove child fragments
+            for (i = oldIndex; i < oldChildrenLength; i++) {
+                nodeToRemove(oldChildren[i], transitions);
+                checkDistinguishable(oldChildren, i, vnode, 'removed');
+            }
+        }
+        return textUpdated;
+    };
+    var addChildren = function (domNode, children, projectionOptions) {
+        if (!children) {
+            return;
+        }
+        for (var i = 0; i < children.length; i++) {
+            createDom(children[i], domNode, undefined, projectionOptions);
+        }
+    };
+    var initPropertiesAndChildren = function (domNode, vnode, projectionOptions) {
+        addChildren(domNode, vnode.children, projectionOptions);
+        // children before properties, needed for value property of <select>.
+        if (vnode.text) {
+            domNode.textContent = vnode.text;
+        }
+        setProperties(domNode, vnode.properties, projectionOptions);
+        if (vnode.properties && vnode.properties.afterCreate) {
+            vnode.properties.afterCreate(domNode, projectionOptions, vnode.vnodeSelector, vnode.properties, vnode.children);
+        }
+    };
+    createDom = function (vnode, parentNode, insertBefore, projectionOptions) {
+        var domNode, i, c, start = 0, type, found;
+        var vnodeSelector = vnode.vnodeSelector;
+        if (vnodeSelector === '') {
+            domNode = vnode.domNode = document.createTextNode(vnode.text);
+            if (insertBefore !== undefined) {
+                parentNode.insertBefore(domNode, insertBefore);
+            } else {
+                parentNode.appendChild(domNode);
+            }
+        } else {
+            for (i = 0; i <= vnodeSelector.length; ++i) {
+                c = vnodeSelector.charAt(i);
+                if (i === vnodeSelector.length || c === '.' || c === '#') {
+                    type = vnodeSelector.charAt(start - 1);
+                    found = vnodeSelector.slice(start, i);
+                    if (type === '.') {
+                        domNode.classList.add(found);
+                    } else if (type === '#') {
+                        domNode.id = found;
+                    } else {
+                        if (found === 'svg') {
+                            projectionOptions = extend(projectionOptions, { namespace: NAMESPACE_SVG });
+                        }
+                        if (projectionOptions.namespace !== undefined) {
+                            domNode = vnode.domNode = document.createElementNS(projectionOptions.namespace, found);
+                        } else {
+                            domNode = vnode.domNode = document.createElement(found);
+                        }
+                        if (insertBefore !== undefined) {
+                            parentNode.insertBefore(domNode, insertBefore);
+                        } else {
+                            parentNode.appendChild(domNode);
+                        }
+                    }
+                    start = i + 1;
+                }
+            }
+            initPropertiesAndChildren(domNode, vnode, projectionOptions);
+        }
+    };
+    updateDom = function (previous, vnode, projectionOptions) {
+        var domNode = previous.domNode;
+        var textUpdated = false;
+        if (previous === vnode) {
+            return false;    // By contract, VNode objects may not be modified anymore after passing them to maquette
+        }
+        var updated = false;
+        if (vnode.vnodeSelector === '') {
+            if (vnode.text !== previous.text) {
+                var newVNode = document.createTextNode(vnode.text);
+                domNode.parentNode.replaceChild(newVNode, domNode);
+                vnode.domNode = newVNode;
+                textUpdated = true;
+                return textUpdated;
+            }
+        } else {
+            if (vnode.vnodeSelector.lastIndexOf('svg', 0) === 0) {
+                projectionOptions = extend(projectionOptions, { namespace: NAMESPACE_SVG });
+            }
+            if (previous.text !== vnode.text) {
+                updated = true;
+                if (vnode.text === undefined) {
+                    domNode.removeChild(domNode.firstChild);    // the only textnode presumably
+                } else {
+                    domNode.textContent = vnode.text;
+                }
+            }
+            updated = updateChildren(vnode, domNode, previous.children, vnode.children, projectionOptions) || updated;
+            updated = updateProperties(domNode, previous.properties, vnode.properties, projectionOptions) || updated;
+            if (vnode.properties && vnode.properties.afterUpdate) {
+                vnode.properties.afterUpdate(domNode, projectionOptions, vnode.vnodeSelector, vnode.properties, vnode.children);
+            }
+        }
+        if (updated && vnode.properties && vnode.properties.updateAnimation) {
+            vnode.properties.updateAnimation(domNode, vnode.properties, previous.properties);
+        }
+        vnode.domNode = previous.domNode;
+        return textUpdated;
+    };
+    var createProjection = function (vnode, projectionOptions) {
+        return {
+            update: function (updatedVnode) {
+                if (vnode.vnodeSelector !== updatedVnode.vnodeSelector) {
+                    throw new Error('The selector for the root VNode may not be changed. (consider using dom.merge and add one extra level to the virtual DOM)');
+                }
+                updateDom(vnode, updatedVnode, projectionOptions);
+                vnode = updatedVnode;
+            },
+            domNode: vnode.domNode
+        };
+    };
+    ;
+    // The other two parameters are not added here, because the Typescript compiler creates surrogate code for desctructuring 'children'.
+    exports.h = function (selector) {
+        var properties = arguments[1];
+        if (typeof selector !== 'string') {
+            throw new Error();
+        }
+        var childIndex = 1;
+        if (properties && !properties.hasOwnProperty('vnodeSelector') && !Array.isArray(properties) && typeof properties === 'object') {
+            childIndex = 2;
+        } else {
+            // Optional properties argument was omitted
+            properties = undefined;
+        }
+        var text = undefined;
+        var children = undefined;
+        var argsLength = arguments.length;
+        // Recognize a common special case where there is only a single text node
+        if (argsLength === childIndex + 1) {
+            var onlyChild = arguments[childIndex];
+            if (typeof onlyChild === 'string') {
+                text = onlyChild;
+            } else if (onlyChild !== undefined && onlyChild.length === 1 && typeof onlyChild[0] === 'string') {
+                text = onlyChild[0];
+            }
+        }
+        if (text === undefined) {
+            children = [];
+            for (; childIndex < arguments.length; childIndex++) {
+                var child = arguments[childIndex];
+                if (child === null || child === undefined) {
+                    continue;
+                } else if (Array.isArray(child)) {
+                    appendChildren(selector, child, children);
+                } else if (child.hasOwnProperty('vnodeSelector')) {
+                    children.push(child);
+                } else {
+                    children.push(toTextVNode(child));
+                }
+            }
+        }
+        return {
+            vnodeSelector: selector,
+            properties: properties,
+            children: children,
+            text: text === '' ? undefined : text,
+            domNode: null
+        };
+    };
+    /**
+ * Contains simple low-level utility functions to manipulate the real DOM.
+ */
+    exports.dom = {
+        /**
+     * Creates a real DOM tree from `vnode`. The [[Projection]] object returned will contain the resulting DOM Node in
+     * its [[Projection.domNode|domNode]] property.
+     * This is a low-level method. Users wil typically use a [[Projector]] instead.
+     * @param vnode - The root of the virtual DOM tree that was created using the [[h]] function. NOTE: [[VNode]]
+     * objects may only be rendered once.
+     * @param projectionOptions - Options to be used to create and update the projection.
+     * @returns The [[Projection]] which also contains the DOM Node that was created.
+     */
+        create: function (vnode, projectionOptions) {
+            projectionOptions = applyDefaultProjectionOptions(projectionOptions);
+            createDom(vnode, document.createElement('div'), undefined, projectionOptions);
+            return createProjection(vnode, projectionOptions);
+        },
+        /**
+     * Appends a new childnode to the DOM which is generated from a [[VNode]].
+     * This is a low-level method. Users wil typically use a [[Projector]] instead.
+     * @param parentNode - The parent node for the new childNode.
+     * @param vnode - The root of the virtual DOM tree that was created using the [[h]] function. NOTE: [[VNode]]
+     * objects may only be rendered once.
+     * @param projectionOptions - Options to be used to create and update the [[Projection]].
+     * @returns The [[Projection]] that was created.
+     */
+        append: function (parentNode, vnode, projectionOptions) {
+            projectionOptions = applyDefaultProjectionOptions(projectionOptions);
+            createDom(vnode, parentNode, undefined, projectionOptions);
+            return createProjection(vnode, projectionOptions);
+        },
+        /**
+     * Inserts a new DOM node which is generated from a [[VNode]].
+     * This is a low-level method. Users wil typically use a [[Projector]] instead.
+     * @param beforeNode - The node that the DOM Node is inserted before.
+     * @param vnode - The root of the virtual DOM tree that was created using the [[h]] function.
+     * NOTE: [[VNode]] objects may only be rendered once.
+     * @param projectionOptions - Options to be used to create and update the projection, see [[createProjector]].
+     * @returns The [[Projection]] that was created.
+     */
+        insertBefore: function (beforeNode, vnode, projectionOptions) {
+            projectionOptions = applyDefaultProjectionOptions(projectionOptions);
+            createDom(vnode, beforeNode.parentNode, beforeNode, projectionOptions);
+            return createProjection(vnode, projectionOptions);
+        },
+        /**
+     * Merges a new DOM node which is generated from a [[VNode]] with an existing DOM Node.
+     * This means that the virtual DOM and the real DOM will have one overlapping element.
+     * Therefore the selector for the root [[VNode]] will be ignored, but its properties and children will be applied to the Element provided.
+     * This is a low-level method. Users wil typically use a [[Projector]] instead.
+     * @param domNode - The existing element to adopt as the root of the new virtual DOM. Existing attributes and childnodes are preserved.
+     * @param vnode - The root of the virtual DOM tree that was created using the [[h]] function. NOTE: [[VNode]] objects
+     * may only be rendered once.
+     * @param projectionOptions - Options to be used to create and update the projection, see [[createProjector]].
+     * @returns The [[Projection]] that was created.
+     */
+        merge: function (element, vnode, projectionOptions) {
+            projectionOptions = applyDefaultProjectionOptions(projectionOptions);
+            vnode.domNode = element;
+            initPropertiesAndChildren(element, vnode, projectionOptions);
+            return createProjection(vnode, projectionOptions);
+        }
+    };
+    /**
+ * Creates a [[CalculationCache]] object, useful for caching [[VNode]] trees.
+ * In practice, caching of [[VNode]] trees is not needed, because achieving 60 frames per second is almost never a problem.
+ * For more information, see [[CalculationCache]].
+ *
+ * @param <Result> The type of the value that is cached.
+ */
+    exports.createCache = function () {
+        var cachedInputs = undefined;
+        var cachedOutcome = undefined;
+        var result = {
+            invalidate: function () {
+                cachedOutcome = undefined;
+                cachedInputs = undefined;
+            },
+            result: function (inputs, calculation) {
+                if (cachedInputs) {
+                    for (var i = 0; i < inputs.length; i++) {
+                        if (cachedInputs[i] !== inputs[i]) {
+                            cachedOutcome = undefined;
+                        }
+                    }
+                }
+                if (!cachedOutcome) {
+                    cachedOutcome = calculation();
+                    cachedInputs = inputs;
+                }
+                return cachedOutcome;
+            }
+        };
+        return result;
+    };
+    /**
+ * Creates a {@link Mapping} instance that keeps an array of result objects synchronized with an array of source objects.
+ * See {@link http://maquettejs.org/docs/arrays.html|Working with arrays}.
+ *
+ * @param <Source>       The type of source items. A database-record for instance.
+ * @param <Target>       The type of target items. A [[Component]] for instance.
+ * @param getSourceKey   `function(source)` that must return a key to identify each source object. The result must either be a string or a number.
+ * @param createResult   `function(source, index)` that must create a new result object from a given source. This function is identical
+ *                       to the `callback` argument in `Array.map(callback)`.
+ * @param updateResult   `function(source, target, index)` that updates a result to an updated source.
+ */
+    exports.createMapping = function (getSourceKey, createResult, updateResult) {
+        var keys = [];
+        var results = [];
+        return {
+            results: results,
+            map: function (newSources) {
+                var newKeys = newSources.map(getSourceKey);
+                var oldTargets = results.slice();
+                var oldIndex = 0;
+                for (var i = 0; i < newSources.length; i++) {
+                    var source = newSources[i];
+                    var sourceKey = newKeys[i];
+                    if (sourceKey === keys[oldIndex]) {
+                        results[i] = oldTargets[oldIndex];
+                        updateResult(source, oldTargets[oldIndex], i);
+                        oldIndex++;
+                    } else {
+                        var found = false;
+                        for (var j = 1; j < keys.length; j++) {
+                            var searchIndex = (oldIndex + j) % keys.length;
+                            if (keys[searchIndex] === sourceKey) {
+                                results[i] = oldTargets[searchIndex];
+                                updateResult(newSources[i], oldTargets[searchIndex], i);
+                                oldIndex = searchIndex + 1;
+                                found = true;
+                                break;
+                            }
+                        }
+                        if (!found) {
+                            results[i] = createResult(source, i);
+                        }
+                    }
+                }
+                results.length = newSources.length;
+                keys = newKeys;
+            }
+        };
+    };
+    /**
+ * Creates a [[Projector]] instance using the provided projectionOptions.
+ *
+ * For more information, see [[Projector]].
+ *
+ * @param projectionOptions   Options that influence how the DOM is rendered and updated.
+ */
+    exports.createProjector = function (projectorOptions) {
+        var projector;
+        var projectionOptions = applyDefaultProjectionOptions(projectorOptions);
+        projectionOptions.eventHandlerInterceptor = function (propertyName, eventHandler, domNode, properties) {
+            return function () {
+                // intercept function calls (event handlers) to do a render afterwards.
+                projector.scheduleRender();
+                return eventHandler.apply(properties.bind || this, arguments);
+            };
+        };
+        var renderCompleted = true;
+        var scheduled;
+        var stopped = false;
+        var projections = [];
+        var renderFunctions = [];
+        // matches the projections array
+        var doRender = function () {
+            scheduled = undefined;
+            if (!renderCompleted) {
+                return;    // The last render threw an error, it should be logged in the browser console.
+            }
+            renderCompleted = false;
+            for (var i = 0; i < projections.length; i++) {
+                var updatedVnode = renderFunctions[i]();
+                projections[i].update(updatedVnode);
+            }
+            renderCompleted = true;
+        };
+        projector = {
+            scheduleRender: function () {
+                if (!scheduled && !stopped) {
+                    scheduled = requestAnimationFrame(doRender);
+                }
+            },
+            stop: function () {
+                if (scheduled) {
+                    cancelAnimationFrame(scheduled);
+                    scheduled = undefined;
+                }
+                stopped = true;
+            },
+            resume: function () {
+                stopped = false;
+                renderCompleted = true;
+                projector.scheduleRender();
+            },
+            append: function (parentNode, renderMaquetteFunction) {
+                projections.push(exports.dom.append(parentNode, renderMaquetteFunction(), projectionOptions));
+                renderFunctions.push(renderMaquetteFunction);
+            },
+            insertBefore: function (beforeNode, renderMaquetteFunction) {
+                projections.push(exports.dom.insertBefore(beforeNode, renderMaquetteFunction(), projectionOptions));
+                renderFunctions.push(renderMaquetteFunction);
+            },
+            merge: function (domNode, renderMaquetteFunction) {
+                projections.push(exports.dom.merge(domNode, renderMaquetteFunction(), projectionOptions));
+                renderFunctions.push(renderMaquetteFunction);
+            },
+            replace: function (domNode, renderMaquetteFunction) {
+                var vnode = renderMaquetteFunction();
+                createDom(vnode, domNode.parentNode, domNode, projectionOptions);
+                domNode.parentNode.removeChild(domNode);
+                projections.push(createProjection(vnode, projectionOptions));
+                renderFunctions.push(renderMaquetteFunction);
+            },
+            detach: function (renderMaquetteFunction) {
+                for (var i = 0; i < renderFunctions.length; i++) {
+                    if (renderFunctions[i] === renderMaquetteFunction) {
+                        renderFunctions.splice(i, 1);
+                        return projections.splice(i, 1)[0];
+                    }
+                }
+                throw new Error('renderMaquetteFunction was not found');
+            }
+        };
+        return projector;
+    };
+}));

plugins/UiPluginManager/media/js/utils/Animation.coffee

@@ -0,0 +1,138 @@
+class Animation
+	slideDown: (elem, props) ->
+		if elem.offsetTop > 2000
+			return
+
+		h = elem.offsetHeight
+		cstyle = window.getComputedStyle(elem)
+		margin_top = cstyle.marginTop
+		margin_bottom = cstyle.marginBottom
+		padding_top = cstyle.paddingTop
+		padding_bottom = cstyle.paddingBottom
+		transition = cstyle.transition
+
+		elem.style.boxSizing = "border-box"
+		elem.style.overflow = "hidden"
+		elem.style.transform = "scale(0.6)"
+		elem.style.opacity = "0"
+		elem.style.height = "0px"
+		elem.style.marginTop = "0px"
+		elem.style.marginBottom = "0px"
+		elem.style.paddingTop = "0px"
+		elem.style.paddingBottom = "0px"
+		elem.style.transition = "none"
+
+		setTimeout (->
+			elem.className += " animate-inout"
+			elem.style.height = h+"px"
+			elem.style.transform = "scale(1)"
+			elem.style.opacity = "1"
+			elem.style.marginTop = margin_top
+			elem.style.marginBottom = margin_bottom
+			elem.style.paddingTop = padding_top
+			elem.style.paddingBottom = padding_bottom
+		), 1
+
+		elem.addEventListener "transitionend", ->
+			elem.classList.remove("animate-inout")
+			elem.style.transition = elem.style.transform = elem.style.opacity = elem.style.height = null
+			elem.style.boxSizing = elem.style.marginTop = elem.style.marginBottom = null
+			elem.style.paddingTop = elem.style.paddingBottom = elem.style.overflow = null
+			elem.removeEventListener "transitionend", arguments.callee, false
+
+
+	slideUp: (elem, remove_func, props) ->
+		if elem.offsetTop > 1000
+			return remove_func()
+
+		elem.className += " animate-back"
+		elem.style.boxSizing = "border-box"
+		elem.style.height = elem.offsetHeight+"px"
+		elem.style.overflow = "hidden"
+		elem.style.transform = "scale(1)"
+		elem.style.opacity = "1"
+		elem.style.pointerEvents = "none"
+		setTimeout (->
+			elem.style.height = "0px"
+			elem.style.marginTop = "0px"
+			elem.style.marginBottom = "0px"
+			elem.style.paddingTop = "0px"
+			elem.style.paddingBottom = "0px"
+			elem.style.transform = "scale(0.8)"
+			elem.style.borderTopWidth = "0px"
+			elem.style.borderBottomWidth = "0px"
+			elem.style.opacity = "0"
+		), 1
+		elem.addEventListener "transitionend", (e) ->
+			if e.propertyName == "opacity" or e.elapsedTime >= 0.6
+				elem.removeEventListener "transitionend", arguments.callee, false
+				remove_func()
+
+
+	slideUpInout: (elem, remove_func, props) ->
+		elem.className += " animate-inout"
+		elem.style.boxSizing = "border-box"
+		elem.style.height = elem.offsetHeight+"px"
+		elem.style.overflow = "hidden"
+		elem.style.transform = "scale(1)"
+		elem.style.opacity = "1"
+		elem.style.pointerEvents = "none"
+		setTimeout (->
+			elem.style.height = "0px"
+			elem.style.marginTop = "0px"
+			elem.style.marginBottom = "0px"
+			elem.style.paddingTop = "0px"
+			elem.style.paddingBottom = "0px"
+			elem.style.transform = "scale(0.8)"
+			elem.style.borderTopWidth = "0px"
+			elem.style.borderBottomWidth = "0px"
+			elem.style.opacity = "0"
+		), 1
+		elem.addEventListener "transitionend", (e) ->
+			if e.propertyName == "opacity" or e.elapsedTime >= 0.6
+				elem.removeEventListener "transitionend", arguments.callee, false
+				remove_func()
+
+
+	showRight: (elem, props) ->
+		elem.className += " animate"
+		elem.style.opacity = 0
+		elem.style.transform = "TranslateX(-20px) Scale(1.01)"
+		setTimeout (->
+			elem.style.opacity = 1
+			elem.style.transform = "TranslateX(0px) Scale(1)"
+		), 1
+		elem.addEventListener "transitionend", ->
+			elem.classList.remove("animate")
+			elem.style.transform = elem.style.opacity = null
+
+
+	show: (elem, props) ->
+		delay = arguments[arguments.length-2]?.delay*1000 or 1
+		elem.style.opacity = 0
+		setTimeout (->
+			elem.className += " animate"
+		), 1
+		setTimeout (->
+			elem.style.opacity = 1
+		), delay
+		elem.addEventListener "transitionend", ->
+			elem.classList.remove("animate")
+			elem.style.opacity = null
+			elem.removeEventListener "transitionend", arguments.callee, false
+
+	hide: (elem, remove_func, props) ->
+		delay = arguments[arguments.length-2]?.delay*1000 or 1
+		elem.className += " animate"
+		setTimeout (->
+			elem.style.opacity = 0
+		), delay
+		elem.addEventListener "transitionend", (e) ->
+			if e.propertyName == "opacity"
+				remove_func()
+
+	addVisibleClass: (elem, props) ->
+		setTimeout ->
+			elem.classList.add("visible")
+
+window.Animation = new Animation()

plugins/UiPluginManager/media/js/utils/Dollar.coffee

@@ -0,0 +1,3 @@
+window.$ = (selector) ->
+	if selector.startsWith("#")
+		return document.getElementById(selector.replace("#", ""))

plugins/UiPluginManager/media/js/utils/ZeroFrame.coffee

@@ -0,0 +1,85 @@
+class ZeroFrame extends Class
+	constructor: (url) ->
+		@url = url
+		@waiting_cb = {}
+		@wrapper_nonce = document.location.href.replace(/.*wrapper_nonce=([A-Za-z0-9]+).*/, "$1")
+		@connect()
+		@next_message_id = 1
+		@history_state = {}
+		@init()
+
+
+	init: ->
+		@
+
+
+	connect: ->
+		@target = window.parent
+		window.addEventListener("message", @onMessage, false)
+		@cmd("innerReady")
+
+		# Save scrollTop
+		window.addEventListener "beforeunload", (e) =>
+			@log "save scrollTop", window.pageYOffset
+			@history_state["scrollTop"] = window.pageYOffset
+			@cmd "wrapperReplaceState", [@history_state, null]
+
+		# Restore scrollTop
+		@cmd "wrapperGetState", [], (state) =>
+			@history_state = state if state?
+			@log "restore scrollTop", state, window.pageYOffset
+			if window.pageYOffset == 0 and state
+				window.scroll(window.pageXOffset, state.scrollTop)
+
+
+	onMessage: (e) =>
+		message = e.data
+		cmd = message.cmd
+		if cmd == "response"
+			if @waiting_cb[message.to]?
+				@waiting_cb[message.to](message.result)
+			else
+				@log "Websocket callback not found:", message
+		else if cmd == "wrapperReady" # Wrapper inited later
+			@cmd("innerReady")
+		else if cmd == "ping"
+			@response message.id, "pong"
+		else if cmd == "wrapperOpenedWebsocket"
+			@onOpenWebsocket()
+		else if cmd == "wrapperClosedWebsocket"
+			@onCloseWebsocket()
+		else
+			@onRequest cmd, message.params
+
+
+	onRequest: (cmd, message) =>
+		@log "Unknown request", message
+
+
+	response: (to, result) ->
+		@send {"cmd": "response", "to": to, "result": result}
+
+
+	cmd: (cmd, params={}, cb=null) ->
+		@send {"cmd": cmd, "params": params}, cb
+
+
+	send: (message, cb=null) ->
+		message.wrapper_nonce = @wrapper_nonce
+		message.id = @next_message_id
+		@next_message_id += 1
+		@target.postMessage(message, "*")
+		if cb
+			@waiting_cb[message.id] = cb
+
+
+	onOpenWebsocket: =>
+		@log "Websocket open"
+
+
+	onCloseWebsocket: =>
+		@log "Websocket close"
+
+
+
+window.ZeroFrame = ZeroFrame