Updating page editor hooks for v4.9.3
(→pe-place_object_js) |
(→pe-properties_dialog_layer) |
||
| Line 25: | Line 25: | ||
</pre> | </pre> | ||
| − | ====pe- | + | ====pe-place_object_js==== |
| − | This | + | '''This is the largest change in pluging into the page editor.''' Because each object can now be moved individually in and out of cells, the html that is produced by your javascript must use a certain format. |
| − | + | For example, our Scrolling Newsbox used to place [[Plugging-in_to_the_Page_Editor#HTML_output|this]] html on our page. Now our desired output looks like this. | |
<pre> | <pre> | ||
| − | < | + | <div style="height: 50px;" class="droppedItem" id="SCROLLNEWSOBJ151050312"> |
| − | + | <img width="199" vspace="0" hspace="0" height="15" border="0" align="middle" style="cursor: move;" src="images/text_header.gif" /> | |
| − | < | + | <br clear="all" /> |
| − | + | <font color="darkblue" style="font-family: Arial; font-size: 8pt;"> | |
| − | + | <u> | |
| − | + | Scroll Box : test | |
| − | + | </u> | |
| − | + | </font> | |
| − | + | <!-- ##SCROLLNEWS;1## --> | |
| − | + | </div> | |
| − | + | <!-- ~~~ --> | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
</pre> | </pre> | ||
| − | + | The page editor creates the following for you. All you need to do is replace ##OBJ_DISPLAY## with your content. | |
| − | + | ||
| − | + | ||
<pre> | <pre> | ||
| − | < | + | <div style="height: 50px;" class="droppedItem" id="SCROLLNEWSOBJ151050312"> |
| − | + | <img width="199" vspace="0" hspace="0" height="15" border="0" align="middle" style="cursor: move;" src="images/text_header.gif" /> | |
| − | + | <br clear="all" /> | |
| − | + | ##OBJ_DISPLAY## | |
| − | + | </div> | |
| − | + | <!-- ~~~ --> | |
| − | + | ||
</pre> | </pre> | ||
| − | + | And finally, this is what our new scroll_js.php looks like. | |
<pre> | <pre> | ||
| − | + | function OkScrollData() { | |
| + | // Initialize vars | ||
| + | var finalObj,RandNum; | ||
| + | // Create drop item template with specific id | ||
| + | // objTemplate accepts (id of layer, true/false use header img, height of drop item) | ||
| + | var tmplt = objTemplate('SCROLLNEWSOBJ', true, 50); | ||
| − | < | + | // Get selected form values from properties layer |
| + | disOne = $('scrollname').selectedIndex; | ||
| + | tscrollval = eval("$('scrollname').options["+disOne+"].value"); | ||
| + | tscrollname = eval("$('scrollname').options["+disOne+"].innerHTML"); | ||
| + | tscrollname = tscrollname.toString(); | ||
| + | |||
| + | // Content of layer | ||
| + | var insertThis = "<font style='font-family: Arial; font-size: 8pt;'><U><font color=darkblue>Scroll Box : "+tscrollname+"</font></U></FONT><!-- ##SCROLLNEWS;"+tscrollval+"## -->"; | ||
| − | + | // Place content into template var | |
| + | finalObj = tmplt[1].replace("##OBJ_DISPLAY##", insertThis); | ||
| + | |||
| + | // If user has selected a value, then insert template into cell | ||
| + | if ($('scrollname').selectedIndex != 0) { | ||
| + | document.getElementById(ColRowID).innerHTML= finalObj; | ||
| + | } | ||
| + | |||
| + | // Check row heights | ||
| + | checkRow(ColRowID) | ||
| + | |||
| + | // Reset Selection to Nothing(Null) | ||
| + | $('scrollname').selectedIndex = 0; | ||
| + | } | ||
</pre> | </pre> | ||
| − | |||
| − | |||
| − | |||
====pe-properties_dialog_layer==== | ====pe-properties_dialog_layer==== | ||
Revision as of 12:15, 22 August 2007
Contents |
Overview
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 article, the Scrolling Newsbox plugin will be used to show comparisons between the old way and the new way.
Install manifest
The only difference here is the removed Firefox hook_attach.
#Firefox
hook_attach("scroll_js-ff.php", "pe_ff-place_object_js");
hook_attach("scroll_props-ff.php", "pe_ff-properties_dialog_layer");
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.
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.
# Page Editor javascript and properties layer
hook_attach("scroll_js.php", "pe-place_object_js");
hook_attach("scroll_props.php", "pe-properties_dialog_layer");
pe-place_object_js
This is the largest change in pluging into the page editor. Because each object can now be moved individually in and out of cells, the html that is produced by your javascript must use a certain format.
For example, our Scrolling Newsbox used to place this html on our page. Now our desired output looks like this.
<div style="height: 50px;" class="droppedItem" id="SCROLLNEWSOBJ151050312">
<img width="199" vspace="0" hspace="0" height="15" border="0" align="middle" style="cursor: move;" src="images/text_header.gif" />
<br clear="all" />
<font color="darkblue" style="font-family: Arial; font-size: 8pt;">
<u>
Scroll Box : test
</u>
</font>
<!-- ##SCROLLNEWS;1## -->
</div>
<!-- ~~~ -->
The page editor creates the following for you. All you need to do is replace ##OBJ_DISPLAY## with your content.
<div style="height: 50px;" class="droppedItem" id="SCROLLNEWSOBJ151050312"> <img width="199" vspace="0" hspace="0" height="15" border="0" align="middle" style="cursor: move;" src="images/text_header.gif" /> <br clear="all" /> ##OBJ_DISPLAY## </div> <!-- ~~~ -->
And finally, this is what our new scroll_js.php looks like.
function OkScrollData() {
// Initialize vars
var finalObj,RandNum;
// Create drop item template with specific id
// objTemplate accepts (id of layer, true/false use header img, height of drop item)
var tmplt = objTemplate('SCROLLNEWSOBJ', true, 50);
// Get selected form values from properties layer
disOne = $('scrollname').selectedIndex;
tscrollval = eval("$('scrollname').options["+disOne+"].value");
tscrollname = eval("$('scrollname').options["+disOne+"].innerHTML");
tscrollname = tscrollname.toString();
// Content of layer
var insertThis = "<font style='font-family: Arial; font-size: 8pt;'><U><font color=darkblue>Scroll Box : "+tscrollname+"</font></U></FONT><!-- ##SCROLLNEWS;"+tscrollval+"## -->";
// Place content into template var
finalObj = tmplt[1].replace("##OBJ_DISPLAY##", insertThis);
// If user has selected a value, then insert template into cell
if ($('scrollname').selectedIndex != 0) {
document.getElementById(ColRowID).innerHTML= finalObj;
}
// Check row heights
checkRow(ColRowID)
// Reset Selection to Nothing(Null)
$('scrollname').selectedIndex = 0;
}
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 here.
<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');">
<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>
Changed lines-
from
<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%>
to
<DIV ID="scrollProps" class="prop_layer"> <div class="prop_head">Scrolling Newsbox Selection</div> <table cellpadding="0" cellspacing="0" width="100%" class="prop_table">
Please notice use of the classes prop_layer, prop_head, and prop_table. Also, we are getting rid of one of the tables so don't forget to kill the closing tags also.
As I mentioned before, these changes are not mandatory but will make your properties layer fit in to the product interface much nicer.
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.
