Implemented dynamic editing UI for admin page with slidepanel

modules/formulize/admin/admin_editor.php

@@ -0,0 +1,101 @@
+<?php
+
+$ele_name = $_GET['ele_name'];
+$preg_array = explode('_', $ele_name);
+$_GET = array();
+$_GET['ele_id'] = array_pop($preg_array);
+$_GET['page'] ='element';
+$_GET['aid'] = 0;
+
+// initialize the ImpressCMS admin page template
+include_once("admin_header.php");
+define('_FORMULIZE_UI_PHP_INCLUDED', 1);
+
+// include necessary Formulize files/functions
+include_once XOOPS_ROOT_PATH . "/modules/formulize/include/functions.php";
+
+global $xoopsTpl;
+
+if(!isset($xoopsTpl)) {
+  global $xoopsOption, $xoopsConfig, $xoopsModule;
+
+  $xoopsOption['theme_use_smarty'] = 1;
+
+  // include Smarty template engine and initialize it
+  require_once XOOPS_ROOT_PATH . '/class/template.php';
+  require_once XOOPS_ROOT_PATH . '/class/theme.php';
+  require_once XOOPS_ROOT_PATH . '/class/theme_blocks.php';
+
+  if ( @$xoopsOption['template_main'] ) {
+    if ( false === strpos( $xoopsOption['template_main'], ':' ) ) {
+      $xoopsOption['template_main'] = 'db:' . $xoopsOption['template_main'];
+    }
+  }
+  $xoopsThemeFactory = new xos_opal_ThemeFactory();
+  $xoopsThemeFactory->allowedThemes = $xoopsConfig['theme_set_allowed'];
+  $xoopsThemeFactory->defaultTheme = $xoopsConfig['theme_set'];
+
+  $xoTheme =& $xoopsThemeFactory->createInstance( array(
+    'contentTemplate' => @$xoopsOption['template_main'],
+  ) );
+  $xoopsTpl =& $xoTheme->template;
+
+  //$xoTheme->addScript( '/include/xoops.js', array( 'type' => 'text/javascript' ) );
+  //$xoTheme->addScript( '/include/linkexternal.js', array( 'type' => 'text/javascript' ) );
+}
+
+// handle any operations requested as part of this page load
+// sets up a template variable with the results of the op, called opResults
+include_once "op.php";
+
+// create the contents that we want to display for the currently selected page
+// the included php files create the values for $adminPage that are used for this page
+$adminPage = array();
+switch($_GET['page']) {
+  case "application":
+    include "application.php"; 
+    break;
+  case "form":
+    include "form.php";
+    break;
+  case "screen":
+    include "screen.php";
+    break;
+  case "relationship":
+    include "relationship.php";
+    break;
+  case "element":
+    include "element.php";
+    break;
+  case "advanced-calculation":
+    include "advanced_calculation.php";
+    break;
+  default:
+  case "home":
+    include "home.php";
+    break;
+
+}
+//$adminPage['logo'] = "/modules/formulize/images/formulize-logo.png";
+
+// assign the default selected tab, if any:
+if(isset($_GET['tab']) AND (!isset($_POST['tabs_selected']) OR $_POST['tabs_selected'] === "")) {
+  foreach($adminPage['tabs'] as $selected=>$tabData) {
+    if(strtolower($tabData['name']) == $_GET['tab']) {
+      $adminPage['tabselected'] = $selected-1;
+      break;
+    }
+  }
+} elseif($_POST['tabs_selected'] !== "") {
+  $adminPage['tabselected']  = intval($_POST['tabs_selected']);
+}
+
+
+// assign the contents to the template and display
+$adminPage['formulizeModId'] = getFormulizeModId();
+$xoopsTpl->assign('adminPage', $adminPage);
+$xoopsTpl->assign('breadcrumbtrail', $breadcrumbtrail);
+$xoopsTpl->assign('scrollx', intval($_POST['scrollx']));
+$accordion_active = (isset($_POST['accordion_active']) AND $_POST['accordion_active'] !== "" AND $_POST['accordion_active'] !== "false") ? intval($_POST['accordion_active']) : "false";
+$xoopsTpl->assign('accordion_active', $accordion_active);
+$xoopsTpl->display("db:admin/ui.html");

