Ravens PHP Scripts: Forums
 

 

View next topic
View previous topic
Post new topic   Reply to topic    Ravens PHP Scripts And Web Hosting Forum Index -> Modules
Author Message
testy1
Involved
Involved



Joined: Apr 06, 2008
Posts: 484

PostPosted: Sat Dec 27, 2008 7:52 pm Reply with quote

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 interface but have read some stuff since that recommends using the Jquery UI 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: JQuery Block Editor v0.2

and here is a screenshot so far;

Image


Last edited by testy1 on Sun Dec 28, 2008 1:13 am; edited 1 time in total 
View user's profile Send private message
kguske
Site Admin



Joined: Jun 04, 2004
Posts: 6432

PostPosted: Sat Dec 27, 2008 8:18 pm Reply with quote

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

_________________
I search, therefore I exist...
nukeSEO - nukeFEED - nukePIE - nukeSPAM - nukeWYSIWYG
 
View user's profile Send private message
kguske







PostPosted: Sat Dec 27, 2008 8:33 pm Reply with quote

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







PostPosted: Sat Dec 27, 2008 9:13 pm Reply with quote

I started out using this [ Only registered users can see links on this board! Get registered or login! ] 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







PostPosted: Sun Dec 28, 2008 1:13 am Reply with quote

UPDATED

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

Download: JQuery Block Editor v0.2

Screenshot

Image
 
jakec
Site Admin



Joined: Feb 06, 2006
Posts: 3048
Location: United Kingdom

PostPosted: Sun Dec 28, 2008 4:18 am Reply with quote

This is looking really good Testy1, keep up the good work. Very Happy
 
View user's profile Send private message
Guardian2003
Site Admin



Joined: Aug 28, 2003
Posts: 6799
Location: Ha Noi, Viet Nam

PostPosted: Sun Dec 28, 2008 9:27 am Reply with quote

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.
 
View user's profile Send private message Send e-mail
Palbin
Site Admin



Joined: Mar 30, 2006
Posts: 2583
Location: Pittsburgh, Pennsylvania

PostPosted: Sun Dec 28, 2008 11:46 am Reply with quote

Looks similar to the "ajaxBlocksEditor" from aman at [ Only registered users can see links on this board! Get registered or login! ] (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?

_________________
"Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it." — Brian W. Kernighan. 
View user's profile Send private message
testy1







PostPosted: Sun Dec 28, 2008 5:06 pm Reply with quote

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







PostPosted: Sun Dec 28, 2008 5:12 pm Reply with quote

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







PostPosted: Sun Dec 28, 2008 7:59 pm Reply with quote

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







PostPosted: Sun Dec 28, 2008 8:26 pm Reply with quote

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

I think your right
 
Palbin







PostPosted: Sun Dec 28, 2008 10:31 pm Reply with quote

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







PostPosted: Sun Dec 28, 2008 11:08 pm Reply with quote

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







PostPosted: Sun Dec 28, 2008 11:24 pm Reply with quote

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







PostPosted: Sun Dec 28, 2008 11:40 pm Reply with quote

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







PostPosted: Mon Dec 29, 2008 5:15 am Reply with quote

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







PostPosted: Mon Dec 29, 2008 5:45 am Reply with quote

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&amp;bid=' . $blocks['l'][$i]['bid'] . '">';
      echo '<img src="images/blocks/edit.png" border="0" title="' . _EDITBLOCK . '" alt="' . _EDITBLOCK . '" /></a>&nbsp;';
      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

Image

Image

More to come
 
kguske







PostPosted: Mon Dec 29, 2008 6:51 am Reply with quote

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







PostPosted: Mon Dec 29, 2008 7:27 am Reply with quote

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
Former Moderator in Good Standing



Joined: Aug 30, 2005
Posts: 3312
Location: near Albany NY

PostPosted: Mon Dec 29, 2008 11:56 am Reply with quote

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.
 
View user's profile Send private message Visit poster's website
jestrella
Moderator



Joined: Dec 01, 2005
Posts: 593
Location: Santiago, Dominican Republic

PostPosted: Mon Dec 29, 2008 3:16 pm Reply with quote

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

_________________
"For those whom have not reach the sky... Every mountain seems high"

Best Regards
Jonathan Estrella [ Only registered users can see links on this board! Get registered or login! ] 
View user's profile Send private message Visit poster's website
testy1







PostPosted: Mon Dec 29, 2008 4:41 pm Reply with quote

ok I was able to add the icon

Image
 
Palbin







PostPosted: Mon Dec 29, 2008 5:10 pm Reply with quote

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







PostPosted: Tue Dec 30, 2008 6:49 am Reply with quote

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

Image
 
Display posts from previous:       
Post new topic   Reply to topic    Ravens PHP Scripts And Web Hosting Forum Index -> Modules

View next topic
View previous topic
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
You can attach files in this forum
You can download files in this forum


Powered by phpBB © 2001-2007 phpBB Group
All times are GMT - 6 Hours
 
Forums ©