i'm satisfied with this for now

yahyaKacem · Jul 15, 2013 · 41a3b5f · 41a3b5f
1 parent a306533
commit 41a3b5f
Show file tree

Hide file tree

Showing 20 changed files with 286 additions and 34 deletions.
diff --git a/src/index.html b/src/index.html
@@ -25,21 +25,19 @@
 </head>
 <body ng-controller="MainCtrl">
   <div id="wrapper">
-    <header id="header"></header>
-    <section class="container well">
-      <border>
-        left
-        <handle></handle>
-      </border>
-      <main>
-        Main
-      </main>
-      <border>
-        <handle></handle>
+    <header id="header" class="clearfix">Header</header>
+    <border class="left">
+      left
+      <handle class="left" max="300" min="0" type="free"></handle>
+    </border>
+    <flexible-grid>
+      <main>Main</main>
+      <border class="bottom">
+        <handle class="bottom"></handle>
         Notes
       </border>
-    </section>
-    <footer id="footer"></footer>
+    </flexible-grid>
+    <footer id="footer" class="clearfix">Footer</footer>
   </div>
   <script src=".tmp/js/libs.js"></script>
   <script src=".tmp/js/components.js"></script>

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -0,0 +1 @@
+<div class="border" ng-transclude></div>
diff --git a/src/js/components/flexiblegrid/tpls/flexiblegrid.tpl.html b/src/js/components/flexiblegrid/tpls/flexiblegrid.tpl.html
@@ -0,0 +1 @@
+<div class="flexiblegrid" ng-transclude></div>
diff --git a/src/js/components/flexiblegrid/tpls/handle.tpl.html b/src/js/components/flexiblegrid/tpls/handle.tpl.html
@@ -0,0 +1,6 @@
+<div 
+  class="handle"
+  ng-mousedown="trackMove($event)"
+  ng-class="{moving: moving, constrained: constrained}"
+>
+</div>
diff --git a/src/js/components/flexiblegrid/tpls/main.tpl.html b/src/js/components/flexiblegrid/tpls/main.tpl.html
@@ -1 +1 @@
-<div class="main"></div>
+<div class="main" ng-transclude></div>
diff --git a/src/scss/_footer.scss 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
@@ -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
@@ -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
@@ -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';
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<div class="main"></div>
		<div class="main" ng-transclude></div>