Jquery Block Editor

testy1 · Involved Joined: Apr 06, 2008 Posts: 483

For quite sometime now I have been considered the foremost expert on nothing jquery Shocked

Ive been working on creating a jquery block editor.I have it mostly complete except for when you change the block order somehow I need it to update the blocks position (maybe fixweight function).This could be done on a change event I suppose or via a button you can click.I assume a button would be better as it would allow you to move multiple blocks then submit it?

Having the Inactive blocks red in the same area could also create some trouble so maybe moving them to a different area called "Closed" might be a better option?

To Do List so far:

Add onchange event or button (see above)
Instead of having inactive blocks red create another area called closed?
Fully xhtml compliant
IE Compatiblity
Google Chrome compatibility

I ended up using

Only registered users can see links on this board!
Get registered or login to the forums!

but have read some stuff since that recommends using the

Only registered users can see links on this board!
Get registered or login to the forums!

interface.

anyway after 2 days Im no closer so if anyone is interested in helping out let me know.

Note: This has been tested in Firefox 3.0.5 only and there is a known bug with IE7 and google chrome.

Download:

Only registered users can see links on this board!
Get registered or login to the forums!

and here is a screenshot so far;

Only registered users can see links on this board!
Get registered or login to the forums!

kguske · Site Admin Joined: Jun 04, 2004 Posts: 6044

That looks really cool, testy1.

Does it consider overridden block titles?
Does it support visibility to Groups, visitors only, etc?
It should probably have an area for inactive blocks (see below)
How it handle creating / adding RSS and HTML blocks? (Maybe have an area to create blocks, as inactive or active without a location, then drag to appropriate section)

I wouldn't worry too much about Chrome compatibility, but surely jQuery UI will handle that (or at least IE).

kguske · Site Admin Joined: Jun 04, 2004 Posts: 6044

Sorry! I just noticed the "Add a block" link and that the inactive stuff was pink. I should read more carefully...

Anyway, the other questions can probably be answered with the same add / edit block function, though it would be nice if there was some way to distinguish blocks that aren't visible to public on this screen (maybe an icon with a popup?).

Also, there should be something in the jQuery UI that addresses sorting, and you could probably use that to order the blocks.

testy1 · Involved Joined: Apr 06, 2008 Posts: 483

I started out using this

Only registered users can see links on this board!
Get registered or login to the forums!

and realized later on that jquery UI might be a better option.

The sorting works well apart from it not updating the database, as I have no idea on how to accomplish this....

Quote:

would be nice if there was some way to distinguish blocks that aren't visible to public on this screen

I hadn't thought about this but would definately be a great addition......If im up to it lol

testy1 · Involved Joined: Apr 06, 2008 Posts: 483

UPDATED

- Added Group Awareness
- Added Who Can View Awareness
- Moved Inactive Blocks to its own area

Download:

Only registered users can see links on this board!
Get registered or login to the forums!

Screenshot

Only registered users can see links on this board!
Get registered or login to the forums!

jakec · Posted: Sun Dec 28, 2008 4:18 am

This is looking really good Testy1, keep up the good work. Very Happy

Guardian2003 · Posted: Sun Dec 28, 2008 9:27 am

Thats pretty neat. I particularly like the way you have laid out the page (left / center / right blocks) to be visually representative of how the should appear on the site homepage rather than just listing everything in one column.

Palbin · Posted: Sun Dec 28, 2008 11:46 am

Looks similar to the "ajaxBlocksEditor" from aman at

Only registered users can see links on this board!
Get registered or login to the forums!

(The website seems to be down). Yours appears to be much more dynamic.

I like the layout and presentation. It looks really good. I have a few questions.

1. What is the purpose of the refresh screen button?
2. Does it use ajax to reorder the blocks ever time you move one? I don't see a commit button.

Also what do you think of moving therefresh screen button out of the help section and maybe putting it below the add block link in the main admin area?

testy1 · Involved Joined: Apr 06, 2008 Posts: 483

Ive used that one palbin but it uses sajax and not to be disrespectful but the code is a bit of a mess because it has sometype of standalone part built into it.

I got the layout idea from either pragmamx or evo I cant remember which one but I thought it was a good idea at the time.

