calendar, color picker, tabcontainer

Makefile

@@ -35,12 +35,14 @@ coffees= 	src/core/core.coffee \
 			src/core/tags/SwitchTag.coffee \
 			src/core/tags/NSpinnerTag.coffee \
 			src/core/tags/MenuTag.coffee \
-			src/core/tags/GridView.coffee \
+			src/core/tags/GridViewTag.coffee \
 			src/core/tags/TabBarTag.coffee \
-			src/core/tags/TabContainer.coffee \
+			src/core/tags/TabContainerTag.coffee \
 			src/core/tags/TreeViewTag.coffee \
 			src/core/tags/SliderTag.coffee \
 			src/core/tags/FloatListTag.coffee \
+			src/core/tags/CalendarTag.coffee \
+			src/core/tags/ColorPickerTag.coffee \
         	src/antos.coffee
  
 

src/core/tags/CalendarTag.coffee

@@ -1,14 +1,128 @@
 class CalendarTag extends Ant.OS.GUI.BaseTag
     constructor: (r, o) ->
         super r, o
+        @setopt "day", 0
+        @setopt "ondateselect", ()  ->
+        @setopt "selectedDate", undefined
+        @day = 0
+        @month = 0
+        @year = 0
+
+    mount: () ->
+        me = @
+        $(@root).css "height", "100%"
+        $(@refs.grid).css "width", "100%"
+        $(@refs.prev).click (e) -> me.prevmonth()
+        $(@refs.next).click (e) -> me.nextmonth()
+        @refs.grid.set "header", [
+            { text: "__(Sun)" },
+            { text: "__(Mon)" },
+            { text: "__(Tue)" },
+            { text: "__(Wed)" },
+            { text: "__(Thu)" },
+            { text: "__(Fri)" },
+            { text: "__(Sat)" }
+        ]
+        @refs.grid.set "oncellselect", (e) ->
+            me.dateselect(e)
+
+        @observable.on "resize", (e) -> me.calibrate()
+        @calibrate()
+        @calendar null
+
+    dateselect: (e) ->
+        return unless e.data.item
+        value = e.data.item.get("data").text
+        return if value is ""
+        evt = { id: @aid() , data: new Date(@year, @month, value) }
+        @get("ondateselect") evt
+        @set "selectedDate", evt.data
+        @observable.trigger "dateselect", evt
+
+    calibrate: () ->
+        $(@refs.grid)
+            .css "height", "#{$(@root).height() - $(@refs.ctrl).height()}px"
+    prevmonth: () ->
+        @set "selectedDate", undefined
+        @month--
+        if @month < 0
+            @month = 11
+            @year--
+        @calendar(new Date(@year, @month, 1))
+
+    nextmonth: () ->
+        @set "selectedDate", undefined
+        @month++
+        if @month > 11
+            @month = 0
+            @year++
+        @calendar(new Date(this.year, this.month, 1))
+
+    calendar: (date) ->
+        date = new Date() unless date
+        @day = date.getDate()
+        @month = date.getMonth()
+        @year = date.getFullYear()
+
+        now = {
+            d: (new Date()).getDate(),
+            m: (new Date()).getMonth(),
+            y: (new Date()).getFullYear()
+        }
+        months = [
+            __("January"),
+            __("February"),
+            __("March"),
+            __("April"),
+            __("May"),
+            __("June"),
+            __("July"),
+            __("August"),
+            __("September"),
+            __("October"),
+            __("November"),
+            __("December")
+        ]
+        this_month = new Date(@year, @month, 1)
+        next_month = new Date(@year, @month + 1, 1)
+        # Find out when this month starts and ends.
+        first_week_day = this_month.getDay()
+        days_in_this_month = Math.round(
+            (next_month.getTime() - this_month.getTime()) / (1000 * 60 * 60 * 24))
+        #self.mtext = months[self.month]
+        rows = []
+        row = []
+        # Fill the first week of the month with the appropriate number of blanks.
+        row.push { text: "" } for week_day in [ 0..first_week_day - 1 ]
+        week_day = first_week_day
+        for day_counter in [ 1..days_in_this_month ]
+            week_day %= 7
+            if week_day == 0
+                rows.push(row)
+                row = []
+            # Do something different for the current day.
+            if  now.d is day_counter and @month is now.m and @year is now.y
+                row.push { text: day_counter, selected: true }
+            else
+                row.push { text: day_counter }
+            week_day++
+        for i in [ 0..7 - row.length ]
+            row.push { text: "" }
+        rows.push(row)
+        console.log rows
+        @refs.grid.set "rows", rows
+        @refs.mlbl.set "text", "#{months[@month]} #{@year}"
+
 
     layout: () ->
         [{
-            el: "div", children: [
+            el: "div", ref: "ctrl", children: [
                 { el: "i", class: "prevmonth", ref: "prev" },
                 { el: "afx-label", ref: "mlbl" },
-                { el: "afx-label", ref: "ylbl" },
+                { el: "i", class: "nextmonth", ref: "next" }
-                { el: "i", class: "nextmonth", ref: "next" },
+            ]
+        },
         { el: "afx-grid-view", ref: "grid" }
         ]
-        }]
+
+Ant.OS.GUI.define "afx-calendar-view", CalendarTag

