add gui sources, add gui tasks, add change-log

.babelrc

 {
-  presets: ['es2015']
+    "presets": ["env"]
 }
+

.gitignore

@@ -9,6 +9,13 @@ npm-debug.log
 .buildpath
 .project
 .settings
+
+# FE
+bower_components
+dist
+
+
+# dev files
 *_save*
 *.save*
 .scanner*

CHANGELOG.md

+# Changelog
+
+## Version 0.0.2 (Jan, 2017)
+
+Initial release.
+
+
+## Version 0.0.3 (Dez, 2017)
+
+Some clean up.

gui/config.yml

+# Your project's server will run on localhost:xxxx at this port
+PORT: 8000
+
+# Autoprefixer will make sure your CSS works with these browsers
+COMPATIBILITY:
+  - "last 2 versions"
+  - "ie >= 9"
+  - "ios >= 7"
+
+# UnCSS will use these settings
+UNCSS_OPTIONS:
+  html:
+    - "src/**/*.html"
+  ignore:
+    - !!js/regexp .foundation-mq
+    - !!js/regexp ^\.is-.*
+
+# Gulp will reference these paths when it copies files
+PATHS:
+  # Path to dist folder
+  dist: "dist"  
+  # Paths to static assets that aren't images, CSS, or JavaScript
+  assets:
+    - "gui/src/assets/**/*"
+    - "!gui/src/assets/{img,js,scss}/**/*"
+  # Paths to Sass libraries, which can then be loaded with @import
+  sass:
+    - "node_modules/plfoundation-sites/scss"
+    - "node_modules/motion-ui/src"
+  # Paths to JavaScript entry points for webpack to bundle modules
+  entries:
+    - "gui/src/assets/js/patternlibrary.js"
+    - "gui/src/assets/vendor/vendor.js"
+    
+# namespace settings
+LIBNAMESPACE:
+  namespace: "plfoundation"
+  src: "node_modules/foundation-sites/**/*"
+  dest: "node_modules/plfoundation-sites"
+  needles:
+    - "foundation"
+    - "Foundation"
+    - "FOUNDATION"
+  replacements:
+    - "plfoundation"
+    - "PLFoundation"
+    - "PLFOUNDATION"
+   
+    
\ No newline at end of file

gui/src/assets/img/.gitkeep

+# You can delete this file. It's just here to make Git happy.

gui/src/assets/js/components/layoutbuilder/layoutbuilder.exception.js

+/**
+ * Layoutbuilder Exception object
+ * 
+ * @module LayoutbuilderException
+ */
+class LayoutbuilderException {
+	
+    /**
+     * Create a new instance of a LayoutbuilderException.
+     * @class
+     * @name LayoutbuilderException
+     * @param {string} message - message of the exception decribing the occurence.
+     * @param {number} code - optional message code, default = 0.
+     */
+	constructor(message, code = 0) {
+
+	    this.name = "LayoutbuilderException";
+	    this.message = message;
+	}
+
+	/**
+	 * compose string output of LayoutbuilderException
+	 * 
+	 * @function
+	 * @return {string}
+	 */
+    toString() { return this.name + ": " + this.message; }
+    
+};
\ No newline at end of file

gui/src/assets/js/components/layoutbuilder/layoutbuilder.layoutbody.js

