Admin Menu Tree Page View - Version 0.3

Version Description

  • Removed some notices
  • Added a search/filter box. Search your pages in real time. I love it! :)
Download this release

Release Info

Developer eskapism
Plugin Icon wp plugin Admin Menu Tree Page View
Version 0.3
Comparing to
See all releases

Code changes from version 0.2 to 0.3

Files changed (5) hide show
  1. index.php +52 -6
  2. jquery.highlight.js +105 -0
  3. readme.txt +11 -3
  4. screenshot-3.png +0 -0
  5. styles.css +41 -2
index.php CHANGED
@@ -3,7 +3,7 @@
3
  Plugin Name: Admin Menu Tree Page View
4
  Plugin URI: http://eskapism.se/code-playground/admin-menu-tree-page-view/
5
  Description: Adds a tree of all your pages or custom posts. Use drag & drop to reorder your pages, and edit, view, add, and search your pages.
6
- Version: 0.2
7
  Author: Pär Thernström
8
  Author URI: http://eskapism.se/
9
  License: GPL2
@@ -36,8 +36,9 @@ add_action('wp_ajax_admin_menu_tree_page_view_add_page', 'admin_menu_tree_page_v
36
 
37
  function admin_menu_tree_page_view_admin_init() {
38
  define( "admin_menu_tree_page_view_URL", WP_PLUGIN_URL . '/admin-menu-tree-page-view/' );
39
- define( "admin_menu_tree_page_view_VERSION", "0.2" );
40
- wp_enqueue_style( "admin_menu_tree_page_view_styles", admin_menu_tree_page_view_URL . "styles.css", false, admin_menu_tree_page_view_VERSION );
 
41
  }
42
 
43
  function admin_menu_tree_page_view_admin_head() {
@@ -159,8 +160,48 @@ function admin_menu_tree_page_view_admin_head() {
159
 
160
  });
161
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
162
 
 
 
 
 
 
 
 
163
  });
 
 
 
 
164
 
165
  </script>
166
 
@@ -185,7 +226,7 @@ function admin_menu_tree_page_view_get_pages($args) {
185
  $args = wp_parse_args( $args, $defaults );
186
 
187
  $pages = get_posts($args);
188
- #bonny_d($pages);
189
  foreach ($pages as $one_page) {
190
  $edit_link = get_edit_post_link($one_page->ID);
191
  $title = get_the_title($one_page->ID);
@@ -201,7 +242,7 @@ function admin_menu_tree_page_view_get_pages($args) {
201
  $status_span .= "<span class='admin-menu-tree-page-view-status admin-menu-tree-page-view-status-{$one_page->post_status}'>{$one_page->post_status}</span>";
202
  }
203
 
204
- $output .= "<li class='$class $css_status'>";
205
  $output .= "<a href='$edit_link'>$status_span";
206
  $output .= $title;
207
 
@@ -222,7 +263,7 @@ function admin_menu_tree_page_view_get_pages($args) {
222
  }
223
 
224
  // if this is a child listing, add ul
225
- if ($args["child_of"]) {
226
  $output = "<ul class='admin-menu-tree-page-tree_childs'>$output</ul>";
227
  }
228
 
@@ -239,6 +280,11 @@ function admin_menu_tree_page_view_admin_menu() {
239
  </a>
240
  <ul class='admin-menu-tree-page-tree'>
241
  <li class='admin-menu-tree-page-tree_headline'>Pages</li>
 
 
 
 
 
242
  ";
243
 
244
  // get root items
3
  Plugin Name: Admin Menu Tree Page View
4
  Plugin URI: http://eskapism.se/code-playground/admin-menu-tree-page-view/
5
  Description: Adds a tree of all your pages or custom posts. Use drag & drop to reorder your pages, and edit, view, add, and search your pages.
6
+ Version: 0.3
7
  Author: Pär Thernström
8
  Author URI: http://eskapism.se/
9
  License: GPL2
36
 
37
  function admin_menu_tree_page_view_admin_init() {
38
  define( "admin_menu_tree_page_view_URL", WP_PLUGIN_URL . '/admin-menu-tree-page-view/' );
39
+ define( "admin_menu_tree_page_view_VERSION", "0.3" );
40
+ wp_enqueue_style("admin_menu_tree_page_view_styles", admin_menu_tree_page_view_URL . "styles.css", false, admin_menu_tree_page_view_VERSION);
41
+ wp_enqueue_script("jquery.highlight", admin_menu_tree_page_view_URL . "jquery.highlight.js", array("jquery"));
42
  }
43
 
44
  function admin_menu_tree_page_view_admin_head() {
160
 
161
  });
162
 
163
+ // search/filter pages
164
+ $(".admin-menu-tree-page-filter input").keyup(function(e) {
165
+ var ul = $(this).closest(".admin-menu-tree-page-tree");
166
+ ul.find("li").hide();
167
+ ul.find(".admin-menu-tree-page-tree_headline,.admin-menu-tree-page-filter").show();
168
+ var s = $(this).val();
169
+ var selector = "li:AminMenuTreePageContains('"+s+"')";
170
+ var hits = ul.find(selector);
171
+ if (hits.length > 0 || s != "") {
172
+ ul.find(".admin-menu-tree-page-filter-reset").fadeIn("fast");
173
+ ul.unhighlight();
174
+ }
175
+ if (s == "") {
176
+ ul.find(".admin-menu-tree-page-filter-reset").fadeOut("fast");
177
+ }
178
+ ul.highlight(s);
179
+ hits.show();
180
+
181
+ });
182
+
183
+ // clear/reset filter and show all pages again
184
+ $(".admin-menu-tree-page-filter-reset").click(function() {
185
+ var $t = $(this);
186
+ var ul = $t.closest(".admin-menu-tree-page-tree");
187
+ ul.find("li").fadeIn("fast");
188
+ $t.fadeOut("fast");
189
+ $t.closest(".admin-menu-tree-page-filter").find("input").val("").focus();
190
+ ul.unhighlight();
191
+ });
192
 
193
+ // label = hide in and focus input
194
+ $(".admin-menu-tree-page-filter label").click(function() {
195
+ var $t = $(this);
196
+ $t.hide();
197
+ $t.closest(".admin-menu-tree-page-filter").find("input").focus();
198
+ });
199
+
200
  });
