@pageboard/html 0.14.19 → 0.14.21

package/ui/components/colorize.js

@@ -0,0 +1,274 @@
+/*!
+ * # Semantic UI 2.0.0 - Colorize
+ * http://github.com/semantic-org/semantic-ui/
+ *
+ *
+ * Copyright 2015 Contributors
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ */
+
+;(function ( $, window, document, undefined ) {
+
+  "use strict";
+
+  $.fn.colorize = function(parameters) {
+    var
+      settings          = ( $.isPlainObject(parameters) )
+        ? $.extend(true, {}, $.fn.colorize.settings, parameters)
+        : $.extend({}, $.fn.colorize.settings),
+      // hoist arguments
+      moduleArguments = arguments || false
+    ;
+    $(this)
+      .each(function(instanceIndex) {
+
+        var
+          $module         = $(this),
+
+          mainCanvas      = $('<canvas />')[0],
+          imageCanvas     = $('<canvas />')[0],
+          overlayCanvas   = $('<canvas />')[0],
+
+          backgroundImage = new Image(),
+
+          // defs
+          mainContext,
+          imageContext,
+          overlayContext,
+
+          image,
+          imageName,
+
+          width,
+          height,
+
+          // shortcuts
+          colors    = settings.colors,
+          paths     = settings.paths,
+          namespace = settings.namespace,
+          error     = settings.error,
+
+          // boilerplate
+          instance   = $module.data('module-' + namespace),
+          module
+        ;
+
+        module = {
+
+          checkPreconditions: function() {
+            module.debug('Checking pre-conditions');
+
+            if( !$.isPlainObject(colors) || $.isEmptyObject(colors) ) {
+              module.error(error.undefinedColors);
+              return false;
+            }
+            return true;
+          },
+
+          async: function(callback) {
+            if(settings.async) {
+              setTimeout(callback, 0);
+            }
+            else {
+              callback();
+            }
+          },
+
+          getMetadata: function() {
+            module.debug('Grabbing metadata');
+            image     = $module.data('image') || settings.image || undefined;
+            imageName = $module.data('name')  || settings.name  || instanceIndex;
+            width     = settings.width        || $module.width();
+            height    = settings.height       || $module.height();
+            if(width === 0 || height === 0) {
+              module.error(error.undefinedSize);
+            }
+          },
+
+          initialize: function() {
+            module.debug('Initializing with colors', colors);
+            if( module.checkPreconditions() ) {
+
+              module.async(function() {
+                module.getMetadata();
+                module.canvas.create();
+
+                module.draw.image(function() {
+                  module.draw.colors();
+                  module.canvas.merge();
+                });
+                $module
+                  .data('module-' + namespace, module)
+                ;
+              });
+            }
+          },
+
+          redraw: function() {
+            module.debug('Redrawing image');
+            module.async(function() {
+              module.canvas.clear();
+              module.draw.colors();
+              module.canvas.merge();
+            });
+          },
+
+          change: {
+            color: function(colorName, color) {
+              module.debug('Changing color', colorName);
+              if(colors[colorName] === undefined) {
+                module.error(error.missingColor);
+                return false;
+              }
+              colors[colorName] = color;
+              module.redraw();
+            }
+          },
+
+          canvas: {
+            create: function() {
+              module.debug('Creating canvases');
+
+              mainCanvas.width     = width;
+              mainCanvas.height    = height;
+              imageCanvas.width    = width;
+              imageCanvas.height   = height;
+              overlayCanvas.width  = width;
+              overlayCanvas.height = height;
+
+              mainContext    = mainCanvas.getContext('2d');
+              imageContext   = imageCanvas.getContext('2d');
+              overlayContext = overlayCanvas.getContext('2d');
+
+              $module
+                .append( mainCanvas )
+              ;
+              mainContext    = $module.children('canvas')[0].getContext('2d');
+            },
+            clear: function(context) {
+              module.debug('Clearing canvas');
+              overlayContext.fillStyle = '#FFFFFF';
+              overlayContext.fillRect(0, 0, width, height);
+            },
+            merge: function() {
+              if( !$.isFunction(mainContext.blendOnto) ) {
+                module.error(error.missingPlugin);
+                return;
+              }
+              mainContext.putImageData( imageContext.getImageData(0, 0, width, height), 0, 0);
+              overlayContext.blendOnto(mainContext, 'multiply');
+            }
+          },
+
+          draw: {
+
+            image: function(callback) {
+              module.debug('Drawing image');
+              callback = callback || function(){};
+              if(image) {
+                backgroundImage.src    = image;
+                backgroundImage.onload = function() {
+                  imageContext.drawImage(backgroundImage, 0, 0);
+                  callback();
+                };
+              }
+              else {
+                module.error(error.noImage);
+                callback();
+              }
+            },
+
+            colors: function() {
+              module.debug('Drawing color overlays', colors);
+              $.each(colors, function(colorName, color) {
+                settings.onDraw(overlayContext, imageName, colorName, color);
+              });
+            }
+
+          },
+
+          debug: function(message, variableName) {
+            if(settings.debug) {
+              if(variableName !== undefined) {
+                console.info(settings.name + ': ' + message, variableName);
+              }
+              else {
+                console.info(settings.name + ': ' + message);
+              }
+            }
+          },
+          error: function(errorMessage) {
+            console.warn(settings.name + ': ' + errorMessage);
+          },
+          invoke: function(methodName, context, methodArguments) {
+            var
+              method
+            ;
+            methodArguments = methodArguments || Array.prototype.slice.call( arguments, 2 );
+
+            if(typeof methodName == 'string' && instance !== undefined) {
+              methodName = methodName.split('.');
+              $.each(methodName, function(index, name) {
+                if( $.isPlainObject( instance[name] ) ) {
+                  instance = instance[name];
+                  return true;
+                }
+                else if( $.isFunction( instance[name] ) ) {
+                  method = instance[name];
+                  return true;
+                }
+                module.error(settings.error.method);
+                return false;
+              });
+            }
+            return ( $.isFunction( method ) )
+              ? method.apply(context, methodArguments)
+              : false
+            ;
+          }
+
+        };
+        if(instance !== undefined && moduleArguments) {
+          // simpler than invoke realizing to invoke itself (and losing scope due prototype.call()
+          if(moduleArguments[0] == 'invoke') {
+            moduleArguments = Array.prototype.slice.call( moduleArguments, 1 );
+          }
+          return module.invoke(moduleArguments[0], this, Array.prototype.slice.call( moduleArguments, 1 ) );
+        }
+        // initializing
+        module.initialize();
+      })
+    ;
+    return this;
+  };
+
+  $.fn.colorize.settings = {
+    name      : 'Image Colorizer',
+    debug     : true,
+    namespace : 'colorize',
+
+    onDraw    : function(overlayContext, imageName, colorName, color) {},
+
+    // whether to block execution while updating canvas
+    async     : true,
+    // object containing names and default values of color regions
+    colors    : {},
+
+    metadata: {
+      image : 'image',
+      name  : 'name'
+    },
+
+    error: {
+      noImage         : 'No tracing image specified',
+      undefinedColors : 'No default colors specified.',
+      missingColor    : 'Attempted to change color that does not exist',
+      missingPlugin   : 'Blend onto plug-in must be included',
+      undefinedHeight : 'The width or height of image canvas could not be automatically determined. Please specify a height.'
+    }
+
+  };
+
+})( jQuery, window , document );