+/**
+ * Layoutbody module.
+ * @module patternlibrary.layoutbody
+ * 
+ * @requires patternlibrary.Layoutelement
+ * @requires patternlibrary.Plugin
+ * @requires foundation.Triggers
+ */
+class Layoutbody extends Plugin {
+
+    /**
+     * Setup a new instance of a layoutbody.
+     * @class
+     * @name Layoutbody
+     * @param {jQuery} element - jQuery object to make into a layoutbody.
+     *        Object should be of the layoutbody panel, rather than its anchor.
+     * @param {Object} options - Overrides to the default plugin settings.
+     */
+	_setup(element, options) {
+		if (patternlibrary.debug()) console.log('layoutbody init');
+    	this.$element = element;
+        this.options = $.extend({}, Layoutbody.defaults, this.$element.data(), options);
+        this.className = 'layoutbody'; // ie9 back compat
+
+        // Triggers init is idempotent, just need to make sure it is initialized
+        PLFoundation.Triggers.init($);
+
+        this._init();
+
+        // (maybe, this line is not nessessary anymore...?!)
+        //PLFoundation.registerPlugin(this, 'Layoutbody');
+        
+        if (patternlibrary.debug()) console.log('layoutbody initialized');
+    }
+	
+	/**
+     * Initializes the plugin by setting/checking options and attributes, adding helper variables, and saving the anchor.
+     * @function
+     * @private
+     */
+    _init() {
+	    this._events();
+    }
+
+    /**
+     * Adds event listeners to the element utilizing the triggers utility library.
+     * @function
+     * @private
+     */
+    _events() {
+    	this._addKeyHandler();
+    	this._addClickHandler();
+    	this._addFullscreenHandler();
+    }
+    
+    _addFullscreenHandler () {
+        var _this = this;
+
+    	this.$element
+	        .off('fullscreen.pl.layoutbody')
+	        .on('fullscreen.pl.layoutbody', function(e){
+	
+	    	    _this.$element.trigger('fullscreen-switched.pl.layoutbody');
+	    	    
+	            if (!_this.$element.hasClass('fullscreen')) {
+	            	_this.$element.addClass('fullscreen');
+	            	_this.$element.trigger('click.pl.layoutbody');
+		        } else {
+		        	_this.$element.removeClass('fullscreen');
+		        }
+
+	            document.activeElement.blur();
+                
+	            if (patternlibrary.debug()) console.log('layoutbody switch fullscreen:', document.activeElement, e);
+	            
+                e.stopPropagation();
+                e.preventDefault();
+                
+	    });
+    }
+    
+    _addClickHandler () {
+        var _this = this;
+
+    	this.$element
+	        .off('click.pl.layoutbody')
+	        .on('click.pl.layoutbody', function(e){
+	        	
+	        	if (patternlibrary.debug()) console.log('layoutbody focused:', this, e);
+	    	    _this.$element.trigger('focused.pl.layoutbody');
+	    	    
+                e.stopPropagation();
+                e.preventDefault();
+
+	    });
+    }
+    
+    /**
+     * Adds keyboard event handlers for items within the tabs.
+     * @private
+     */
+    _addKeyHandler() {
+        var _this = this;
+
+        $(window)
+            //.off('keydown.pl.layoutbody')
+            .on('keydown.pl.layoutbody', function(e){
+
+    	    this.id = GetYoDigits(6, 'Layoutbody');
+	    	/*
+	    	 * ignore TAB key
+	    	 *  
+	    	 * const keyCodes = {
+	    	 *   9 : 'TAB',
+	    	 *   13: 'ENTER',
+	    	 *   27: 'ESCAPE',
+	    	 *   32: 'SPACE',
+	    	 *   35: 'END',
+	    	 *   36: 'HOME',
+	    	 *   37: 'ARROW_LEFT',
+	    	 *   38: 'ARROW_UP',
+	    	 *   39: 'ARROW_RIGHT',
+	    	 *   40: 'ARROW_DOWN'
+	    	 * }
+	     	 * 
+	    	 */
+	        if (e.which === 9) return;
+	
+	        var $element = $(this);
+	
+	        // handle keyboard event with keyboard util
+	        PLFoundation.Keyboard.handleKey(e, 'Layoutbody', {
+	        	switch: function() {
+	                _this.switchFullscreen();
+	                
+	                e.stopPropagation();
+	                e.preventDefault();
+	            },
+	            handled: function() {
+	                e.stopPropagation();
+	                e.preventDefault();
+	            }
+	        });
+
+	        
+        });
+
+        // register keyboard keys mapping
+        PLFoundation.Keyboard.register('Layoutbody', {
+            'ESCAPE'     : 'switch',
+            'CTRL_ALT_F' : 'switch',
+            'ALT_CTRL_F' : 'switch'
+        });
+        
+    }
+
+    /**
+     * Toggles layout-body's fullscreen display
+     * @function
+     * @private
+     */
+    switchFullscreen() {
+        /*if (!this.$element.hasClass('fullscreen')) {
+        	this.$element.addClass('fullscreen');
+        } else {
+        	this.$element.removeClass('fullscreen');
+        }*/
+
+    	if (patternlibrary.debug()) console.log('layoutbody switch fullscreen');
+	    this.$element.trigger('fullscreen.pl.layoutbody');
+    }
+    
+    /**
+     * Destroys the layoutbody.
+     * @function
+     */
+    _destroy() {
+        this.$element.find('*').off('.pl.layoutbody');
+        this.$element.off('.pl.layoutbody');
+        this.$element.remove();
+    }
+		
+}
+
+//PLFoundation.plugin(Layoutbody, 'Layoutbody');
+patternlibrary.plugin(Layoutbody, 'Layoutbody');
+

gui/src/assets/js/components/layoutbuilder/layoutbuilder.layoutcolumn.js

