Updating page editor hooks for v4.9.3

From Sohowiki
(Difference between revisions)
Jump to: navigation, search
(Notes/Further Explanation)
(Final note)
 
(37 intermediate revisions by one user not shown)
Line 1: Line 1:
==Overview==
+
==How To Update==
 
+
Within your object javascript simply add the following to the end, that is, after you have placed your object into the cell.
===Introduction===
+
This article should explain the changes made to the page editor hook attachments for version 4.9.3.  Standard hooks such as pe_ff-place_object_js and pe_ff-properties_dialog_layer will no longer be used as the page editor files (page_editor.php and page_editor-ff.php) have been combined.  page_editor.php is about half the size and quite a bit more efficient.  Functionality such as moving single objects to and from cells, stretching cells which display all content of the cell, and updated visual effects have been added.
+
 
+
Just like the [[Plugging-in_to_the_Page_Editor|Plugging-in to the Page Editor]] article, the Scrolling Newsbox plugin will be used to show comparisons between the old way and the new way.
+
 
+
===Standard hooks utilized===
+
The following hooks will be utilized via the [[Hook attach|hook_attach()]] method
+
*pe-place_object_js
+
*pe-properties_dialog_layer
+
*rtb_contentloop
+
*pe-confile_object_data
+
 
+
===Files that will be created===
+
*eng-icon_scroll.gif
+
*scroll_props.php
+
*scroll_js.php
+
*scroll_props.php
+
*scroll_rtb.php
+
*scroll_write.php
+
 
+
==Install manifest==
+
 
+
===What the completed install manifest will look like===
+
The only difference here is the removed Firefox hook_attach.
+
 
<pre>
 
<pre>
#Firefox
+
if ( window.checkPageAreas ){
hook_attach("scroll_js-ff.php", "pe_ff-place_object_js");
+
  checkPageAreas('start');
hook_attach("scroll_props-ff.php", "pe_ff-properties_dialog_layer");
+
}
 
</pre>
 
</pre>
The hooks "pe_ff-place_object_js" and "pe_ff-properties_dialog_layer" are no longer in the code and will not have any effect.
 
<pre>
 
<?
 
# PLUGIN INFO
 
$plugin_folder = "SCROLLNEWS";
 
$plugin_title = "Scrolling Newbox";
 
$plugin_version = "2.1";
 
$plugin_description = "Cool scrolling newsbox.";
 
$plugin_author = "Joe Lain";
 
$plugin_homepage = "http://soholaunch.com";
 
$plugin_icon = "scrolling_icon.gif";
 
$plugin_options_link = "newsbox_setup.php";
 
  
# PLUGIN DATABASE TABLES
+
Our scrolling newsbox OkScrollData() function now looks like this.
# If this plugin creates any database tables
+
# list them here so that Pro Edition knows to drop them
+
# during the un-installation process
+
$drop_tables[] = "scrolling_newsbox_cat";
+
$drop_tables[] = "scrolling_newsbox_content";
+
  
# SPECIAL HOOK: Main menu button
 
# Use this if you want to place a button for your plugin on Pro Edition's Main Menu
 
# ...which links to some kind of config/managment module for your plugin.
 
# If your plugin doesn't involve a config/management module
 
# (as in, it runs exactly as installed with no further input needed from the user)
 
# then a main menu button probably isn't neccessary.
 
$data = array();
 
$data['enabled_button_image'] = "scrolling_icon.gif";
 
$data['disabled_button_image'] = "scrolling_icon.gif";
 
$data['enabled_button_link'] = "newsbox_setup.php";
 
$data['button_caption_text'] = "Scrolling Newsbox";
 
$data['multiuser_access_code'] = ";MOD_SCROLLING_NEWSBOX;";
 
hook_special("main_menu_button", $data);
 
 
# SPECIAL HOOK: Header nav buttons
 
$data = array();
 
$data['button1']['button_text'] = "Scrolling Newsbox Menu"; // This string will be passed through lang() for translation
 