package/ui/components/comment.css

@@ -0,0 +1,268 @@
+/*!
+ * # Semantic UI 2.4.1 - Comment
+ * http://github.com/semantic-org/semantic-ui/
+ *
+ *
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ */
+
+
+/*******************************
+            Standard
+*******************************/
+
+
+/*--------------
+    Comments
+---------------*/
+
+.ui.comments {
+	margin: 1.5em 0em;
+	max-width: 650px;
+}
+.ui.comments:first-child {
+	margin-top: 0em;
+}
+.ui.comments:last-child {
+	margin-bottom: 0em;
+}
+
+/*--------------
+     Comment
+---------------*/
+
+.ui.comments .comment {
+	position: relative;
+	background: none;
+	margin: 0.5em 0em 0em;
+	padding: 0.5em 0em 0em;
+	border: none;
+	border-top: none;
+	line-height: 1.2;
+}
+.ui.comments .comment:first-child {
+	margin-top: 0em;
+	padding-top: 0em;
+}
+
+/*--------------------
+    Nested Comments
+---------------------*/
+
+.ui.comments .comment .comments {
+	margin: 0em 0em 0.5em 0.5em;
+	padding: 1em 0em 1em 1em;
+}
+.ui.comments .comment .comments::before {
+	position: absolute;
+	top: 0px;
+	left: 0px;
+}
+.ui.comments .comment .comments .comment {
+	border: none;
+	border-top: none;
+	background: none;
+}
+
+/*--------------
+     Avatar
+---------------*/
+
+.ui.comments .comment .avatar {
+	display: block;
+	width: 2.5em;
+	height: auto;
+	float: left;
+	margin: 0.2em 0em 0em;
+}
+.ui.comments .comment img.avatar,
+.ui.comments .comment .avatar img {
+	display: block;
+	margin: 0em auto;
+	width: 100%;
+	height: 100%;
+	border-radius: 0.25rem;
+}
+
+/*--------------
+     Content
+---------------*/
+
+.ui.comments .comment > .content {
+	display: block;
+}
+
+/* If there is an avatar move content over */
+.ui.comments .comment > .avatar ~ .content {
+	margin-left: 3.5em;
+}
+
+/*--------------
+     Author
+---------------*/
+
+.ui.comments .comment .author {
+	font-size: 1em;
+	color: rgb(0 0 0 / 87%);
+	font-weight: bold;
+}
+.ui.comments .comment a.author {
+	cursor: pointer;
+}
+.ui.comments .comment a.author:hover {
+	color: #1e70bf;
+}
+
+/*--------------
+     Metadata
+---------------*/
+
+.ui.comments .comment .metadata {
+	display: inline-block;
+	margin-left: 0.5em;
+	color: rgb(0 0 0 / 40%);
+	font-size: 0.875em;
+}
+.ui.comments .comment .metadata > * {
+	display: inline-block;
+	margin: 0em 0.5em 0em 0em;
+}
+.ui.comments .comment .metadata > :last-child {
+	margin-right: 0em;
+}
+
+/*--------------------
+     Comment Text
+---------------------*/
+
+.ui.comments .comment .text {
+	margin: 0.25em 0em 0.5em;
+	font-size: 1em;
+	word-wrap: break-word;
+	color: rgb(0 0 0 / 87%);
+	line-height: 1.3;
+}
+
+/*--------------------
+     User Actions
+---------------------*/
+
+.ui.comments .comment .actions {
+	font-size: 0.875em;
+}
+.ui.comments .comment .actions a {
+	cursor: pointer;
+	display: inline-block;
+	margin: 0em 0.75em 0em 0em;
+	color: rgb(0 0 0 / 40%);
+}
+.ui.comments .comment .actions a:last-child {
+	margin-right: 0em;
+}
+.ui.comments .comment .actions a.active,
+.ui.comments .comment .actions a:hover {
+	color: rgb(0 0 0 / 80%);
+}
+
+/*--------------------
+      Reply Form
+---------------------*/
+
+.ui.comments > .reply.form {
+	margin-top: 1em;
+}
+.ui.comments .comment .reply.form {
+	width: 100%;
+	margin-top: 1em;
+}
+.ui.comments .reply.form textarea {
+	font-size: 1em;
+	height: 12em;
+}
+
+
+/*******************************
+            State
+*******************************/
+
+.ui.collapsed.comments,
+.ui.comments .collapsed.comments,
+.ui.comments .collapsed.comment {
+	display: none;
+}
+
+
+/*******************************
+           Variations
+*******************************/
+
+
+/*--------------------
+        Threaded
+---------------------*/
+
+.ui.threaded.comments .comment .comments {
+	margin: -1.5em 0 -1em 1.25em;
+	padding: 3em 0em 2em 2.25em;
+	box-shadow: -1px 0px 0px rgb(34 36 38 / 15%);
+}
+
+/*--------------------
+        Minimal
+---------------------*/
+
+.ui.minimal.comments .comment .actions {
+	opacity: 0;
+	position: absolute;
+	top: 0px;
+	right: 0px;
+	left: auto;
+	transition: opacity 0.2s ease;
+	transition-delay: 0.1s;
+}
+.ui.minimal.comments .comment > .content:hover > .actions {
+	opacity: 1;
+}
+
+/*-------------------
+        Sizes
+--------------------*/
+
+.ui.mini.comments {
+	font-size: 0.7857rem;
+}
+.ui.tiny.comments {
+	font-size: 0.8571rem;
+}
+.ui.small.comments {
+	font-size: 0.9285rem;
+}
+.ui.comments {
+	font-size: 1rem;
+}
+.ui.large.comments {
+	font-size: 1.1428rem;
+}
+.ui.big.comments {
+	font-size: 1.2857rem;
+}
+.ui.huge.comments {
+	font-size: 1.4285rem;
+}
+.ui.massive.comments {
+	font-size: 1.7142rem;
+}
+
+
+/*******************************
+         Theme Overrides
+*******************************/
+
+
+
+/*******************************
+    User Variable Overrides
+*******************************/
+

