diff --git a/src/index.html b/src/index.html index f166126..1172f9e 100755 --- a/src/index.html +++ b/src/index.html @@ -25,21 +25,19 @@
- -
- - left - - -
- Main -
- - + + + left + + + +
Main
+ + Notes -
- + +
diff --git a/src/js/components/flexiblegrid/directives/border.directive.js b/src/js/components/flexiblegrid/directives/border.directive.js index d7e5dbf..c92ebe3 100755 --- a/src/js/components/flexiblegrid/directives/border.directive.js +++ b/src/js/components/flexiblegrid/directives/border.directive.js @@ -1,9 +1,29 @@ //######################################################################## //###################START border######################################### flexibleGridDirectives.border = function(tplsUrl){ - var linker = function(iScope, iElement, iAttrs){}; + var linker = function(iScope, iElement, iAttrs){ + var classes = iElement[0].className.split(' '); + var setTargetSize = function(target, size){ + for(i in classes){ + if(classes[i] === 'bottom' || classes[i] === 'top'){ + target.height(size); + }else if(classes[i] === 'left' || classes[i] === 'right'){ + target.width(size); + } + } + }; + iScope.$on('borderSizeChanged', function(event, data){ + for(i in classes){ + if(data.direction === classes[i]){ + setTargetSize(iElement, data.getNewSize()); + } + } + }) + }; return { - restrict: "EA", + restrict: "E", + replace: true, + transclude: true, link: linker, templateUrl: tplsUrl + 'border.tpl.html' }; diff --git a/src/js/components/flexiblegrid/directives/flexiblegrid.directive.js b/src/js/components/flexiblegrid/directives/flexiblegrid.directive.js index c257fcf..12f1c78 100755 --- a/src/js/components/flexiblegrid/directives/flexiblegrid.directive.js +++ b/src/js/components/flexiblegrid/directives/flexiblegrid.directive.js @@ -2,11 +2,21 @@ //###################START flexibleGrid################################### flexibleGridDirectives.flexibleGrid = function(tplsUrl){ var linker = function(iScope, iElement, iAttrs){ - // ll + iScope.$on('sizeChanged', function(event, data){ + if(data.type === "free"){ + iScope.$broadcast('borderSizeChanged', data); + }else{ + iScope.$broadcast('mainSizeChanged', data); + iScope.$broadcast('borderSizeChanged', data); + } + }); }; return { - restrict: "EA", - link: linker + restrict: "E", + replace: true, + transclude: true, + link: linker, + templateUrl: tplsUrl + 'flexiblegrid.tpl.html' }; }; //###################END flexibleGrid##################################### diff --git a/src/js/components/flexiblegrid/directives/handle.directive.js b/src/js/components/flexiblegrid/directives/handle.directive.js index 6570327..9e87643 100755 --- a/src/js/components/flexiblegrid/directives/handle.directive.js +++ b/src/js/components/flexiblegrid/directives/handle.directive.js @@ -1,9 +1,121 @@ //######################################################################## //###################START handle######################################### -flexibleGridDirectives.handle = function(tplsUrl){ - var linker = function(iScope, iElement, iAttrs){}; +flexibleGridDirectives.handle = function(tplsUrl, $window){ + var linker = function(iScope, iElement, iAttrs){ + var __slice = [].slice; + var options = { + borderMin: 0 + }; + var throttle = function(delay, fn) { + var throttled = false; + return function() { + if (throttled) { + return; + } + throttled = true; + setTimeout((function() { + return throttled = false; + }), delay); + return fn.call.apply(fn, [this].concat(__slice.call(arguments))); + }; + }; + iScope.trackMove = function($event) { + $event.preventDefault(); + var target = iElement.parent(); + var borderMin = iAttrs.min || 0; + var classes = iElement[0].className.split(' '); + for(i = 0; i < classes.length; i++){ + if(classes[i] === 'bottom' || classes[i] === 'top'){ + var handle = 8; + var coord = "pageY"; + var offset = "offsetY"; // make the options module + var borderMax = iAttrs.max || iElement.parent().parent().height(); + var initialSize = iElement.parent().height(); + }else if(classes[i] === 'left' || classes[i] === 'right'){ + var handle = 0; + var coord = "pageX"; + var offset = "offsetX"; + var borderMax = iAttrs.max || iElement.parent().parent().width(); + var initialSize = iElement.parent().width(); + } + if(classes[i] === 'top' || classes[i] === 'left'){ + var scale = 1; + }else if(classes[i] === 'bottom' || classes[i] === 'right'){ + var scale = -1; + } + } + var initialCoord = $event[coord] - $event[offset] + handle; + var element = iElement[0]; + var mouseMove = throttle(10, function(e){ + e.preventDefault(); + if(typeof element.setCapture === "function"){ + element.setCapture(); + } + return iScope.$apply(function() { + if(iAttrs.type === "free"){ + var boundries = { + max: parseInt(iAttrs.max) || $window.outerWidth, + min: parseInt(iAttrs.min) || 0 + }; + }else{ + var boundries = { + max: $('footer#footer').offset().top + 8, + min: $('header#header').outerHeight() + 7 + }; + } + var inRange = function(){ + return (boundries.max > e[coord]) && (boundries.min < e[coord]); + }; + var setTargetSize = function(size){ + for(i in classes){ + if(classes[i] === 'bottom' || classes[i] === 'top'){ + target.height(size); + }else if(classes[i] === 'left' || classes[i] === 'right'){ + target.width(size); + } + } + }; + while(inRange()){ + var targetSize = initialSize + scale * (e[coord] - initialCoord); + var direction = (scale === 1 ? ((coord === "pageY") ? "top": "left") : ((coord === "pageY") ? "bottom" : "right")); + iScope.constrained = targetSize !== initialSize; + iScope.$emit('sizeChanged', { + type: iAttrs.type, + direction: direction, + getNewSize: function(){ + return targetSize; + } + }); + setTargetSize(targetSize); + return iScope.moving = true; + } + }); + }); + var mouseUp = function(e) { + e.preventDefault(); + iScope.$apply(function() { + iScope.constrained = false; + return iScope.moving = false; + }); + $window.removeEventListener("mousemove", mouseMove, true); + $window.removeEventListener("mouseup", mouseUp, true); + return typeof element.releaseCapture === "function" ? element.releaseCapture() : void 0; + }; + element.unselectable = "on"; + element.onselectstart = function() { + return false; + }; + element.style.userSelect = element.style.MozUserSelect = "none"; + $window.addEventListener("mousemove", mouseMove, true); + return $window.addEventListener("mouseup", mouseUp, true); + }; + } return { - restrict: "EA", + scope: { + options: "=" + }, + restrict: "E", + replace: true, link: linker, templateUrl: tplsUrl + 'handle.tpl.html' }; diff --git a/src/js/components/flexiblegrid/directives/main.directive.js b/src/js/components/flexiblegrid/directives/main.directive.js index 1b24dfb..1adc14b 100755 --- a/src/js/components/flexiblegrid/directives/main.directive.js +++ b/src/js/components/flexiblegrid/directives/main.directive.js @@ -1,9 +1,15 @@ //######################################################################## //###################START main########################################### flexibleGridDirectives.main = function(tplsUrl){ - var linker = function(iScope, iElement, iAttrs){}; + var linker = function(iScope, iElement, iAttrs){ + iScope.$on('mainSizeChanged', function(event, data){ + iElement.css('bottom', $('footer').height() + data.getNewSize() + 8 + "px"); + }); + }; return { - restrict: "EA", + restrict: "E", + replace: true, + transclude: true, link: linker, templateUrl: tplsUrl + 'main.tpl.html' }; diff --git a/src/js/components/flexiblegrid/flexiblegrid.app.js b/src/js/components/flexiblegrid/flexiblegrid.app.js index d997032..5526d99 100755 --- a/src/js/components/flexiblegrid/flexiblegrid.app.js +++ b/src/js/components/flexiblegrid/flexiblegrid.app.js @@ -2,13 +2,13 @@ var flexibleGridApp = angular.module('flexibleGrid', []); //######################################################################## //######injecting the dependencies######################################## -flexibleGridDirecitves.main.$inject = ['tplsUrl']; -flexibleGridDirecitves.border.$inject = ['tplsUrl']; -flexibleGridDirecitves.handle.$inject = ['tplsUrl']; -flexibleGridDirecitves.flexibleGrid.$inject = ['tplsUrl']; +flexibleGridDirectives.main.$inject = ['tplsUrl']; +flexibleGridDirectives.border.$inject = ['tplsUrl']; +flexibleGridDirectives.handle.$inject = ['tplsUrl', '$window']; +flexibleGridDirectives.flexibleGrid.$inject = ['tplsUrl']; //######################################################################## //####assigning the controllers and the directives to the application##### flexibleGridApp.controller(flexibleGridControllers); -flexibleGridApp.directive(flexibleGridDirecitves); +flexibleGridApp.directive(flexibleGridDirectives); //######################################################################## -angular.value('tplsUrl', '.tmp/tpls/'); +flexibleGridApp.value('tplsUrl', '.tmp/tpls/'); diff --git a/src/js/components/flexiblegrid/flexiblegrid.vars.js b/src/js/components/flexiblegrid/flexiblegrid.vars.js index abef793..4bb4cd3 100755 --- a/src/js/components/flexiblegrid/flexiblegrid.vars.js +++ b/src/js/components/flexiblegrid/flexiblegrid.vars.js @@ -1,4 +1,3 @@ -'use strict'; //######################################################################## //#####Creating the directives object to hold all the directives########## var flexibleGridDirectives = {}; diff --git a/src/js/components/flexiblegrid/scss/_border.scss b/src/js/components/flexiblegrid/scss/_border.scss index e69de29..1e8e6ef 100755 --- a/src/js/components/flexiblegrid/scss/_border.scss +++ b/src/js/components/flexiblegrid/scss/_border.scss @@ -0,0 +1,24 @@ +.border{ + position: absolute; + overflow: hidden; + @include box-sizing(border-box); + &.left{ + top: $header-height; + bottom: $footer-height; + left: 0; + background: $border-left-bg-color; + width: $left-width; + z-index: $top; + padding-right: $handleHeight; + } + &.bottom{ + left: 0; + right: 0; + bottom: $footer-height; + height: $border-bottom-default-height; + color: $main-color; + background: $border-bottom-bg-color; + padding-left: $main-side-padding; + padding-top: $handleHeight; + } +} diff --git a/src/js/components/flexiblegrid/scss/_flexiblegrid.scss b/src/js/components/flexiblegrid/scss/_flexiblegrid.scss new file mode 100644 index 0000000..a640b7e --- /dev/null +++ b/src/js/components/flexiblegrid/scss/_flexiblegrid.scss @@ -0,0 +1,7 @@ +.flexiblegrid { + position: relative; + top: $header-height; + bottom: $footer-height; + left: 0; + right: 0; +} diff --git a/src/js/components/flexiblegrid/scss/_handle.scss b/src/js/components/flexiblegrid/scss/_handle.scss index e69de29..f3f5ded 100755 --- a/src/js/components/flexiblegrid/scss/_handle.scss +++ b/src/js/components/flexiblegrid/scss/_handle.scss @@ -0,0 +1,24 @@ +.handle { + position: absolute; + top: 0; + right: 0; + // border: 2.5px outset #aaa; + @include box-sizing(border-box); + background-color: $handleBgColor; + &.left { + bottom: 0; + cursor: ew-resize; + width: $handleHeight; + } + &.bottom { + left: 0; + cursor: ns-resize; + height: $handleHeight; + } + &.moving { + background-color: $handleMovingColor; + } + &.constrained { + background-color: $handleConstrainedBgColor; + } +} diff --git a/src/js/components/flexiblegrid/scss/_main.scss b/src/js/components/flexiblegrid/scss/_main.scss index e69de29..be6b3a9 100755 --- a/src/js/components/flexiblegrid/scss/_main.scss +++ b/src/js/components/flexiblegrid/scss/_main.scss @@ -0,0 +1,13 @@ +.main { + position : absolute; + right : 0; + top : $header-height; + bottom : $footer-height + $border-bottom-default-height; + left : 0; + background : $main-bg-color; + padding-left : $main-side-padding; + padding-right: $main-side-padding; + color : $main-color; + overflow : hidden; + @include box-sizing(border-box); +} diff --git a/src/js/components/flexiblegrid/scss/_variables.scss b/src/js/components/flexiblegrid/scss/_variables.scss index e69de29..7a98236 100755 --- a/src/js/components/flexiblegrid/scss/_variables.scss +++ b/src/js/components/flexiblegrid/scss/_variables.scss @@ -0,0 +1,12 @@ +$top: 999; +$left-width: 200px; +$main-color: #eee; +$main-bg-color: #444; +$border-left-bg-color: red; +$border-bottom-bg-color: blue; +$border-bottom-default-height: 50px; +$main-side-padding: 300px; +$handleHeight: 8px; +$handleBgColor: #777; +$handleMovingColor: #AAAAAA; +$handleConstrainedBgColor: #966; diff --git a/src/js/components/flexiblegrid/tpls/border.tpl.html b/src/js/components/flexiblegrid/tpls/border.tpl.html index e69de29..326c784 100755 --- a/src/js/components/flexiblegrid/tpls/border.tpl.html +++ b/src/js/components/flexiblegrid/tpls/border.tpl.html @@ -0,0 +1 @@ +
diff --git a/src/js/components/flexiblegrid/tpls/flexiblegrid.tpl.html b/src/js/components/flexiblegrid/tpls/flexiblegrid.tpl.html new file mode 100644 index 0000000..67e6958 --- /dev/null +++ b/src/js/components/flexiblegrid/tpls/flexiblegrid.tpl.html @@ -0,0 +1 @@ +
diff --git a/src/js/components/flexiblegrid/tpls/handle.tpl.html b/src/js/components/flexiblegrid/tpls/handle.tpl.html index e69de29..1b04b7a 100755 --- a/src/js/components/flexiblegrid/tpls/handle.tpl.html +++ b/src/js/components/flexiblegrid/tpls/handle.tpl.html @@ -0,0 +1,6 @@ +
+
diff --git a/src/js/components/flexiblegrid/tpls/main.tpl.html b/src/js/components/flexiblegrid/tpls/main.tpl.html index e71fa01..163b7e1 100755 --- a/src/js/components/flexiblegrid/tpls/main.tpl.html +++ b/src/js/components/flexiblegrid/tpls/main.tpl.html @@ -1 +1 @@ -
+
diff --git a/src/scss/_footer.scss b/src/scss/_footer.scss new file mode 100644 index 0000000..739d525 --- /dev/null +++ b/src/scss/_footer.scss @@ -0,0 +1,8 @@ +footer#footer { + position: absolute; + bottom: 0; + z-index: 1; + width: $footer-width; + height: $footer-height; + background: $footer-bg-color; +} diff --git a/src/scss/_header.scss b/src/scss/_header.scss new file mode 100644 index 0000000..fec613b --- /dev/null +++ b/src/scss/_header.scss @@ -0,0 +1,6 @@ +header#header { + z-index: 1; + width: $header-width; + height: $header-height; + background: $header-bg-color; +} diff --git a/src/scss/_style.scss b/src/scss/_style.scss index 9b3ddc4..0155a23 100755 --- a/src/scss/_style.scss +++ b/src/scss/_style.scss @@ -5,6 +5,6 @@ html, body, div#wrapper{ } @import '_header'; @import '../js/components/flexiblegrid/scss/_main'; -@import '../js/components/flexiblegrid/scss/_notes'; +@import '../js/components/flexiblegrid/scss/_border'; @import '../js/components/flexiblegrid/scss/_handle'; @import '_footer'; diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss index ecafe8e..c15861d 100755 --- a/src/scss/_variables.scss +++ b/src/scss/_variables.scss @@ -1,2 +1,7 @@ - -@import '../js/components/flexiblelayout/scss/_variables'; +$header-width: 100%; +$footer-width: 100%; +$footer-height: 50px; +$header-height: 150px; +$header-bg-color: tomato; +$footer-bg-color: purple; +@import '../js/components/flexiblegrid/scss/_variables';