src/core/tags/ColorPickerTag.coffee

@@ -0,0 +1,117 @@
+class ColorPickerTag extends Ant.OS.GUI.BaseTag
+    constructor: (r, o) ->
+        super r, o
+        @colorctx = undefined
+        @setopt "oncolorselect", (e) ->
+        @setopt "selectedColor", undefined
+
+    mount: () ->
+        $(@refs.wrapper)
+            .css "width", "310px"
+            .css "height", "190px"
+            .css "display", "block"
+            .css "padding", "3px"
+        $(@refs.palette)
+            .css "width", "284px"
+            .css "height", "155px"
+            .css "float", "left"
+        $(@refs.colorval)
+            .css "width", "15px"
+            .css "height", "155px"
+            .css "text-align", "center"
+            .css "margin-left", "3px"
+            .css "display", "block"
+            .css "float", "left"
+
+        $(@refs.inputwrp)
+            .css "margin-top", "3px"
+        
+        $(@refs.hextext)
+            .css "width", "70px"
+            .css "margin-left", "3px"
+            .css "margin-right", "5px"
+
+        @build_palette()
+
+    build_palette: () ->
+        me = @
+        colorctx = $(@refs.palette).get(0).getContext('2d')
+        gradient = colorctx.createLinearGradient(0, 0, $(@refs.palette).width(), 0)
+        # fill color
+        gradient.addColorStop(0,    "rgb(255,   0,   0)")
+        gradient.addColorStop(0.15, "rgb(255,   0, 255)")
+        gradient.addColorStop(0.33, "rgb(0,     0, 255)")
+        gradient.addColorStop(0.49, "rgb(0,   255, 255)")
+        gradient.addColorStop(0.67, "rgb(0,   255,   0)")
+        gradient.addColorStop(0.84, "rgb(255, 255,   0)")
+        gradient.addColorStop(1,    "rgb(255,   0,   0)")
+        gradient.addColorStop(0,    "rgb(0,   0,   0)")
+        # Apply gradient to canvas
+        colorctx.fillStyle = gradient
+        colorctx.fillRect(0, 0, colorctx.canvas.width, colorctx.canvas.height)
+        
+        # Create semi transparent gradient (white -> trans. -> black)
+        gradient = colorctx.createLinearGradient(0, 0, 0, $(@refs.palette).width())
+        gradient.addColorStop(0,   "rgba(255, 255, 255, 1)")
+        gradient.addColorStop(0.5, "rgba(255, 255, 255, 0)")
+        gradient.addColorStop(0.5, "rgba(0,     0,   0, 0)")
+        gradient.addColorStop(1,   "rgba(0,     0,   0, 1)")
+        # Apply gradient to canvas
+        colorctx.fillStyle = gradient
+        colorctx.fillRect(0, 0, colorctx.canvas.width, colorctx.canvas.height)
+        # now add mouse move event
+        getHex = (c) ->
+            s = c.toString(16)
+            s = "0" + s if s.length is 1
+            s
+
+        pick_color = (e) ->
+            $(me.refs.palette).css("cursor", "crosshair")
+            offset = $(me.refs.palette).offset()
+            x = e.pageX - offset.left
+            y = e.pageY - offset.top
+            color = colorctx.getImageData(x, y, 1, 1)
+            data = {
+                r: color.data[0],
+                g: color.data[1],
+                b: color.data[2],
+                text: 'rgb(' + color.data[0] + ', ' + color.data[1] + ', ' + color.data[2] + ')',
+                hex: '#' + getHex(color.data[0]) + getHex(color.data[1]) + getHex(color.data[2])
+            }
+            data
+
+        mouse_move_h = (e) ->
+            data = pick_color(e)
+            $(me.refs.colorval).css("background-color", data.text)
+        
+        $(me.refs.palette).mouseenter (e) ->
+            $(me.refs.palette).on("mousemove", mouse_move_h)
+    
+        $(me.refs.palette).mouseout (e) ->
+            $(me.refs.palette).unbind("mousemove", mouse_move_h)
+            if me.get "selectedColor"
+                $(me.refs.colorval).css("background-color", me.get("selectedColor").text)
+
+        $(@refs.palette).on "click", (e) ->
+            data = pick_color(e)
+            $(me.refs.rgbtext).html(data.text)
+            $(me.refs.hextext).val(data.hex)
+            me.set "selectedColor", data
+            evt =  { id: me.aid(), data: data }
+            me.get("oncolorselect") evt
+            me.observable.trigger "colorselect", data
+
+    layout: () ->
+        [{
+            el: "div", ref: "wrapper", children: [
+                { el: "canvas", class: "color-palette", ref: "palette" },
+                { el: "color-sample", ref: "colorval" },
+                { el: "div", class: "afx-clear" },
+                { el: "div", ref: "inputwrp", children: [
+                    { el: "input", ref: "hextext" },
+                    { el: "span", ref: "rgbtext" }
+                ] }
+            ]
+        }]
+
+Ant.OS.GUI.define "afx-color-picker", ColorPickerTag

