HTML, CSS, JS and other unsorted stuff

The Buttonator

Saturday, June 26, 2010 12:00:00 PM

, ,

Last changed: 2010-09-14
Last changes (latest change on top):
  • Corrected error if % was used for modulo in JavaScripts.
  • Improved description, added links.
  • Compacted Icon Preview, remove Icons when not visible.
  • Improved JS Detection. Background of input field becomes light yellow when JS detected
  • URI encoding for forum links ans href anchors was wrong and nobody noticed it wink
  • Javascript string cleaner rebuild

Current version: 0.9.21

Buttonator here at my.opera or at my private webspace.

Buttonator is a stand-alone HTML + Javascript document (apart from the SVG Image used for background). It not only allows to use the standard Opera commands, but formatted Javascript code or bookmarklets, too. If you find it useful, you should save it and use it locally. Due to a limitation of my.opera "The current form" link works only if you have saved it locally. When you bookmark that link and try to open the page from my.opera by using that link the referer is stripped and you'll see the obvious warning page.

If there is anything unclear in how to use the Buttonator, just drop me a line in the comments smile

Please ...


... take a look in the code if you can read and write Javascript. The script works, but I am not good in Javascript, there should be enough room for improvements :wink:
... tell me, if there are any problems when generating a button with it or with the generated buttons.

Thank You!

I've just copy&pasted some scripts together and wrote some additional lines to create a button generator. All credits go to the authors of the original scripts, all mistakes and faults are my own. For credits see the bottom of the linked page. All their original scripts work flawlessly.

ToDo


Add the new Opera 10.50+ commands and icons.


BTW:


Now that I am ready I found a list of button generators posted by Vectronic in the forums - isn't it always like that?
Just after you have done something, you find out that there are several other people, who did a similar thing. There seems to be a need for such things ...

My dream:


All those fantastic people come together and build the best and easiest to use button generator ever seen ...

I deleted the whole blog by accident and all the comments were gone too. Here the

Restored Comments:

Philipp 26. June 2010, 19:06:
Gratulation zum Button Generator. Wenn du noch etwas Platz einsparen willst mit den Icons, ich habe gesehen, dass einige Icons mehrfach bzw. in mehreren Größen vorhanden sind. Wenn du alle doppelten heraus nimmst sparst du mindestens eine Zeile ein.
Weiterhin sind die Textfelder bei 2-nd parameter, Button name, Icon alias kürzer, ich weiß nicht ob das beabsichtigt ist, aber ich würde alles gleichlang machen.

Ich habe übrigens einen Opera Reader Button damit erstellen können, allerdings nur einen einfachen. Die Webseite wird dann in die Reader Ansicht konvertiert und um zur Seite zurückzukehren muss man auf "reload original Page". Schaus dir mal an, ist aber nicht offline verfügbar.


Button

QuHno 26. June 2010, 19:16:
Nein, sie sind nicht doppelt, es sind die .selected und .hover usw. :wink:

Leider erkennt man den Unterschied bei der Original Skin erst, wenn sie auf der Skin sind, auf dem weißen Hintergrund funktioniert das nicht. Du siehst ja dabei die Bilder Deiner eigenen Skin, bei einer anderen Skin kann der Unterschied deutlich größer ausfallen. :wink:

Die unterschiedlichen Größen sind beabsichtigt (behaupte ich jetzt mal), weil man sonst nur sehr schwer Code editieren kann, wenn man z.B. Javascript beim ersten Parameter eingibt.

Edit: Hab's aber mal geändert. Es vergrößert sich allerdings direkt wieder um 2 Zeilen, wenn man etwas eingibt, dafür habe ich noch keine Lösung gefunden.

z@h3k 27. June 2010, 22:17:


metude 28. June 2010, 09:34:
Nice and usefull... I'll share on my opera blog...

QuHno 28. June 2010, 20:00:
@ z@h3k & metude:
@ Phillipp and all CSS Gurus out there:
Problem



Vectronic 3. July 2010, 23:54:
You might want to use a different background image for the action sections ("Pagebar Thumbnail Button Skin") because for some skins, thats a rather dark image, which makes the text nearly invisible (black on black)

So you might want to use something like "Cycler Page Button Skin.selected" which is a bit more consistent, or possibly apply opacity to it {opacity:0.7} or something, in case the image is dark, the text won't be completely invisible. You could also get a bit more experimental, and use text-shadow (using a light color), but that will fail on earlier versions of Opera. Or do what I did for the "Headers" on my main page, and have the ability to change them, considering you are using them in an a way that immediately affects the usability of the site, you might want to make the options a little less hidden than mine though...lol

Regarding the CSS/Select thing, I believe that's "standard" behavior, the sizing is usually set by using "size" (number of visible options) since it automatically prefers to be "one text line high" per option visible, and using padding/margin to expand around that.

