Plugging-in to the Page Editor

From Sohowiki
Revision as of 10:09, 6 February 2008 by Joe Lain (Talk | contribs)
(diff) ←Older revision | view current revision (diff) | Newer revision→ (diff)
Jump to: navigation, search




This article is designed to run you through the creation of a "Scrolling Newsbox" plugin that utilizes three of the available special hooks, with specific descriptions of the processes for a working drag-and-drop object for your plugin to Pro Edition's Page Editor.

Note: This was originally a PDF article written by Soholaunch's Joe Lain that we're in the process or porting over to the wiki.... so please bear with the odd "screenshot goes here" comment, etc.

Special hooks utilized

Place a button for itself on the main menu
Have a custom upper bar nav menu buttons for its management module.
Adds its own drag-and-drop object to the Page Editor. As in, you'll be able to drop this plugin on a page (and set properties for it) just like you can with the standard Page Editor objects like Hit Counter, etc.

Standard hooks utilized

The following hooks will be utilized via the hook_attach() method

  • pe-place_object_js
  • pe_ff-place_object_js
  • pe-properties_dialog_layer
  • pe_ff-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_js-ff.php
  • scroll_props-ff.php
  • scroll_rtb.php
  • scroll_write.php

Install manifest

What the completed install manifest will look like

$plugin_folder = "SCROLLNEWS";
$plugin_title = "Scrolling Newbox";
$plugin_version = "0.1";
$plugin_description = "Cool scrolling newsbox.";
$plugin_author = "Joe Lain";
$plugin_homepage = "";
$plugin_icon = "scrolling_icon.gif";
$plugin_options_link = "newsbox_setup.php";

# 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);

hook_attach("scroll_js-ff.php", "pe_ff-place_object_js");
hook_attach("scroll_props-ff.php", "pe_ff-properties_dialog_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");

Anatomy of install manifest

Items under #Page Editor comment

$data['draggable_object_image'] = "eng-icon_scroll.gif";

Name of draggable image for page editor

$data['draggable_object_id'] = "scroll_obj";

Id of draggable image. This id is specific to your module so use anything you like.

$data['properties_dialog_id'] = "scrollProps";

Id of your properties layer(layer that pops up when the icon is dropped). This id is specific to your layer. I will explain more later in this document.

$data['mod_folder'] = $plugin_folder;

Plug-in folder name(leave as $plugin_folder).

$data['properties_dialog_file'] = $plugin_folder."/scroll_props.php";

Path to properties layer(put your properties file name in for scroll_props.php)

$data['place_object_js_function'] = $plugin_folder.DIRECTORY_SEPARATOR."scroll_js.php";

Path to JavaScript file(put your JavaScript file name in for scroll_js.php)

***New option added as of v4.9.2 r15***

If you do not want to show a properties layer and just want to place your object, use the following.

$data['place_object_js_function_name'] = "OkScrollData";

OkScrollData is the name of the javascript function I want to call when my object is dropped.

Items under #FireFox comment

This section applies to the Firefox page editor files(page_editor-ff.php and object_drops-ff.php)

hook_attach("scroll_props-ff.php", "pe_ff-properties_dialog_layer");

Adds your properties layer to the sohoadmin/program/modules/page_editor/page_editor-ff.php file.

To get a feel for what this file should look like, open page_editor-ff.php and go to line 2346. Around that line you will find-

eval(hook("pe_ff-properties_dialog_layer", basename(__FILE__)));

This is where your properties layer will be added. Above this line you will find all the properties layers for the standard modules(blog, faq, shopping, etc.). I will go over this more later.

hook_attach("scroll_js-ff.php", "pe_ff-place_object_js");

Adds your JavaScript that interacts with the properties layer to the sohoadmin/program/modules/page_editor/object_drops-ff.php file. To get a feel for what this file should look like open object_drops-ff.php and scroll to the end of the file. You will find-

eval(hook("pe_ff-place_object_js", basename(__FILE__)));

This is where your JavaScript will be added. Above this line you will find all the JavaScript functions for all layers. For example : the OkBlog function is called when the Ok button on the blog layer is clicked. I will go over this more later.

Items under #IE comment

hook_attach("scroll_js.php", "pe-place_object_js"); 
hook_attach("scroll_props.php", "pe-properties_dialog_layer"); 

These do the same thing as the Firefox section but are located in page_editor.php and object_drops.php. Notice that these files do not have -ff on the end because they do not work in mozilla type browsers. The advantage of this is that plug-in’s do not have to be cross browser compatible.

Items under #Misc comment

hook_attach("scroll_write.php", "pe-confile_object_data");

This is where your page editor code gets converted and saved to the con and regen files for the page. Found at the end of object_write.php on line 1144.