201
+ // http://stackoverflow.com/questions/187537/is-there-a-case-insensitive-jquery-contains-selector
202
+ jQuery.expr[':'].AminMenuTreePageContains = function(a,i,m){
203
+ return (a.textContent || a.innerText || "").toLowerCase().indexOf(m[3].toLowerCase())>=0;
204
+ };
205
 
206
  </script>
207
 
226
  $args = wp_parse_args( $args, $defaults );
227
 
228
  $pages = get_posts($args);
229
+ $output = "";
230
  foreach ($pages as $one_page) {
231
  $edit_link = get_edit_post_link($one_page->ID);
232
  $title = get_the_title($one_page->ID);
242
  $status_span .= "<span class='admin-menu-tree-page-view-status admin-menu-tree-page-view-status-{$one_page->post_status}'>{$one_page->post_status}</span>";
243
  }
244
 
245
+ $output .= "<li class='$class'>";
246
  $output .= "<a href='$edit_link'>$status_span";
247
  $output .= $title;
248
 
263
  }
264
 
265
  // if this is a child listing, add ul
266
+ if (isset($args["child_of"]) && $args["child_of"]) {
267
  $output = "<ul class='admin-menu-tree-page-tree_childs'>$output</ul>";
268
  }
269
 
280
  </a>
281
  <ul class='admin-menu-tree-page-tree'>
282
  <li class='admin-menu-tree-page-tree_headline'>Pages</li>
283
+ <li class='admin-menu-tree-page-filter'>
284
+ <label>Search/Filter pages</label>
285
+ <input type='text' class='' />
286
+ <div class='admin-menu-tree-page-filter-reset' title='Reset filter and show all pages'></div>
287
+ </li>
288
  ";
289
 
290
  // get root items