You could probably get around it by using min-width and min-height, if you want to avoid javascript.

Off-Topic, but getComputedStyle is usually slightly quicker than offsetWidth/Height... in this case it doesn't matter, but for getting sizes of a lot of items in a series it makes a difference (for instance on my IconList it saves 1 or 2 seconds)

"ToDo"... I'm not sure how or where you are getting your lists from, but you are welcome to use any of my lists.

I won't link to them, but I have Icon lists from 3.x to 10.6, and Action lists from 7.54 to 10.6 (will create the earlier ones when I get bored enough, lol), If you want them.

QuHno 4. July 2010, 09:51:
Thank You :smile:
That adds much to my ToDo list :smile:

Background:
I think I'll exchange that with a little bit of CSS3 and don't use a skin image at all - or is there a way to use the UI colors for the text?
That would be the optimum solution IMHO.
BTW: Couldn't get "clip" to work with -o-skin images - no problem with normal images ...

Headers:
... uhm... I'll have to look into the source of your page, at the moment I don't know what you mean.

CSS for select boxes:
That is a whole bunch of crap, absolutely inconsistent between the browsers. In this case no problem, because I only have to deal with Opera, but I would try to avoid as much select box styling as I can on any cross browser web page.

BTW: I didn't use the JS on the Buttonator page, that was just a very rudimentary experiment to see what would work with other browsers. I've tested it with Opera 9.xx to 10.60, Fx 2-3, IE 6-8 and various Webkit based browsers (I like VMs :wink:) and thanks for the (min|max)-width tipp, knew that property but didn't think about that in combination with forms at all :smile:

Computed-style:
I'll give it a try in one of the next versions, at the moment I am testing a better JS escape algorithm based on the principle of the remove comments part. (I did say I am not good in JS, it takes me much time to rework the scripts :wink:)

Icon list and command list:
I used some RexExp on the 10.60 skin.ini for the images and the toolbar, menu and keyboard INIs for the commands :D

I think Icon lists of 9 and 10 should be enough. I personally hated 8.x, and I must say I don't care for the older versions despite the fact that I liked them - but it is time to move on. Opera is not MS and I don't need to be backwards compatible in the UI - if I don't like the new one I change it :wink:

Vectronic 4. July 2010, 10:06:
Aiming for CSS only for mine as well, QuickEdit, and IconList use all CSS excluding the buttons on QuickEdit, just finished changing all the buttons on the main page in a sort of experimental version, replicating IBIS Inspire progressbars (Red/Black) with CSS.

Headers: the bar behind the titles like "? Tips & Information" which can be changed in the options (click "More...")

I'm not particularly good at JS either, nor am I very fond of it... but I like to experiment.

RegEx is basically how I collect my lists too, although by building little VB apps so I can do a bit more with the results (normalizing, sorting, comparing).

I haven't actually bothered to sift through all my logs, but generally about 90% of the users are using 10.6, about 8% are using 10.54, and the rest is a mix of 10.1, 9.64, and either masked Opera's, or other browsers, so it's fairly safe to stick with the latest two versions whatever they may be. I only create/keep the older lists out of interest more than practicality for people who use the site.

metude 4. July 2010, 17:54:
Have seen this Unite Applicaton? > http://unite.opera.com/application/651/
Nice and usefull

QuHno 4. July 2010, 19:05:
Thank you for posting the link to that Unite Application.

Yes, it is a very nice and useful Application, but it doesn't cope good with complex javascripts as button command.

Very simple, nonsensical example: This button code would return a broken button in the Unite Application:
Go to page, "javascript:alert('",nasty" nasty quote')",,"b0rked"

That is one of the reasons, why I still try to improve the routines behind the Buttonator.

There are still some little bugs in the escape sequences of complex JS if I don't replace the quote signs like I do now, but I am on it.

The other reason is: I am leaning many new things about Javascript by doing this. :wink:

metude 4. July 2010, 20:55:

Originally posted by QuHno:

The other reason is: I am leaning many new things about Javascript by doing this.


Nice way for learning...

Can you do something like that UA? Can you add an uploader to your buttonator...

If you need to a hosting. We can give you... My English is not good but my friends have a good English. You can talk them easily...



QuHno 4. July 2010, 21:25:
Sorry, no. I can't do Unite Applications, my JS knowledge is too limited for that. For example I don't know how the file I/O in Unite works ...

Thank you for the hosting offer, but I have a hoster with full v-server access and a fairly high amount of space that I can use for my experiments if I need it :smile:

Safari Reader für jeden Browser10 things I'd like to see at opera.com

Comments

Vectronic Saturday, July 17, 2010 7:57:56 PM

http://files.myopera.com/Vectronic/files/Btnator.jpg - Just to reiterate what I said earlier with an example this time:

