refactored the panel API out from the editor...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2013-12-09 21:10:12 +04:00
parent d4bae60f58
commit 64f13db83f
4 changed files with 138 additions and 98 deletions

View File

@ -20,6 +20,7 @@
<script src="lib/jli.js"></script> <script src="lib/jli.js"></script>
<script src="lib/keyboard.js"></script> <script src="lib/keyboard.js"></script>
<script src="lib/scroller.js"></script> <script src="lib/scroller.js"></script>
<script src="lib/panels.js"></script>
<script src="lib/editor.js"></script> <script src="lib/editor.js"></script>
<script src="compatibility.js"></script> <script src="compatibility.js"></script>

View File

@ -246,101 +246,6 @@ function makeLogRange(text, filter, target){
} }
function makePanel(title, open, editable_title){
title = title == null ? '&nbsp;' : title
// tool panel...
var panel = $('<details/>')
.prop('open', open == null ? true : open)
.addClass('panel noScroll')
.css({
position: 'absolute',
top: '100px',
left: '100px',
})
.append($('<summary>'+title+'</summary>')
.attr({
contenteditable: editable_title == null ? 'false' : 'true',
})
// XXX add a '+' button to create a new panel...
.append($('<span/>')
.addClass('close-button')
.click(function(){
panel
.trigger('panelClosing')
.hide()
return false
})
.html('&times;')))
.draggable({
containment: 'parent',
scroll: false,
// XXX this makes things quite a bit slower...
stack: '.panel',
})
var _outside = false
// wrapper for sub-panels...
var content = $('<span class="panel-content">')
.sortable({
forcePlaceholderSize: true,
opacity: 0.7,
connectWith: '.panel-content',
zIndex: 9999,
start: function(e, ui){
_outside = false
ui.placeholder.height(ui.helper.outerHeight());
ui.placeholder.width(ui.helper.outerWidth());
},
// XXX this is not done...
// create a new panel when dropping outside of curent panel...
stop: function(e, ui){
// do this only when dropping putside the panel...
if(_outside){
makePanel()
// XXX adjust this to scale...
.css(ui.position)
.appendTo(panel.parent())
.find('.panel-content')
.append(ui.item)
}
},
// XXX are these the correct events???
over: function(e, ui){
_outside = false
},
out: function(e, ui){
_outside = true
},
})
.appendTo(panel)
return panel
}
function makeSubPanel(title, open, parent){
title = title == null ? '&nbsp;' : title
var sub_panel = $('<details/>')
.addClass('sub-panel noScroll')
.prop('open', open == null ? true : open)
.append($('<summary>'+title+'</summary>'))
.append($('<div class="sub-panel-content"/>'))
if(parent != null){
if(parent.hasClass('panel-content')){
sub_panel.appendTo(parent)
} else {
sub_panel.appendTo(parent.find('.panel-content'))
}
}
return sub_panel
}
function makeFilterPanel(parent, target){ function makeFilterPanel(parent, target){
return makeSubPanel('Filters', true, parent) return makeSubPanel('Filters', true, parent)
.find('.sub-panel-content') .find('.sub-panel-content')

111
ui/lib/panels.js Executable file
View File

@ -0,0 +1,111 @@
/**********************************************************************
*
*
*
**********************************************************************/
//var DEBUG = DEBUG != null ? DEBUG : true
/*********************************************************************/
function makePanel(title, open, editable_title){
title = title == null ? '&nbsp;' : title
// tool panel...
var panel = $('<details/>')
.prop('open', open == null ? true : open)
.addClass('panel noScroll')
.css({
position: 'absolute',
top: '100px',
left: '100px',
})
.append($('<summary>'+title+'</summary>')
.attr({
contenteditable: editable_title == null ? 'false' : 'true',
})
// XXX add a '+' button to create a new panel...
.append($('<span/>')
.addClass('close-button')
.click(function(){
panel
.trigger('panelClosing')
.hide()
return false
})
.html('&times;')))
.draggable({
containment: 'parent',
scroll: false,
// XXX this makes things quite a bit slower...
stack: '.panel',
})
var _outside = false
// wrapper for sub-panels...
var content = $('<span class="panel-content">')
.sortable({
forcePlaceholderSize: true,
opacity: 0.7,
connectWith: '.panel-content',
zIndex: 9999,
start: function(e, ui){
_outside = false
ui.placeholder.height(ui.helper.outerHeight());
ui.placeholder.width(ui.helper.outerWidth());
},
// XXX this is not done...
// create a new panel when dropping outside of curent panel...
stop: function(e, ui){
// do this only when dropping putside the panel...
if(_outside){
makePanel()
// XXX adjust this to scale...
.css(ui.position)
.appendTo(panel.parent())
.find('.panel-content')
.append(ui.item)
}
},
// XXX are these the correct events???
over: function(e, ui){
_outside = false
},
out: function(e, ui){
_outside = true
},
})
.appendTo(panel)
return panel
}
function makeSubPanel(title, open, parent){
title = title == null ? '&nbsp;' : title
var sub_panel = $('<details/>')
.addClass('sub-panel noScroll')
.prop('open', open == null ? true : open)
.append($('<summary>'+title+'</summary>'))
.append($('<div class="sub-panel-content"/>'))
if(parent != null){
if(parent.hasClass('panel-content')){
sub_panel.appendTo(parent)
} else {
sub_panel.appendTo(parent.find('.panel-content'))
}
}
return sub_panel
}
/**********************************************************************
* vim:set ts=4 sw=4 : */

View File

@ -18,8 +18,24 @@ TAGS = {
/*********************************************************************/ /*********************************************************************/
function buildTagsFromImages(images){ function buildTagsFromImages(images, tagset){
tagset = tagset == null ? TAGS : tagset
images = images == null ? IMAGES : images
for(gid in images){
var tags = images[gid].tags
if(tags == null){
continue
} }
tags.map(function(tag){
if(tagset[tag] == null){
tagset[tag] = []
}
tagset[tag].push(gid)
})
}
}
// XXX // XXX
function normalizeTag(tag){ function normalizeTag(tag){
@ -27,6 +43,7 @@ function normalizeTag(tag){
} }
/*********************************************************************/ /*********************************************************************/
function addTag(tags, gid, tagset, images){ function addTag(tags, gid, tagset, images){
@ -137,19 +154,25 @@ function updateTags(tags, gid, tagset, images){
// this implements the AND selector... // this implements the AND selector...
// NOTE: do not like this algorithm as it can get O(n^2)-ish // NOTE: do not like this algorithm as it can get O(n^2)-ish
function selectByTags(tags, tagset){ function selectByTags(tags, tagset){
tags = typeof(tags) == typeof('str') ? [ tags ] : tags
tagset = tagset == null ? TAGS : tagset
var subtagset = [] var subtagset = []
var res = [] var res = []
// populate the subtagset... // populate the subtagset...
tags.map(function(tag){ tags.map(function(tag){
if(tagset[tag] == null){
return
}
subtagset.push(tagset[tag]) subtagset.push(tagset[tag])
}) })
subtagset.sort(function(a, b){ subtagset.sort(function(a, b){
return a.length - b.length return b.length - a.length
}) })
// set the res to the shortest subset... // set the res to the shortest subset...
var cur = subtagset.pop().splice() var cur = subtagset.pop().slice()
// filter out the result... // filter out the result...
cur.map(function(gid){ cur.map(function(gid){