Merge pull request #38 from aureliosaraiva/master

Updated and adjusted this addons for run Ember.2.9

.travis.yml

@@ -11,7 +11,6 @@ cache:
 
 env:
   - EMBER_TRY_SCENARIO=default
-  - EMBER_TRY_SCENARIO=ember-1-13
   - EMBER_TRY_SCENARIO=ember-release
   - EMBER_TRY_SCENARIO=ember-beta
   - EMBER_TRY_SCENARIO=ember-canary

README.md

@@ -39,28 +39,28 @@ resizeServiceDefaults: {
 Vertical SplitView example:
 
 ```
-{{#split-view isVertical=true}}
-  {{#split-child}}
+{{#split-view isVertical=true as |split| }}
+  {{#split.child}}
     Content of the left view here.
-  {{/split-child}}
-  {{split-sash}}
-  {{#split-child}}
+  {{/split.child}}
+  {{split.sash}}
+  {{#split.child}}
     Content of the right view here.
-  {{/split-child}}
+  {{/split.child}}
 {{/split-view}}
 ```
 
 Horizontal SplitView example:
 
 ```
-{{#split-view isVertical=false}}
-  {{#split-child}}
+{{#split-view isVertical=false as |split|}}
+  {{#split.child}}
     Content of the top view here.
-  {{/split-child}}
-  {{split-sash}}
-  {{#split-child}}
+  {{/split.child}}
+  {{split.sash}}
+  {{#split.child}}
     Content of the bottom view here.
-  {{/split-child}}
+  {{/split.child}}
 {{/split-view}}
 ```
 

addon/components/split-child.js

@@ -1,19 +1,14 @@
 import Ember from 'ember';
+import layout from 'ember-split-view/templates/components/split-child';
 
 var computed = Ember.computed;
 var alias = computed.alias;
 var observer = Ember.observer;
 
 export default Ember.Component.extend({
+  layout: layout,
   classNames: ['child'],
-  classNameBindings: ['isDragging:dragging', 'isVertical:vertical:horizontal', 'childSplitView:nested'],
-
-  splitPosition: alias('parentView.splitPosition'),
-  sashWidth: alias('parentView.sash.width'),
-  parentWidth: alias('parentView.width'),
-  parentHeight: alias('parentView.height'),
-  isVertical: alias('parentView.isVertical'),
-  isDragging: alias('parentView.isDragging'),
+  classNameBindings: ['parent.isDragging:dragging', 'parent.isVertical:vertical:horizontal', 'childSplitView:nested'],
 
   childSplitView: null,
   anchorSide: null,
@@ -27,7 +22,7 @@ export default Ember.Component.extend({
   },
 
   didInsertElement: function() {
-    var parent = this.get('parentView');
+    var parent = this.get('parent');
 
     // run next to avoid changing the component during a render iteration
     Ember.run.next(this, function() {
@@ -39,7 +34,7 @@ export default Ember.Component.extend({
   },
 
   willDestroyElement: function() {
-    var parent = this.get('parentView');
+    var parent = this.get('parent');
 
     if(parent && parent.removeSplit) {
       parent.removeSplit(this);
@@ -72,22 +67,22 @@ export default Ember.Component.extend({
     this._setStyle();
   }),
 
-  parentSize: computed('anchorSide', 'parentWidth', 'parentHeight', function() {
+  parentSize: computed('anchorSide', 'parent.width', 'parent.height', function() {
     var anchorSide = this.get('anchorSide');
     if(!anchorSide) {
       return 0;
     }
-    return (anchorSide === "left" || anchorSide === "right") ? this.get('parentWidth') : this.get('parentHeight');
+    return (anchorSide === "left" || anchorSide === "right") ? this.get('parent.width') : this.get('parent.height');
   }),
 
-  anchorOffset: computed('sashWidth', 'splitPosition', 'anchorSide', 'parentSize', function() {
+  anchorOffset: computed('parent.sash.width', 'parent.splitPosition', 'anchorSide', 'parentSize', function() {
     var anchorSide = this.get('anchorSide');
     if(!anchorSide) {
       return;
     }
 
-    var sashWidth = this.get('sashWidth');
-    var splitPosition = this.get('splitPosition');
+    var sashWidth = this.get('parent.sash.width');
+    var splitPosition = this.get('parent.splitPosition');
     if(anchorSide === "left" || anchorSide === "top") {
       return splitPosition + sashWidth / 2;
     } else {
@@ -100,7 +95,7 @@ export default Ember.Component.extend({
     }
   }),
 
-  updateChildSplitView: observer('childSplitView', 'anchorOffset', 'parentWidth', 'parentHeight', function() {
+  updateChildSplitView: observer('childSplitView', 'anchorOffset', 'parent.width', 'parent.height', function() {
 
     // must run afterRender so that the size has updated
     Ember.run.scheduleOnce('afterRender', this, function() {
@@ -116,14 +111,14 @@ export default Ember.Component.extend({
 
   collapse: function() {
     if(this.get('anchorSide') === "left" || this.get('anchorSide') === "top") {
-      this.set('splitPosition', this.get('parentSize'));
+      this.set('parent.splitPosition', this.get('parentSize'));
     } else {
-      this.set('splitPosition', 0);
+      this.set('parent.splitPosition', 0);
     }
-    this.get('parentView').constrainSplit();
+    this.get('parent').constrainSplit();
   },
 
-  minSize: computed('isVertical', 'childSplitView.minSize', function() {
+  minSize: computed('parent.isVertical', 'childSplitView.minSize', function() {
     var childSplitView = this.get('childSplitView');
     if (childSplitView)
     {
@@ -132,19 +127,20 @@ export default Ember.Component.extend({
 
     var element = this.$();
     var cssInt = function(name) {
-      return parseInt(this.css(name));
+      //fix firefox
+      return parseInt(this.css(name), 10) || 0;
     }.bind(element);
-    
-    if(this.get('isVertical')) {
-      return cssInt("min-width") + cssInt("padding-left") + cssInt("padding-right") + 
-                                  cssInt("border-left")  + cssInt("border-right") + 
+
+    if(this.get('parent.isVertical')) {
+      return cssInt("min-width") + cssInt("padding-left") + cssInt("padding-right") +
+                                  cssInt("border-left")  + cssInt("border-right") +
                                   cssInt("margin-left")  + cssInt("margin-right") +
-                                  this.get('sashWidth') / 2;
+                                  this.get('parent.sash.width') / 2;
     } else {
       return cssInt("min-height") + cssInt("padding-top") + cssInt("padding-bottom") +
                                     cssInt("border-top")  + cssInt("border-bottom") +
                                     cssInt("margin-top")  + cssInt("margin-bottom") +
-                                    this.get('sashWidth') / 2;
+                                    this.get('parent.sash.width') / 2;
     }
   })
 

addon/components/split-sash.js

@@ -19,31 +19,28 @@ export default Ember.Component.extend({
   widthPercentage: null,
 
   classNames: ['sash'],
-  classNameBindings: ['isDragging:dragging', 'isVertical:vertical:horizontal'],
-
-  isVertical: alias('parentView.isVertical'),
-  isDragging: alias('parentView.isDragging'),
-  position: alias('parentView.splitPosition'),
+  classNameBindings: ['parent.isDragging:dragging', 'parent.isVertical:vertical:horizontal'],
 
   didInsertElement: function() {
     // run next to avoid changing the component during a render iteration
-    var parent = this.get('parentView');
+    var parent = this.get('parent');
     run.next(this, function() {
       if (parent)
       {
-        parent.set('sash', this);
+        this.set('parent.sash', this);
       }
       this._setStyle();
     });
   },
 
   _setStyle: function() {
     var width = this.get('width');
-    var position = this.get('position');
-    var isVertical = this.get('isVertical');
-    
+    var position = this.get('parent.splitPosition');
+    var isVertical = this.get('parent.isVertical');
+
     var style = this.get('element').style;
 
+
     if(isVertical) {
       style.left = (position - width / 2) + 'px';
       style.top = null;
@@ -61,12 +58,12 @@ export default Ember.Component.extend({
     }
   },
 
-  style: observer('position', 'isVertical', 'width', function() {
+  style: observer('parent.splitPosition', 'parent.isVertical', 'width', function() {
     this._setStyle();
   }),
 
   mouseDown: function(event) {
-    this.set('isDragging', true);
+    this.set('parent.isDragging', true);
     event.preventDefault();
   }
 });

addon/components/split-view.js

@@ -1,5 +1,6 @@
 import Ember from 'ember';
 import SplitChild from './split-child';
+import layout from 'ember-split-view/templates/components/split-view';
 
 var computed = Ember.computed;
 var observer = Ember.observer;
@@ -42,6 +43,7 @@ var observer = Ember.observer;
  * @extends Ember.Component
  */
 export default Ember.Component.extend({
+  layout: layout,
   /**
    * @property {boolean} isVertical - the orientation of the split: true = vertical, false = horizontal
    * @default true

addon/templates/components/split-child.hbs

@@ -0,0 +1 @@
+{{yield}}

addon/templates/components/split-view.hbs

@@ -0,0 +1 @@
+{{yield (hash child=(component "split-child" parent=this) sash=(component "split-sash" parent=this)  ) }}

config/ember-try.js

@@ -7,17 +7,6 @@ module.exports = {
         dependencies: { }
       }
     },
-    {
-      name: 'ember-1-13',
-      bower: {
-        dependencies: {
-          'ember': '~1.13.0'
-        },
-        resolutions: {
-          'ember': '~1.13.0'
-        }
-      }
-    },
     {
       name: 'ember-release',
       bower: {

package.json

@@ -43,9 +43,11 @@
     "ember-addon"
   ],
   "dependencies": {
-    "ember-resize": "0.0.10",
+    "ember-resize": "0.0.17",
     "ember-cli-sass": "4.0.1",
-    "ember-cli-babel": "^5.1.5"
+    "ember-cli-babel": "^5.1.5",
+    "ember-cli-htmlbars": "^1.0.3",
+    "ember-cli-htmlbars-inline-precompile": "^0.3.1"
   },
   "ember-addon": {
     "configPath": "tests/dummy/config",

tests/dummy/app/templates/collapsible.hbs

@@ -1,13 +1,13 @@
 <div class="demo-tab">
-  {{#split-view isVertical=true class="splitViewVertical"}}
-    {{#split-child class="border" register-as=leftChild}}
+  {{#split-view isVertical=true class="splitViewVertical" as |split|}}
+    {{#split.child class="border" register-as=leftChild}}
       <button {{action 'collapseLeft'}}> Collapse Left </button>
       {{partial "ring"}}
-    {{/split-child}}
-    {{split-sash}}
-    {{#split-child class="border" register-as=rightChild}}
+    {{/split.child}}
+    {{split.sash}}
+    {{#split.child class="border" register-as=rightChild}}
       <button {{action 'collapseRight'}}> Collapse Right </button>
       {{partial "yoda"}}
-    {{/split-child}}
+    {{/split.child}}
   {{/split-view}}
 </div>

tests/dummy/app/templates/composite.hbs

@@ -1,13 +1,13 @@
 <div class="demo-tab">
-  {{#split-view isVertical=true splitPercentage=30 class="splitViewVertical"}}
-    {{split-child class="border"}}
-    {{split-sash}}
-    {{#split-child}}
-      {{#split-view isVertical=false}}
-        {{split-child class="border"}}
-        {{split-sash}}
-        {{split-child class="border"}}
+  {{#split-view isVertical=true splitPercentage=30 class="splitViewVertical" as |split|}}
+    {{split.child class="border"}}
+    {{split.sash}}
+    {{#split.child}}
+      {{#split-view isVertical=false as |split2|}}
+        {{split2.child class="border"}}
+        {{split2.sash}}
+        {{split2.child class="border"}}
       {{/split-view}}
-    {{/split-child}}
+    {{/split.child}}
   {{/split-view}}
 </div>

tests/dummy/app/templates/horizontal-composite.hbs

@@ -1,13 +1,13 @@
 <div class="demo-tab">
-  {{#split-view isVertical=false class="splitViewHorizontal"}}
-    {{split-child class="border"}}
-    {{split-sash}}
-    {{#split-child class="composite"}}
-      {{#split-view isVertical=false}}
-        {{split-child class="border"}}
-        {{split-sash}}
-        {{split-child class="border"}}
+  {{#split-view isVertical=false class="splitViewHorizontal" as |split|}}
+    {{split.child class="border"}}
+    {{split.sash}}
+    {{#split.child class="composite"}}
+      {{#split-view isVertical=false as |split2|}}
+        {{split2.child class="border"}}
+        {{split2.sash}}
+        {{split2.child class="border"}}
       {{/split-view}}
-    {{/split-child}}
+    {{/split.child}}
   {{/split-view}}
 </div>

tests/dummy/app/templates/horizontal.hbs

@@ -1,7 +1,7 @@
 <div class="demo-tab">
-  {{#split-view isVertical=false class="splitViewHorizontal"}}
-    {{split-child class="border"}}
-    {{split-sash}}
-    {{split-child class="border"}}
+  {{#split-view isVertical=false class="splitViewHorizontal" as |split|}}
+    {{split.child class="border"}}
+    {{split.sash}}
+    {{split.child class="border"}}
   {{/split-view}}
 </div>

tests/dummy/app/templates/vertical-composite.hbs

@@ -1,13 +1,13 @@
 <div class="demo-tab">
-  {{#split-view isVertical=true class="splitViewVertical"}}
-    {{split-child class="border"}}
-    {{split-sash}}
-    {{#split-child class="composite"}}
-      {{#split-view isVertical=true}}
-        {{split-child class="border"}}
-        {{split-sash}}
-        {{split-child class="border"}}
+  {{#split-view isVertical=true class="splitViewVertical" as |split|}}
+    {{split.child class="border"}}
+    {{split.sash}}
+    {{#split.child class="composite"}}
+      {{#split-view isVertical=true as |split2|}}
+        {{split2.child class="border"}}
+        {{split2.sash}}
+        {{split2.child class="border"}}
       {{/split-view}}
-    {{/split-child}}
+    {{/split.child}}
   {{/split-view}}
 </div>

tests/dummy/app/templates/vertical.hbs

@@ -1,11 +1,11 @@
 <div class="demo-tab">
-  {{#split-view isVertical=true class="splitViewVertical"}}
-    {{#split-child class="border"}}
+  {{#split-view isVertical=true  class="splitViewVertical" as |split|}}
+    {{#split.child class="border"}}
       {{partial "ring"}}
-    {{/split-child}}
-    {{split-sash}}
-    {{#split-child class="border"}}
+    {{/split.child}}
+    {{split.sash}}
+    {{#split.child class="border"}}
       {{partial "yoda"}}
-    {{/split-child}}
+    {{/split.child}}
   {{/split-view}}
 </div>