Merge pull request #591 from anaqreon/wiki-gui

Wiki UI improvements

Zotlabs/Module/Wiki.php

@@ -128,7 +128,7 @@ class Wiki extends \Zotlabs\Web\Controller {
 				require_once('library/markdown.php');	
 				$content = t('"# Wiki Sandbox\n\nContent you **edit** and **preview** here *will not be saved*."');
 				$renderedContent = Markdown(json_decode($content));
-				$hide_editor = false;
+				$hide_editor = true;
 				$showPageControls = false;
 				$showNewWikiButton = $wiki_owner;
 				$showNewPageButton = false;
@@ -209,8 +209,10 @@ class Wiki extends \Zotlabs\Web\Controller {
 		$o .= replace_macros(get_markup_template('wiki.tpl'),array(
 			'$wikiheaderName' => $wikiheaderName,
 			'$wikiheaderPage' => $wikiheaderPage,
-			'$hideEditor' => $hide_editor,
+			'$hideEditor' => $hide_editor, // True will completely hide the content section and is used for the case of no wiki selected
+			'$chooseWikiMessage' => t('Choose an available wiki from the list on the left.'),
 			'$showPageControls' => $showPageControls,
+			'$editOrSourceLabel' => (($showPageControls) ? t('Edit') : t('Source')),
 			'$tools_label' => 'Wiki Tools',
 			'$showNewWikiButton'=> $showNewWikiButton,
 			'$showNewPageButton'=> $showNewPageButton,

include/widgets.php

@@ -1017,6 +1017,7 @@ function widget_wiki_pages($arr) {
 			'$pages' => $pages,
 			'$canadd' => $can_create,
 			'$addnew' => t('Add new page'),
+			'$pageName' => array('pageName', t('Enter the name of the new page:'), '', ''),
 	));
 }
 

include/wiki.php

@@ -32,15 +32,18 @@ function wiki_page_list($resource_id) {
 		return array('pages' => null, 'wiki' => null);
 	}
 	$pages = array();
+	$pages[] = array('title' => 'Home', 'url' => 'Home');
 	if (is_dir($w['path']) === true) {
 		$files = array_diff(scandir($w['path']), array('.', '..', '.git'));
 		// TODO: Check that the files are all text files
 		
 		foreach($files as $file) {
 			// strip the .md file extension and unwrap URL encoding to leave HTML encoded name
+			if( urldecode(substr($file, 0, -3)) !== 'Home') {
 				$pages[] = array('title' => urldecode(substr($file, 0, -3)), 'url' => urlencode(substr($file, 0, -3)));
 			}
 		}
+	}
 
 	return array('pages' => $pages, 'wiki' => $w);
 }

view/tpl/wiki.tpl

@@ -11,7 +11,12 @@
     transition: opacity 0.5s 0.5s ease;
   }
 </style>
-<div class="generic-content-wrapper">
+{{if $hideEditor}}
+<div>
+	<p class="lead text-center">{{$chooseWikiMessage}}</p>
+</div>
+{{/if}}
+<div class="generic-content-wrapper" {{if $hideEditor}}style="display: none;"{{/if}}>
   <div class="section-title-wrapper">
 			
     <div class="pull-right">
@@ -40,21 +45,13 @@
       <button id="fullscreen-btn" type="button" class="btn btn-default btn-xs" onclick="makeFullScreen();"><i class="fa fa-expand"></i></button>
       <button id="inline-btn" type="button" class="btn btn-default btn-xs" onclick="makeFullScreen(false);"><i class="fa fa-compress"></i></button>
     </div>
-    <h2><span id="wiki-header-name">{{$wikiheaderName}}</span>: <span id="wiki-header-page">{{$wikiheaderPage}}</span></h2>
+	  <h2><span id="wiki-header-name"><i class="fa fa-book"></i>&nbsp<b>{{$wikiheaderName}}</b></span>&nbsp:&nbsp
+		  <span id="wiki-header-page">{{$wikiheaderPage}}</span>
+		</h2>
     <div class="clear"></div>
   </div>
   
 		