The fresh screen button is only for debug purposes at the moment as once the Commit button is implemented it will basically do the same thing.

The idea is to have a commit button so that you can move multiple blocks and the commit all changes.

but to be honest Im getting way out of my league.

The next problem I have is how it distinguishes between group p-ermissions and view permissions.It currently highlights if either apply but it can not tell you which one applies. Sad

testy1 · Involved Joined: Apr 06, 2008 Posts: 483

To be honest Im sort of stuck on deciding to go with jquery UI or not?

I don't want to go to far if I have to recode the whole thing Sad

Palbin · Posted: Sun Dec 28, 2008 7:59 pm

I say switch to UI because I think UI is used already with your_account area.

I can try to help you with this if you want. Maybe tomorrow I will download what you have to far.

testy1 · Involved Joined: Apr 06, 2008 Posts: 483

arrrrrrrrrrrrrrrrrrrrrrgh, is it to much to ask for someone to lie lol

I think your right

Palbin · Posted: Sun Dec 28, 2008 10:31 pm

I forgot to say that I agree that the code in the other editor was a mess Smile

Of course I haven't seen yours Wink

kguske · Site Admin Joined: Jun 04, 2004 Posts: 6044

First, RNYA doesn't use jQuery UI - yet. But it's definitely in the works, and the main reasons are:
- it is actively developed and will continue to be enhanced
- it is supported by the ThemeRoller utility which provides a standard way to enhance appearance (think themes)

Frankly, we might want to consider the same approach for updating Nuke's theme...old themes would still work, but new themes could take advantage of CSS simply by using standard class names.

Next, testy1 - it's looking really nice. I'm trying to clean up some stuff for the next release, but might be able to assist after that.

I'm not against leaving the inactive blocks in their prospective places among active blocks, though there would need to be an icon to activate / inactivate a block. Also, does the Add a block function allow you to specify which column, or does it default?

Another nice touch would be to add an icon that indicates if the block is a block file, HTML or RSS.

Now...if we could just figure out a way to make it module-specific (and / or content specific), it would be really slick! But even without that, this certainly makes the process more intuitive.

Has fkelly seen this??

Palbin · Posted: Sun Dec 28, 2008 11:24 pm

I think a pop-up would be nice for adding blocks instead of loading a new page. Not sure of the exact methodology to do that but it sounds good Smile

kguske · Site Admin Joined: Jun 04, 2004 Posts: 6044

There are lots of lightbox-type scripts for jQuery that would support a pop-up block editor.

testy1 · Involved Joined: Apr 06, 2008 Posts: 483

ok so that has cleared up a few things for me....

1. It needs to be converted over to the UI interface
2. Needs an icon or a means of displaying what type the block is i.e block file, HTML or RSS.

kguske,

The Add block function is the default one included with RN i just moved it to its own function.The only jquery at the moment is the ordering of the blocks.Im not sure how far I will be able to take this but I will take it as far as I can and then hand it over to the RN team if they want it.

As for the popup feature I am already using slimbox on my intranet which seems to work very nicely with RN.

testy1 · Involved Joined: Apr 06, 2008 Posts: 483

Not sure if im doing the right way but its working

Code:

$result = $db->sql_query('SELECT bid, bkey, title, content, url, bposition, weight, active, blanguage, blockfile, view, groups FROM ' . $prefix . '_blocks WHERE active = 1 ORDER BY weight');
$blocks = array();
while ($row = $db->sql_fetchrow($result)) {
   $blocks[$row['bposition']][] = $row;
}

echo "<table border='0' width='100%'>\n";
echo "<tr><td width='100%' align='center'>";
echo "<center><strong>" . _BLOCKSADMIN . "</strong><br />
<img src=\"images/blocks/li.png\" border=\"0\" alt=\"\" /><a href='" . $admin_file . ".php?op=JQBlocksAdd'> " . _ADDNEWBLOCK . "</a><br /></center>
</td></tr></table><table border='0' width='100%'>\n<tr><td width='25%' align='center' valign='top'>\n";

