Initial commit

web/misc/bootstrap-wysiwyg.js

@@ -0,0 +1,200 @@
+/* http://github.com/mindmup/bootstrap-wysiwyg */
+/*global jQuery, $, FileReader*/
+/*jslint browser:true*/
+(function ($) {
+	'use strict';
+	var readFileIntoDataUrl = function (fileInfo) {
+		var loader = $.Deferred(),
+			fReader = new FileReader();
+		fReader.onload = function (e) {
+			loader.resolve(e.target.result);
+		};
+		fReader.onerror = loader.reject;
+		fReader.onprogress = loader.notify;
+		fReader.readAsDataURL(fileInfo);
+		return loader.promise();
+	};
+	$.fn.cleanHtml = function () {
+		var html = $(this).html();
+		return html && html.replace(/(<br>|\s|<div><br><\/div>|&nbsp;)*$/, '');
+	};
+	$.fn.wysiwyg = function (userOptions) {
+		var editor = this,
+			selectedRange,
+			options,
+			toolbarBtnSelector,
+			updateToolbar = function () {
+				if (options.activeToolbarClass) {
+					$(options.toolbarSelector).find(toolbarBtnSelector).each(function () {
+						var command = $(this).data(options.commandRole);
+						if (document.queryCommandState(command)) {
+							$(this).addClass(options.activeToolbarClass);
+						} else {
+							$(this).removeClass(options.activeToolbarClass);
+						}
+					});
+				}
+			},
+			execCommand = function (commandWithArgs, valueArg) {
+				var commandArr = commandWithArgs.split(' '),
+					command = commandArr.shift(),
+					args = commandArr.join(' ') + (valueArg || '');
+				document.execCommand(command, 0, args);
+				updateToolbar();
+			},
+			bindHotkeys = function (hotKeys) {
+				$.each(hotKeys, function (hotkey, command) {
+					editor.keydown(hotkey, function (e) {
+						if (editor.attr('contenteditable') && editor.is(':visible')) {
+							e.preventDefault();
+							e.stopPropagation();
+							execCommand(command);
+						}
+					}).keyup(hotkey, function (e) {
+						if (editor.attr('contenteditable') && editor.is(':visible')) {
+							e.preventDefault();
+							e.stopPropagation();
+						}
+					});
+				});
+			},
+			getCurrentRange = function () {
+				var sel = window.getSelection();
+				if (sel.getRangeAt && sel.rangeCount) {
+					return sel.getRangeAt(0);
+				}
+			},
+			saveSelection = function () {
+				selectedRange = getCurrentRange();
+			},
+			restoreSelection = function () {
+				var selection = window.getSelection();
+				if (selectedRange) {
+					try {
+						selection.removeAllRanges();
+					} catch (ex) {
+						document.body.createTextRange().select();
+						document.selection.empty();
+					}
+
+					selection.addRange(selectedRange);
+				}
+			},
+			insertFiles = function (files) {
+				editor.focus();
+				$.each(files, function (idx, fileInfo) {
+					if (/^image\//.test(fileInfo.type)) {
+						$.when(readFileIntoDataUrl(fileInfo)).done(function (dataUrl) {
+							execCommand('insertimage', dataUrl);
+						}).fail(function (e) {
+							options.fileUploadError("file-reader", e);
+						});
+					} else {
+						options.fileUploadError("unsupported-file-type", fileInfo.type);
+					}
+				});
+			},
+			markSelection = function (input, color) {
+				restoreSelection();
+				if (document.queryCommandSupported('hiliteColor')) {
+					document.execCommand('hiliteColor', 0, color || 'transparent');
+				}
+				saveSelection();
+				input.data(options.selectionMarker, color);
+			},
+			bindToolbar = function (toolbar, options) {
+				toolbar.find(toolbarBtnSelector).click(function () {
+					restoreSelection();
+					editor.focus();
+					execCommand($(this).data(options.commandRole));
+					saveSelection();
+				});
+				toolbar.find('[data-toggle=dropdown]').click(restoreSelection);
+
+				toolbar.find('input[type=text][data-' + options.commandRole + ']').on('webkitspeechchange change', function () {
+					var newValue = this.value; /* ugly but prevents fake double-calls due to selection restoration */
+					this.value = '';
+					restoreSelection();
+					if (newValue) {
+						editor.focus();
+						execCommand($(this).data(options.commandRole), newValue);
+					}
+					saveSelection();
+				}).on('focus', function () {
+					var input = $(this);
+					if (!input.data(options.selectionMarker)) {
+						markSelection(input, options.selectionColor);
+						input.focus();
+					}
+				}).on('blur', function () {
+					var input = $(this);
+					if (input.data(options.selectionMarker)) {
+						markSelection(input, false);
+					}
+				});
+				toolbar.find('input[type=file][data-' + options.commandRole + ']').change(function () {
+					restoreSelection();
+					if (this.type === 'file' && this.files && this.files.length > 0) {
+						insertFiles(this.files);
+					}
+					saveSelection();
+					this.value = '';
+				});
+			},
+			initFileDrops = function () {
+				editor.on('dragenter dragover', false)
+					.on('drop', function (e) {
+						var dataTransfer = e.originalEvent.dataTransfer;
+						e.stopPropagation();
+						e.preventDefault();
+						if (dataTransfer && dataTransfer.files && dataTransfer.files.length > 0) {
+							insertFiles(dataTransfer.files);
+						}
+					});
+			};
+		options = $.extend({}, $.fn.wysiwyg.defaults, userOptions);
+		toolbarBtnSelector = 'a[data-' + options.commandRole + '],button[data-' + options.commandRole + '],input[type=button][data-' + options.commandRole + ']';
+		bindHotkeys(options.hotKeys);
+		if (options.dragAndDropImages) {
+			initFileDrops();
+		}
+		bindToolbar($(options.toolbarSelector), options);
+		editor.attr('contenteditable', true)
+			.on('mouseup keyup mouseout', function () {
+				saveSelection();
+				updateToolbar();
+			});
+		$(window).bind('touchend', function (e) {
+			var isInside = (editor.is(e.target) || editor.has(e.target).length > 0),
+				currentRange = getCurrentRange(),
+				clear = currentRange && (currentRange.startContainer === currentRange.endContainer && currentRange.startOffset === currentRange.endOffset);
+			if (!clear || isInside) {
+				saveSelection();
+				updateToolbar();
+			}
+		});
+		return this;
+	};
+	$.fn.wysiwyg.defaults = {
+		hotKeys: {
+			'ctrl+b meta+b': 'bold',
+			'ctrl+i meta+i': 'italic',
+			'ctrl+u meta+u': 'underline',
+			'ctrl+z meta+z': 'undo',
+			'ctrl+y meta+y meta+shift+z': 'redo',
+			'ctrl+l meta+l': 'justifyleft',
+			'ctrl+r meta+r': 'justifyright',
+			'ctrl+e meta+e': 'justifycenter',
+			'ctrl+j meta+j': 'justifyfull',
+			'shift+tab': 'outdent',
+			'tab': 'indent'
+		},
+		toolbarSelector: '[data-role=editor-toolbar]',
+		commandRole: 'edit',
+		activeToolbarClass: 'btn-info',
+		selectionMarker: 'edit-focus-marker',
+		selectionColor: 'darkgrey',
+		dragAndDropImages: true,
+		fileUploadError: function (reason, detail) { console.log("File upload error", reason, detail); }
+	};
+}(window.jQuery));

