mirror of
https://github.com/lxsang/antos-frontend.git
synced 2025-07-19 15:29:51 +02:00
color picker + fileview
This commit is contained in:
Xuan Sang LE
@ -44,13 +44,14 @@ class BasicDialog extends BaseDialog
|
||||
<afx-hbox>"
|
||||
html += "<#{@conf.tag} data-id = 'content'></#{@conf.tag}>"
|
||||
html += "<div data-height = '40' style='padding:5px; text-align:right;'>"
|
||||
html += "<afx-button data-id = 'bt#{k}' text = '#{v.label}' style='margin-left:5px;'></afx-button>" for k,v of @conf.buttons
|
||||
html += "<afx-button data-id = 'bt#{k}' text = '#{v.label}' style='margin-left:3px;'></afx-button>" for k,v of @conf.buttons
|
||||
html += "</div></afx-hbox></afx-app-window>"
|
||||
#render the html
|
||||
_GUI.htmlToScheme html, @, @host
|
||||
|
||||
main: () ->
|
||||
@scheme.set "minimizable", false
|
||||
@scheme.set "resizable", @conf.resizable if @conf.resizable isnt undefined
|
||||
me = @
|
||||
f = (_v) -> () -> _v.onclick me
|
||||
# bind action to button
|
||||
@ -64,6 +65,7 @@ class CalendarDialog extends BasicDialog
|
||||
tag: 'afx-calendar-view',
|
||||
width: 300,
|
||||
height: 220,
|
||||
resizable: false,
|
||||
buttons: [
|
||||
{
|
||||
label: 'Ok',
|
||||
@ -83,3 +85,28 @@ class CalendarDialog extends BasicDialog
|
||||
}
|
||||
this.OS.register "CalendarDialog", CalendarDialog
|
||||
|
||||
class ColorPickerDialog extends BasicDialog
|
||||
constructor: () ->
|
||||
super "ColorPickerDialog", {
|
||||
tag: 'afx-color-picker',
|
||||
width: 313,
|
||||
height: 220,
|
||||
resizable: false,
|
||||
buttons: [
|
||||
{
|
||||
label: 'Ok',
|
||||
onclick: (d) ->
|
||||
c = (d.find "content").get "selectedColor"
|
||||
if c
|
||||
d.handler c if d.handler
|
||||
d.quit()
|
||||
else
|
||||
d.notify "Please select a color"
|
||||
},
|
||||
{
|
||||
label: 'Cancel',
|
||||
onclick: (d) -> d.quit()
|
||||
}
|
||||
]
|
||||
}
|
||||
this.OS.register "ColorPickerDialog", ColorPickerDialog
|
||||
@ -3,20 +3,20 @@
|
||||
<ul class= "afx-window-top" >
|
||||
<li class = "afx-window-close" onclick = {close}></li>
|
||||
<li if = {minimizable == true} class = "afx-window-minimize" onclick = {minimize}></li>
|
||||
<li if = {maximizable == true} class = "afx-window-maximize" onclick={maximize}></li>
|
||||
<li if = {resizable == true} class = "afx-window-maximize" onclick={maximize}></li>
|
||||
<li ref = "dragger" class = "afx-window-title">{ apptitle }</li>
|
||||
</ul>
|
||||
<div class = "afx-clear"></div>
|
||||
<div ref = "content" class = "afx-window-content">
|
||||
<yield/>
|
||||
</div>
|
||||
<div ref = "grip" class = "afx-window-grip">
|
||||
<div if = {resizable == true} ref = "grip" class = "afx-window-grip">
|
||||
</div>
|
||||
|
||||
<script>
|
||||
this.apptitle = opts.apptitle || ""
|
||||
this.minimizable = eval(opts.minimizable) || true
|
||||
this.maximizable = eval(opts.maximizable) || true
|
||||
this.resizable = eval(opts.resizable) || true
|
||||
var self = this
|
||||
var offset = {top:0,left:0}
|
||||
var desktop_pos = $("#desktop").offset()
|
||||
@ -147,6 +147,7 @@
|
||||
|
||||
var enable_resize = function()
|
||||
{
|
||||
if(!self.resizable) return
|
||||
$(self.refs.grip)
|
||||
.css("user-select","none")
|
||||
.css("cursor","default")
|
||||
@ -181,7 +182,7 @@
|
||||
|
||||
var toggle_window = function()
|
||||
{
|
||||
if(!self.maximizable) return;
|
||||
if(!self.resizable) return
|
||||
if(isMaxi == false)
|
||||
{
|
||||
history = {
|
||||
|
||||
104
src/core/tags/afx-color-picker.js
Normal file
104
src/core/tags/afx-color-picker.js
Normal file
@ -0,0 +1,104 @@
|
||||
<afx-color-picker>
|
||||
<div style = "width:310px; height:190px;display:block; padding:3px;">
|
||||
<canvas class = "color-palette" width="284" height="155" style ="float:left;" ref = "palette" ></canvas>
|
||||
<div class = "color-sample" style= "width:15px; height:155px; text-align:center; margin-left:3px; display:block;float:left;" ref = "colorval"></div>
|
||||
<div class = "afx-clear"></div>
|
||||
<div style ="margin-top:3px;">
|
||||
<span>Hex:</span><input type = "text" ref = "hextext" style = "width:70px; margin-left:3px;margin-right:5px;"></input>
|
||||
<span ref = 'rgbtext'></span>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
var self = this
|
||||
var colorctx = undefined
|
||||
self.root.observable = opts.observable
|
||||
self.oncolorsetect = opts.oncolorsetect
|
||||
self.selectedColor = undefined
|
||||
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]
|
||||
}
|
||||
|
||||
var build_palette = function()
|
||||
{
|
||||
colorctx = $(self.refs.palette).get(0).getContext('2d')
|
||||
var gradient = colorctx.createLinearGradient(0,0,$(self.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, $(self.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)
|
||||
//$(self.refs.palette).css("position", "absolute")
|
||||
// now add mouse move event
|
||||
var pick_color = function(e)
|
||||
{
|
||||
$(self.refs.palette).css("cursor","crosshair")
|
||||
var offset = $(self.refs.palette).offset()
|
||||
var x = e.pageX - offset.left
|
||||
var y = e.pageY - offset.top
|
||||
var color = colorctx.getImageData(x,y, 1, 1)
|
||||
var 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:'#' + color.data[0].toString(16) + color.data[1].toString(16) + color.data[2].toString(16)
|
||||
}
|
||||
return data
|
||||
}
|
||||
var mouse_move_h = function(e)
|
||||
{
|
||||
var data = pick_color(e)
|
||||
$(self.refs.colorval).css("background-color", data.text)
|
||||
}
|
||||
$(self.refs.palette).mouseenter(function(e){
|
||||
$(self.refs.palette).on("mousemove",mouse_move_h)
|
||||
})
|
||||
$(self.refs.palette).mouseout(function(e){
|
||||
$(self.refs.palette).unbind("mousemove",mouse_move_h)
|
||||
if(self.selectedColor)
|
||||
$(self.refs.colorval).css("background-color", self.selectedColor.text)
|
||||
})
|
||||
$(self.refs.palette).on("click", function(e){
|
||||
data = pick_color(e)
|
||||
$(self.refs.rgbtext).html(data.text)
|
||||
$(self.refs.hextext).val(data.hex)
|
||||
self.selectedColor = data
|
||||
if(self.oncolorsetect)
|
||||
self.oncolorsetect(data)
|
||||
if(! self.root.observable) return
|
||||
self.root.observable.trigger("colorselect",data)
|
||||
})
|
||||
}
|
||||
|
||||
this.on("mount", function(){
|
||||
build_palette()
|
||||
})
|
||||
</script>
|
||||
</afx-color-picker>
|
||||
25
src/core/tags/afx-file-view.js
Normal file
25
src/core/tags/afx-file-view.js
Normal file
@ -0,0 +1,25 @@
|
||||
<afx-file-view>
|
||||
<afx-list-view if = {view == 'icon'} child = {data.items}></afx-list-view>
|
||||
<afx-grid-view if = {view == 'list'} header = {data.header} rows = {data.items}></afx-grid-view>
|
||||
<afx-tree-view if = {view == 'tree'}></afx-tree-view>
|
||||
|
||||
<script>
|
||||
var self = this
|
||||
self.root.observable = opts.observable
|
||||
self.view = opts.view || 'icon'
|
||||
self.data = opts.data
|
||||
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]
|
||||
}
|
||||
</script>
|
||||
</afx-file-view>
|
||||
Reference in New Issue
Block a user