You might want to use a different background image for the action sections ("Pagebar Thumbnail Button Skin") because for some skins, thats a rather dark image, which makes the text nearly invisible (black on black)


That's what it looks like when using IBIS Inspire as your Opera skin.

Haven't found any major problems so far, however it's not removing tab characters %09\x09 in certain situations, I'm not sure which it is, but it's either:
\x09 after an \r\n
\x09 before a alphabet character
\x09 after a punctuation/non-word character
\x09 before or after a \x09

However it is removing multiple tabs chars, \x09\x09 to just the one \x09

Should be able to test it by just copying random functions from the page source itself.

it's not really a problem, since Opera is ok with tab chars in buttons, but probably better to remove them entirely, than have "some" but not "all".

However, it could almost be a "feature" since it makes editing the button code in toolbar.ini easier, since each line is separated by a tab...lol

To remove it, I think you'd have to double-check the /\W/... so it would be:
/\W/ || /\t/ ... str[ i] = ''
which you should be able to combine into one:
/\W|\t/.test()...

In the check from Edit1... which might knock that 1% speed increase back to 0%... sad

Either that, or because str[ i] = '' then on the next char check, the previous character str[i-1] is '' so doesn't match /\W/... one of these times I'll actually look over the whole code instead of just parts of it...lol

QuHno Saturday, July 17, 2010 8:27:30 PM

That with the colors is a real skin problem. I didn't use a fixed color but "ButtonText" which should fit to a button for I use a button skin for the background wink
div.tbl_section, .result
{
  padding: 1em;
  color: ButtonText; 
  background-color: ButtonFace;
  border-width:  1px;
  border-style: solid; 
  border-color: ButtonShadow; 
  border-radius: 10px;
  background-clip: padding-box; 
  background-origin: border-box;
  background-image: -o-skin("Pagebar Thumbnail Button Skin");
}

Of cause I could remove the image completely, or exchange it with the "Push Button Skin" ...

About the single TAB - yes, I noticed it too, not in the first check but later after I updated it <sigh>
Back to the drawing board - or back to switch? wink

Vectronic Saturday, July 17, 2010 8:38:12 PM

http://files.myopera.com/Vectronic/files/Btnator2.jpg - Different "buttons", ButtonText/ButtonFace are the OS colors, -o-skin('') is treated as just an image and is unrelated to any "button" things.

Disable the background-image, and for Windows, it should be black on gray, for most Linux systems it would probably be black on sort of off-white...etc similar in general style as your [ code ] boxes here.

QuHno Saturday, July 17, 2010 8:58:06 PM

Originally posted by Vectronic:

Different "buttons"

Done before I read that bigsmile
HM... is there a way to get the Opera colors? something like -o-skin-buttonFace?

Vectronic Saturday, July 17, 2010 9:01:30 PM

I don't think so... but, while I was playing around, you could do something like this example which will make it a bit more..."fancy" or whatever.

In short:
div.tbl_section, .result{
padding: 1em;
color: #000; 
background-color: #B0B0B0;
border:2px #00A0DC solid;
border-radius: 10px;
box-shadow: inset 3px 12px 20px #EEE, inset -3px -12px 20px #808080;
margin-top:2px;
}

QuHno Saturday, July 17, 2010 9:06:11 PM

There is! Please reload, it should work now bigsmile

I wondered how xErath did it in Scribit and so I looked into his code and found this:
color: -o-skin("Pagebar Button Skin"); 
background-image: -o-skin("Pagebar Button Skin");

Here it works bigsmile

Vectronic Saturday, July 17, 2010 9:09:00 PM

Damn...I was all excited, but... nope, it's still black on black, even more so than "Pagebar Thumbnail Button Skin"

QuHno Saturday, July 17, 2010 9:16:25 PM

OK, I'll kill the background image completely and use your style - that looks nice.

CSS Gradients are still not supported, I believe(?)

BTW, do you remember the Opera 10 Alpha screen with the blue paper like background where they used SVG Images for background? That should work ...
Any chances that you have saved it somewhere so that I can look into it to see how they did it? Found it. bigsmile

Vectronic Saturday, July 17, 2010 9:18:46 PM

Originally posted by QuHno:

CSS Gradients are still not supported

Nope, but see the example I posted, it's not perfect, but better than just flat gray. Might want to tweak it a bit, I didn't really try and "perfect" it...lol

Originally posted by QuHno:

Any chances that you have saved

No, but a little Googling, should be easy to find.

QuHno Saturday, July 17, 2010 10:18:21 PM

SVG Backgrounds work ... bigsmile


... but there is still the good old "never load the same SVG File twice in different sizes" DSK-287013 bug... sad

Vectronic Saturday, July 17, 2010 10:27:32 PM