jquery.highlight.js ADDED
@@ -0,0 +1,105 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ /*
2
+ * jQuery Highlight plugin
3
+ *
4
+ * Based on highlight v3 by Johann Burkard
5
+ * http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html
6
+ *
7
+ * Code a little bit refactored and cleaned (in my humble opinion).
8
+ * Most important changes:
9
+ * - has an option to highlight only entire words (wordsOnly - false by default),
10
+ * - has an option to be case sensitive (caseSensitive - false by default)
11
+ * - highlight element tag and class names can be specified in options
12
+ *
13
+ * Usage:
14
+ * // wrap every occurrance of text 'lorem' in content
15
+ * // with <span class='highlight'> (default options)
16
+ * $('#content').highlight('lorem');
17
+ *
18
+ * // search for and highlight more terms at once
19
+ * // so you can save some time on traversing DOM
20
+ * $('#content').highlight(['lorem', 'ipsum']);
21
+ * $('#content').highlight('lorem ipsum');
22
+ *
23
+ * // search only for entire word 'lorem'
24
+ * $('#content').highlight('lorem', { wordsOnly: true });
25
+ *
26
+ * // don't ignore case during search of term 'lorem'
27
+ * $('#content').highlight('lorem', { caseSensitive: true });
28
+ *
29
+ * // wrap every occurrance of term 'ipsum' in content
30
+ * // with <em class='important'>
31
+ * $('#content').highlight('ipsum', { element: 'em', className: 'important' });
32
+ *
33
+ * // remove default highlight
34
+ * $('#content').unhighlight();
35
+ *
36
+ * // remove custom highlight
37
+ * $('#content').unhighlight({ element: 'em', className: 'important' });
38
+ *
39
+ *
40
+ * Copyright (c) 2009 Bartek Szopka
41
+ *
42
+ * Licensed under MIT license.
43
+ *
44
+ */
45
+
46
+ jQuery.extend({
47
+ highlight: function (node, re, nodeName, className) {
48
+ if (node.nodeType === 3) {
49
+ var match = node.data.match(re);
50
+ if (match) {
51
+ var highlight = document.createElement(nodeName || 'span');
52
+ highlight.className = className || 'highlight';
53
+ var wordNode = node.splitText(match.index);
54
+ wordNode.splitText(match[0].length);
55
+ var wordClone = wordNode.cloneNode(true);
56
+ highlight.appendChild(wordClone);
57
+ wordNode.parentNode.replaceChild(highlight, wordNode);
58
+ return 1; //skip added node in parent
59
+ }
60
+ } else if ((node.nodeType === 1 && node.childNodes) && // only element nodes that have children
61
+ !/(script|style)/i.test(node.tagName) && // ignore script and style nodes
62
+ !(node.tagName === nodeName.toUpperCase() && node.className === className)) { // skip if already highlighted
63
+ for (var i = 0; i < node.childNodes.length; i++) {
64
+ i += jQuery.highlight(node.childNodes[i], re, nodeName, className);
65
+ }
66
+ }
67
+ return 0;
68
+ }
69
+ });
70
+
71
+ jQuery.fn.unhighlight = function (options) {
72
+ var settings = { className: 'highlight', element: 'span' };
73
+ jQuery.extend(settings, options);
74
+
75
+ return this.find(settings.element + "." + settings.className).each(function () {
76
+ var parent = this.parentNode;
77
+ parent.replaceChild(this.firstChild, this);
78
+ parent.normalize();
79
+ }).end();
80
+ };
81
+
82
+ jQuery.fn.highlight = function (words, options) {
83
+ var settings = { className: 'highlight', element: 'span', caseSensitive: false, wordsOnly: false };
84
+ jQuery.extend(settings, options);
85
+
86
+ if (words.constructor === String) {
87
+ words = [words];
88
+ }
89
+ words = jQuery.grep(words, function(word, i){
90
+ return word != '';
91
+ });
92
+ if (words.length == 0) { return this; };
93
+
94
+ var flag = settings.caseSensitive ? "" : "i";
95
+ var pattern = "(" + words.join("|") + ")";
96
+ if (settings.wordsOnly) {
97
+ pattern = "\\b" + pattern + "\\b";
98
+ }
99
+ var re = new RegExp(pattern, flag);
100
+
101
+ return this.each(function () {
102
+ jQuery.highlight(this, re, settings.element, settings.className);
103
+ });
104
+ };
105
+
readme.txt CHANGED
@@ -11,9 +11,13 @@ Get a tree view of all your pages directly in the admin menu. Edit, view and add
11
  == Description ==
12
 
13
  This WordPress plugin adds all your pages to the admin menu, so all your pages will always be available within just one click.
14
- You can also add pages directly in the tree.
15
 
16
- Probably most suitable for CMS-like installations with lots of pages.
 
 
 
 
17
 
18
  #### Donation and more plugins
19
  * If you like this plugin don't forget to [donate to support further development](http://eskapism.se/sida/donate/).
@@ -31,13 +35,17 @@ Now the tree with the pages will be visible both on the dashboard and in the men
31
 
32
  1. The menu page tree with all your pages. Pretty neat, eh?
33
  2. Since version 0.2 you can easily add new pages too. This will make you a page kung fu master.
 
34
 
35
  == Changelog ==
36
 
 
 
 
 
37
  = 0.2 =
38
  - Some CSS changes. The icons and text and smaller now. I think it's better this way, you can fit so many more pages in the tree now.
39
  - Now you can add new pages below or as a child to a page. For me this has been the feature I've missed the most.
40
 
41
  = 0.1 =
42
  - It's alive!
43
-
11
  == Description ==
12
 
13
  This WordPress plugin adds all your pages to the admin menu, so all your pages will always be available within just one click.
