Commit a060cd52 authored by Björn Bartels's avatar Björn Bartels

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

parent 0870397d
{
presets: ['es2015']
"presets": ["env"]
}
......@@ -9,6 +9,13 @@ npm-debug.log
.buildpath
.project
.settings
# FE
bower_components
dist
# dev files
*_save*
*.save*
.scanner*
# Changelog
## Version 0.0.2 (Jan, 2017)
Initial release.
## Version 0.0.3 (Dez, 2017)
Some clean up.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This diff is collapsed.
# 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
# You can delete this file. It's just here to make Git happy.
/**
* 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
/**
* 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');
/**
* Layoutcolumn module.
* @module plfoundation.layoutcolumn
*
* @requires plfoundation.Layoutelement
*/
class Layoutcolumn extends Layoutelement {
get classname () { return 'layoutcolumn'; }
}
//PLFoundation.plugin(Layoutcolumn, 'Layoutcolumn');
patternlibrary.plugin(Layoutcolumn, 'Layoutcolumn');
/**
* 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');