add <afx-slider>

This commit is contained in:
Xuan Sang LE 2018-03-21 00:12:55 +01:00
parent 0510da0701
commit 93622ec98a
5 changed files with 126 additions and 2 deletions

View File

@ -37,7 +37,7 @@ main: initd build_coffees build_tags build_themes schemes libs build_packages l
initd: initd:
- mkdir -p $(BUILDDIR) - mkdir -p $(BUILDDIR)
lite: build_coffee build_tag build_theme schemes build_packages lite: build_coffees build_tags build_themes schemes build_packages
#%.js: %.coffee #%.js: %.coffee
# coffee --compile $< # coffee --compile $<

View File

@ -0,0 +1,88 @@
<afx-slider>
<div class= "container" ref="container">
<div class = "progress" ref ="prg"></div>
<div if = {dragable} class = "dragpoint" ref = "point"></div>
</div>
<script>
this.value = Number(opts.value) || 0
this.max = Number(opts.max) || 100
if(opts.dragable != undefined)
this.dragable = eval(opts.dragable)
else
this.dragable = true
this.onchange = opts.onchange
//this.rid = $(self.root).attr("data-id") || Math.floor(Math.random() * 100000) + 1
var self = this
self.root.set = function(k,v)
{
if(k == "*")
for(var i in v)
self[i] = v[i]
else
self[k] = v
if(k == "value" && self.onchange)
self.onchange(self.value)
self.update()
}
self.root.get = function(k)
{
return self[k]
}
var calibrate = function() {
if(self.value > self.max) self.value = self.max
$(self.refs.container).css("width", $(self.root).width() + "px")
var w = $(self.refs.container).width()*self.value/ self.max
$(self.refs.prg).css("width", w + "px").css("height", $(self.refs.container).height()+"px")
if(self.dragable)
{
var ow = w - $(self.refs.point).width()/2
var top = Math.floor(($(self.refs.prg).height() - $(self.refs.point).height())/2)
$(self.refs.point).css("left", ow + "px").css("top", top + "px")
}
}
self.on("update", function(){
calibrate()
})
var enable_dragging = function()
{
$(self.refs.point)
.css("user-select","none")
.css("cursor","default")
$(self.refs.point).on("mousedown", function(e){
e.preventDefault()
offset = $(self.refs.container).offset()
$(window).on("mousemove", function(e){
var left
left = e.clientX - offset.left
left = left < 0?0:left
var maxw = $(self.refs.container).width();
left = left > maxw?maxw : left
self.value = left*self.max/maxw
//left = left - $(self.refs.point).width()/2
//$(self.refs.point).css("left",left + "px")
calibrate()
if(self.onchange) self.onchange(self.value)
})
$(window).on("mouseup", function(e){
$(window).unbind("mousemove", null)
})
})
}
self.on("mount", function(){
self.root.observable = opts.observable || (self.parent && self.parent.root && self.parent.root.observable) || riot.observable()
if(self.dragable)
{
$(self.refs.point).css("position", "absolute")
enable_dragging()
}
self.root.observable.on("calibrate",function(){
calibrate()
})
self.root.observable.on("resize", function(){
calibrate()
})
calibrate()
})
</script>
</afx-slider>

View File

@ -104,7 +104,9 @@ class DummyApp extends this.OS.GUI.BaseApplication
{text:"file2.cpp"} {text:"file2.cpp"}
] ]
tabs.set "items", tabdatas tabs.set "items", tabdatas
(@find "slider").set "max", 200
(@find "slider").set "onchange", (d) ->
console.log d
@scheme.set "apptitle", "AntOS feature showcase" @scheme.set "apptitle", "AntOS feature showcase"
@scheme.contextmenuHandler = (e, m) -> @scheme.contextmenuHandler = (e, m) ->

View File

@ -4,6 +4,8 @@
<afx-vbox> <afx-vbox>
<afx-tab-bar data-height = "50" data-id="mytabs" closable = true></afx-tab-bar> <afx-tab-bar data-height = "50" data-id="mytabs" closable = true></afx-tab-bar>
<afx-tree-view data-id="mytree"> </afx-tree-view> <afx-tree-view data-id="mytree"> </afx-tree-view>
<afx-slider data-id="slider" data-height="20" value="30"></afx-slider>
<div data-height="10"></div>
</afx-vbox> </afx-vbox>
<afx-resizer data-width = "5" ></afx-resizer> <afx-resizer data-width = "5" ></afx-resizer>
<afx-vbox> <afx-vbox>

View File

@ -0,0 +1,32 @@
afx-slider{
display: flex;
align-items: center;
justify-content: center;
}
afx-slider div.container{
display: block;
border:0;
border-radius: 3px;
height: 5px;
background-color: #e6e6e6;
position: relative;
padding:0;
}
afx-slider div.progress {
padding:0;
margin: 0;
display: block;
background-color: #116cd6;
border:0;
border-radius: 3px;
}
afx-slider div.dragpoint {
display: block;
width: 20px;
height: 20px;
border:1px solid #6b6b6b;
border-radius: 20px;
background-color:#e6e6e6;
}