fix bug and add afx-nspinner widget

src/core/tags/afx-button.tag

@@ -1,13 +1,16 @@
-<afx-button>
+<afx-button class= { btactive: selected }>
-    <button disabled={ enable == "false" } onclick="{ _onbtclick }" ref = "mybtn" > 
+    <button disabled={ enable == false } onclick="{ _onbtclick }" ref = "mybtn" > 
         <afx-label color = {color} icon={icon} iconclass = {iconclass} text = {text} ></afx-label>
     </button>
     <script>
-        this.enable = opts.enable
+        opts.enable = opts.enable || "true"
+        this.enable = eval(opts.enable) || false
         this.icon = opts.icon
         this.iconclass = opts.iconclass
         this.color = opts.color
         this.text = opts.text || ""
+        this.selected = eval(opts.selected) || false
+        this.toggle = eval(opts.toggle) || false
         var self = this
         this.onbtclick = opts.onbtclick
         self.root.set = function(k,v)
@@ -37,6 +40,8 @@
             {
                 self.root.observable.trigger("btclick",{id:$(self.root).attr("data-id"),data:self.root})
             }
+            if(self.toggle)
+                self.root.set("selected",!self.selected)
         }
     </script>
 </afx-button>

src/core/tags/afx-nspinner.tag

@@ -0,0 +1,75 @@
+<afx-nspinner>
+<input ref = "holder" type="text" value = {value}></input>
+<ul ref = "spinner">
+    <li class = "incr" ref= "incr"  onclick="{ _incr }"> <i></i> </li>
+    <li class = "decr" ref = "decr"  onclick="{ _decr }"> <i></i> </li>
+</ul>
+<script>
+
+this.value = eval(opts.value) || 0
+this.onchange = opts.onchange
+var self = this
+this.rid = $(self.root).attr("data-id") || Math.floor(Math.random() * 100000) + 1
+self.root.set = function(k,v)
+{
+    if(k == "*")
+        for(var i in v)
+            self[i] = v[i]
+    else
+        self[k] = v
+    self.update()
+}
+self.root.get = function(k)
+{
+    return self[k]
+}
+
+self._incr = function(e)
+{
+    self.value = self.value + 1;
+    self.update();
+    if(self.onchange) self.onchange(self.value);
+}
+
+self.on("mount", function(){
+    self.root.observable = opts.observable || (self.parent && self.parent.root && self.parent.root.observable) || riot.observable()
+    $(self.refs.spinner).css("width", "20px" );
+    var cl = function()
+    {
+        $(self.refs.holder).css("width", $(self.root).width() - 20 + "px" )
+        $(self.refs.holder).css("height", $(self.root).height() - 3 + "px" )
+        $(self.refs.spinner).css("height", $(self.root).height() - 5 + "px" )
+    }
+    cl()
+    self.root.observable.on("calibrate", function(){
+        cl()
+    })
+    self.root.observable.on("resize", function(){
+        cl()
+    });
+    $(self.refs.holder).on('keyup', function (e) {
+    if (e.keyCode == 13) {
+        var val = self.refs.holder.value;
+        if(!isNaN(val))
+        {
+            val = eval(val)
+            if(val < 0)
+                val = self.value;
+            self.value = val;
+        }
+        self.refs.holder.value = self.value;
+        if(self.onchange) self.onchange(self.value);
+    }
+});
+})
+
+self._decr = function(e)
+{
+    if(self.value == 0) return;
+    self.value = self.value - 1;
+    self.update();
+    if(self.onchange) self.onchange(self.value);
+}
+
+</script>
+</afx-nspinner>

src/packages/AntOSDK/dialog.coffee

@@ -35,7 +35,7 @@ class BuildDialog extends this.OS.GUI.BasicDialog
                     {
                         text: "+",
                         onbtclick: (e) ->
-                            d.selectFile ["text/coffeescript"], (f) ->
+                            d.selectFile ["text/.*coffeescript"], (f) ->
                                 lv.push { text: f }, true if f
                     },
                     {

src/packages/AntOSDK/main.coffee

@@ -262,7 +262,7 @@ class AntOSDK extends this.OS.GUI.BaseApplication
                     {
                         path: "#{rpath}/assets/scheme.html",
                         content: """
-                        <afx-app-window apptitle="" width="600" height="500" data-id="#{n}">
+                        <afx-app-window apptitle="#{n}" width="600" height="500" data-id="#{n}">
                             <afx-hbox ></afx-hbox>
                         </afx-app-window>
                         """

src/packages/AntOSDK/package.json

@@ -6,7 +6,7 @@
         "author": "Xuan Sang LE",
         "email": "xsang.le@gmail.com"
     },
-    "version":"0.0.3-a",
+    "version":"0.0.4-a",
     "category":"System",
     "iconclass":"fa fa-cubes",
     "mimes":[

src/packages/DummyApp/main.coffee

@@ -74,7 +74,7 @@ class DummyApp extends this.OS.GUI.BaseApplication
         (@find "sw").set "onchange", (e) ->
             console.log e, ((self.find "sw").get "swon")
         tree.set "data",tdata
-
+        (@find "spinner").set "onchange", (e) -> console.log e
         list = @find "mylist"
         ldata = [
             {text:"some thing with avery long text"},

src/packages/DummyApp/scheme.html

@@ -9,7 +9,8 @@
         </afx-vbox>
         <afx-resizer data-width = "5" ></afx-resizer>
         <afx-vbox>
-            <afx-button data-height="30" text="__(Read more)" iconclass="fa fa-camera-retro fa-lg" id="button"></afx-button>
+            <afx-nspinner value = "10" data-height="30" data-id="spinner"></afx-nspinner>
+            <afx-button data-height="30" toggle = "true" text="__(Read more)" iconclass="fa fa-camera-retro fa-lg" id="button"></afx-button>
             <afx-switch data-id="sw" enable= true data-height="30"></afx-switch>
             <afx-calendar-view></afx-calendar-view>
             <afx-resizer data-height = "5" ></afx-resizer>

src/themes/antos/afx-button.css

@@ -18,7 +18,7 @@ afx-button i.icon-style {
     display: inline-block;
     float:left;
 }
-afx-button button:active {
+afx-button button:active, afx-button.btactive button {
     background-color: #2786F3;
     color: white;
     border: 1px solid #dedede;

src/themes/antos/afx-nspinner.css

@@ -0,0 +1,44 @@
+afx-nspinner{
+    display: flex;
+    flex-direction: row;
+}
+afx-nspinner ul{
+    padding:0;
+    margin: 0;
+    list-style: none;
+}
+afx-nspinner ul li{
+    display: block;
+    border: 1px solid #a6a6a6;
+    width: 100%;
+    padding:0;
+    margin: 0;
+    height:45%;
+    border-radius: 3px;
+    color: #414339;
+    position: relative;
+}
+afx-nspinner ul li:hover{
+    color:#116cD6;
+}
+afx-nspinner ul li i {
+    display: block;
+}
+afx-nspinner ul li.incr i:before{
+    content: "\f0d8"; 
+    font-family: "FontAwesome";
+    font-size: 16px;
+    font-style: normal;
+    position: absolute;
+    top:-6px;
+    left: 5px;
+}
+afx-nspinner ul li.decr i:before{
+    content: "\f0d7"; 
+    font-family: "FontAwesome";
+    font-size: 16px;
+    font-style: normal;
+    position: absolute;
+    bottom: -4px;
+    left: 5px;
+}