From: W. Trevor King <wking@drexel.edu>
Date: Fri, 16 Jul 2010 20:48:59 +0000 (-0400)
Subject: Use checkbox tree rather than a simple array for element tags in dirtag.xul
X-Git-Url: http://git.tremily.us/?a=commitdiff_plain;h=46565ba4cce440a96dbe4844c2b01502b468d7f6;p=dirtag.git

Use checkbox tree rather than a simple array for element tags in dirtag.xul
---

diff --git a/static/dirtag.css b/static/dirtag.css
index e57c498..9fcf43d 100644
--- a/static/dirtag.css
+++ b/static/dirtag.css
@@ -4,3 +4,21 @@
      https://developer.mozilla.org/en/XUL/groupbox
  */
 /* groupbox {border-style:solid; border-color:black; border:1px;} */
+
+/* Checkbox images following
+     https://developer.mozilla.org/en/XUL/Attribute/treecol.type
+     http://code.google.com/p/weaponry/wiki/ExtensionWrittingTipsAndTricks
+ */
+treechildren::-moz-tree-checkbox
+{
+    /* unchecked checkbox treecells. This style MUST come before treechildren::-moz-tree-checkbox(checked) otherwise it won't take effect. */
+    list-style-image: none;
+}
+treechildren::-moz-tree-checkbox(checked)
+{
+    list-style-image: url(chrome://global/skin/checkbox/cbox-check.gif);
+}
+treechildren::-moz-tree-checkbox(disabled)
+{
+    list-style-image: url(chrome://global/skin/checkbox/cbox-check-dis.gif);
+}
diff --git a/static/dirtag.js b/static/dirtag.js
index d04acaa..e406112 100644
--- a/static/dirtag.js
+++ b/static/dirtag.js
@@ -12,6 +12,20 @@ function tree_selection(id) {
     return path;
 }
 
+function tree_selection_and_check(id) {
+    var tree = document.getElementById(id);
+    var name = tree.columns.getPrimaryColumn();
+    var check = tree.columns.getFirstColumn();
+    var i = tree.currentIndex;
+    var checked = tree.view.getCellValue(i, check);
+    var path = new Array();
+    while (i >= 0) {
+	path.splice(0, 0, tree.view.getCellText(i, name));
+	i = tree.view.getParentIndex(i);
+    }
+    return [path, checked];
+}
+
 /* Functions driving the CherryPy backend */
 
 function new_tag(path) {
@@ -20,11 +34,11 @@ function new_tag(path) {
 }
 
 function add_tag(path, tag) {
-    alert('Add tag '+path.toString()+' to '+tag);
+    alert('Add tag '+tag+' to '+path.toString());
 }
 
 function remove_tag(path, tag) {
-    alert('Remove tag '+path.toString()+' from '+tag);
+    alert('Remove tag '+tag+' from '+path.toString());
 }
 
 /* The bindings themselves */
@@ -41,7 +55,7 @@ function new_tag_button() {
 function set_selected_element(path) {
     element = document.getElementById('element');
     element.file_path = path;
-    alert(path.toString());
+    alert('Set selected element: '+path.toString());
 }
 
 function raw_tree_select() {
@@ -54,9 +68,15 @@ function tag_tree_select() {
 
 function tag_check(event) {
     var path = document.getElementById('element').file_path;
-    if (event.target.checked) {
-	add_tag(path, event.target.id);
+    var a = tree_selection_and_check('checkbox-tree');
+    id = a[0];
+    checked = a[1];
+    alert('path: '+path.toString());
+    alert('id: '+id);
+    alert('check: '+checked);
+    if (checked) {
+	add_tag(path, id);
     } else {
-	remove_tag(path, event.target.id);
+	remove_tag(path, id);
     }
 }
diff --git a/static/dirtag.xul b/static/dirtag.xul
index 7ee1f30..9481f34 100644
--- a/static/dirtag.xul
+++ b/static/dirtag.xul
@@ -106,13 +106,35 @@
       </tabbox>
     </groupbox>
     <splitter collapse="before"><grippy/></splitter>
-    <groupbox id="selected" flex="1" orient="horizontal">
+    <groupbox id="selected" flex="2" orient="horizontal">
       <caption label="&selected.caption;"/>
-      <groupbox id="tags" oncommand="tag_check(event);">
+      <groupbox id="tags" oncommand="tag_check(event);" flex="1">
 	<caption label="&tags.caption;"/>
-	<checkbox id="tag-X" checked="true" label="tag-X" accesskey="1"/>
-	<checkbox id="tag-Y" checked="true" label="tag-Y" accesskey="2"/>
-	<checkbox id="tag-Z" checked="false" label="tag-Z" accesskey="3"/>
+	<tree id="checkbox-tree" rows="2" seltype="single" editable="true"
+	      datasources="tag-tree.rdf raw-tree.rdf"
+	      ref="http://dirtag.com/tag/files"
+	      flags="dont-build-content" onselect="tag_check();" flex="1">
+	  <treecols>
+	    <treecol id="checkbox-tree-check-column" label="CK" type="checkbox"
+		     editable="true"/>
+	    <treecol id="checkbox-tree-path-column" label="&path_column.label;"
+		     editable="true" primary="true"
+		     sort="rdf:http://dirtag.com/rdf#name" flex="1"/>
+	    <splitter class="tree-splitter"/>
+	  </treecols>
+	  <template>
+	    <rule iscontainer="true">
+	      <treechildren>
+		<treeitem uri="rdf:*" open="true">
+		  <treerow>
+		    <treecell value="true"/>
+		    <treecell label="rdf:http://dirtag.com/rdf#name"/>
+		  </treerow>
+		</treeitem>
+	      </treechildren>
+	    </rule>
+	  </template>
+	</tree>
       </groupbox>
       <iframe id="element" src="" flex="1"/>
     </groupbox>