web/misc/dashboard.css

@@ -0,0 +1,93 @@
+body {
+  font-size: .875rem;
+}
+
+.feather {
+  width: 16px;
+  height: 16px;
+  vertical-align: text-bottom;
+}
+
+/*
+ * Sidebar
+ */
+
+.sidebar {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 100; /* Behind the navbar */
+  padding: 0;
+  box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
+}
+
+.sidebar-sticky {
+  position: -webkit-sticky;
+  position: sticky;
+  top: 48px; /* Height of navbar */
+  height: calc(100vh - 48px);
+  padding-top: .5rem;
+  overflow-x: hidden;
+  overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
+}
+
+.sidebar .nav-link {
+  font-weight: 500;
+  color: #333;
+}
+
+.sidebar .nav-link .feather {
+  margin-right: 4px;
+  color: #999;
+}
+
+.sidebar .nav-link.active {
+  color: #007bff;
+}
+
+.sidebar .nav-link:hover .feather,
+.sidebar .nav-link.active .feather {
+  color: inherit;
+}
+
+.sidebar-heading {
+  font-size: .75rem;
+  text-transform: uppercase;
+}
+
+/*
+ * Navbar
+ */
+
+.navbar-brand {
+  padding-top: .75rem;
+  padding-bottom: .75rem;
+  font-size: 1rem;
+  background-color: rgba(0, 0, 0, .25);
+  box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25);
+}
+
+.navbar .form-control {
+  padding: .75rem 1rem;
+  border-width: 0;
+  border-radius: 0;
+}
+
+.form-control-dark {
+  color: #fff;
+  background-color: rgba(255, 255, 255, .1);
+  border-color: rgba(255, 255, 255, .1);
+}
+
+.form-control-dark:focus {
+  border-color: transparent;
+  box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);
+}
+
+/*
+ * Utilities
+ */
+
+.border-top { border-top: 1px solid #e5e5e5; }
+.border-bottom { border-bottom: 1px solid #e5e5e5; }