-	<div id="new-page-form-wrapper" class="section-content-tools-wrapper" style="display:none;">
-      <form id="new-page-form" action="wiki/create/page" method="post" >
-        <div class="clear"></div>
-        {{include file="field_input.tpl" field=$pageName}}
-        <div class="btn-group pull-right">
-            <button id="new-page-submit" class="btn btn-success" type="submit" name="submit" >Create Page</button>
-        </div>
-      </form>        <div class="clear"></div>
-      <hr>
-    </div>
   
     <div id="rename-page-form-wrapper" class="section-content-tools-wrapper" style="display:none;">
       <form id="rename-page-form" action="wiki/rename/page" method="post" >
@@ -68,9 +65,10 @@
     </div>
 
   <div id="wiki-content-container" class="section-content-wrapper" {{if $hideEditor}}style="display: none;"{{/if}}>
+	   	
     <ul class="nav nav-tabs" id="wiki-nav-tabs">
-      <li id="edit-pane-tab"><a data-toggle="tab" href="#edit-pane">Edit</a></li>
+      <li id="edit-pane-tab"><a data-toggle="tab" href="#edit-pane">{{$editOrSourceLabel}}</a></li>
-      <li class="active"><a data-toggle="tab" href="#preview-pane" id="wiki-get-preview">Preview</a></li>
+      <li class="active"><a data-toggle="tab" href="#preview-pane" id="wiki-get-preview">View</a></li>
       <li {{if $hidePageHistory}}style="display: none;"{{/if}}><a data-toggle="tab" href="#page-history-pane" id="wiki-get-history">History</a></li>
 	
     </ul>
@@ -79,20 +77,6 @@
 
       <div id="edit-pane" class="tab-pane fade">
         <div id="ace-editor"></div>
-      </div>      
-      <div id="preview-pane" class="tab-pane fade in active">
-        <div id="wiki-preview" class="section-content-wrapper">
-          {{$renderedContent}}
-        </div>
-      </div>
-      <div id="page-history-pane" class="tab-pane fade" {{if $hidePageHistory}}style="display: none;"{{/if}}>
-        <div id="page-history-list" class="section-content-wrapper">
-        </div>
-      </div>     
-
-
-    </div>
-  </div>
 		{{if $showCommitMsg}}
 		  {{if $showPageControls}}
 		<div class="section-content-wrapper">
@@ -110,6 +94,22 @@
 		{{/if}}
 		{{/if}}
       </div>      
+      <div id="preview-pane" class="tab-pane fade in active">
+        <div id="wiki-preview" class="section-content-wrapper">
+          {{$renderedContent}}
+        </div>
+      </div>
+      <div id="page-history-pane" class="tab-pane fade" {{if $hidePageHistory}}style="display: none;"{{/if}}>
+        <div id="page-history-list" class="section-content-wrapper">
+        </div>
+      </div>    
+	
+      </div>  
+
+
+    </div>
+  </div>
+</div>
 
 {{$wikiModal}}
 
@@ -192,7 +192,9 @@
 
 		editor.getSession().setValue(window.wiki_page_content);
 		window.editor = editor; // Store the editor in the window object so the anonymous function can use it.
-
+		{{if !$showPageControls}}
+			editor.setReadOnly(true); // Disable editing if the viewer lacks edit permission
+		{{/if}}
 		$('#edit-pane-tab').click(function (ev) {
 			setTimeout(function() {window.editor.focus();}, 500); // Return the focus to the editor allowing immediate text entry
 		});
@@ -241,23 +243,6 @@
 				window.location = "wiki/{{$channel}}/download/wiki/" + resource_id;
 		}
 
