From 93622ec98a2aa12c93080f81554df622b4a10ff9 Mon Sep 17 00:00:00 2001
From: Xuan Sang LE <xsang.le@gmail.com>
Date: Wed, 21 Mar 2018 00:12:55 +0100
Subject: [PATCH] add <afx-slider>

---
 Makefile                          |  2 +-
 src/core/tags/afx-slider.tag      | 88 +++++++++++++++++++++++++++++++
 src/packages/DummyApp/main.coffee |  4 +-
 src/packages/DummyApp/scheme.html |  2 +
 src/themes/antos/afx-slider.css   | 32 +++++++++++
 5 files changed, 126 insertions(+), 2 deletions(-)
 create mode 100644 src/core/tags/afx-slider.tag
 create mode 100644 src/themes/antos/afx-slider.css

diff --git a/Makefile b/Makefile
index 4ff36c3..7a19ce9 100644
--- a/Makefile
+++ b/Makefile
@@ -37,7 +37,7 @@ main: initd build_coffees build_tags build_themes schemes libs  build_packages l
 initd:
 	- 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
 #		coffee --compile $< 
 
diff --git a/src/core/tags/afx-slider.tag b/src/core/tags/afx-slider.tag
new file mode 100644
index 0000000..6224f71
--- /dev/null
+++ b/src/core/tags/afx-slider.tag
@@ -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>
\ No newline at end of file
diff --git a/src/packages/DummyApp/main.coffee b/src/packages/DummyApp/main.coffee
index 9ac18aa..d7ebec8 100644
--- a/src/packages/DummyApp/main.coffee
+++ b/src/packages/DummyApp/main.coffee
@@ -104,7 +104,9 @@ class DummyApp extends this.OS.GUI.BaseApplication
             {text:"file2.cpp"}
         ]
         tabs.set "items", tabdatas 
-
+        (@find "slider").set "max", 200
+        (@find "slider").set "onchange", (d) ->
+            console.log d
         @scheme.set "apptitle", "AntOS feature showcase"
 
         @scheme.contextmenuHandler = (e, m) ->
diff --git a/src/packages/DummyApp/scheme.html b/src/packages/DummyApp/scheme.html
index 5b1356e..1a5b7a2 100644
--- a/src/packages/DummyApp/scheme.html
+++ b/src/packages/DummyApp/scheme.html
@@ -4,6 +4,8 @@
         <afx-vbox>
             <afx-tab-bar data-height = "50" data-id="mytabs" closable = true></afx-tab-bar>
             <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-resizer data-width = "5" ></afx-resizer>
         <afx-vbox>
diff --git a/src/themes/antos/afx-slider.css b/src/themes/antos/afx-slider.css
new file mode 100644
index 0000000..ef02999
--- /dev/null
+++ b/src/themes/antos/afx-slider.css
@@ -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;
+}