merge from group

regularjs · Aug 13, 2015 · 562ff86 · 562ff86
2 parents 90f1c80 + 27de5c3
commit 562ff86
Show file tree

Hide file tree

Showing 33 changed files with 1,861 additions and 1,058 deletions.
diff --git a/dist/regular.js b/dist/regular.js
diff --git a/dist/regular.min.js b/dist/regular.min.js
diff --git a/example/feature-collection/include-advanced.html b/example/feature-collection/include-advanced.html
@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Include advanced </title>
+  <link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.min.css">
+</head>
+<body>
+
+
+  <script type='text/tpl' id="modal">
+    <div class="fade in modal" tabindex="-1" role="dialog" style="display:block;">
+      <div class="modal-dialog">
+        <div class="modal-content" role="document">
+          <div class="modal-header">
+            {#if closeBtn}
+            <button class="close" aria-label="Close">
+              <span aria-hidden="true">×</span>
+            </button>
+            {/if}
+            <h4 class="modal-title">{#inc title || 'Modal'}</h4>
+          </div>
+          <div class="modal-body">
+            {#inc  body || this.$body}
+          </div>
+          <div class="modal-footer">
+            {#if foot} 
+              {#inc foot} 
+            {#else}
+              <button type="button" class="btn btn-default" on-click={this.confirm(true)}>Confirm</button>
+              <button type="button" class="btn btn-default" on-click={this.confirm(false)}>Cancel</button>
+            {/if}
+          </div>
+        </div>
+      </div>
+    </div>
+  </script>
+
+  <script src="https://rawgit.com/sindresorhus/multiline/master/browser.js"></script>
+  <script src="https://rawgit.com/regularjs/regular/group/dist/regular.js"></script>
+  <script>
+    var Modal = Regular.extend({
+      name: "modal",
+      template: "#modal",
+      config: function(data){
+        var target = data.target = data.target || document.body;
+        this.$watch('show', function(show){
+          this.$inject(show? target: false)
+        })
+      },
+      confirm: function(accept){
+        this.$emit(accept? 'confirm': 'cancel');
+        if(this.data.autohide){
+          this.$update('show', false)
+        }
+      }
+    })
+    Modal.title = Regular.extend({
+      name: 'modal.title',
+      init: function(){
+        this.$outer.data.title = this.$body;
+      }
+    })
+    Modal.body = Regular.extend({
+      name: 'modal.body',
+      init: function(){
+        this.$outer.data.body = this.$body;
+      }
+    })
+    Modal.foot = Regular.extend({
+      name: 'modal.foot',
+      init: function(){
+        this.$outer.data.foot = this.$body;
+      }
+    })
+
+    var app = new Regular({
+      template: multiline(function(){/*
+        <button class='btn' on-click={show = !show}>show</button>
+        <input r-model='num' />
+        <modal show={show} autohide={true} title.cmpl='Virtual Box' close-btn  >
+          <modal.foot>Custom Title <span class="badge" >{num}</span> <button class='btn btn-primary' on-click={show=false}>CLose it!</button> </modal.foot>
+            <nav class="navbar navbar-default">
+              <div class="container-fluid">
+                <div class="navbar-header">
+                  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
+                    <span class="sr-only">Toggle navigation</span>
+                    <span class="icon-bar"></span>
+                    <span class="icon-bar"></span>
+                    <span class="icon-bar"></span>
+                  </button>
+                  <a class="navbar-brand" href="#">Brand</a>
+                </div>
+              </div>
+            </nav>
+        </modal>
+      */}),
+      data: { "num": 100, show: true }
+    }).$inject(document.body)
+  </script>
+
+</body>
+</html>
+
diff --git a/example/pager/index.html b/example/pager/index.html
@@ -7,18 +7,27 @@
     <script src="../../dist/regular.js"></script>
     <script src="pager.js"></script>
     <script type='text/tpl' id='tpl'>
-      {total}:{current}<button de-click={total = total + 1}>total+1</button>
-      <pager ref='hello' total={Math.floor(total/20)} current={current} title={'<h2>{current + 10000}</h2>'|compile}    />
-      <pager total={this.$refs.hello.data.current+1} current={current}/>&gt;
+
+
+<div>
+  {#inc $body}
+
+</div>
+
+
+
+<button de-click={total = total + 1}>total+1</button>
+  <pager ref='hello' total={Math.floor(total/20)} current={current} title.cmpl='<div>{total}</div>'  title={} >
+bdajldasjkl
+</pager>
+<pager total={this.$refs.hello.data.current+1} ref='pager2' current={current} title.cmpl='<h2>{current + 10000}</h2>'></pager>
+
+
     </script>
+
   </head>
   <body>
 
-
-  <div>
-    {title}
-  </div>
-
     <div id="app"> </div>
 
     <script>
@@ -29,26 +38,19 @@
     })
     var app = new Regular({
       template: '#tpl',
-      data: {total: 1000, current:10},
+      data: {total: 100, current:10},
       config: function(data){
         console.log(data)
       },
       go: function(page){
         this.data.current = page;
       } 
     } )
-      app.$inject("#app");
+    app.$inject("#app");
 
     setTimeout(function(){
       app.$update('total', 1000)
-      app.$inject(false);
-      setTimeout(function(){
-        app.$inject("#app");
-        app.$refs.hello.data.title.inject(document.body);
-      },1000)
-
-
-    },100)
+    },1000)
 
 
     </script>

diff --git a/example/pager/pager.js b/example/pager/pager.js
@@ -2,8 +2,7 @@ void function(){
   window.Pager = Regular.extend({
     name: 'pager',
     template: 
-     "<div class='m-page {clazz}'>\
-          {title}\
+     "<h2>{#inc title}</h2><div class='m-page {clazz}'>\
          <a  href='javascript:;' delegate-click={ this.nav(current-1)} class='pageprv {current==1? \"z-dis\": \"\"}'>Prev</a>\
           {#if total - 5 > show * 2}\
             <a href='javascript:;' delegate-click={ this.nav(1)} class={current==1? 'z-crt': ''}>1</a>\

diff --git a/src/Regular.js b/src/Regular.js
@@ -26,20 +26,22 @@ var doc = dom.doc;
 * @constructor
 * @param {Object} options specification of the component
 */
-var Regular = function(options){
+var Regular = function(definition, options){
   var prevRunning = env.isRunning;
   env.isRunning = true;
   var node, template;
 
+  definition = definition || {};
   options = options || {};
-  options.data = options.data || {};
-  options.computed = options.computed || {};
-  options.events = options.events || {};
-  if(this.data) _.extend(options.data, this.data);
-  if(this.computed) _.extend(options.computed, this.computed);
-  if(this.events) _.extend(options.events, this.events);
-
-  _.extend(this, options, true);
+
+  definition.data = definition.data || {};
+  definition.computed = definition.computed || {};
+  definition.events = definition.events || {};
+  if(this.data) _.extend(definition.data, this.data);
+  if(this.computed) _.extend(definition.computed, this.computed);
+  if(this.events) _.extend(definition.events, this.events);
+
+  _.extend(this, definition, true);
   if(this.$parent){
      this.$parent._append(this);
   }
@@ -62,14 +64,17 @@ var Regular = function(options){
   if(this.events){
     this.$on(this.events);
   }
-  // if(this.$body){
-  this._getTransclude = function(transclude){
-    var ctx = this.$parent || this;
-    if( transclude || this.$body  ) return ctx.$compile(transclude || this.$body, {namespace: options.namespace, outer: this, extra: options.extra})
-  }
-  // }
   this.$emit("$config");
   this.config && this.config(this.data);
+  if(this._body && this._body.length){
+    this.$body = _.getCompileFn(this._body, this.$parent, {
+      outer: this,
+      namespace: options.namespace,
+      extra: options.extra,
+      record: true
+    })
+    this._body = null;
+  }
   // handle computed
   if(template){
     this.group = this.$compile(this.template, {namespace: options.namespace});
@@ -458,7 +463,7 @@ Regular.implement({
   _f_: function(name){
     var Component = this.constructor;
     var filter = Component.filter(name);
-    if(!filter) throw 'filter ' + name + ' is undefined';
+    if(!filter) throw Error('filter ' + name + ' is undefined');
     return filter;
   },
   // simple accessor get
@@ -520,7 +525,6 @@ Regular.prototype.inject = function(){
 }
 
 
-
 // only one builtin filter
 
 Regular.filter(filter);

diff --git a/src/directive/animation.js b/src/directive/animation.js
@@ -100,7 +100,7 @@ Regular.animation({
       evt = tmp[0] || "",
       args = tmp[1]? this.$expression(tmp[1]).get: null;
 
-    if(!evt) throw "you shoud specified a eventname in emit command";
+    if(!evt) throw Error("you shoud specified a eventname in emit command");
 
     var self = this;
     return function(done){
@@ -120,7 +120,7 @@ Regular.animation({
           name = tmp.shift(),
           value = tmp.join(" ");
 
-        if( !name || !value ) throw "invalid style in command: style";
+        if( !name || !value ) throw Error("invalid style in command: style");
         styles[name] = value;
         valid = true;
       }
@@ -142,6 +142,7 @@ Regular.animation({
 // el : the element to process
 // value: the directive value
 function processAnimate( element, value ){
+  var Component = this.constructor;
   value = value.trim();
 
   var composites = value.split(";"), 
@@ -198,7 +199,7 @@ function processAnimate( element, value ){
       continue
     }
 
-    var animator =  Regular.animation(command) 
+    var animator =  Component.animation(command) 
     if( animator && seed ){
       seed.push(
         animator.call(this,{
@@ -208,7 +209,7 @@ function processAnimate( element, value ){
         })
       )
     }else{
-      throw "you need start with `on` or `event` in r-animation";
+      throw Error( animator? "you should start with `on` or `event` in animation" : ("undefined animator 【" + command +"】" ));
     }
   }
 
@@ -223,5 +224,5 @@ function processAnimate( element, value ){
 
 
 Regular.directive( "r-animation", processAnimate)
-Regular.directive( "r-sequence", processAnimate)
+Regular.directive( "r-anim", processAnimate)
 
diff --git a/src/directive/form.js b/src/directive/form.js
@@ -70,7 +70,7 @@ function initText(elem, parsed){
   });
 
   // @TODO to fixed event
-  var handler = function handler(ev){
+  var handler = function (ev){
     var that = this;
     if(ev.type==='cut' || ev.type==='paste'){
       _.nextTick(function(){
@@ -98,7 +98,7 @@ function initText(elem, parsed){
   if(parsed.get(self) === undefined && elem.value){
      parsed.set(self, elem.value);
   }
-  return function destroy(){
+  return function (){
     if(dom.msie !== 9 && "oninput" in dom.tNode ){
       elem.removeEventListener("input", handler );
     }else{

diff --git a/src/dom.js b/src/dom.js
@@ -71,7 +71,7 @@ dom.find = function(sl){
 dom.inject = function(node, refer, position){
 
   position = position || 'bottom';
-
+  if(!node) return ;
   if(Array.isArray(node)){
     var tmp = node;
     node = dom.fragment();
@@ -377,12 +377,12 @@ dom.nextFrame = (function(){
 
 // 3ks for angular's raf  service
 var k;
-dom.nextReflow = function(callback){
-  dom.nextFrame(function(){
+dom.nextReflow = dom.msie? function(callback){
+  return dom.nextFrame(function(){
     k = document.body.offsetWidth;
     callback();
   })
-}
+}: dom.nextFrame;
 
 
 
diff --git a/src/group.js b/src/group.js
@@ -6,7 +6,7 @@ function Group(list){
 }
 
 
-_.extend(Group.prototype, {
+var o = _.extend(Group.prototype, {
   destroy: function(first){
     combine.destroy(this.children, first);
     if(this.ondestroy) this.ondestroy();
@@ -17,9 +17,9 @@ _.extend(Group.prototype, {
   },
   push: function(item){
     this.children.push( item );
-  },
-  inject: combine.inject
+  }
 })
+o.inject = o.$inject = combine.inject