-		$('#new-page-submit').click(function (ev) {
-			if (window.wiki_resource_id === '') {
-			window.console.log('You must have a wiki open in order to create pages.');
-			ev.preventDefault();
-			return false;
-			}
-			$.post("wiki/{{$channel}}/create/page", {name: $('#id_pageName').val(), resource_id: window.wiki_resource_id}, 
-			function (data) {
-				if (data.success) {
-				window.location = data.url;
-				} else {
-				window.console.log('Error creating page.');
-				}
-			}, 'json');
-			ev.preventDefault();
-		});
-
 		function wiki_refresh_page_list() {
 			if (window.wiki_resource_id === '') {
 				return false;
@@ -482,6 +467,7 @@
 		};
 
 		function wiki_show_new_wiki_form() {
+			$('div[id^=\'edit-wiki-form-wrapper\']').hide();
 			$('#new-page-form-wrapper').hide(); 
 			$('#edit-wiki-form-wrapper').hide();
 			$('#new-wiki-form-wrapper').toggle(); 
@@ -489,6 +475,7 @@
 		}
 
 		function wiki_show_new_page_form() {
+			$('div[id^=\'edit-wiki-form-wrapper\']').hide();
 			$('#edit-wiki-form-wrapper').hide();
 			$('#new-wiki-form-wrapper').hide();
 			$('#new-page-form-wrapper').toggle(); 
@@ -498,6 +485,7 @@
 		function wiki_show_edit_wiki_form(wiki_title, wiki_resource_id) {
 			window.wiki_resource_id = wiki_resource_id;
 			window.wiki_title = wiki_title;
+			$('div[id^=\'edit-wiki-form-wrapper\']').hide();
 			$('#new-page-form-wrapper').hide();
 			$('#new-wiki-form-wrapper').hide();
 			$('#edit-wiki-form-wrapper').toggle();  
@@ -514,5 +502,6 @@
 				{{else}}
 						$('#new-wiki-button').hide();
 				{{/if}}
+				
 		});
 </script>

view/tpl/wiki_page_list.tpl

@@ -10,5 +10,38 @@
 		{{/if}}
 		{{if $canadd}}<li><a href="#" onclick="wiki_show_new_page_form(); return false;"><i class="fa fa-plus-circle"></i>&nbsp;{{$addnew}}</a></li>{{/if}}
 	</ul>
+	{{if $canadd}}
+	<div id="new-page-form-wrapper" class="sub-menu" style="display:none;">
+      <form id="new-page-form" action="wiki/{{$channel}}/create/page" method="post" >
+        <div class="clear"></div>
+        {{include file="field_input.tpl" field=$pageName}}
+        <div class="btn-group pull-right">
+            <button id="new-page-submit" class="btn btn-success" type="submit" name="submit" >Create Page</button>
+        </div>
+      </form>
+		<div class="clear"></div>
+      <hr>
+    </div>
+	{{/if}}
 </div>
 {{if $not_refresh}}</div>{{/if}}
+
+<script>
+
+	$('#new-page-submit').click(function (ev) {
+		if (window.wiki_resource_id === '') {
+		window.console.log('You must have a wiki open in order to create pages.');
+		ev.preventDefault();
+		return false;
+		}
+		$.post("wiki/{{$channel}}/create/page", {name: $('#id_pageName').val(), resource_id: window.wiki_resource_id}, 
+		function (data) {
+			if (data.success) {
+			window.location = data.url;
+			} else {
+			window.console.log('Error creating page.');
+			}
+		}, 'json');
+		ev.preventDefault();
+	});
+</script>

view/tpl/wikilist.tpl

@@ -21,7 +21,7 @@
 		{{/foreach}}
 		{{/if}}
 		{{if $owner}}
-		<li><a href="#" class="fakelink" onclick="$('div[id^=\'edit-wiki-form-wrapper\']').hide(); openClose('new-wiki-form-wrapper'); return false;"><i id="new-wiki-button" class="fa fa-plus-circle"></i>&nbsp;{{$addnew}}</a></li>
+		<li><a href="#" class="fakelink" onclick="wiki_show_new_wiki_form(); return false;"><i id="new-wiki-button" class="fa fa-plus-circle"></i>&nbsp;{{$addnew}}</a></li>
 		{{/if}}
 	</ul>
 	{{if $owner}}