Plugging-in to the Page Editor

From Sohowiki
Revision as of 16:35, 6 June 2006 by Soho (Talk | contribs)
(diff) ←Older revision | view current revision (diff) | Newer revision→ (diff)
Jump to: navigation, search

Overview

This article is designed to run you through the creation of a "Scrolling Newsbox" plugin that utilizes three of the available special hooks, namely:

  • main_menu_button
  • header_nav_buttons
  • page_editor_object

...to accomplish the following:

  • 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.
  • Place a button for itself on the main menu
  • Have a custom upper bar nav menu buttons for its management module.

What the completed install manifest will look like

Your install manifest tells the plug-in system where each of your plug-in files are located. This document will explain each of the files needed to plug-in to the page editor. First lets take a look at an example of the page editor section of the install_manifest.php.

  1. 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);

  1. Firefox

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

  1. IE

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

  1. Misc

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


Items under #Page Editor section-

$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.DIRECTORY_SEPARATOR."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)



Items under #Firefox section- 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 section-

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.

Item under #Misc section-

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.

Now that we have gone over each element needed to plug-in, let me explain each file.






2. Explanation of the files


When it comes down to it, you are really only looking at 5 small 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.


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

Code 1

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-

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.

The JavaScript for the scrolling newsbox looks like this.

Code 2 function OkScrollData() { doOperation = 0;

var dataTrue = dataData.search("pixel.gif");

disOne = scrollname.selectedIndex; tscrollname = eval("scrollname.options["+disOne+"].value");

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;'>
";

TableStart = "
"; TableEnd = "
";

if (dataTrue > 0) { sText = TableStart+TextHeader+"Scroll Box 

    : "+tscrollname+""+TableEnd;

doOperation = 1; } else { sText = dataData+"
"+TableStart+TextHeader+"Scroll Box : "+tscrollname+" 

     </td>
   </tr>
  </tbody>

</table>

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














object_write.php –

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-


The con file would look like this-

Code 4






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-

Code 5 <?

        2. SCROLLING NEWSBOX ####

if (eregi("##SCROLLNEWS", $thisobj)) { 

  $tmp = eregi("", $thisobj, $out);
  $dataname = $out[1];
  $droparea .= "\n\n\n\n";

}


?>

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


pgm-realtime_builder.php –

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.

Code 6 <?

// 15:35, 6 June 2006 (CDT)15:35, 6 June 2006 (CDT)15:35, 6 June 2006 (CDT)15:35, 6 June 2006 (CDT)15:35, 6 June 2006 (CDT)15:35, 6 June 2006 (CDT)15:35, 6 June 2006 (CDT)15:35, 6 June 2006 (CDT)15:35, 6 June 2006 (CDT)15:35, 6 June 2006 (CDT)15:35, 6 June 2006 (CDT)15:35, 6 June 2006 (CDT)15:35, 6 June 2006 (CDT)15:35, 6 June 2006 (CDT)15:35, 6 June 2006 (CDT)15:35, 6 June 2006 (CDT)Soho // INSERT CODE FOR SCROLLING NEWSBOX // 15:35, 6 June 2006 (CDT)15:35, 6 June 2006 (CDT)15:35, 6 June 2006 (CDT)15:35, 6 June 2006 (CDT)15:35, 6 June 2006 (CDT)15:35, 6 June 2006 (CDT)15:35, 6 June 2006 (CDT)15:35, 6 June 2006 (CDT)15:35, 6 June 2006 (CDT)15:35, 6 June 2006 (CDT)15:35, 6 June 2006 (CDT)15:35, 6 June 2006 (CDT)15:35, 6 June 2006 (CDT)15:35, 6 June 2006 (CDT)15:35, 6 June 2006 (CDT)15:35, 6 June 2006 (CDT)Soho if (eregi("##SCROLLNEWS", $content_line[$sohocontent])) { 

  $tmp = eregi("", $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();

}

?>

When ##SCROLLNEWS is found it includes my pgm-scroll_news.php display file which has the JavaScript to create the scrolling newsbox.

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.

If you have any further questions please feel free to email me at joe.lain@soholaunch.com.

Retrieved from "http://wiki.soholaunch.com/index.php?title=Plugging-in_to_the_Page_Editor&oldid=1658"
Personal tools