SJPPLOG - Scotts jQuery PPLOG

A home for all kinds of Puppy related projects
Message
Author
efiabruni
Posts: 69
Joined: Tue 18 Oct 2011, 15:55

bbcode for color and font-size

#21 Post by 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
Posts: 3433
Joined: Mon 26 Feb 2007, 05:02
Location: The Blue Marble

#22 Post by 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 &apos; 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).
Attachments
styles-unquote.patch.gz
gunzip first
(1.54 KiB) Downloaded 352 times
Fatdog64 forum links: [url=http://murga-linux.com/puppy/viewtopic.php?t=117546]Latest version[/url] | [url=https://cutt.ly/ke8sn5H]Contributed packages[/url] | [url=https://cutt.ly/se8scrb]ISO builder[/url]
User avatar
sc0ttman
Posts: 2812
Joined: Wed 16 Sep 2009, 05:44
Location: UK

#23 Post by sc0ttman »

jamesbond wrote: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...
[b][url=https://bit.ly/2KjtxoD]Pkg[/url], [url=https://bit.ly/2U6dzxV]mdsh[/url], [url=https://bit.ly/2G49OE8]Woofy[/url], [url=http://goo.gl/bzBU1]Akita[/url], [url=http://goo.gl/SO5ug]VLC-GTK[/url], [url=https://tiny.cc/c2hnfz]Search[/url][/b]
efiabruni
Posts: 69
Joined: Tue 18 Oct 2011, 15:55

stats

#24 Post by 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
Posts: 3433
Joined: Mon 26 Feb 2007, 05:02
Location: The Blue Marble

#25 Post by 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 :)
Fatdog64 forum links: [url=http://murga-linux.com/puppy/viewtopic.php?t=117546]Latest version[/url] | [url=https://cutt.ly/ke8sn5H]Contributed packages[/url] | [url=https://cutt.ly/se8scrb]ISO builder[/url]
jamesbond
Posts: 3433
Joined: Mon 26 Feb 2007, 05:02
Location: The Blue Marble

#26 Post by jamesbond »

jamesbond wrote:efia, give me sometime to tidy up the code, then I'll upload it. Watch this space :)
Ok the sources are here.
Fatdog64 forum links: [url=http://murga-linux.com/puppy/viewtopic.php?t=117546]Latest version[/url] | [url=https://cutt.ly/ke8sn5H]Contributed packages[/url] | [url=https://cutt.ly/se8scrb]ISO builder[/url]
efiabruni
Posts: 69
Joined: Tue 18 Oct 2011, 15:55

stats

#27 Post by efiabruni »

Thank you. :D
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
Posts: 69
Joined: Tue 18 Oct 2011, 15:55

style sheet for mobile devices

#28 Post by 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 :)
Attachments
style.css.gz
updated original style sheet
(1.08 KiB) Downloaded 323 times
mobile.diff.gz
diff file for SJPPLOG v1.4
(937 Bytes) Downloaded 339 times
mobile.css.gz
mobile css file
(894 Bytes) Downloaded 319 times
Screenshot-4.png
(99.46 KiB) Downloaded 492 times
User avatar
sc0ttman
Posts: 2812
Joined: Wed 16 Sep 2009, 05:44
Location: UK

#29 Post by 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'... :/
[b][url=https://bit.ly/2KjtxoD]Pkg[/url], [url=https://bit.ly/2U6dzxV]mdsh[/url], [url=https://bit.ly/2G49OE8]Woofy[/url], [url=http://goo.gl/bzBU1]Akita[/url], [url=http://goo.gl/SO5ug]VLC-GTK[/url], [url=https://tiny.cc/c2hnfz]Search[/url][/b]
efiabruni
Posts: 69
Joined: Tue 18 Oct 2011, 15:55

mobile theme and sendmail

#30 Post by 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
Posts: 3433
Joined: Mon 26 Feb 2007, 05:02
Location: The Blue Marble

#31 Post by 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]).
Fatdog64 forum links: [url=http://murga-linux.com/puppy/viewtopic.php?t=117546]Latest version[/url] | [url=https://cutt.ly/ke8sn5H]Contributed packages[/url] | [url=https://cutt.ly/se8scrb]ISO builder[/url]
User avatar
sc0ttman
Posts: 2812
Joined: Wed 16 Sep 2009, 05:44
Location: UK

#32 Post by 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
Attachments
sjpplog-1.5-akita.pet
(88.6 KiB) Downloaded 308 times
[b][url=https://bit.ly/2KjtxoD]Pkg[/url], [url=https://bit.ly/2U6dzxV]mdsh[/url], [url=https://bit.ly/2G49OE8]Woofy[/url], [url=http://goo.gl/bzBU1]Akita[/url], [url=http://goo.gl/SO5ug]VLC-GTK[/url], [url=https://tiny.cc/c2hnfz]Search[/url][/b]
efiabruni
Posts: 69
Joined: Tue 18 Oct 2011, 15:55

nice

#33 Post by 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.
User avatar
sc0ttman
Posts: 2812
Joined: Wed 16 Sep 2009, 05:44
Location: UK

Re: nice

#34 Post by sc0ttman »

efiabruni wrote: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... ;)
[b][url=https://bit.ly/2KjtxoD]Pkg[/url], [url=https://bit.ly/2U6dzxV]mdsh[/url], [url=https://bit.ly/2G49OE8]Woofy[/url], [url=http://goo.gl/bzBU1]Akita[/url], [url=http://goo.gl/SO5ug]VLC-GTK[/url], [url=https://tiny.cc/c2hnfz]Search[/url][/b]
User avatar
sc0ttman
Posts: 2812
Joined: Wed 16 Sep 2009, 05:44
Location: UK

#35 Post by sc0ttman »

updated to 1.6

- added support for mobile css themes

Image

..screenshot says 1.5, but it's 1.6 that is running on the phone
Attachments
sjpplog-1.6-akita.pet
(89.53 KiB) Downloaded 344 times
[b][url=https://bit.ly/2KjtxoD]Pkg[/url], [url=https://bit.ly/2U6dzxV]mdsh[/url], [url=https://bit.ly/2G49OE8]Woofy[/url], [url=http://goo.gl/bzBU1]Akita[/url], [url=http://goo.gl/SO5ug]VLC-GTK[/url], [url=https://tiny.cc/c2hnfz]Search[/url][/b]
User avatar
koulaxizis
Posts: 452
Joined: Sun 17 Jul 2011, 18:43
Location: Greece
Contact:

#36 Post by koulaxizis »

I have noticed a weird bug on the original Pplog. When a user puts an apostrophe in the comments, "breaks" the comment into two, creating two comments with the content until the apostrophe in the first half and the rest of the content in the second half. Does SjPplog have the same problem? Any ideas how to solve it?
[b]Christos Koulaxizis[/b]
[i]Woof woof from Greece![/i]

[color=darkred][url=https://sourceforge.net/projects/puppystuff/][ Puppy Stuff Repository ][/url][/color]
efiabruni
Posts: 69
Joined: Tue 18 Oct 2011, 15:55

security issue

#37 Post by efiabruni »

There is a security issue with having bbcode enabled in comments in all the pplogs (original, SJPPlog and the pe_pplog)

Due to very admissive parsing of the bbcode it is possible to insert javascript in comments when posting a link or a picture. Basically one can enter: [ u r l=javascript:maliciouscode]click![/ u r l]
See last comment on http://pplog.scottjarvis.com/?viewDetailed=00021 for an example. This makes comments vulnerable to xss attacks.

My advise is to disable bbcode on the comments of ALL versions of the PPLOG

What is needed:
URL / SRC validating and escaping
strict rules for which attributes are allowed, validating and escaping
additional html escaping
Post Reply