fix bug and add afx-nspinner widget

This commit is contained in:
Xuan Sang LE 2018-09-13 20:14:12 +02:00
parent 7659438138
commit aec5457a31
9 changed files with 134 additions and 9 deletions

View File

@ -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> <afx-label color = {color} icon={icon} iconclass = {iconclass} text = {text} ></afx-label>
</button> </button>
<script> <script>
this.enable = opts.enable opts.enable = opts.enable || "true"
this.enable = eval(opts.enable) || false
this.icon = opts.icon this.icon = opts.icon
this.iconclass = opts.iconclass this.iconclass = opts.iconclass
this.color = opts.color this.color = opts.color
this.text = opts.text || "" this.text = opts.text || ""
this.selected = eval(opts.selected) || false
this.toggle = eval(opts.toggle) || false
var self = this var self = this
this.onbtclick = opts.onbtclick this.onbtclick = opts.onbtclick
self.root.set = function(k,v) self.root.set = function(k,v)
@ -37,6 +40,8 @@
{ {
self.root.observable.trigger("btclick",{id:$(self.root).attr("data-id"),data:self.root}) self.root.observable.trigger("btclick",{id:$(self.root).attr("data-id"),data:self.root})
} }
if(self.toggle)
self.root.set("selected",!self.selected)
} }
</script> </script>
</afx-button> </afx-button>

View File

@ -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>

View File

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

View File

@ -262,7 +262,7 @@ class AntOSDK extends this.OS.GUI.BaseApplication
{ {
path: "#{rpath}/assets/scheme.html", path: "#{rpath}/assets/scheme.html",
content: """ 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-hbox ></afx-hbox>
</afx-app-window> </afx-app-window>
""" """

View File

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

View File

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

View File

@ -9,7 +9,8 @@
</afx-vbox> </afx-vbox>
<afx-resizer data-width = "5" ></afx-resizer> <afx-resizer data-width = "5" ></afx-resizer>
<afx-vbox> <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-switch data-id="sw" enable= true data-height="30"></afx-switch>
<afx-calendar-view></afx-calendar-view> <afx-calendar-view></afx-calendar-view>
<afx-resizer data-height = "5" ></afx-resizer> <afx-resizer data-height = "5" ></afx-resizer>

View File

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

View File

@ -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;
}