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 e57c4984170e2c8645c8311c84476d24c1fd4a5a..9fcf43d3048721d05c626ded698b84c37a41cccb 100644 (file)
--- 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;} */
      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 d04acaa6ca5129ec6f196a9c5f2f89e2a14e141c..e40611210fe08afb9c31fa657426b30bcad37352 100644 (file)
--- a/static/dirtag.js
+++ b/static/dirtag.js
@@ -12,6 +12,20 @@ function tree_selection(id) {
     return path;
 }
 
     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) {
 /* Functions driving the CherryPy backend */
 
 function new_tag(path) {


@@ -20,11 +34,11 @@ function new_tag(path) {
 }
 
 function add_tag(path, tag) {
 }
 
 function add_tag(path, tag) {

-    alert('Add tag '+path.toString()+' to '+tag);
+    alert('Add tag '+tag+' to '+path.toString());

 }
 
 function remove_tag(path, tag) {
 }
 
 function remove_tag(path, tag) {

-    alert('Remove tag '+path.toString()+' from '+tag);
+    alert('Remove tag '+tag+' from '+path.toString());

 }
 
 /* The bindings themselves */
 }
 
 /* The bindings themselves */


@@ -41,7 +55,7 @@ function new_tag_button() {
 function set_selected_element(path) {
     element = document.getElementById('element');
     element.file_path = path;
 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() {
 }
 
 function raw_tree_select() {


@@ -54,9 +68,15 @@ function tag_tree_select() {
 
 function tag_check(event) {
     var path = document.getElementById('element').file_path;
 
 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 {
     } else {

-       remove_tag(path, event.target.id);
+       remove_tag(path, id);

     }
 }
     }
 }

diff --git a/static/dirtag.xul b/static/dirtag.xul
index 7ee1f308b5fa66eae232aa19f5dc85a81ae1baa3..9481f341defcc169e6f9d96e8ecf545c268af531 100644 (file)
--- a/static/dirtag.xul
+++ b/static/dirtag.xul
@@ -106,13 +106,35 @@
       </tabbox>
     </groupbox>
     <splitter collapse="before"><grippy/></splitter>
       </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;"/>
       <caption label="&selected.caption;"/>

-      <groupbox id="tags" oncommand="tag_check(event);">
+      <groupbox id="tags" oncommand="tag_check(event);" flex="1">

        <caption label="&tags.caption;"/>
        <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>
       </groupbox>
       <iframe id="element" src="" flex="1"/>
     </groupbox>