SJPPLOG - Scotts jQuery PPLOG

[jamesbond]

Thanks Scott for the update.

Apology, my earlier patch for apostrophe and quotes were half-assed.
Instead of s/'/'/; one should have s/'/'/g; (note the extra "g").
Same with quotes, instead of s/"/"/; one should have s/"/"/g; (note the extra "g").

The archiving doesn't work for me (it says "no post in archive"), I made it work by replacing
my @dates = map { split(/"/, $_); @_[2].'|'.@_[4].'|'.@_[0]; } @entries;
with
my @dates = map { my @stuff = split(/"/, $_); @stuff[2].'|'.@stuff[4].'|'.@stuff[0]; } @entries;.

[efiabruni]

I wrote a contact me page for the pe_pplog, which can also be used in this blog. It looks like this. It uses the email address from $config_sendMailWithNewCommentMail and mailto has to be installed. $config_contactAddress is added to the $config vars for the contact info and a "Contact me" link in the main menu.

[sc0ttman]

I wrote a contact me page for the pe_pplog, which can also be used in this blog. It looks like this. It uses the email address from $config_sendMailWithNewCommentMail and mailto has to be installed. $config_contactAddress is added to the $config vars for the contact info and a "Contact me" link in the main menu.

That's awesome , great.. Also, have you tested the changes above by jamesbond? Do you they work for you too? If so, I'm gonna add them into 1.5 when its done (with your contact page too)..

[efiabruni]

jamesbonds bugfixes are working for me, I actually never had a problem with the map{} in the archive, I guess it depends on the version of perl?

I noticed that the wysiwyg editor (niceedit) isn't working, apparently it should be:

Code: Select all

<script src="http://js.nicedit.com/nicEdit-latest.js" type="text/javascript"></script>

instead of:

Code: Select all

 <script src="http://js.nicedit.com/nicEdit.js" type="text/javascript"></script>

according to http://niceedit.com

I took it out of my blog completely, so I cannot really test if that is true...

I'm also atm creating a style sheet for mobile devices, would you be interested in that? It does need some more testing, though.

[jamesbond]

Yeah, it could be. Mine is perl 5.14.2 and 5.10.1.

Nicedit works for me. Actually I forgot about it totally and is about to ask whether someone could create bbcode for "colour" and "fontsize", then I saw this post Perhaps I should re-activate the html editor, but I still want to the bbcode for the lightbox and and code (which is gone once I turned on the html editor).

I created a simple stat like the one in here: https://planet.gnome.org/ ==> scroll to the bottom of the page and you'll see a world map showing where the visits come from. Let me know if any of you are interested. The web server must have "gd" library installed, also "netpbm", and you must have at least 50MB to hold the geocode database in your webspace as the IP address geocoding is done locally - there is no external queries to third party geocoding services

EDIT: Need to pull out my above comment about nicedit. It works, yes you can edit and enter text, but the resulting post is not right. That's because of the aggresive quote transformation (" change the " etc). The quote transformation should be disabled when nicedit is used. I'm not sure however how it will impact the field splitting if the transformation is disabled, because a single quote in the blog post can screw up the field numbering ...

[efiabruni]

in my blog I use a style button for any styling needs one might have:

example

Code: Select all

sub bbcode
s/\{style=(.+?)\}(.+?)\{\/style\}/<p style=$1>$2<\/p>/gi; 

Code: Select all

sub bbdecode
s/\<p style=(.+?)\>(.+?)\<\/p\>/\{style=$1\}$2\{\/style\}/gi;

button:

Code: Select all

<input type="button" style="color:red" onClick="surroundText(\'{style=text-size:;color:}\', \'{/style}\', document.forms.submitform.content); return false;" value="style" />

if you exchange the curly brackets with [] this should work in the SJPPLOG as well.

[jamesbond]

Thanks efia, that's a good one. I'll be putting that to my blog too.

I found out nicedit problem - we need to unquote the ' and &quote; before displaying the html. The same problem also affected your styles, so I was kind of "forced" to fix it

Here is a patch for sjpplog which includes efia's styles + fix for the unquoting + fix for image bbcode (which otherwise, if you put two of them together side by side, all will be lost upon editing, except the final one).

[sc0ttman]

Thanks efia, that's a good one. I'll be putting that to my blog too.

I will add that to SJPPLOG, but not the simple stat thing - i run sjpplog in akita (it's included by default) so i am trying to keep it really lightweight...

[efiabruni]

I forgot to add UTF-8 support to the contact patch,
accept-charset="UTF-8" needs to be added to the contact form.

jamesbond: I would be interested to see the stats script

[jamesbond]

efia, give me sometime to tidy up the code, then I'll upload it. Watch this space

sc0ttman, the stat script is actually very tiny - all together is 14K. The map background (which I get from wikimedia) is a 130K png file. It is the data file which is huge (36 MB as it is now, I manage to 'compress' it a little) but you shouldn't include these with akita

[jamesbond]

efia, give me sometime to tidy up the code, then I'll upload it. Watch this space

Ok the sources are here.

[efiabruni]

Thank you.
This looks...extensive and impressive, I will see if I can make it into a plugin for my blog, but I think not for the next release

[efiabruni]

For mobile devices (esp phone) the normal blog layout is a bit awkward to use, I tried to make it a bit friendlier, so now on mobile phones it should look something like the screenshot below.

To make the slide out menu I used JQuery, but it is possible to have a similar effect with adding

Code: Select all

div#menu:hover div.show {display:block; text-align:center;}

in the mobile style sheet, only "hover" is not always supported in mobile devices see here.

I had to add some divs and classes to the html of the blog (and of course the JQuery script) to make it work, see diff file below, as well as add the link for the menu.

Because I like playing around with css scripts I also added a @print style to the original css...


I don't have an abundance of mobile phones, so this is not tested thoroughly

[sc0ttman]

I'm in the process of adding most of this to SJPPLOG, but I have a question or 2 for efiabruni about the updates ..

1. Does the contact page you created for pe_pplog require the sendmail binary to be installed and working?

I ask because akita has no sendmail binary (not even a busybox one) and so I found this, which is a PERL only solution for sending email: http://search.cpan.org/dist/Mail-Sendmail/ ..

I installed it with this command:

Code: Select all

perl -MCPAN -e "install Mail::Sendmail"

I've yet to test it, but seems widely used and reliable by all accounts.
Is this what you're using in your code?

....

2. Do you have any alternative code for your dropdown menu in the mobile theme? ...

Cos I tested your site on my appletart phone and it works mostly fine, except the menu doesn't drop down in safari or any other browser i tried on the phone (all webkit rendering based i believe) ... when I click on the 'Menu' link, the entire page simply reloads 'as is'... :/

[efiabruni]

Yes, the contact page relies on sendmail, I basically used the same setting as for "send email with comments". I would love to see the perl solution because sendmail is meh.
Is it possible that you have either javascript turned off in your phone or Jquery disabled in the PPLOG? There is a CSS solution as I wrote in my post (I usually prefer CSS solutions to Javascript ones), but it is unreliable, because it relies on the hover effect.

But if you want to try, just add the CSS bit I wrote in the previous post to the mobile.css and get rid of the JQuery code in index.pl

[jamesbond]

Following efia's excellent "style" bb code, I added this "class" bbcode so that I can use pre-defined CSS classes instead of typing a long CSS string every time I want to change colours or font-size etc.

In bbcode, add:

Code: Select all

s/\[class=(.+?)\](.+?)\[\/class\]/<span class=$1>$2<\/span>/gi; # james class

In bbdecode, add:

Code: Select all

s/\<span class=(.+?)\>(.+?)\<\/span\>/\[class=$1\]$2\[\/class\]/gi; # james class

I considered adding [h2] and [h3] codes to make <h2> and <h3> as well, but I figured I could achieve the same thing with the "class" bbcode (like, [class=h2]heading2[/class]).

[sc0ttman]

updated to 1.5
thanks to efiabruni and jamesbond for all their updates!

changelog for 1.5:

- fixes in single quotes
- fixes for unquoting stuff (for nicedit?)
- added [style] and [center] bcode
- fixed order of archive entries,
- moved config and funcs to external files..
- added $config_currentStylesheet..
- added admin page to edit config file & stylesheet.. (link to admin page in menu)
- fallback to default css file (style1.css) & print error, if needed..
- added 'class' to bbcode..
- added .error class in style1.css

i still plan to do add:

- mobile css
- contact page without sendmail

screenshot of admin page: http://i.imgur.com/WUn3NFT.png

[efiabruni]

I see you found my editConfig page did it work ok for you or did you find any kinks? On my admin page I had added a test for if there is a syntax error in the Config file, basically

Code: Select all

do "pe_Config.pl" or print ""There is something wrong with your Config. file using pe_Config.pl.bak. The blog is working, but maybe not how you want to?";

Did you get the mobile css to work? It is working for me, I tested it on several Iphones I could get my hands on and my Android and it was working, but I did notice that I had to add the line

Code: Select all

<meta name="Viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scaleable=yes"/>

to the header to make it display in a readable font size.

[sc0ttman]

I see you found my editConfig page did it work ok for you or did you find any kinks? On my admin page I had added a test for if there is a syntax error in the Config file, basically

Code: Select all

do "pe_Config.pl" or print ""There is something wrong with your Config. file using pe_Config.pl.bak. The blog is working, but maybe not how you want to?";

Yeah it works fine, the only the difference is I integrated it into the main pup_pplog.pl file, keeping it in one file, so that it follows the same coding style as the rest of the script, and the other bits i added before, i did the same way, so it was the easiest way for me.

Did you get the mobile css to work? It is working for me, I tested it on several Iphones I could get my hands on and my Android and it was working, but I did notice that I had to add the line

Code: Select all

<meta name="Viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scaleable=yes"/>

to the header to make it display in a readable font size.

I haven't had a good play with it since last time - i boot a 'fresh' install each time, and dip into whatever.. I plan to add it soon... will be doing other stuff for a bit, then come back to it.. thanks for all your updates and stuff, very useful!

BTW, i actually have planned for a long time to integrate a csv2<table> <table>2sortable, table2graph/csv2graph etc (i have the libraries ready to test), and then ultimately to have something like:

[chart="pie"]/path/to/file.csv[/chart]

[chart="bar"]/path/to/file.csv[/chart]

[table]/path/to/file.csv[/table]

[sortable]/path/to/file.csv[/sortable]

and so on... the libraries I might use are:

csv2table, graphtable/cubism/tablechart/etc, jquery.tablesorter,

And I also found a nice little PERL calendar called "calendar3", or another lighter one if i find it, which I'm vaguely planning to integrate nicely with posts/archives somehow.... at some point...

[sc0ttman]

updated to 1.6

- added support for mobile css themes



..screenshot says 1.5, but it's 1.6 that is running on the phone