14
+ You can also add pages directly in the tree and you get a search box so you quickly can find the article/page you're looking for.
15
 
16
+ Works perfect in CMS-like WordPress installations with lots of pages in a tree hierarchy.
17
+
18
+ #### More advanced page tree with drag-and-drop support
19
+ I have made an even more advanced version of the tree, where you also can search and re-order the pages. It's called
20
+ [CMS Tree Page View](http://wordpress.org/extend/plugins/cms-tree-page-view/).
21
 
22
  #### Donation and more plugins
23
  * If you like this plugin don't forget to [donate to support further development](http://eskapism.se/sida/donate/).
35
 
36
  1. The menu page tree with all your pages. Pretty neat, eh?
37
  2. Since version 0.2 you can easily add new pages too. This will make you a page kung fu master.
38
+ 3. Search your pages in real time. Try it; it's wonderful! ;)
39
 
40
  == Changelog ==
41
 
42
+ = 0.3 =
43
+ - Removed some notices
44
+ - Added a search/filter box. Search your pages in real time. I love it! :)
45
+
46
  = 0.2 =
47
  - Some CSS changes. The icons and text and smaller now. I think it's better this way, you can fit so many more pages in the tree now.
48
  - Now you can add new pages below or as a child to a page. For me this has been the feature I've missed the most.
49
 
50
  = 0.1 =
51
  - It's alive!
 
screenshot-3.png ADDED
Binary file
styles.css CHANGED
@@ -78,7 +78,9 @@ li.toplevel_page_admin-menu-tree-page-tree_main .wp-submenu a {
78
  background-image: url(http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.3/themes/ui-darkness/images/ui-icons_222222_256x240.png);
79
  }
80
 
81
- li.admin-menu-tree-page-tree_headline {
 
 
82
  text-transform: uppercase;
83
  color: #666;
84
  font-size: 9px;
@@ -90,7 +92,9 @@ li.admin-menu-tree-page-tree_headline {
90
  border-right-width: 1px;
91
  }
92
 
93
- .wp-has-current-submenu li.admin-menu-tree-page-tree_headline {
 
 
94
  border-left-width: 0px;
95
  border-right-width: 0px;
96
  }
@@ -207,4 +211,39 @@ li.admin-menu-tree-page-tree_headline {
207
  height: 11px;
208
  float: left;
209
  background: url(http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.3/themes/ui-darkness/images/ui-icons_cccccc_256x240.png) no-repeat -194px -98px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
210
  }
78
  background-image: url(http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.3/themes/ui-darkness/images/ui-icons_222222_256x240.png);
79
  }
80
 
81
+ li.admin-menu-tree-page-tree_headline,
82
+ li.admin-menu-tree-page-filter
83
+ {
84
  text-transform: uppercase;
85
  color: #666;
86
  font-size: 9px;
92
  border-right-width: 1px;
93
  }
94
 
95
+ .wp-has-current-submenu li.admin-menu-tree-page-tree_headline,
96
+ .wp-has-current-submenu li.admin-menu-tree-page-filter
97
+ {
98
  border-left-width: 0px;
99
  border-right-width: 0px;
100
  }
211
  height: 11px;
212
  float: left;
213
  background: url(http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.3/themes/ui-darkness/images/ui-icons_cccccc_256x240.png) no-repeat -194px -98px;
214
+ }
215
+
216
+ .admin-menu-tree-page-filter {
217
+ position: relative;
218
+ }
219
+ .admin-menu-tree-page-filter input {
220
+ width: 125px;
221
+ font-size: 10px;
222
+ line-height: 1em;
223
+ padding: 2px;
224
+ }
225
+
226
+ .admin-menu-tree-page-filter-reset {
227
+ display: none;
228
+ width: 16px;
229
+ height: 16px;
230
+ background: transparent url(https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.3/themes/ui-darkness/images/ui-icons_cccccc_256x240.png) no-repeat -32px -194px;
231
+ position: absolute;
232
+ top: 5px;
233
+ right: 15px;
234
+ }
235
+ .admin-menu-tree-page-filter-reset:hover {
236
+ background-image:url(https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.3/themes/ui-darkness/images/ui-icons_222222_256x240.png)
237
+ }
238
+ .admin-menu-tree-page-filter label {
239
+ color: #BBBBBB;
240
+ left: 13px;
241
+ position: absolute;
242
+ top: 5px;
243
+ cursor: text;
244
+ }
245
+
246
+ ul.admin-menu-tree-page-tree .highlight {
247
+ background-color: #fff879;
248
+ color: #21759B;
249
  }