modules/formulize/class/elementrenderer.php

@@ -144,6 +144,9 @@ function constructElement($form_ele_id, $ele_value, $entry, $isDisabled=false, $
 					}
 				}
 				$ele_value[0] = $this->formulize_replaceCurlyBracketVariables($ele_value[0], $entry, $id_form);
+
+				include_once XOOPS_ROOT_PATH."/modules/formulize/include/formdisplay.php";
+				$ele_value[0] .= formulize_themeForm::addFrontsideEditButton($form_ele_id);
 				$form_ele = $ele_value; // an array, item 0 is the contents of the break, item 1 is the class of the table cell (for when the form is table rendered)
 				break;
 			case 'text':
@@ -280,6 +283,7 @@ function constructElement($form_ele_id, $ele_value, $entry, $isDisabled=false, $
 					$ele_caption,
 					$ele_value[0]
 				);
+				$form_ele->setName($form_ele_id);
 			break;
 
 			case 'select':

modules/formulize/include/formdisplay.php

@@ -48,6 +48,9 @@
 
 // NEED TO USE OUR OWN VERSION OF THE CLASS, TO GET ELEMENT NAMES IN THE TR TAGS FOR EACH ROW
 class formulize_themeForm extends XoopsThemeForm {
+
+	var $form_id = "";
+
 	/**
 	 * Insert an empty row in the table to serve as a seperator.
 	 *
@@ -79,12 +82,31 @@ public function render() {
 				. "' method='" . $this->getMethod()
 				. "' onsubmit='return xoopsFormValidate_" . $ele_name . "();'" . $this->getExtra() . ">
 			<div class='xo-theme-form'>
+			<head>
+			<script type=\"text/javascript\" src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js\"></script>
+			<script type=\"text/javascript\" src=\"../../plugins/slidepanel/js/jquery.slidepanel.js\"></script>
+			<link rel=\"stylesheet\" type=\"text/css\" href=\"../../plugins/slidepanel/css/jquery.slidepanel.css\">
+            </head>
 			<table width='100%' class='outer' cellspacing='1'>
 			<tr><th colspan='2'><h1 class=\"formulize-form-title\">" . $this->getTitle() . "</h1></th></tr>
 		";
 		$hidden = '';
 		list($ret, $hidden) = $this->_drawElements($this->getElements(), $ret, $hidden);
 		$ret .= "</table>\n$hidden\n</div>\n</form>\n";
+		$ret .= '
+		<html lang="en">
+		<script type="text/javascript">
+      	$(document).ready(function(){
+          $("[data-slidepanel]").slidepanel({
+              orientation: "right",
+              mode: "push"
+          });
+      	});
+		</script>
+
+        </body>
+        </html>
+		';
 		$ret .= $this->renderValidationJS(true);
 		return $ret;
 	}
@@ -190,6 +212,24 @@ function _drawValidationJS($skipConditionalCheck) {
 		return $fullJs;
 	}
 
+	function addFrontsideEditButton ($thisEleName) {
+		global $xoopsUser;
+		$groups = $xoopsUser ? $xoopsUser->getGroups() : array(0=>XOOPS_GROUP_ANONYMOUS);
+		$uid = $xoopsUser ? $xoopsUser->getVar('uid') : 0;
+		$mid = getFormulizeModId();
+		$gperm_handler = xoops_gethandler('groupperm');
+		$isAdmin = $gperm_handler->checkRight("edit_form", $this->form_id, $groups, $mid);
+
+		if (!$isAdmin) {
+			return;
+}
+
+		$editButton = 'edit_' . $thisEleName;
+		$returnButton = '<a href="../../modules/formulize/admin/admin_editor.php?' . 'ele_name=' . $thisEleName . '" data-slidepanel="panel"><input type="button" class="formulize_adminEditButton" name="editx" id="' . $editButton . '" value="Edit"></a>';
+
+		return $returnButton;
+	}
+
 }
 
 // SPECIAL CLASS TO HANDLE SITUATIONS WHERE WE'RE RENDERING ONLY THE ROWS FOR THE FORM, NOT THE ENTIRE FORM 
@@ -716,6 +756,7 @@ function displayForm($formframe, $entry="", $mainform="", $done_dest="", $button
                         $settings['ventry'] = 'new';
                     $form->addElement (new XoopsFormHidden ('ventry', $settings['ventry']));
                 }
+                $form->form_id = $this_fid;
                 $form->setExtra("enctype='multipart/form-data'"); // impératif!
 
                 if(is_array($settings)) {
@@ -1275,6 +1316,7 @@ function addSubmitButton($form, $subButtonText, $go_back="", $currentURL, $butto
 
 	$trayElements = $buttontray->getElements();
 	if(count($trayElements) > 0 OR $nosubforms) {
+		$buttontray->setName("control_buttons");
 		$form->addElement($buttontray);
 	}
 	return $form;

modules/formulize/libraries/formulize.js

@@ -1,5 +1,4 @@
 // formulize.js
-// 
 
 if (typeof xoopsGetElementById != 'function') {
     // the 'xoopsGetElementById' function is included with xoops, so when it is missing, Formulize is embedded in another CMS
@@ -37,3 +36,27 @@ jQuery(document).ready(function() {
         hidden_section.toggle();
     });
 });
+
+function adminEdit(thisElement) {
+    var editButtons = document.getElementsByClassName('formulize_adminEditButton');
+    //console.log(editButtons);
+    /*
+    for (var i = 0; i<editButtons.length; i++) {
+        editButtons[i].hidden = 'true';
+    }
+    */
+    //console.log(editButtons);
+
+    var url_link = '../formulize/admin/renderhtml.php?ele_name=';
+    url_link = url_link.concat(thisElement.name);
+
+    $.ajax({
+       url: url_link,
+       dataType: 'json',
+       success: function(data){
+            // No need to return anything
+       }
+    });    
+
+}
+