src/core/tags/FileViewTag.coffee

@@ -0,0 +1,54 @@
+class FileViewTag extends Ant.OS.GUI.BaseTag
+    constructor: (r, o) ->
+        super r, o
+        @setopt "onfileselect", ()->
+        @setopt "onfileopen", () ->
+        @setopt "selectedFile", undefined
+        @setopt "view", "list"
+        @setopt "data", []
+        @setopt "path", "home:///"
+        @setopt "status", true
+        @setopt "showhidden", false
+        @setopt "fetch", undefined
+        @setopt "chdir", undefined
+        @preventUpdate = false
+        @header = [
+            { text: "__(File name)" },
+            { text: "__(Type)", width: 150 },
+            { text: "__(Size)", width: 70 }
+        ]
+
+    view: () -> @get "view"
+    
+
+    sortByType: (a, b) ->
+        if a.type < b.type
+            -1
+        else if  a.type > b.type
+             1
+        else
+            0
+
+    calibrate: () ->
+        h = $(@root).outerHeight()
+        w = $(@root).width()
+        h -= ($(@refs.status).height() + 10) if @get("status")
+        $(@refs.listview).css("height", h + "px")
+        $(@refs.gridview).css("height", h + "px")
+        $(@refs.treecontainer).css("height", h + "px")
+        $(@refs.listview).css("width", w + "px")
+        $(@refs.gridview).css("width", w + "px")
+        $(@refs.treecontainer).css("width", w + "px")
+
+    switchView: () ->
+        
+
+    layout: () ->
+        [
+            { el: "afx-list-view", ref: "listview" },
+            { el: "afx-grid-view", ref: "gridview" },
+            { el: "div", class: "treecontainer", ref: "treecontainer", children: [
+                { el: "afx-tree-view", ref: "treeview" }
+            ] },
+            { el: "afx-label", class: "status", ref: "status" }
+        ]

src/core/tags/FloatListTag.coffee

@@ -3,7 +3,7 @@ class FloatListTag extends ListViewTag
         super r, o
         me = @
         @setopt "dir", "horizontal"
-        @root.refresh = () -> me.refresh()
+        @root.refresh = () -> me.calibrate()
         @root.push = (e) -> me.refs.mlist.push(e)
         @root.unshift = (e) -> me.refs.mlist.unshift(e)
         @root.remove = (e) -> me.refs.mlist.remove(e)
@@ -15,11 +15,11 @@ class FloatListTag extends ListViewTag
     dropoff: (e) ->
     __data__: (v) ->
         super.__data__(v)
-        @refresh()
+        @calibrate()
     __dir__: (v) ->
-        @refresh()
+        @calibrate()
-    calibrate: (e) -> @refresh()
     mount: () ->
+        me = @
         $(@refs.container)
             .css "width", "100%"
             .css "height", "100%"
@@ -27,27 +27,28 @@ class FloatListTag extends ListViewTag
             .css "position", "absolute"
             .css "display", "block"
             .css "width", "100%"
-
+        @observable.on "resize", (e) -> me.calibrate()
     push: (v) ->
         el = super.push(v)
         @enable_drag el
         el
 
     enable_drag: (el) ->
-        globalof = $(@refs.mlist).offset()
+        me = @
         $(el)
             .css "user-select", "none"
             .css "cursor", "default"
             .css "display", "block"
             .css "position", "absolute"
             .on "mousedown", (evt) ->
+                globalof = $(me.refs.mlist).offset()
                 evt.preventDefault()
                 offset = $(el).offset()
                 offset.top = evt.clientY - offset.top
                 offset.left = evt.clientX - offset.left
                 mouse_move = (e) ->
                     top  = e.clientY - offset.top - globalof.top