+/**
+ * Layoutcolumn module.
+ * @module plfoundation.layoutcolumn
+ * 
+ * @requires plfoundation.Layoutelement
+ */
+class Layoutcolumn extends Layoutelement {
+
+	get classname () { return 'layoutcolumn'; }
+	
+}
+
+//PLFoundation.plugin(Layoutcolumn, 'Layoutcolumn');
+patternlibrary.plugin(Layoutcolumn, 'Layoutcolumn');
+

gui/src/assets/js/components/layoutbuilder/layoutbuilder.layoutelement.js

+/**
+ * Layoutelement module.
+ * @module plfoundation.layoutelement
+ * 
+ * @requires plfoundation.Plugin
+ * @requires plfoundation.Keyboard
+ * @requires plfoundation.MediaQuery
+ */
+class Layoutelement extends Plugin {
+
+    /**
+     * Setup a new instance of a layoutelement.
+     * @class
+     * @name Layoutelement
+     * @param {jQuery} element - jQuery object to make into a layoutelement.
+     *        Object should be of the layoutelement panel, rather than its anchor.
+     * @param {Object} options - Overrides to the default plugin settings.
+     */
+	_setup(element, options) {
+		if (patternlibrary.debug()) console.log('layoutelement init');
+    	this.$element = element;
+        this.options = $.extend({}, Layoutelement.defaults, this.$element.data(), options);
+        this.className = 'layoutelement'; // ie9 back compat
+
+        // Triggers init is idempotent, just need to make sure it is initialized
+        PLFoundation.Triggers.init($);
+
+        this._init();
+
+        // (maybe, this line is not nessessary anymore...?!)
+        //PLFoundation.registerPlugin(this, 'Layoutelement');
+        
+        if (patternlibrary.debug()) console.log('layoutelement initialized');
+    }
+	
+	/**
+     * Initializes the plugin by setting/checking options and attributes, adding helper variables, and saving the anchor.
+     * @function
+     * @private
+     */
+    _init() {
+	    this._events();
+    }
+
+    /**
+     * Adds event listeners to the element utilizing the triggers utility library.
+     * @function
+     * @private
+     */
+    _events() {
+        this._addClickHandler();
+        this._addFocusHandler();
+    }
+
+    /**
+     * Adds click handlers for items within the tabs.
+     * @function
+     * @private
+     */
+    _addClickHandler() {
+        var _this = this;
+
+        this.$element
+            .off('click.pl.layoutelement')
+            .on('click.pl.layoutelement', function(e){
+
+            	if (patternlibrary.debug()) console.log('layoutelement click handler');
+        	    _this.$element.trigger('clicked');
+        	    
+                e.preventDefault();
+                e.stopPropagation();
+                
+               _this.focus();
+        });
+    }
+
+    /**
+     * Adds click handlers for items within the tabs.
+     * @function
+     * @private
+     */
+    _addFocusHandler() {
+        var _this = this;
+
+        this.$element
+            .off('focused.pl.layoutelement')
+            .on('focused.pl.layoutelement', function(e){
+
+            	if (patternlibrary.debug()) console.log('layoutelement focus event handler:', _this._dragtrigger, _this._elementtoolbar);
+        	    
+            	if (!(_this._dragtrigger instanceof Layoutelementdragtrigger)) {
+            		_this._initDragtrigger();
+            	}
+            	if (!(_this._elementtoolbar instanceof Layoutelementtoolbar)) {
+            		_this._initElementtoolbar();
+            	}
+
+            	if (_this._toolbar instanceof Layouttoolbar) {
+            	    _this._toolbar.switchSection(_this.classname);
+            	}
+            	//_this.$element.trigger('focused');
+        	    
+                e.preventDefault();
+                e.stopPropagation();
+                
+               //_this.focus();
+        });
+
+        this.$element
+            .off('unfocused.pl.layoutelement')
+            .on('unfocused.pl.layoutelement', function(e){
+
+            	if (patternlibrary.debug()) console.log('layoutelement un-focus event handler:', _this._dragtrigger, _this._elementtoolbar);
+
+            	if (_this._dragtrigger instanceof Layoutelementdragtrigger) {
+            		_this._dragtrigger.destroy();
+            	}
+            	if (_this._elementtoolbar instanceof Layoutelementtoolbar) {
+            		_this._elementtoolbar.destroy();
+            	}
+
+            	if (_this._toolbar instanceof Layouttoolbar) {
+                	_this._toolbar.hideSections();
+            	}
+            	//_this.$element.trigger('unfocused');
+        	    
+                //e.preventDefault();
+                //e.stopPropagation();
+                
+               //_this.focus();
+        });
+    }
+
+    /**
+     * Set focus class on current $element, removes from others
+     * @function
+     * @private
+     */
+    _focusLayoutelement() {
+    	$('[data-layoutelementtoolbar],[data-layoutelementdragtrigger]').remove();
+    	if (!this.$element.hasClass(this.options.focusClassname)) {
+        	$('.'+this.options.focusClassname).removeClass(this.options.focusClassname);
+        	this.$element.addClass(this.options.focusClassname);
+        	if (patternlibrary.debug()) console.log('layoutelement focused:', this.uuid);
+    	    this.$element.trigger('focused');
+    	} else {
+        	this.$element.removeClass(this.options.focusClassname);
+        	if (patternlibrary.debug()) console.log('layoutelement un-focused:', this.uuid);
+    	    this.$element.children().trigger('unfocused');
+    	    this.$element.trigger('unfocused');
+    	}
+    	if (patternlibrary.debug()) console.log('layoutelement focus changed');
+	    this.$element.trigger('focuschange');
+    	return (this);
+    }
+  
+    /**
+     * Set focus on current $element
+     * @function
+     * @public
+     */
+    focus() {
+    	return this._focusLayoutelement();
+    }
+  
+    /**
+     * Un-focus any layout element
+     * @function
+     * @public
+     */
+    unfocus() {
+    	$('[data-layoutbody] .focused').each((idx, elem) => {
+    		if ($(elem).data()) {
+    			$(elem).data('patternlibraryPlugin').focus();
+    		}
+    	});
+    }
+  
+    /**
+     * Retrieve element's toolbar instance
+     * @private
+     */
+    get _elementtoolbar() {
+        if (patternlibrary.debug()) console.log('layoutelementtoolbar section element:', this.$element.find('> [data-layoutelementtoolbar]'));
+    	return this.$element.find('> [data-layoutelementtoolbar]').data('patternlibraryPlugin');
+    }
+  
+	/**
+     * Initializes a single new toolbar sections
+     * @function
+     * @private
+     */
+    _initElementtoolbar(sectionconfig) {
+        if (patternlibrary.debug()) console.log('layoutelementtoolbar initialize section element:', sectionconfig);
+        
+        this.$element.prepend(Layoutelementtoolbar.prototype.toElement());
+        var $toolbarsection = this.$element.find('> [data-layoutelementtoolbar]');
+        var $section = new Layoutelementtoolbar (
+        	$toolbarsection,
+        	sectionconfig
+        );
+        $toolbarsection.data('patternlibraryPlugin', $section);
+        //$section.$element.children().first().patternlibrary();//plfoundation();//
+        //$section.$element.trigger('initialized');
+        
+        if (patternlibrary.debug()) console.log('layoutelementtoolbar initialized: ', $section);
+    }
+
+    /**
+     * Retrieve element's drag-trigger instance
+     * @private
+     */
+    get _dragtrigger() {
+    	if (patternlibrary.debug()) console.log('layoutelementdragtrigger section element:', this.$element.find('> [data-layoutelementdragtrigger]'));
+    	return this.$element.find('> [data-layoutelementdragtrigger]').data('patternlibraryPlugin');
+    }
+    
+	/**
+     * Initializes a single new drag-trigger sections
+     * @function
+     * @private
+     */
+    _initDragtrigger(sectionconfig) {
+        if (patternlibrary.debug()) console.log('layoutelementdragtrigger initialize section element:', sectionconfig);
+        
+        this.$element.prepend(Layoutelementdragtrigger.prototype.toElement());
+        var $toolbarsection = this.$element.find('> [data-layoutelementdragtrigger]');
+        var $section = new Layoutelementdragtrigger (
+         	$toolbarsection,
+        	sectionconfig
+        );
+        $toolbarsection.data('patternlibraryPlugin', $section);
+        //$section.$element.children().first().patternlibrary();//plfoundation();//
+        //$section.$element.trigger('initialized');
+        
+        if (patternlibrary.debug()) console.log('layoutelementdragtrigger initialized: ', $section);
+    }
+
+    /**
+     * Destroys the layoutelement.
+     * @function
+     * @private
+     */
+    _destroy() {
+        this.$element.find('*').off('.pl.layoutelement');
+        this.$element.off('.pl.layoutelement');
+        this.$element.remove();
+    }
+
+}
+
+Layoutelement.defaults = {
+	activeClassname : 'activated',
+	focusClassname  : 'focused'
+}
+
+//PLFoundation.plugin(Layoutelement, 'Layoutelement');
+patternlibrary.plugin(Layoutelement, 'Layoutelement');