Browse Source

- refactoring of jstree related stuff,

Damien Accorsi 10 years ago
parent
commit
77bb466113
2 changed files with 136 additions and 82 deletions
  1. 51 33
      pboard/pboard/templates/document-widgets.mak
  2. 85 49
      pboard/pboard/templates/document.mak

+ 51 - 33
pboard/pboard/templates/document-widgets.mak View File

@@ -593,42 +593,60 @@
593 593
     <div class="modal-body">
594 594
     ## MODAL BODY
595 595
           <p>${_('Select the destination:')}</p>
596
-          <div id="${psModalId}-new-parent-selector-tree"></div>
596
+          <div id="${psModalId}-new-parent-selector-treeview"></div>
597 597
           <script>
598
-            $(function () {
599
-              $('#${psModalId}-new-parent-selector-tree').jstree({
600
-                "plugins" : [ "wholerow"],
601
-                'core' : {
602
-
603
-                  'error': function (error) {
604
-                    console.log('Error ' + error.toString())
605
-                  },
606
-                  'data' : {
607
-                    'dataType': 'json',
608
-                    'contentType': 'application/json; charset=utf-8',
609
-                    'url' : function (node) {
610
-                         return '${tg.url("/api/menu/children")}';
611
-                    },
612
-                    'data' : function(node) {
613
-                      console.log("NODE => "+JSON.stringify(node))
614
-                      return {
615
-                        'id' : node.id
616
-                      };
617
-                    },
618
-                    'success': function (new_data) {
619
-                      console.log('loaded new menu data' + new_data)
620
-                      return new_data;
621
-                    },
622
-                  },
623
-                }
624
-              });
598
+              /** return true or false if the node should be shown in the "move item" dialog treeview 
599
+               */
600
+              function shouldRemoveNodeFromMoveTreeView(parentTreeItem, currentTreeItem, rootList) {
601
+                  if(currentTreeItem.id==${poNode.node_id}) {
602
+                      console.log('Say OK to remove item #'+currentTreeItem.id+' from menu');
603
+                      return true;
604
+                  }
605
+                  return false;
606
+              }
607
+
608
+              $(function () {
609
+                  $('#${psModalId}-new-parent-selector-treeview').jstree({
610
+                      "plugins" : [ "wholerow"],
611
+                      'core' : {
612
+                          'error': function (error) {
613
+                              console.log('Error ' + error.toString())
614
+                          },
615
+                          'data' : {
616
+                              'dataType': 'json',
617
+                              'contentType': 'application/json; charset=utf-8',
618
+                              'url' : function (node) {
619
+                                  if (node.id==='#') {
620
+                                      return '${tg.url("/api/menu/initialize", dict(current_node_id=poNode._oParent.node_id if poNode._oParent else 0))}';
621
+                                  } else {
622
+                                      return '${tg.url("/api/menu/children")}';
623
+                                  }
624
+                              },
625
+                              'data' : function(node) {
626
+                                  console.log("NODE => "+JSON.stringify(node))
627
+                                  return {
628
+                                      'id' : node.id
629
+                                  };
630
+                              },
631
+                              'success': function (new_data) {
632
+                                  console.log('loaded new menu data (for move operation)' + new_data)
633
+                                  console.log(new_data);
634
+
635
+                                  for (var i = new_data['d'].length; i--;) {
636
+                                      prepareOrRemoveTreeNode(null, new_data['d'][i], new_data['d'], shouldRemoveNodeFromMoveTreeView);
637
+                                  }
638
+                                  return new_data;
639
+                              },
640
+                          },
641
+                      }
642
+                  });
625 643
               
626
-              $('#${psModalId}-new-parent-selector-tree').on("select_node.jstree", function (e, data) {
627
-                new_parent_id_selected = data.selected[0];
628
-                $("#${psModalId}-form-new-parent-field").attr("value", new_parent_id_selected)
629
-                console.log("About to move document "+${poNode.node_id}+" as child of "+new_parent_id_selected);
644
+                  $('#${psModalId}-new-parent-selector-treeview').on("select_node.jstree", function (e, data) {
645
+                      new_parent_id_selected = data.selected[0];
646
+                      $("#${psModalId}-form-new-parent-field").attr("value", new_parent_id_selected)
647
+                      console.log("About to move document "+${poNode.node_id}+" as child of "+new_parent_id_selected);
648
+                  });
630 649
               });
631
-            });
632 650
           </script>
633 651
           <form id='${psModalId}-form' method="POST" action="${psPostUrl}" enctype="multipart/form-data">
634 652
             <input type="hidden" name="node_id" value="${poNode.node_id}"/>

+ 85 - 49
pboard/pboard/templates/document.mak View File

@@ -81,62 +81,98 @@
81 81
       <link rel="stylesheet" href="${tg.url('/jstree/dist/themes/default/style.min.css')}" />
82 82
       <script src="${tg.url('/jstree/dist/jstree.js')}"></script>
83 83
       <style>
84
-        #mypodtree {overflow:hidden;}
85
-        #mypodtree:hover {overflow:visible; }
84
+        #left-menu-treeview {overflow:hidden;}
85
+        #left-menu-treeview:hover {overflow:visible; }
86 86
       </style>
87 87
       <h5>${_('Content explorer')}</h5>
88
-      <div id="mypodtree"></div>
88
+      <div id="left-menu-treeview"></div>
89 89
       <script>
90
-        $(function () {
91
-          $('#mypodtree').jstree({
92
-            "plugins" : [ "wholerow"],
93
-            'core' : {
94
-
95
-              'error': function (error) {
96
-                console.log('Error ' + error.toString())
97
-              },
98
-              'data' : {
99
-                'dataType': 'json',
100
-                'contentType': 'application/json; charset=utf-8',
101
-                'url' : function (node) {
102
-                  if (node.id==='#') {
103
-                    return '${tg.url("/api/menu/initialize", dict(current_node_id=current_node.node_id if current_node else 0))}';
90
+          function prepareOrRemoveTreeNode(parentTreeViewItem, currentTreeViewItem, rootList, shouldRemoveNodeCallBack) {
91
+              // In case parentTreeViewItem is Null, then use rootList as the parent
92
+              
93
+              console.log("node #"+currentTreeViewItem.id+' => '+currentTreeViewItem.node_status);
94
+              
95
+              if(shouldRemoveNodeCallBack && shouldRemoveNodeCallBack(parentTreeViewItem, currentTreeViewItem, rootList)) {
96
+                  console.log('Will remove node #'+currentTreeViewItem.id+' from tree view');
97
+                  if(parentTreeViewItem!=null) {
98
+                    var currentTreeViewItemPosition = parentTreeViewItem.children.indexOf(currentTreeViewItem);
99
+                    if(currentTreeViewItemPosition != -1) {
100
+                        parentTreeViewItem.children.splice(currentTreeViewItemPosition, 1);
101
+                    }
104 102
                   } else {
105
-                    return '${tg.url("/api/menu/children")}';
103
+                    var currentTreeViewItemPosition = rootList.indexOf(currentTreeViewItem);
104
+                    if(currentTreeViewItemPosition != -1) {
105
+                        rootList.splice(currentTreeViewItemPosition, 1);
106
+                    }
106 107
                   }
107
-                },
108
-                'data' : function(node) {
109
-                  console.log("NODE => "+JSON.stringify(node))
110
-                  return {
111
-                    'id' : node.id
112
-                  };
113
-                },
114
-                'success': function (new_data) {
115
-                  console.log('loaded new menu data' + new_data)
116
-                  console.log(new_data);
117
-                  return new_data;
118
-                },
119
-              },
120
-            }
121
-          });
122
-          
123
-          $('#mypodtree').on("select_node.jstree", function (e, data) {
124
-            url = "${tg.url('/document/')}"+data.selected[0];
125
-            console.log("Opening document: "+url);
126
-            location.href = url;
127
-          });
108
+                  
109
+              } else {
110
+                  for (var i = currentTreeViewItem.children.length; i--;) {
111
+                    console.log('processing node #'+currentTreeViewItem.children[i].id);
112
+                    prepareOrRemoveTreeNode(currentTreeViewItem, currentTreeViewItem.children[i], rootList, shouldRemoveNodeCallBack);
113
+                  }
114
+              }
115
+          }
116
+        
117
+          function shouldRemoveNodeDoneCallBack(parentTreeViewItem, currentTreeViewItem, rootList) {
118
+              if(currentTreeViewItem.node_status=='done' || currentTreeViewItem.node_status=='closed') {
119
+                  console.log('Hide item #'+currentTreeViewItem.id+' from menu (status is '+currentTreeViewItem.node_status+')');
120
+                  return true;
121
+              }
122
+              return false;
123
+          }
124
+        
125
+          $(function () {
126
+              $('#left-menu-treeview').jstree({
127
+                  'plugins' : [ 'wholerow', 'types' ],
128
+                  'core' : {
129
+                      'error': function (error) {
130
+                          console.log('Error ' + error.toString())
131
+                      },
132
+                      'data' : {
133
+                          'dataType': 'json',
134
+                          'contentType': 'application/json; charset=utf-8',
135
+                          'url' : function (node) {
136
+                              if (node.id==='#') {
137
+                                  return '${tg.url("/api/menu/initialize", dict(current_node_id=current_node.node_id if current_node else 0))}';
138
+                              } else {
139
+                                  return '${tg.url("/api/menu/children")}';
140
+                              }
141
+                          },
142
+                          'data' : function(node) {
143
+                              console.log("NODE => "+JSON.stringify(node))
144
+                              return {
145
+                                  'id' : node.id
146
+                              };
147
+                          },
148
+                          'success': function (new_data) {
149
+                              console.log('loaded new menu data' + new_data)
150
+                              console.log(new_data);
151
+
152
+                              for (var i = new_data['d'].length; i--;) {
153
+                                  prepareOrRemoveTreeNode(null, new_data['d'][i], new_data['d'], shouldRemoveNodeDoneCallBack);
154
+                              }
155
+                              return new_data;
156
+                          },
157
+                      },
158
+                  }
159
+              });
128 160
           
129
-          $('#mypodtree').on("loaded.jstree", function () {
130
-            nodes = $('#mypodtree .jstree-node');
131
-            console.log("nodes = "+nodes.length);
132
-            if (nodes.length<=0) {
133
-              $("#mypodtree").append( "<p class='pod-grey'>${_('There is no content yet.')|n}" );
134
-              $("#mypodtree").append( "<p><a class=\"btn btn-success\" data-toggle=\"modal\" role=\"button\" href=\"#add-document-modal-form\"><i class=\"fa fa-plus\"></i> ${_('Create a topic')}</a></p>" );
135
-              
136
-              
137
-            }
161
+              $('#left-menu-treeview').on("select_node.jstree", function (e, data) {
162
+                  url = "${tg.url('/document/')}"+data.selected[0];
163
+                  console.log("Opening document: "+url);
164
+                  location.href = url;
165
+              });
166
+            
167
+              $('#left-menu-treeview').on("loaded.jstree", function () {
168
+                  nodes = $('#left-menu-treeview .jstree-node');
169
+                  console.log("nodes = "+nodes.length);
170
+                  if (nodes.length<=0) {
171
+                      $("#left-menu-treeview").append( "<p class='pod-grey'>${_('There is no content yet.')|n}" );
172
+                      $("#left-menu-treeview").append( "<p><a class=\"btn btn-success\" data-toggle=\"modal\" role=\"button\" href=\"#add-document-modal-form\"><i class=\"fa fa-plus\"></i> ${_('Create a topic')}</a></p>" );
173
+                  }
174
+              });
138 175
           });
139
-        });
140 176
       </script>
141 177
 ## INFO - D.A. - 2014-05-28 - Hide old school menu
142 178
 ##      <div>