$data['button1']['button_onclick'] = base64_encode("parent.body.location.href='../plugins/SCROLLNEWS/newsbox_setup';"); // Do not use single quotes in this string
 
 
hook_special("header_nav_buttons", $data);
 
 
# Page Editor
 
$data = array();
 
$data['draggable_object_image'] = "eng-icon_scroll.gif";
 
$data['draggable_object_id'] = "scroll_obj";
 
$data['properties_dialog_id'] = "scrollProps";
 
$data['mod_folder'] = $plugin_folder;
 
$data['properties_dialog_file'] = $plugin_folder.DIRECTORY_SEPARATOR."scroll_props.php";
 
$data['place_object_js_function'] = $plugin_folder.DIRECTORY_SEPARATOR."scroll_js.php";
 
hook_special("page_editor_object", $data);
 
 
# Page Editor javascript and properties layer
 
hook_attach("scroll_js.php", "pe-place_object_js");
 
hook_attach("scroll_props.php", "pe-properties_dialog_layer");
 
 
# Misc
 
hook_attach("scroll_rtb.php", "rtb_contentloop");
 
hook_attach("scroll_write.php", "pe-confile_object_data");
 
?>
 
</pre>
 
 
 
 
==The Changed Files==
 
====Overview====
 
Here I will explain the differences in the page editor properties layer and javascript.  This applies to the following portion of our install manifest.
 
<pre>
 
# Page Editor javascript and properties layer
 
hook_attach("scroll_js.php", "pe-place_object_js");
 
hook_attach("scroll_props.php", "pe-properties_dialog_layer");
 
</pre>
 
 
====pe-properties_dialog_layer====
 