package/ui/components/container.css

@@ -0,0 +1,149 @@
+/*!
+ * # Semantic UI 2.4.1 - Container
+ * http://github.com/semantic-org/semantic-ui/
+ *
+ *
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ */
+
+
+/*******************************
+            Container
+*******************************/
+
+
+/* All Sizes */
+.ui.container {
+	display: block;
+	max-width: 100% !important;
+}
+
+/* Mobile */
+
+@media (width <= 767px) {
+	.ui.container {
+		width: auto !important;
+		margin-left: 1em !important;
+		margin-right: 1em !important;
+	}
+	.ui.grid.container {
+		width: auto !important;
+	}
+	.ui.relaxed.grid.container {
+		width: auto !important;
+	}
+	.ui.very.relaxed.grid.container {
+		width: auto !important;
+	}
+}
+
+/* Tablet */
+
+@media (width >= 768px) and (width <= 991px) {
+	.ui.container {
+		width: 723px;
+		margin-left: auto !important;
+		margin-right: auto !important;
+	}
+	.ui.grid.container {
+		width: calc( 723px + 2rem ) !important;
+	}
+	.ui.relaxed.grid.container {
+		width: calc( 723px + 3rem ) !important;
+	}
+	.ui.very.relaxed.grid.container {
+		width: calc( 723px + 5rem ) !important;
+	}
+}
+
+/* Small Monitor */
+
+@media (width >= 992px) and (width <= 1199px) {
+	.ui.container {
+		width: 933px;
+		margin-left: auto !important;
+		margin-right: auto !important;
+	}
+	.ui.grid.container {
+		width: calc( 933px + 2rem ) !important;
+	}
+	.ui.relaxed.grid.container {
+		width: calc( 933px + 3rem ) !important;
+	}
+	.ui.very.relaxed.grid.container {
+		width: calc( 933px + 5rem ) !important;
+	}
+}
+
+/* Large Monitor */
+
+@media (width >= 1200px) {
+	.ui.container {
+		width: 1127px;
+		margin-left: auto !important;
+		margin-right: auto !important;
+	}
+	.ui.grid.container {
+		width: calc( 1127px + 2rem ) !important;
+	}
+	.ui.relaxed.grid.container {
+		width: calc( 1127px + 3rem ) !important;
+	}
+	.ui.very.relaxed.grid.container {
+		width: calc( 1127px + 5rem ) !important;
+	}
+}
+
+
+/*******************************
+             Types
+*******************************/
+
+
+/* Text Container */
+.ui.text.container {
+	font-family: Lato, 'Helvetica Neue', Arial, Helvetica, sans-serif;
+	max-width: 700px !important;
+	line-height: 1.5;
+}
+.ui.text.container {
+	font-size: 1.1428rem;
+}
+
+/* Fluid */
+.ui.fluid.container {
+	width: 100%;
+}
+
+
+/*******************************
+           Variations
+*******************************/
+
+.ui[class*="left aligned"].container {
+	text-align: left;
+}
+.ui[class*="center aligned"].container {
+	text-align: center;
+}
+.ui[class*="right aligned"].container {
+	text-align: right;
+}
+.ui.justified.container {
+	text-align: justify;
+	hyphens: auto;
+}
+
+
+/*******************************
+         Theme Overrides
+*******************************/
+
+
+
+/*******************************
+         Site Overrides
+*******************************/
+