-                    left = e.clientX - globalof.top - offset.left
+                    left = e.clientX - globalof.left - offset.left
                     left = if left < 0 then 0 else left
                     top = if top < 0 then 0 else top
                     $(el)
@@ -60,7 +61,7 @@ class FloatListTag extends ListViewTag
                 $(window).on "mousemove", mouse_move
                 $(window).on "mouseup", mouse_up
 
-    refresh: () ->
+    calibrate: () ->
         ctop = 20
         cleft = 20
         $(@refs.mlist)

src/core/tags/GridViewTag.coffee

@@ -5,6 +5,16 @@ class GridCellPrototype extends Ant.OS.GUI.BaseTag
         @setopt "oncellselect", (e) ->
         @setopt "oncelldbclick", (e) ->
         @setopt "data", {}
+        @setopt "selected", false
+    
+    __data__: (v) ->
+        return unless v.selected
+        @set "selected", v.selected
+        delete v.selected
+    
+    __selected__: (v) ->
+        return unless v
+        @cellseleck {}, false
 
     mount: () ->
         me = @
@@ -32,7 +42,7 @@ class SimpleGridCell extends GridCellPrototype
     __header__: (v) ->
 
 
-    __data__: (d) ->
+    __data: (d) ->
         @refs.cell.set  k, v for k, v of d
 
     layout: () ->
@@ -76,10 +86,10 @@ class GridViewTag extends Ant.OS.GUI.BaseTag
             for cell in row
                 el = $("<#{@get("cellitem")}>").appendTo div
                 el[0].uify undefined
-                el[0].set "data", cell
                 cell.domel = el[0]
                 el[0].set "oncellselect", (e) -> me.cellselect e, false
                 el[0].set "oncelldbclick", (e) -> me.cellselect e, true
+                el[0].set "data", cell
 
     multiselect: () ->
         @get "multiselect"
@@ -172,6 +182,7 @@ class GridViewTag extends Ant.OS.GUI.BaseTag
             .css "width", "100%"
             .css "overflow-x", "hidden"
             .css "overflow-y", "auto"
+        @calibrate()
 
     layout: () ->
         [

src/core/tags/TabContainerTag.coffee

@@ -1,4 +1,4 @@
-class TabContainer extends Ant.OS.GUI.BaseTag
+class TabContainerTag extends Ant.OS.GUI.BaseTag
     constructor: (r, o) ->
         super r, o
         @setopt "dir", "column" # or row
@@ -58,4 +58,4 @@ class TabContainer extends Ant.OS.GUI.BaseTag
             ]
         }]
 
-Ant.OS.GUI.define "afx-tab-container", TabContainer
+Ant.OS.GUI.define "afx-tab-container", TabContainerTag

src/packages/ShowCase/coffees/main.coffee

@@ -60,19 +60,19 @@ class ShowCase extends this.OS.GUI.BaseApplication
                                 <afx-list-view data-id="list" dropdown="false" multiselect="true" />
                             </afx-hbox>
                             <afx-hbox data-height="150">
-                                <afx-grid-view data-id="grid" multiselect="true" />
+                                <afx-grid-view data-id="grid" multiselect="false" />
                             </afx-hbox>
                         </afx-vbox>
-                        <afx-vbox data-width="150">
-                            <div data-height="grow">box 3</div>
-                            <div data-height="200">box 4</div>
-                        </afx-vbox>
                     </afx-hbox>
-
                     <afx-hbox title="Virtual desktop">
                         <afx-float-list1 data-id = "flist"/>
                     </afx-hbox>
-
+                    <afx-hbox title="Calendar">
+                        <afx-calendar-view data-id = "cal"/>
+                    </afx-hbox>
+                    <afx-hbox title="Color picker">
+                        <afx-color-picker data-id = "cpk"/>
+                    </afx-hbox>
                 </afx-tab-container>
             </afx-vbox>
         </afx-app-window>
@@ -206,6 +206,14 @@ class ShowCase extends this.OS.GUI.BaseApplication
             { text: "Data.doc", iconclass: "fa fa-camera-retro fa-lg" }
         ]
 
+        cal = $ "[data-id='cal']", scheme[0]
+        cal[0].set "ondateselect", (e) ->
+            console.log e
+        
+        pk = $ "[data-id='cpk']", scheme[0]
+        pk[0].set "oncolorselect", (e) ->
+            console.log e
+
     mnFile: () ->
         #console.log file
         me = @

src/themes/antos/afx-float-list.css

@@ -5,10 +5,9 @@ afx-float-list1 div.list-container > ul{
     background-color: transparent;
 }
 
-
 afx-float-list1 div.list-container > ul li{
     padding: 0;
+    margin: 0;
     background-color: transparent;
     list-style: none;
-    max-width: 100px;
 }