This file can really remain the same, it will function properly as is.  But, if you would like to update the layer styles and make it consistent with the other layers the following code will help you do so.  You can reference the code for the old scrolling newsbox properties layer [[Plugging-in_to_the_Page_Editor#The_code|here]].
 
<pre>
 
<DIV ID="scrollProps" class="prop_layer">
 
 
  <div class="prop_head">Scrolling Newsbox Selection</div>
 
 
<table cellpadding="0" cellspacing="0" width="100%" class="prop_table">
 
<tr>
 
<td align=center valign=top class=ctable>
 
 
Which Scrolling Newsbox should appear here?
 
 
<SELECT id="scrollname" NAME="scrollname" style='font-face: Arial; font-size: 8pt; width: 250px;'>
 
<option value="NULL" STYLE='color:#999999;'>Newsboxes:</option>
 
 
<?
 
 
  $result = mysql_query("SELECT * FROM scrolling_newsbox_cat");
 
 
      while ($row=mysql_fetch_array($result)){
 
if ($tmp == "#EFEFEF") { $tmp = "WHITE"; } else { $tmp = "#EFEFEF"; }
 
echo "<option value=\"".$row['prikey']."\" STYLE='background: $tmp;'>".$row['CAT_NAME']."</option>\n";
 
}
 
 
?>
 
 
</SELECT>
 
 
</td>
 
<td align=center valign=middle>
 
 
<input type=button class=mikebut onMouseOver="this.className='mikebutOn';" onMouseOut="this.className='mikebut';" value=" OK " onClick="OkScrollData();show_hide_layer('objectbar_mods','','show','scrollProps','','hide');">
 
&nbsp;&nbsp;<input type=button class=mikebut onMouseOver="this.className='mikebutOn';" onMouseOut="this.className='mikebut';" value=" Cancel " onClick="show_hide_layer('objectbar_mods','','show','scrollProps','','hide');">
 
 
</td>
 
 
</tr>
 
</table>
 
 
</DIV>
 
</pre>
 
'''Changed lines-'''
 
 
from
 
<pre>
 
<DIV ID="scrollProps" style="position:absolute; left:0px; top:0px; width:100%; height:115; z-index:4; overflow: none; background-color: oldlace; visibility: hidden" onMouseOver="HighDropZone();">
 
 
    <table border=1 cellpadding=0 cellspacing=0 width=100% height=100% style='border: 1px inset black;'>
 
          <tr>
 
              <td align=center valign=middle>
 
 
                    <table border=0 cellpadding=2 cellspacing=0 width=100%>
 
</pre>
 
to
 
<pre>
 
<DIV ID="scrollProps" class="prop_layer">
 
 
  <div class="prop_head">Scrolling Newsbox Selection</div>
 
 
<table cellpadding="0" cellspacing="0" width="100%" class="prop_table">
 
</pre>
 
As I mentioned before, these changes are not mandatory but will make your properties layer fit in to the product interface much nicer.
 
 
====pe-properties_dialog_layer====
 
This file can really remain the same, it will function properly as is.  But, if you would like to update the layer styles and make it consistent with the other layers the following code will help you do so.  You can reference the code for the old scrolling newsbox properties layer [[Plugging-in_to_the_Page_Editor#The_code|here]].
 
<pre>
 
<DIV ID="scrollProps" class="prop_layer">
 
 
  <div class="prop_head">Scrolling Newsbox Selection</div>
 
 
<table cellpadding="0" cellspacing="0" width="100%" class="prop_table">
 
<tr>
 
<td align=center valign=top class=ctable>
 
 
Which Scrolling Newsbox should appear here?
 
 
<SELECT id="scrollname" NAME="scrollname" style='font-face: Arial; font-size: 8pt; width: 250px;'>
 
<option value="NULL" STYLE='color:#999999;'>Newsboxes:</option>
 
 
<?
 
 
  $result = mysql_query("SELECT * FROM scrolling_newsbox_cat");
 
 
      while ($row=mysql_fetch_array($result)){
 
if ($tmp == "#EFEFEF") { $tmp = "WHITE"; } else { $tmp = "#EFEFEF"; }
 
echo "<option value=\"".$row['prikey']."\" STYLE='background: $tmp;'>".$row['CAT_NAME']."</option>\n";
 
}
 
 
?>
 
 
</SELECT>
 
 
</td>
 
<td align=center valign=middle>
 
 
<input type=button class=mikebut onMouseOver="this.className='mikebutOn';" onMouseOut="this.className='mikebut';" value=" OK " onClick="OkScrollData();show_hide_layer('objectbar_mods','','show','scrollProps','','hide');">
 
&nbsp;&nbsp;<input type=button class=mikebut onMouseOver="this.className='mikebutOn';" onMouseOut="this.className='mikebut';" value=" Cancel " onClick="show_hide_layer('objectbar_mods','','show','scrollProps','','hide');">
 
 
</td>
 
 
</tr>
 
</table>
 
 
</DIV>
 
</pre>
 
'''Changed lines-'''
 
 
from
 
<pre>
 
<DIV ID="scrollProps" style="position:absolute; left:0px; top:0px; width:100%; height:115; z-index:4; overflow: none; background-color: oldlace; visibility: hidden" onMouseOver="HighDropZone();">
 
 
    <table border=1 cellpadding=0 cellspacing=0 width=100% height=100% style='border: 1px inset black;'>
 
          <tr>
 
              <td align=center valign=middle>
 
 
                    <table border=0 cellpadding=2 cellspacing=0 width=100%>
 
</pre>
 
to
 
<pre>
 
<DIV ID="scrollProps" class="prop_layer">
 
 
  <div class="prop_head">Scrolling Newsbox Selection</div>
 
 
<table cellpadding="0" cellspacing="0" width="100%" class="prop_table">
 
</pre>
 
As I mentioned before, these changes are not mandatory but will make your properties layer fit in to the product interface much nicer.
 
 
===object_drops.php and object_drops-ff.php===
 
====Overview====
 
The object drops file contains the JavaScript that interacts with the properties layers.  For the scrolling newsbox scroll_js.php and scroll_js-ff.php are the files that contain the JavaScript to interact with my properties layer.
 
 
This function is called when the OK button is clicked from my properties layer.  The result of this function looks like this.
 
[[Image:Example.jpg]] (screenshot of inserted object goes here)
 
 
====The code====
 
The JavaScript for the scrolling newsbox looks like this.
 
 
<pre>
 
<pre>
 
function OkScrollData() {
 
function OkScrollData() {
doOperation = 0;
+
  doOperation = 0;
 +
 
 +
  var dataTrue = dataData.search("pixel.gif");
 +
 
 +
  disOne = document.getElementById('scrollname').selectedIndex;
 +
  tscrollval = eval("document.getElementById('scrollname').options["+disOne+"].value");
 +
  tscrollname = eval("document.getElementById('scrollname').options["+disOne+"].innerHTML");
 +
 
 +
  tscrollname = tscrollname.toString();
  
var dataTrue = dataData.search("pixel.gif");
+
  TextHeader = "<img src=images/text_header.gif width=199 height=15 border=0 align=left vspace=0 hspace=0 style='cursor: move;'><BR CLEAR=ALL>";
 +
  TableStart = "<table border=0 cellpadding=2 cellspacing=0 style='border: 1px inset black; background: #EFEFEF;'><tr><td width=199 align=center valign=top>";
 +
  TableEnd = "</td></tr></table><!-- ~~~ -->";
  
disOne = scrollname.selectedIndex;
+
  if (dataTrue > 0) {
tscrollname = eval("scrollname.options["+disOne+"].value");
+
  sText = TableStart+TextHeader+"<font style='font-family: Arial; font-size: 8pt;'><U><font color=darkblue>Scroll Box : "+tscrollname+"</font></U></FONT><!-- ##SCROLLNEWS;"+tscrollval+"## -->"+TableEnd;
 
+
  doOperation = 1;
tscrollname = tscrollname.toString();
+
  } else {
 
+
  sText = dataData+"<BR>"+TableStart+TextHeader+"<font style='font-family: Arial; font-size: 8pt;'><U><font color=darkblue>Scroll Box : "+tscrollname+"</font></U></FONT><!-- ##SCROLLNEWS;"+tscrollval+"## -->"+TableEnd;
                  TextHeader = "<img src=images/text_header.gif width=199 height=15 border=0 align=left vspace=0 hspace=0
+
  doOperation = 1;
style='cursor: move;'><BR CLEAR=ALL>";
+
  }
+
 
TableStart = "<table border=0 cellpadding=2 cellspacing=0 style='border: 1px inset black; background: #EFEFEF;'>
+
  if (doOperation == 1) {
<tr><td width=199 align=center valign=top>";
+
  document.getElementById(ColRowID).innerHTML= sText;
   
+
  document.getElementById(ColRowID).style.backgroundColor= "#FFFFFF";
TableEnd = "</td></tr></table><!-- ~~~ -->";
+
  }
 
+
  document.getElementById('scrollname').selectedIndex = 0; // Reset Selection to Nothing(Null)
if (dataTrue > 0) {
+
 
    sText = TableStart+TextHeader+"<font style='font-family: Arial; font-size: 8pt;'><U><font color=darkblue>Scroll Box  
+
  if ( window.checkPageAreas ){
    : "+tscrollname+"</font></U></FONT><!-- ##SCROLLNEWS;"+tscrollname+"## -->"+TableEnd;
+
      checkPageAreas('start');
    doOperation = 1;
+
  }
} else {
+
    sText = dataData+"<BR>"+TableStart+TextHeader+"<font style='font-family: Arial; font-size: 8pt;'><U><font  
+
    color=darkblue>Scroll Box : "+tscrollname+"</font></U></FONT><!-- ##SCROLLNEWS;"+tscrollname+"## --
+
    >"+TableEnd;
+
    doOperation = 1;
+
}
+
 
+
if (doOperation == 1) {
+
    document.getElementById(ColRowID).innerHTML= sText;
+
    document.getElementById(ColRowID).style.backgroundColor= "#FFFFFF";
+
}
+
  scrollname.selectedIndex = 0; // Reset Selection to Nothing(Null)
+
 
}
 
}
 
</pre>
 
</pre>
  
====HTML output====
+
And thats it :)
This is what that our OkScrollData function ultimatly inserts into the page editor:
+
<pre>
+
<table style="border: 1px inset black; background: rgb(239, 239, 239) none repeat scroll 0%;" border="0" cellpadding="2" cellspacing="0">
+
  <tbody>
+
    <tr>
+
      <td align="center" valign="top" width="199">
+
        <img src="images/text_header.gif" style="cursor: move;" align="left" border="0"
+
        height="15" hspace="0" vspace="0" width="199"><br clear="all">
+
        <font style="font-family: Arial; font-size: 8pt;"><u><font color="darkblue">
+
          Scroll Box : 1
+
        </font></u></font>
+
        <!-- ##SCROLLNEWS;1## -->
+
      </td>
+
    </tr>
+
  </tbody>
+
</table>
+
<!-- ~~~ -->
+
</pre>
+
Notice the <!-- ##SCROLLNEWS;1## --> .  When the page is saved object_write.php interprets this.  I will explain more in the object_write.php section.
+
  
===object_write.php===
+
==Final note==
The purpose of the object_write.php file is to read objects that are placed on the page and place the appropriate code into the con and regen files.  This happens when a page is saved.
+
The new page_editor.php uses a XHTML 1.0 Strict doctype and may effect the look/feel of your properties layer and will effect ill formed javascript.  
  
The con and regen files are saved as page_name.con and page_name.regen. 
+
Meaning that the following is no longer acceptable javascript.
 
+
page_name.con contains code to display on the website
+
page_name.regen contains code to display the page in the page editor
+
 
+
When a page is saved that looks like this-
+
 
+
[[Image:Example.jpg]] (screenshot of page editor with scrollnews object dropped on page goes here)
+
 
+
The con file would look like this-
+
 
<pre>
 
<pre>
<table border="0" cellpadding="1" cellspacing="0" width="100%" align="center">
+
myFoo = foo.selectedIndex;
 
+
<!-- Content Row 1 ----------------------------------------- -->
+
<tr>
+
    <td align=center valign=top width=33%><div align=center>
+
<!-- ##SCROLLNEWS;1## -->
+
</div>
+
</td>
+
    <td align=center valign=top width=66% colspan=2><div align=center>
+
<!-- ##BLOG;Latest News## -->
+
</div>
+
</td>
+
</tr>
+
       
+
</table>
+
 
</pre>
 
</pre>
 
+
It must be
So our scroll_write.php file needs to take the Code 3 example and strip out everything but the <!--##SCROLLNEWS;1## -->
+
 
+
This is what my scroll_write.php file looks like-
+
 
<pre>
 
<pre>
<?
+
myFoo = document.getElementById('foo').selectedIndex;
########################################
+
#### SCROLLING NEWSBOX                
+
########################################
+
if (eregi("##SCROLLNEWS", $thisobj)) {
+
  $tmp = eregi("<!-- ##SCROLLNEWS;(.*)## -->", $thisobj, $out);
+
  $dataname = $out[1];
+
  $droparea .= "\n\n<!-- ##SCROLLNEWS;$dataname## -->\n\n";
+
}
+
?>
+
 
</pre>
 
</pre>
  
If ##SCROLLNEWS is found on the page, this adds <!-- ##SCROLLNEWS;1## --> to the con file for display on the site. 
+
To test your code changes with the v4.9.3 version please enable installation of testing builds through Software Updates and install on a development domain.
 
+
===pgm-realtime_builder.php===
+
At this point in the process you should see <!-- ##SCROLLNEWS;1## --> in the source on your page.  Now we need to turn this into an actual display for our scrolling newsbox.  This is where pgm-realtime_builder.php comes in.  It loops through every line of the pages con file and finds any code like our <!-- ##SCROLLNEWS;1## --> and replaces it with the appropriate code. Realtime builder already looks for all the regular modules, we need to add one for the scrolling newsbox.
+
 
+
I do this in my scroll_rtb.php file.  Here is what it looks like.
+
<pre>
+
<?
+
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
// INSERT CODE FOR SCROLLING NEWSBOX
+
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
if (eregi("##SCROLLNEWS", $content_line[$sohocontent])) {
+
  $tmp = eregi("<!-- ##SCROLLNEWS;(.*)## -->", $content_line[$sohocontent], $out);
+
  $SCROLL_CATEGORY_NAME = $out[1];
+
 
+
  $filename = "sohoadmin/plugins/SCROLLNEWS/pgm-scroll_news.php";
+
 
+
  ob_start();
+
  include("$filename");
+
  $content_line[$sohocontent] = ob_get_contents();
+
  ob_end_clean();
+
 
+
}
+
?>
+
</pre>
+
 
+
When ##SCROLLNEWS is found it includes my pgm-scroll_news.php display file which has the JavaScript to create the scrolling newsbox.
+
 
+
==Final note==
+
I would encourage you to look at all the files that I have discussed.  This may seem like a ton of information but it is really only a couple files.  Once you have finished one module the next will come much easier.  The scrolling newsbox took me a little over half a day to complete.
+
  
 
[[Category:Plugins]]
 
[[Category:Plugins]]

Latest revision as of 13:14, 27 November 2007

How To Update

Within your object javascript simply add the following to the end, that is, after you have placed your object into the cell.

if ( window.checkPageAreas ){
   checkPageAreas('start');
}

Our scrolling newsbox OkScrollData() function now looks like this.

function OkScrollData() {
   doOperation = 0;
   
   var dataTrue = dataData.search("pixel.gif");
   
   disOne = document.getElementById('scrollname').selectedIndex;
   tscrollval = eval("document.getElementById('scrollname').options["+disOne+"].value");
   tscrollname = eval("document.getElementById('scrollname').options["+disOne+"].innerHTML");
   
   tscrollname = tscrollname.toString();

   TextHeader = "<img src=images/text_header.gif width=199 height=15 border=0 align=left vspace=0 hspace=0 style='cursor: move;'><BR CLEAR=ALL>";
   TableStart = "<table border=0 cellpadding=2 cellspacing=0 style='border: 1px inset black; background: #EFEFEF;'><tr><td width=199 align=center valign=top>";
   TableEnd = "</td></tr></table><!-- ~~~ -->";

   if (dataTrue > 0) {
   	sText = TableStart+TextHeader+"<font style='font-family: Arial; font-size: 8pt;'><U><font color=darkblue>Scroll Box : "+tscrollname+"</font></U></FONT><!-- ##SCROLLNEWS;"+tscrollval+"## -->"+TableEnd;
   	doOperation = 1;
   } else {
   	sText = dataData+"<BR>"+TableStart+TextHeader+"<font style='font-family: Arial; font-size: 8pt;'><U><font color=darkblue>Scroll Box : "+tscrollname+"</font></U></FONT><!-- ##SCROLLNEWS;"+tscrollval+"## -->"+TableEnd;
   	doOperation = 1;
   }
   
   if (doOperation == 1) {
   	document.getElementById(ColRowID).innerHTML= sText;
   	document.getElementById(ColRowID).style.backgroundColor= "#FFFFFF";
   }
   document.getElementById('scrollname').selectedIndex = 0;	// Reset Selection to Nothing(Null)
   
   if ( window.checkPageAreas ){
      checkPageAreas('start');
   }
}

And thats it :)

Final note

The new page_editor.php uses a XHTML 1.0 Strict doctype and may effect the look/feel of your properties layer and will effect ill formed javascript.

Meaning that the following is no longer acceptable javascript.

myFoo = foo.selectedIndex;

It must be

myFoo = document.getElementById('foo').selectedIndex;

To test your code changes with the v4.9.3 version please enable installation of testing builds through Software Updates and install on a development domain.

Personal tools