eval(hook("pe-confile_object_data", basename(__FILE__)));

I will explain this more later.

hook_attach("scroll_rtb.php", "rtb_contentloop");

Attaches code you need to display on the web page. Found in realtime_builder.php around line 1547.

eval(hook("rtb_contentloop", basename(__FILE__)));

This hook attaches your code that interprets our page editor code. I will explain this more later.

Building the plugin files

page_editor.php and page_editor-ff.php


The page editor file has many different parts including the object bar which holds the draggable icons, the drop zones on the page, and about half of the file is for the properties layers that popup when an object is dropped. The only code you will be adding to this file is your properties layer. For the scrolling newsbox this would be scroll_props.php and scroll_props-ff.php.

The only part of this file you need to worry about is the properties layer that pops up when your icon is dragged onto the page. It should look something like this.

File:Example.jpg(screenshot of scrollnews property layer to go here)

The code

The code for the scrolling newsbox properties layer looks like this.

<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;'>
               <td align=center valign=middle>

                    <table border=0 cellpadding=2 cellspacing=0 width=100%>
	            <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;'>



	             <td align=center valign=middle>

	 	<input type=button class=mikebut onMouseOver="this.className='mikebutOn';" 
onMouseOut="this.className='mikebut';" value=" OK " onClick="OkScrollData(); 
		  <input type=button class=mikebut onMouseOver="this.className='mikebutOn';" 
onMouseOut="this.className='mikebut';" value=" Cancel "




Notes/Further Explanation

Note: There are 2 page editor hooks. One in page_editor-ff.php for Firefox and one in page_editor.php for Internet Explorer. Because the JavaScript I use in this layer is cross browser compatible, my layers scroll_props-ff.php and scroll_props.php are identical other than the cancel button functions which I explain later.

When the OK button is clicked the function OkScrollData(); is called. Where is this function you ask? This function is one that I define in my JavaScript file which is added to the object_drops.php file. The function show_hide_layer('objectbar_mods',,'show','scroll Props',,'hide'); is also called when the OK button is clicked. This function hides my scrollProps layer and shows the objectbar_mods layer. scrollProps is the id of my properties layer.

When the Cancel button is clicked the show_hide_layers() function is called(explained in last paragraph). Also replaceImageData(); and makeUnScroll(ColRowID) are called. All plug-in will need to add these two functions to their cancel button for Firefox properties layers. Internet Explorer properties layers should not have these functions.

object_drops.php and object_drops-ff.php


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. File:Example.jpg (screenshot of inserted object goes here)

The code

The JavaScript for the scrolling newsbox looks like this.

function OkScrollData() {
   doOperation = 0;
   var dataTrue ="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)

HTML output

This is what that our OkScrollData function ultimatly inserts into the page editor:

<table style="border: 1px inset black; background: rgb(239, 239, 239) none repeat scroll 0%;" border="0" cellpadding="2" cellspacing="0">
      <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
        <!-- ##SCROLLNEWS;1## -->
<!-- ~~~ -->

Notice the . When the page is saved object_write.php interprets this. I will explain more in the object_write.php section.


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 con and regen files are saved as page_name.con and page_name.regen.

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-

File:Example.jpg (screenshot of page editor with scrollnews object dropped on page goes here)

The con file would look like this-

<table border="0" cellpadding="1" cellspacing="0" width="100%" align="center">

<!-- Content Row 1 ----------------------------------------- -->
     <td align=center valign=top width=33%><div align=center>
<!-- ##SCROLLNEWS;1## -->
     <td align=center valign=top width=66% colspan=2><div align=center>
<!-- ##BLOG;Latest News## -->

So our scroll_write.php file needs to take the Code 3 example and strip out everything but the

This is what my scroll_write.php file looks like-

#### SCROLLING NEWSBOX	                 
if (eregi("##SCROLLNEWS", $thisobj)) {	
   $tmp = eregi("<!-- ##SCROLLNEWS;(.*)## -->", $thisobj, $out);
   $dataname = $out[1];
   $droparea .= "\n\n<!-- ##SCROLLNEWS;$dataname## -->\n\n";

If ##SCROLLNEWS is found on the page, this adds to the con file for display on the site.


At this point in the process you should see 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 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.

// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
if (eregi("##SCROLLNEWS", $content_line[$sohocontent])) {
   $tmp = eregi("<!-- ##SCROLLNEWS;(.*)## -->", $content_line[$sohocontent], $out);

   $filename = "sohoadmin/plugins/SCROLLNEWS/pgm-scroll_news.php";

   $content_line[$sohocontent] = ob_get_contents();


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.

Personal tools