Merge pull request #45 from jbroquist/v1-beta

jbro-io · jbro-io · commit c86fe9bb7546 · 2014-11-17T17:29:59.000-07:00
Version 1.0
diff --git a/README.md b/README.md
@@ -9,6 +9,8 @@ This directive allows you to split stuff !
 
 **NOTE :** if you use IE<=9, iOS<7 or Android<4 please include the [requestAnimationFrame polyfill](https://github.com/darius/requestAnimationFrame/blob/master/requestAnimationFrame.js) in your application.
 
+**NOTE :** version 1.x is only compatible with IE>=10. If you use IE<=9 you need to use version 0.x
+
 
 ## Usage
 
@@ -57,8 +59,26 @@ Default: `'row'`
 
 A fake [flex-direction property](http://www.w3.org/TR/css3-flexbox/#flex-direction). It specifies how the child elements are placed in the layout container, by setting the direction of the flex container's main axis. This determines the direction that child elements are laid out in.
 
+### dividerSize
+
+Type: `Integer`
+Default: `10`
+
+The size in pixels that you want the divider/splitbar to be.
+
 ## Child Attributes
 
+### uiLayoutContainer
+
+Required on all child elements of the ui-layout element.
+
+```
+<div ui-layout>
+    <div ui-layout-container></div>    
+    <div ui-layout-container></div>    
+</div>
+```
+
 ### size
 Type: `String`
 
@@ -67,12 +87,12 @@ Sets the default placement of the splitbar.
 ```
 pixels
 <div ui-layout>
-    <div size="100px"></div>
+    <div ui-layout-container size="100px"></div>
 </div>
 
 percentage
 <div ui-layout>
-    <div size="10%"></div>
+    <div ui-layout-container size="10%"></div>
 </div>
 ```
 
@@ -86,12 +106,12 @@ Specifices the minimum size the child element can be set to. Defaults to the wid
 ```
 pixels
 <div ui-layout>
-    <div min-size="100px"></div>
+    <div ui-layout-container min-size="100px"></div>
 </div>
 
 percentage
 <div ui-layout>
-    <div min-size="10%"></div>
+    <div ui-layout-container min-size="10%"></div>
 </div>
 ```
 
@@ -104,12 +124,12 @@ Specifices the maxium size the child element can be set to.
 ```
 pixels
 <div ui-layout>
-    <div max-size="100px"></div>
+    <div ui-layout-container max-size="100px"></div>
 </div>
 
 percentage
 <div ui-layout>
-    <div max-size="10%"></div>
+    <div ui-layout-container max-size="10%"></div>
 </div>
 ```
 
diff --git a/bower.json b/bower.json
@@ -1,7 +1,7 @@
 {
   "name": "angular-ui-layout",
-  "main": "ui-layout.js",
-  "version": "0.0.1",
+  "main": ["src/ui-layout.js", "src/ui-layout.css"],
+  "version": "1.0.0",
   "homepage": "https://angular-ui.github.io/ui-layout/",
   "authors": [
     "https://github.com/angular-ui/ui-layout/contributors"
diff --git a/demo/demo.html b/demo/demo.html
@@ -142,12 +142,15 @@ <h1>Initial size demo</h1>
     <div class="col-md-6">
       <div style="position: relative; height: 600px;">
         <div ui-layout class="layout-mock">
-          <header class="north-back"></header>
-          <div class="center-back" size="10%"></div>
-          <footer ui-layout="{ flow : 'column', sizes: [ '300px' ] }" >
-            <div class="west-back"></div>
-            <div class="south-back"></div>
-            <div size="100px"></div>
+          <header ui-layout-container class="north-back"></header>
+          <div ui-layout-container class="center-back" size="10%"></div>
+          <footer ui-layout-container>
+            <div ui-layout="{ flow : 'column', sizes: [ '300px' ] }">
+              <div ui-layout-container class="west-back"></div>
+              <div ui-layout-container class="south-back"></div>
+              <div ui-layout-container size="100px"></div>
+            </div>
+
           </footer>
         </div>
       </div>
@@ -169,12 +172,14 @@ <h1>Initial size demo</h1>
         <tab heading="Markup">
           <div plunker-content="markup">
 <pre class="prettyprint">&lt;div ui-layout class=&quot;layout-mock&quot;&gt;
-  &lt;header class=&quot;north-back&quot;&gt;&lt;/header&gt;
-  &lt;div class=&quot;center-back&quot; size=&quot;10%&quot;&gt;&lt;/div&gt;
-  &lt;footer ui-layout=&quot;{ flow : &#39;column&#39;, sizes: [ &#39;300px&#39; ] }&quot; &gt;
-    &lt;div class=&quot;west-back&quot;&gt;&lt;/div&gt;
-    &lt;div class=&quot;south-back&quot;&gt;&lt;/div&gt;
-    &lt;div size=&quot;100px&quot;&gt;&lt;/div&gt;
+  &lt;header ui-layout-container class=&quot;north-back&quot;&gt;&lt;/header&gt;
+  &lt;div ui-layout-container class=&quot;center-back&quot; size=&quot;10%&quot;&gt;&lt;/div&gt;
+  &lt;footer ui-layout-container &gt;
+    &lt;div ui-layout=&quot;{ flow : &#39;column&#39;, sizes: [ &#39;300px&#39; ] }&quot; &gt;
+      &lt;div ui-layout-container class=&quot;west-back&quot;&gt;&lt;/div&gt;
+      &lt;div ui-layout-container class=&quot;south-back&quot;&gt;&lt;/div&gt;
+      &lt;div ui-layout-container size=&quot;100px&quot;&gt;&lt;/div&gt;
+    &lt;/div&gt;
   &lt;/footer&gt;
 &lt;/div&gt;</pre>
           </div>
diff --git a/demo/demo2.html b/demo/demo2.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html ng-app="x">
+<head lang="en">
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width">
+
+  <title></title>
+
+  <!-- Le css -->
+  <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
+  <link rel="stylesheet" type="text/css" href="../src/ui-layout.css"/>
+
+  <!-- Le javascript -->
+  <script type="application/javascript" src="../bower_components/angular/angular.js"></script>
+  <script type="application/javascript" src="../src/ui-layout.js"></script>
+  <script type="application/javascript">
+
+    var app = angular.module('x', ['ui.layout']);
+    app.controller('DemoController', function($scope) {
+      $scope.config = {
+        flow: 'column'
+      }
+    });
+
+  </script>
+  <style>
+    .red {
+      background-color: red;
+    }
+    .green {
+      background-color: green;
+    }
+    .ui-splitbar {
+      background-color: red;
+    }
+    .ui-layout-container {
+      display: inline-block;
+    }
+  </style>
+</head>
+<body ng-controller="DemoController">
+  <div ui-layout="config">
+    <div ui-layout-container max-size="50%">
+      One
+      <br/>
+      <button ng-click="updateDisplay()">Update Display</button>
+    </div>
+    <div ui-layout-container collapsed="false">Two</div>
+    <div ui-layout-container>
+      <!--Three-->
+      <div ui-layout="{ flow:'row', dividerSize:'12' }">
+        <div ui-layout-container>Three</div>
+        <div ui-layout-container>
+          <div ng-include="demo/testinclude.html"></div>
+        </div>
+      </div>
+    </div>
+    <div ui-layout-container>
+      Four
+    </div>
+  </div>
+</body>
+</html>
diff --git a/demo/testinclude.html b/demo/testinclude.html
@@ -0,0 +1,3 @@
+<p>
+  My included contents.
+</p>
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "angular-ui-layout",
-  "version": "0.0.1",
+  "version": "1.0.0",
   "description": "This directive allows you to split !",
   "devDependencies": {
     "gulp": "^3",
diff --git a/src/ui-layout.css b/src/ui-layout.css
@@ -13,18 +13,37 @@
 }
 
 .ui-splitbar{
-  display: block;
+  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
+  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
+  display: -ms-flexbox;      /* TWEENER - IE 10 */
+  display: -webkit-flex;     /* NEW - Chrome */
+  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
+  -webkit-justify-content: center;
+  justify-content: center;
+
   background-color: #ffffff;
   right: auto;
   position: absolute;
-  z-index: 99999;
+  z-index: 1010;
 }
 
 .ui-layout-row > .ui-splitbar{
   height: 8px; width: 100%;
   cursor: row-resize;
+  text-align: center;
+  justify-content: center;
+  align-items: center;
 }
 .ui-layout-column > .ui-splitbar{
   width: 8px; height: 100%;
   cursor: col-resize;
+  -webkit-flex-direction: column;
+  flex-direction: column;
 }
+
+.ui-layout-column > .ui-splitbar > a,
+.ui-layout-row > .ui-splitbar > a {
+  color: #fff;
+  cursor: pointer;
+  font-size: 9px;
+}
diff --git a/src/ui-layout.js b/src/ui-layout.js
diff --git a/test/layout-scenar.spec.js b/test/layout-scenar.spec.js
diff --git a/test/layout.spec.js b/test/layout.spec.js

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+<p>`
	`2`	`+ My included contents.`
	`3`	`+</p>`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "angular-ui-layout",`
`3`		`- "version": "0.0.1",`
	`3`	`+ "version": "1.0.0",`
`4`	`4`	`"description": "This directive allows you to split !",`
`5`	`5`	`"devDependencies": {`
`6`	`6`	`"gulp": "^3",`