echo "<table border='0'>\n";
echo "<tr><td align='center'>\n";
echo "<strong>" . _LEFTBLOCK . "</strong>";
echo "<ul id=\"l\" class=\"sortable\">";
for ($i = 0, $count = count($blocks['l']); $i < $count; $i++) {
   if (!empty($blocks['l'][$i]['content'])) {
      $title = 'title="HTML Block"';
   } elseif (!empty($blocks['l'][$i]['url'])) {
      $title = 'title="RSS Block"';
   } else {
      $title = 'title="Block File"';
   }
   if (($blocks['l'][$i]['groups'] > 0) || ($blocks['l'][$i]['view'] > 0)) {
      echo '<li style="color: ' . $textcolor1 . ';" ' . $title . ' class="activegroup">';
   } else {
      echo '<li style="color: ' . $textcolor1 . ';" ' . $title . ' class="sortable">';
   }

   echo '<input type="hidden" value="' . $blocks['l'][$i]['active'] . '" />';
   echo '<table width="100%"><tr>';
   echo '<td width="75%" align="center">' . $blocks['l'][$i]['title'] . '</td>';
   echo '<td align="right" width="25%">';
   echo '<a href="' . $admin_file . '.php?op=JQBlocksEdit&bid=' . $blocks['l'][$i]['bid'] . '">';
   echo '<img src="images/blocks/edit.png" border="0" title="' . _EDITBLOCK . '" alt="' . _EDITBLOCK . '" /></a> ';
   echo '<a href="javascript:JQBlocksDelete(\'' . $blocks['l'][$i]['bid'] . '\', \'l\');"><img src="images/blocks/delete.png" border="0" title="' . _DELETEBLOCK . '" alt="' . _DELETEBLOCK .
      '" /></a></td></tr></table></li>';
   echo '<input type="hidden" value="' . $blocks['l'][$i]['active'] . '" />';
}
echo "</ul>";
echo "</td></tr>\n";
echo "</table>\n";

Ive just made the block type a title tag for now here's an updated screenshot

More to come

kguske · Site Admin Joined: Jun 04, 2004 Posts: 6044

The title tags are nice, but having an icon would make it even easier and immediate to identify the type of block.

Regarding the lightbox / popup block editor, one issue will be refreshing the screen after adding a block.

Just had another thought...it would be really cool if you could preview the block by hovering over it. That's not a big benefit though, since you already see at least the left blocks while viewing the block maintenance page.

Palbin · Posted: Mon Dec 29, 2008 7:27 am

This is just a thought concerning the page refresh upon editing. Maybe use ajax to refresh the column of the block you are editing?

I think doing a hover thing to preview the blocks wouldn't be to hard. Another use of jQuery Smile

fkelly · Posted: Mon Dec 29, 2008 11:56 am

Quote:

Has fkelly seen this??

Geez. Holidays for a couple of days and I'm totally out of touch. I will have to look at this after the new year, I just don't have time to sit at the computer right now -- actually I have to take my laptop apart and try to reinstall a cd drive.

I guess my great blocks reordering project is only destined to have been relevant for one release but that's fine if we can create a wysiwyg version that is easier to use and just as fast. Somewhere Kguske has started another thread on how we load Jquery and I think this ties in to that also. I would love to have some example code for what we do to use Jquery plug-ins in the RN environment. I am hoping that we will standardize on Jquery too and also have some standards for which plug-ins we use for each separate purpose so we don't all go off in different directions.

Anyway I will download this as soon as I can get to it and post back any reactions -- and if I can help test over the next month or two I will be happy to contribute by doing so.

jestrella · Posted: Mon Dec 29, 2008 3:16 pm

OMG... this is looking really nice... will download a copy ans start testing it as time allows. Keep up the good work.

testy1 · Involved Joined: Apr 06, 2008 Posts: 483

ok I was able to add the icon

Only registered users can see links on this board!
Get registered or login to the forums!

Palbin · Posted: Mon Dec 29, 2008 5:10 pm

fkelly wrote:

I am hoping that we will standardize on jQuery too and also have some standards for which plug-ins we use for each separate purpose so we don't all go off in different directions.

I think for starters we should use jQuery UI and its many pieces.

testy1 · Involved Joined: Apr 06, 2008 Posts: 483

well it took all day but its now using the UI interface and I have added a rough pop up for block info....

just switching over to the UI interface has fixed all the cross browser problems Smile

Only registered users can see links on this board!
Get registered or login to the forums!