modules/formulize/templates/admin/ui.html

@@ -180,7 +180,7 @@ <h1><{$adminPage.pagetitle}> <span class="smallhead"><{$adminPage.pagesubtitle}>
 
   function sendFormData(thisformdata, ele_id) {
     if(!ele_id) { ele_id = 0 }
-    $.post("save.php?ele_id="+ele_id, $(thisformdata).serialize(), function(data) {
+    $.post("<{$xoops_url}>/modules/formulize/admin/save.php?ele_id="+ele_id, $(thisformdata).serialize(), function(data) {
       saveCounter = saveCounter + 1;
       if(data) {
         if(data.substr(0,10)=="/* eval */") {
@@ -197,6 +197,8 @@ <h1><{$adminPage.pagetitle}> <span class="smallhead"><{$adminPage.pagesubtitle}>
         if(newhandle) {
           $("[name=original_handle]").val(newhandle);
         }
+
+        //alert(redirect);
         if(redirect) {
           eval(redirect);
         } else {

plugins/slidepanel/README.md

@@ -0,0 +1,49 @@
+SlidePanel
+==========
+
+A quick and easy way to add a contextual ajax sliding panel to your site.
+Created and maintained by [William Golden](http://twitter.com/egdelwonk)
+
+
+
+For a demo goto http://codebomber.com/jquery/slidepanel
+
+#Quickstart
+
+##Include required files
+
+    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
+    <script type="text/javascript" src="js/jquery.slidepanel.js"></script>
+    <link rel="stylesheet" type="text/css" href="css/jquery.slidepanel.css">
+
+
+##Add a panel trigger
+The href attribute is used to load external HTML content into your panel
+
+    <a href="external.html" data-slidepanel="panel">Show Panel</a> or
+    <a href="external2.html" class="panel">Show Panel</a>
+
+
+##Load the plugin on your element 
+    <script type="text/javascript">
+          $(document).ready(function(){
+              $('[data-slidepanel]').slidepanel({
+                  orientation: 'top',
+                  mode: 'push'
+              });
+          });
+    </script>
+
+##Options
+
+orientaton: left (default), top, right, bottom
+mode: push (default), overlay
+static: true (default), false
+
+Orientation sets the orientation of the rendered panel (top, right, bottom, left).  Default is left.
+
+Mode sets the animation mode for the panel. Push, will move the panel into view and push the document body out of the way.
+Overlay will animate the panel over the the document body.
+
+If you have static content to render, set static: true.  If you are rendering ajax content, leave out,
+or set to false.  Default is false.