A bit better, although both CSS and SVG have speed problems (granted, I'm currently running this from 1.33GHz), for instance:
maker.expandIconList(0, this)

When the icon list is expanded, it slows down a lot when you near the bottom of the list. Not sure if it's just the size of the scaled SVG, or if it's because of the icons being drawn over it, could try setting "iconimages_0" to have it's own background (white, or whatever).

Originally posted by QuHno:

"never load the same SVG File twice in different sizes"

Maybe try converting the SVG to Base64? Either that or have the JS set the background individually for each element that uses it on page load, but that's kinda ugly.

QuHno Saturday, July 17, 2010 10:44:52 PM

I looked again into the Opera 10 Alpha Layout to see what's the difference between their SVG and mine. I saw that they didn't use absolute values for length but percentage values. I exchanged it in my image too and it works now - don't ask me why ...

That the Buttonator becomes slower with every new action is not only the fault of the SVG image but of the main concept IMHO. At the moment the full icon table is added each time a new command is added, meaning several hundred new images and all with a possible click event and calculated widths from the -o-skin. There must be a better way to set the icons or may be to reuse them from just one table only ...

Vectronic Saturday, July 17, 2010 10:59:50 PM

Originally posted by QuHno:

There must be a better way to set the icons or may be to reuse them from just one table only

You could float it around... one icon container, then the "browse" button on each action, when you click the "browse" button it: CurrentMaker.browseContainer = document.getElementById('mainbrowsecontainer'); it will automatically move it to that Maker, you might have to have a bit of clean-up though, like hiding the containers container for the Maker that previously had the browser... Am I making sense?...lol
<div id="X"><span id="Y">Text</span></div>
<div id="Z"></div>

onclick="document.getElementById('Z').appendChild(document.getElementById('Y'))"

onclick="document.getElementById('X').appendChild(document.getElementById('Y'))"
etc... the downside is, you can only have one browser, but you should only need one browser really. 
<input type="button" id="showicons_0" value="»" title="Show Icons" class="input_btn" onclick="add main icon browser, hide browser container from where it is currently"/>
etc... so you'd have like: 
<action box0>
...
<showicons onclick="show or move browser to this container"></show icons>
<browse container></browse container>
</action box0>
<action box1>
...
<showicons onclick="show or move browser to this container"></show icons>
<browse container></browse container>
</action box1>
Ok I'll just stop describing it now...lol

QuHno Saturday, July 17, 2010 11:12:44 PM

Originally posted by Vectronic:

Am I making sense?


It sounded like a good idea but it is 01:12 here and I didn't understand one word of it bigsmile

Coffee doesn't help any more so ask me again tomorrow - err ... that is your tomorrow - may be I'll understand it then lol

Vectronic Saturday, July 17, 2010 11:18:29 PM

lol... maybe i'll code up an example... the only one I have right now is QuickEdit if you click "Help", then switch between Advanced/Simple/Actions/Icons...etc... its the same main container, but whats in the container changes depending on which section is selected. So instead of that, it would just keep the same thing (icon list) but when you switch between each Maker.* a variable gets set so when you click on an icon, it puts it into the current Maker.*

Edit: Ok really quick Example

Naturally it would be more complex than that, but the basics are pretty much the same.

QuHno Saturday, July 17, 2010 11:30:15 PM

Originally posted by Vectronic:

maybe i'll code up an example...


That would help a lot smile

I have some other questions to the maker too, but I'll have to sort them out first, there are still some things I don't understand. I don't mean the code, I think I understand what it does and how it works (mostly), but things like: Is the maker code reused or is it duplicated in a kind of complete new instance or object and by doing so cluttering the memory etc. ...

Vectronic Saturday, July 17, 2010 11:45:55 PM

Made a small change to the example so it shows that "Floating Stuff" isn't just dead weight, but can actually interact with the parent. (although I wouldn't suggest the method I used, it's just an example)

Originally posted by QuHno:

Is the maker code reused or is it duplicated in a kind of complete new instance or object and by doing so cluttering the memory etc

Edit: It's duplicated, so yes... no it's not, this is what i get for not looking over the whole code.

However, the generated HTML is still copied, which can get very big, for example each maker is about 200kb, if you make a "floating" icon viewer, that would probably drop it down to 100kb, but as of yet I haven't figured out a way to make the drop down lists for Actions & Icons "float" in that way without creating a custom drop-down and all the CSS, alignment, etc problems that would create.

Here's a test... go to your Buttonator page, create a few actions... then go to the addressbar, and put this in it:
javascript:prompt('Source',document.body.innerHTML)
hit enter, then copy what's in it, paste that into a text editor...

you'll see that it's massive...

"Vectronic's Opera Buttons" the main page, is 2.39MB after it's done loading (325kb is the size of the page beforehand)... and for both the Main page, and Quick Edit, for each action that is created for "Simple Editor" it adds another 141kb (my lists are longer than yours)... which is basically the minimum size they can be without having the lists "float" between each action editor.

QuHno Sunday, July 18, 2010 8:38:40 AM

Originally posted by Vectronic:

you'll see that it's massive...

I used the Source button from the beginning and I saw that it is >2 MByte when just 10 commands are used sad

Originally posted by Vectronic:

Made a small change to the example so it shows that "Floating Stuff" isn't just dead weight, but can actually interact with the parent. (although I wouldn't suggest the method I used, it's just an example)

Not directly as onclick but integrated in the script?

I'd really like to loose all the "dead weight" of the select boxes with the commands, button names and the icon table without loosing the ability to edit in every "instance" of the the form.

I searched a little after my first cup of coffee today but most of the extending forms are more or less the same approach like this one:
http://www.quirksmode.org/dom/domform.html
All have the same problem like the form as it is now. Your example avoids that, but makes it harder tho edit non-linear or meed an edit button at each of the fieldsets (at least to my knowledge, but I'll have to do some more reading wink)

Apart from that, one of the main power hogs during typing is the keyup of the TEXTAREA. I only use it to resize the textarea, onchange would be enough if it had a fixed size ...

I think I should rebuild the whole UI generation from scratch ...

PS: I have saved your example. You take it off-line if you want smile

edit 1:
I've combined your example with the quirksmode example in a quick hack because I understand things better if I can touch them bigsmile

Vectronic Sunday, July 18, 2010 4:29:21 PM

Not directly as onclick but integrated in the script?

Well, still onclick, but something like: onclick="Function(this.id)"...etc.

Your example avoids that, but makes it harder tho edit non-linear or meed an edit button at each of the fieldsets

Not necessarily, you could have:
<div onmouseover="make this one editable">
...
</div>

one of the main power hogs during typing is the keyup of the TEXTAREA. I only use it to resize the textarea, onchange would be enough if it had a fixed size

Hmm, it does more than just check lengths and such, it's also creating "The Button", and BB and URL codes, which means it's doing everything on each onkeyup. There's basically 3 ways out of that: 1. Update area size onkeyup, update the rest onchange() which only happens when the textarea loses focus (can be problematic sometimes, if someone goes directly from textarea, and clicks "The Button", it might not have enough time to update "The Button" before the user clicks it) 2. A timer... setTimeout(DoUpdates,1000)...etc with a variable to check if there is a timer set already, if so... clear it. That way you are only updating the BB/URL/etc every second, or half second. 3. Do what I did and have auto-sizing (which fails half the time, lol) onkeyup/onchange, but make them have to press a button to "finalize" the button for Advanced Editor, the Simple Editor has more triggers so it doesn't stumble as much.

QuHno Sunday, July 18, 2010 6:12:14 PM

I am just playing around a little with the hack above, it has potential especially when I put the select boxes into the floater too and let the user type the text into input fields or select when he presses the button in the section. When finished selecting the input status will be updated etc. ...

That could be quite fast too...

BTW:
Today I made a test and looked how a user that has never created a button or a customization for Opera uses the buttonator. I gave no hints and tried not to make a face. It was quite a frustrating experience for both of us ...

I think I should read a little bit about UI design on Nielsen's page wink

Vectronic Sunday, July 18, 2010 6:28:57 PM

Originally posted by QuHno:

I think I should read a little bit about UI design on Nielsen's page

Well, unless they know how Opera buttons work, it doesn't matter what layout you use, they'll still be stumped by how to make it work. Give someone a piece of paper, ask them to make an origami crane... it'll probably take them a couple days to figure it out unless they already know how to make paper do those certain things, what folds to use, etc. If you want to make it easier, have a description of how buttons work at the top. Or have tooltips for each section (Action, Param, Param, Text, Icon ...Alias, Operator, etc), either onmouseover() or something similar to opera:config with the (?) on each one (although it would be a good idea to make yours actually work...lol) Edit: Also, if you ever figure out a reliable, and fluid way of making your page available in multiple languages...let me know...lol I've tried all sorts of "automatic" ones, script based stuff... but none of them work reliably, they either fail, or they screw up the layout, or break functions. The only good way, is a fixed amount of languages, and a whole bunch of alternate elements using stuff like: 
<div><span lang="en">English</span><span lang="fr">French</span></div>
Then either detecting the language on page load, or having the "flags" to switch the language. The problem with that method is it makes the page huge... Another way would be to use a frame, then code each page separately, and have the main page just an empty frame that loads the various language coded pages into it, but that's a lot of work to keep up to date. And only effectively works "online" not offline. The problem with PHP, ASP, etc...to translate it server-side, is that that's the only use I have for it, so seems a bit pointless. It's not a huge problem, since only about 2% of the people who use them attempt to translate them, however... that's excluding the people who would use it if it was in their native language, and just never bothered to use it again after realizing it's english only. /end babble

QuHno Sunday, July 18, 2010 7:57:33 PM

Originally posted by Vectronic:

Give someone a piece of paper, ask them to make an origami crane...


[ot]The crane is not so easy, how about a little ship (or hat)? lol
Some years ago I folded a frog - took me about a dozen pieces of paper - may be more, I don't (want to) remember - but afterwards it jumped when you pressed the back bigsmile[/ot]

Originally posted by Vectronic:

or something similar to opera:config with the (?) on each one (although it would be a good idea to make yours actually work...lol)

Don't laugh, I thought about that that too smile
BTW: Yours doesn't work too? I thought they were looking for German content but when you look at Opera's Settings File Explained, which is basically the config help page you still see 9.64! http://quhno.internetstrahlen.de/graphics/smilies/original/motz.gif - ****self censored because of severe swearing****

Originally posted by Vectronic:

Edit: Also, if you ever figure out a reliable, and fluid way of making your page available in multiple languages...let me know...lol

Apart from the well known CSS selectors: Write it in simple English and put a Google translation link to it - best in a div container right beneath the original text lol
OK, no kidding: I would give money if I knew ...
The best way I know is to make different pages and put a language selector (plain link, no fancy stuff) on each - because the language the browser speaks is not always the same as that of the user in front of it. With javascript activated you could reload the language specific parts, of cause - but when it comes to plain information, I prefer the simplest thing I know ...

Vectronic Monday, July 19, 2010 4:38:17 AM

You might be aware of this, but your Buttonator doesn't work for "Special:Build Javascript button".

If you type in "javascript:" it removes it, if you don't it doesn't add it, so the button always ends up as: Go to page,"var x = y"...etc

So you might want to add something (better than this) like:
var Act; //(existing variable for the full action)
var tBox = document.getElementById('param1_0');
if(!tBox.value.toLowerCase().match('^javascript:')){
    Act += 'javascript:' + tBox.value;
}

Tested it cause I still get page hits from this and since its in the forums, the "javascript:" is stripped.

One of these days I'll get around to adding that "auto-detect" thing to insert "javascript:" if it's missing...

QuHno Monday, July 19, 2010 10:39:48 AM

Hm... can't replicate that - I inserted the javascript part of the button code you posted in the forums and I got this:NO BUTTON NAME (Doesn't work, I just copied the JS part and did nothing else) - even if I just write: alert("test") it switches to Special:Javascript and inserts the code.

EDIT:
Errr... found it. If the Javascript code has no ' or " quotes in it, it forgets to insert it, even if you manually set Special:Javascript.
I just deleted a little bit too much during the rebuild of the string routines. sad

Put them in again, it now respects the manually set Special:Javascript setting (again) smile

EDIT 2:
Idea: I can use the flags in the string routine to improve the javascript detection. If there is a JS comment, one of those fancy characters or a literal string or a quote, it must be JS - or are there any legitimate buttons where the first parameter contains such things like quotes etc. apart from the | when setting the opera:config settings by 
Set preferences,"Section Name|Setting Name=Value"
directly?

EDIT 3:
Not in the main string routine. I placed in the final button making routine. If there is one of the following characters, I switch to Javascript:
!"%&'()*+,-;<>?[]{}~

Vectronic Monday, July 19, 2010 7:41:32 PM

you might want to leave out: % & + - ?

Go to page,"http://www.google.com/search?&q=%22pickup+tail-gate%22, ...

Ok so not the most practical example, but those appear often in URL's, if you want to look for those ones, you'd probably want to looks for ' + ', and ' ? ', etc...

You might be better off looking for:
var (" (' ') ") ; function ...etc.

Unless you are assuming that a URL starts with 'http:' or 'www.' etc... that's fine, but now you have opera:/edit/ type problems.

Execute Program,"C:\..\etc"

sure you could look for :\ being the second and third (or 3rd & 4th) char, but that's only for windows,Linux doesn't use :\ just / ... etc.

QuHno Monday, July 19, 2010 8:20:50 PM

I just tested if that would work as a quick hack to see where to best place it, hadn't that much time.

Yes, it would be better to search for var= and function( and may be { and [, or just to add a plain checkbox:
[ ]Javascript?

bigsmile

BTW: Grouping of the commands would help too, some radio buttons to preselect command groups for the select boxes. It don't like it when I have to scroll through the whole bunch over and over again ...

Vectronic Monday, July 19, 2010 8:51:47 PM

I think ; { } * ~ are exclusive to Javascript, but you can have javascript that doesn't use any of those.

Go to page,"javascript:alert(document.compatMode)"

So yeah, a []checkbox would be the simplest way, but... not as cool, lol.

Same sorta thing I attempted, I was going to make mine auto-detect what was put into the first param box, and based on that automatically switch the initial action, stuff like:
http://
www.
Document Popup Menu
Document Toolbar

The problem is, webpages have:
Go to page,
Open url in new background page,
Set homepage,
couple others.

Menus have:
Show popup menu,
Show hidden popup menu,
couple others.

Toolbars have: Set alignment ... it's actually the only one that would work since 99.99% it's "Set alignment", but there's also Panels, which have multiple actions, so having just the one "automatic" seems silly when none of the rest can be really.

So... I gave up...lol

However, i still plan on making it autodetect javascript when it's passed via the URL http://page/?edit=etc...

Simply because it annoys me that I can't properly link to my pages from the Opera forums if the button contains javascript, without telling them "type in javascript: at the beginning"...

QuHno Monday, July 19, 2010 9:21:29 PM

To the ButtOnator I canhttp://files.myopera.com/Tamil/Smilies/Boo.gif -

... but only because it is escaped - they dumb kill "javascript:" if it is not escaped as %3a sad
I can understand that, but there must be a better way...

Vectronic Monday, July 19, 2010 9:47:20 PM

Yeah I realized that too... but I can't understand it, lol.

If they block javascript: then its easy enough to block javascript%3A

So... hopefully they either never get around to that, or they give up and just allow javascript:

QuHno Wednesday, July 21, 2010 4:31:51 AM

I don't think they will - at least not as first Item in an url - that could cause cross site scripting attacks. Just imagine: read out the cookie, build a new URL string containing all cookie values and go to that URL with the cookie values as ? or # parameter or path. Makes it easy for a bot to be logged in as a regular user wink

BTW: I have replaced the test for characters with a test for the following keywords in the 1st parameter:
if (/if|for|while|var|document|window|alert/.test(str)) {
... seems to be JS, do something ...
}
that should catch most of the cases - may be I'll add the closures too but lately I have seen a non-JS web address containing closures...

Vectronic Wednesday, July 21, 2010 8:25:17 AM

hmm...
if(/if\s|if(|for\s|for(|while\s|while(|var\s|document\.|window\.|alert(/test(str)){
}
Otherwise it will find stuff like:
http:/ /www.windows.com
http:/ /www.xxx.com/test_document.htm
http:/ /www.cnn.com/sheriff_charged.php
etc...(and it will still find "document.", lol) even still, non-paired ones like "if" when it's not "if(" will show up all over the place.

You could solve that for website by adding /?!^http|?!^ftp|?!^www/ ...etc, but that still leaves problems with "Execute Program,%", which it would be very rare to bump into "if" and "for" but, still quite possible.

QuHno Wednesday, July 21, 2010 10:12:34 AM

... right you are! smile
But I had to replace the "(" by \x28 and added "function(" as well ...

Execute Program: Problem. What happens if there is a whitespace in the path? The cleanScript() would kill it... No, it doesn't! <phew>
... at least no normal whitespace and anybody who uses paths like
C:\Program Files (x86)\
deserves deleted whitespace bigsmile
alert('test')
is a valid directory name under windows eventually. wink
I think I should make an exception for all commands that die when whitespace is deleted ...

BTW: Do know any legal cases with JS in the first parameter and not using "Go to page" as command? Only buttons, no /edit/ /search/ etc. ...

EDIT: I "solved" it like this for now:
First I test if it is a numeric param1, if yes, do nothing. Then if it is JS with the above test for window. etc. if yes, the string routine tries to clean up the string, if no, I just put quotes around it and encode it.

DayderDay Wednesday, August 4, 2010 5:13:47 PM

klasse Generator, gerade weil man die Icons anschauen und dann auswählen kann!
Eine Frage habe ich noch: kann ich von bestehenden Button irgendwie nachschauen, welche Aktionen/Code die ausführen?

QuHno Wednesday, August 4, 2010 6:00:53 PM

Ja, kannst Du, die sind alle in
%appdata%\Opera\Opera\toolbar\
in der blahblahbölah.ini zu finden (Der Pfad mit appdata passt eigentlich immer, wenn Du ihn in die Eingabezeile beim Exploder eingibst) Die Standard Aktionen kannst Du in der
Operainstallationsordner\ui\standard_toolbar.ini
finden. Einfach mit einem Editor öffnen und schauen, was jeweils hinter Button XXXX = steht. Das ist im Prinzip der Code, der auch beim Klick auf einen erzeugten Button erstellt wird. Bitte nicht die standard_toolbar.ini verändern, sondern immer mit einer Kopie im %appdata%... Ordner arbeiten.

Da steht dann z.B. so etwas:
Button4, M_BROWSER_VIEW_MENU_PANELS="Set alignment, "hotlist", 6,,"Panels" | Set alignment, "hotlist", 0,,"Panels""

Set alignment ist die erste Aktion,
"hotlist" der erste Parameter,
6 der zweite,
einen anderen Namen als den default Namen gibt es nicht (deswegen die 2 Kommata) und
Panels ist der Name für das Icon.
Danach kommt die Verknüpfung, hier das | ODER und dann gehts mit der 2. Aktion genau so weiter wie vorher.

Genaueres kann man da finden: operawiki.info: Advanced toolbar.ini Guide (en) mit Schwerpunkt auf Button Erstellung smile

PS: Auf meinem privaten Webspace habe ich eine echte Online Version. Bei der kann man auch den "the current Form" Link benutzen. Hilft z.B. wenn man in einem anderen Forum oder Blog einen installierbaren Button hinterlassen möchte und dort die opera:/button Notation nicht unterstützt wird, das geht dann so. wink

DayderDay Wednesday, August 4, 2010 8:08:56 PM

oh man, natürlich! Da hätte ich als langjähriger Benutzer selber drauf kommen müssen...whistle
Danke!

QuHno Thursday, August 5, 2010 6:46:55 AM

Buttonator Update
Now you can enter the string numbers or the replacement strings from the language file for "international" buttons.

Man kann jetzt die String Nummern oder die Ersatzstrings aus der Sprachdatei als Name für "internationale" Buttons eintragen.

Example (no real function, it just alerts "test"):
Beispiel (Keine wirkliche Funktion, gibt nur die Meldung "test" aus):
M_LINKS_PANEL_TOOLBAR_LOCK <-- en.lng = lock, de.lng = sperren etc.

QuHno Tuesday, September 14, 2010 2:52:12 PM

Buttonator Update

I stumbled over an issue with the javascript modulo function which is represented ba a % character. The % character is used in URL encoding too so for example a%32 became a2 after encoding.
Example:
var a = 33;
a = a%32;
alert(a);

threw the "variable a2 not declared" error instead of alerting the correct value:
1

Vectronic Tuesday, September 14, 2010 3:05:59 PM

Did you come up with a solution, or just informing people it doesn't work?

It's still converting:
javascript:alert(2%32) into javascript:alert(22)

Other than mandatory spacing, the only other solution would probably be to check what follows %'s, and then encode those numbers, before the main encode at the end...that way when Opera runs it, it should decoded the %32 back to 2, etc...

like %32 would be %25%33%32 which would then become %25%32%35%25%33%33%25%33%32... which Opera would decode back to %25%33%32... then when Opera decodes the button command again when it's run, it would be %32...

It's ugly, and may cause problems elsewhere that would have to be resolved, but, at least yer not f**king up strings, and Regex, etc...

Unless the double-decode is a bug, and not intentional, hard to know since documentation doesn't really exist.

QuHno Tuesday, September 14, 2010 7:10:20 PM

It was an update and it seems to work fine here, see screenshot 1 and screenshot 2 and screenshot 3 of the button output from the buttons I just created with the Buttonator ...

Please try to avoid the sting "javascript:" before normal scripts, that is meant for already URI encoded bookmarklet detection, meaning: It decodes the bookmarklets before re-encoding them if the string is there.

Buttonator should add the correct string itself if it "detects" normal JS.

I have updated the howto at the Buttonator pages wink
Thanks for the hint, I knew I forgot something!

Vectronic Tuesday, September 14, 2010 9:59:51 PM

Please try to avoid the sting "javascript:"

Shouldn't matter p

But it is working now, so maybe it just wasn't updated at the time, not sure which one gets updated first but I used the internetstrahlen one.

QuHno Tuesday, September 14, 2010 11:13:14 PM

Originally posted by Vectronic:

Shouldn't matter p

Right thou art. p

... and I'll try to circumvent it in one of the next updates. A %20 detection or so could help idea

How to use Quote function:

  1. Select some text
  2. Click on the Quote link

Write a comment

Comment
(BBcode and HTML is turned off for anonymous user comments.)

If you can't read the words, press the small reload icon.


Smilies

Paranoia

  • AV-Comparatives.org

    Regelmäßige Tests von Antiviren-Software. Proaktive, on-demand und Performance Tests (en)

  • Matousec.com

    Proactive Security Challenge für Firewalls. Hält die Firewall, was der Hersteller verspricht? (en)

  • Secunia.com

    Sind alle installierten Programme auf dem neuesten Stand? Haben sie Sicherheitslücken? Hier bekommt man die Antwort (en)

  • BSI Bürger Cert

    Aktuelle Warnmeldungen zu Sicherheitslücken und Bedrohungen für den Normalmenschen verständlich aufbereitet (de)

blog