New Module: jQueryAdmin v2.13

[BlackBird]

One of the reasons for this wishfullness from my side, is that I'm working on
(maybe a bit ambiguous on my part) what is to be my first real page,
which are to be in Norwegian, English, Dutch, Finnish, .....

That's quite interesting. I'm not sure at the moment where we can do this for jQueryAdmin, but I'm open to every kind of suggestion. I think you talk about the Readme-Files and the Previews, do you? Should be easy enough to create Readme's in different languages, but I'm afraid you will have to hope that the Plugin authors provide translations. But I'm willing to add those files for the "core module" if you can help me to do translations into NO. jQueryAdmin can look for them the same way it looks for language files. (Example: "readme_no.html available? Yes -> use it; No -> show english readme")

Edit: I have changed this for readme-files now. Works smoothly. I will add german translations to all items that have readme's or preview's yet. Please wait for v0.12 before creating translations into other languages. Thanks.

[BlackBird]

I've just release v0.12.

Important! I've removed the "jQueryLoader" Droplet for consolidation purposes. The droplet just went to be too complex to be still easy to use. Instead, a "jQueryInclude" Droplet is installed. (Well, this is still Alpha, so things may change...)

* New: Readme's (Plugins only) and Demo's (UI Components only) can be included in different languages. See the "Dialog" UI Component for an example. (If you're using German, it will be shown in German. Switch to English and the Readme will switch to English, too.)
* New: You can choose "UI Theme" -> "None" now to use no theme. Also, you can switch the default UI Theme in the tool.php ($default_theme)
* New: When receiving an error message (if you forget to insert a preset name when creating a new preset, for example) the selections you made persist

Droplet usage

[[jQueryInclude?preset=<presetname>]]

More params:

position=body -> to include the preset before </body>
module=whatever -> different module folder to use (default: jqueryadmin)

What does the droplet do with my page?

* Page AND Preset are scanned for jQuery-JS; the occurences are used to build a list
* All occurences are removed from the page and the preset, leaving any other content intact (CSS, for example)
* The list built in step 1 is cleared up; doubles are removed
* The cleared list is included into the head (or the body)

As you may note, it may happen that jQuery JS already included in the page is moved to the wrong place (from page bottom to header, for example). This is a "known issue" for now. The behaviour will be corrected later.

[oeh]

I think you talk about the Readme-Files and the Previews, do you? .....

But I'm willing to add those files for the "core module" if you can help me to do translations into NO. jQueryAdmin can look for them the same way it looks for language files. (Example: "readme_no.html available? Yes -> use it; No -> show english readme")

Hi I'll supply the Norwegian translations

When i was talking about bi lingual possibilities, my thoughts went in the direction
of eg. ScrollToTop has the text "Scroll to top" as text output.
This would in Norwegian be "Gå til Toppen"....
If text constants like this where to be put in to a NO, DE, EN....php file
it would be really great bilingual wise.

OE

[BlackBird]

Ah. Hm. But these are "product names". How is "Windows" called in Norway?

[BlackBird]

Please note: If you include the droplet more than once into a page, using different positions ("head", "body"), only the first position setting is used. This seems to be an issue in the droplets module. (I'm using 1.0.2) So there's no chance to fix this in jQueryAdmin.

[BlackBird]

Just uploaded v0.13. This version now scans only the page part where the preset should be included. (head or body) This hopefully fixes the issue mentioned above. (JS moved to the wrong place.)

Necessary core files (jquery-1.4.2.min.js, jquery.ui.core.min. js, ...) are always loaded into the header. I don't know if this may cause problems. Worked for me.

Inclusion of more than one instance of the droplet works here now. I don't know what was wrong. The info.php of the Droplets module showed v1.0.2, but extracting it again from the ZIP into the same directory fixed the problem. So be sure you have Droplets v1.0.2 installed if you wish to include the droplet more than once.

What's next?

Hm... Moving CSS into the header, I think. Or do you have suggestions?

[oeh]

Ah. Hm. But these are "product names". How is "Windows" called in Norway?

I'm not talking of the name of the module, just any text output the module produces.

 

[BlackBird]

@Oeh, maybe we should clear this by PN. I'm still not sure what you mean exactly. But we'll find out.

[mr-fan]

next round for jQuery Plugins 

1. jQuery Cycle Plugin easy to use with a preset like the online howto "beginners demo" on

http://malsup.com/jquery/cycle/begin.html

could changed easily to other animations or CSS id names...

2. jQuery Easing Plugin for usage with other Plugins or not...(at this time some Plugins have the easing.js included should be removed to avoid double loadings or files in /plugins/ directory

have fun martin

if someone have test it - i will put them to the official gallery

[gelöscht durch Administrator]

[BlackBird]

Just tested the Cycle plugin, works great with my current development version of jQueryAdmin. Just two notes:

* There is a typo in the readme. (Step 5: "Than you just ad a ..." => "Then you just add a ...")
* Maybe you should add a complete example to the readme file. ("erpe" uses externally linked screenshots for this. "Externally" means that they are not included with the plugin zip, but stored on a webserver and referenced by the readme.)

Thank you for sharing your Plugins!

[BlackBird]

(at this time some Plugins have the easing.js included should be removed to avoid double loadings or files in /plugins/ directory

The jQueryAdmin Droplet should avoid double loadings. (I'm still working on it.) It takes also care of loading the different components into the right place. (CSS into head, for example)

[BlackBird]

So here's v0.14.

http://www.websitebakers.com/pages/libs/jqueryadmin.php

* New: Added KLogger.php for Debugging (Debugging is off by default)
* New: CSS included in the Presets is moved to the HTML-Header automatically (even if the preset is included in the <body>)
* New: The appropriate position of a plugin (body or head) can be defined in the plugin's default.preset, so you don't have to know about this when using the plugin
* New: Added an option to include a plugin directly without creating a preset
* Added some more translations
* Added some more placeholders (TEMPLATE_DIR, WB_PATH) that are replaced by the droplet

Include a plugin directly

When trying out the plugins provided by mr-fan, I found it annoying to first create a preset before using the plugin. So I added the option to include a plugin directly.

Usage:

Code: [Select]

[[jQueryInclude?plugin=<Name>]]

Example:

Code: [Select]

[[jQueryInclude?plugin=Cycle-all-2-8-6]]

What's the difference?

This only includes the given Plugin. When creating a preset, you can include more than one plugin and/or additional UI Effects, Themes etc.

So,
* if you just need a special plugin, the simple way is to add it directly using the ?plugin param.
* if you need some more jQuery components, create a preset and include it using the ?preset param.

Please note: The ?plugin and ?preset params exclude each other. If both are set, the ?plugin param "wins". (This means, the preset is not included!)

On my test page, I have the ImageOverlay and Cycle Plugins working together with the Dialog Component. Here's the WYSIWYG HTML source code:

Code: [Select]

<h1>Cycle Test</h1>
<div id="s1" class="pics"><img width="200" height="200" alt="" src="http://localhost/_projects/wb28/media/FG/Test/topic-pictures/1.jpg" />      <img width="200" height="200" alt="" src="http://localhost/_projects/wb28/media/FG/Test/topic-pictures/2.jpg" />      <img width="200" height="200" alt="" src="http://localhost/_projects/wb28/media/FG/Test/topic-pictures/3.jpg" /></div>
<p>&nbsp;</p>
<h1>ImageOverlay Test</h1>
<ul class="image-overlay" id="myGallery">
    <li style="text-align: center;"><a href="http://domain.tld"> <img width="20%" height="20%" alt="" src="http://localhost/_projects/wb28/media/FG/Test/Christmas%20Nature%2012.jpg" />
    <div class="caption">
    <h3>Image #2</h3>
    <p>click for LINK</p>
    </div>
    </a></li>
</ul>
<div>&nbsp;</div>
<h1>Dialog Test</h1>
<div>&nbsp;</div>
<div id="dialog">Dialog text.<br />
<br />
You can drag me around by clicking left on the title.<br />
You can resize me by clicking left on the bottom right corner.<br />
You can close me by clicking on the X on the upper right corner.<br />
<br />
<strong>Theme used: ui-lightness</strong></div>
<p>[[jQueryInclude?preset=dialog]] [[jQueryInclude?preset=imageoverlay]] [[jQueryInclude?plugin=Cycle-all-2-8-6]]</p>


[BlackBird]

I just added a new Plugin: Superfish-1.4.8

Demo here:
http://users.tpg.com.au/j_birch/plugins/superfish/#examples

Download here:
http://www.websitebakers.com/pages/libs/jqueryadmin/jquery-library.php?lang=EN

Edit: I have 4 instances of the Droplet included on the same page, running smoothly together: Cycle-all, Dialog, ImageOverlay, and the new Superfish. Here's the HTML source code of the WYSIWYG-Section if you wish to check it out:

Code: [Select]

<h1>Superfish Test</h1>
<ul class="sf-menu">
    <li class="current"><a href="#a">menu item</a>
    <ul>
        <li><a href="#aa">menu item that is quite long</a></li>
        <li class="current"><a href="#ab">menu item</a>
        <ul>
            <li class="current"><a href="#">menu item</a></li>
            <li><a href="#aba">menu item</a></li>
            <li><a href="#abb">menu item</a></li>
            <li><a href="#abc">menu item</a></li>
            <li><a href="#abd">menu item</a></li>
        </ul>
        </li>
        <li><a href="#">menu item</a>
        <ul>
            <li><a href="#">menu item</a></li>
            <li><a href="#">menu item</a></li>
            <li><a href="#">menu item</a></li>
            <li><a href="#">menu item</a></li>
            <li><a href="#">menu item</a></li>
        </ul>
        </li>
        <li><a href="#">menu item</a>
        <ul>
            <li><a href="#">menu item</a></li>
            <li><a href="#">menu item</a></li>
            <li><a href="#">menu item</a></li>
            <li><a href="#">menu item</a></li>
            <li><a href="#">menu item</a></li>
        </ul>
        </li>
    </ul>
    </li>
    <li><a href="#">menu item</a></li>
    <li><a href="#">menu item</a>
    <ul>
        <li><a href="#">menu item</a>
        <ul>
            <li><a href="#">short</a></li>
            <li><a href="#">short</a></li>
            <li><a href="#">short</a></li>
            <li><a href="#">short</a></li>
            <li><a href="#">short</a></li>
        </ul>
        </li>
        <li><a href="#">menu item</a>
        <ul>
            <li><a href="#">menu item</a></li>
            <li><a href="#">menu item</a></li>
            <li><a href="#">menu item</a></li>
            <li><a href="#">menu item</a></li>
            <li><a href="#">menu item</a></li>
        </ul>
        </li>
        <li><a href="#">menu item</a>
        <ul>
            <li><a href="#">menu item</a></li>
            <li><a href="#">menu item</a></li>
            <li><a href="#">menu item</a></li>
            <li><a href="#">menu item</a></li>
            <li><a href="#">menu item</a></li>
        </ul>
        </li>
        <li><a href="#">menu item</a>
        <ul>
            <li><a href="#">menu item</a></li>
            <li><a href="#">menu item</a></li>
            <li><a href="#">menu item</a></li>
            <li><a href="#">menu item</a></li>
            <li><a href="#">menu item</a></li>
        </ul>
        </li>
        <li><a href="#">menu item</a>
        <ul>
            <li><a href="#">menu item</a></li>
            <li><a href="#">menu item</a></li>
            <li><a href="#">menu item</a></li>
            <li><a href="#">menu item</a></li>
            <li><a href="#">menu item</a></li>
        </ul>
        </li>
    </ul>
    </li>
    <li><a href="#">menu item</a></li>
</ul>
<p>&nbsp;</p>
<h1>Cycle Test</h1>
<div class="pics" id="s1"><img width="200" height="200" src="http://localhost/_projects/wb28/media/FG/Test/topic-pictures/1.jpg" alt="" />      <img width="200" height="200" src="http://localhost/_projects/wb28/media/FG/Test/topic-pictures/2.jpg" alt="" />      <img width="200" height="200" src="http://localhost/_projects/wb28/media/FG/Test/topic-pictures/3.jpg" alt="" /></div>
<p>&nbsp;</p>
<h1>ImageOverlay Test</h1>
<ul id="myGallery" class="image-overlay">
    <li style="text-align: center;"><a href="http://domain.tld"> <img width="20%" height="20%" src="http://localhost/_projects/wb28/media/FG/Test/Christmas%20Nature%2012.jpg" alt="" />
    <div class="caption">
    <h3>Image #2</h3>
    <p>click for LINK</p>
    </div>
    </a></li>
</ul>
<div>&nbsp;</div>
<h1>Dialog Test</h1>
<div>&nbsp;</div>
<div id="dialog">Dialog text.<br />
<br />
You can drag me around by clicking left on the title.<br />
You can resize me by clicking left on the bottom right corner.<br />
You can close me by clicking on the X on the upper right corner.<br />
<br />
<strong>Theme used: ui-lightness</strong></div>
<p>[[jQueryInclude?preset=dialog]] [[jQueryInclude?plugin=ImageOverlay]] [[jQueryInclude?plugin=Cycle-all-2-8-6]][[jQueryInclude?plugin=Superfish-1.4.8]]</p>


[BlackBird]

I've just uploaded v0.15 to AMASP.

http://www.websitebakers.com/pages/libs/jqueryadmin.php

I think I found a really easy way to auto-include a jQueryAdmin Preset into a page. Just name it after the PAGE_ID and add all the plugins and UI components you need. Then add the new [[jQueryLoader]] Droplet (without any params) to your template or page footer.

Example: On a certain page, you need the Dialog UI Component and the Superfish Plugin.

Step 1: Create the preset

* Open your WB Backend and navigate to Admin Tools -> jQueryAdmin; you will get a form to create a new preset
* Put the number of the page (example: 15) into the name field
* Mark "Superfish" and "Dialog" in the list (of course, you will first have to install the Superfish Plugin. Download here: http://www.websitebakers.com/pages/libs/jqueryadmin/jquery-library.php)
* Save the preset

Step 2: Include the droplet

We will add the droplet to the footer in this example.

* In your WB Backend, navigate to Settings.
* In the "Website Footer:" input field, add [[jQueryLoader]]
* Save the settings.

Step 3: Add the page contents

* For Superfish, just create an unordered list and add class="sf-menu" to the <ul>
* For Dialog, create a <div> containing the dialog contents, and add id="dialog" to the <div>

Now, open your page and enjoy!

[gelöscht durch Administrator]

[mr-fan]

hi Bianka,

I think I found a really easy way to auto-include a jQueryAdmin Preset into a page. grin Just name it after the PAGE_ID and add all the plugins and UI components you need. Then add the new [[jQueryLoader]] Droplet (without any params) to your template or page footer.

Could be a real easy way to get special contents on selected pages.....great idea! 

One question bevore i start testing could i use a specific pesent (for example i need the superfish on every page but on page 15 _additional_ i need the dialog or something else...and so on)

[[jQueryinclude=menu]] + [[jQueryLoader]] special preset for Page 15  => create a preset named "15" ?

This would be a cool Option with this two Droplets for general Use & special Use!

Best regards
Martin

[BlackBird]

One question bevore i start testing could i use a specific pesent (for example i need the superfish on every page but on page 15 _additional_ i need the dialog or something else...and so on)

In this case, put the two Droplets into your page footer. Example:

Code: [Select]

[[jQueryInclude?plugin=Superfish-1.4.8]][[jQueryLoader]]

This will now include the Superfish Plugin into all pages, and your "15.jquery" preset only into page 15.  

Edit: Please pay attention to the notation! Plugin/preset names are case sensitive on UNIX/Linux-Systems! (I think the droplet name is always case sensitive.)

Edit2: I started a tutorial on how to add a custom plugin. (German language) http://www.webing.de/webbird/WebsiteBaker/JQueryAdminPlugins

[BlackBird]

Announcement: With next version 0.16, the development state will be upgraded to "Beta". (Which means "feature freeze".)

[BlackBird]

I've just uploaded v0.16 to AMASP. http://www.websitebakers.com/pages/libs/jqueryadmin.php

As promised, this version has now BETA state. So there's one last feature added:

* New: When uploading plugins or themes, an index.php file will be generated automatically if it not exists.

Please note: When creating the index.php files, the WB_URL constant is used to create a redirect location. If the WB_URL changes (after moving the complete WB installation to another server, for example), the redirect location may be wrong. I don't treat this as a serious problem, because a wrong redirect is still better than a browsable folder.

So feel free to check out this new version and maybe one of the 11 ready-to-use plugins and/or 2 additional UI themes that are already available at AMASP!  

http://www.websitebakers.com/pages/libs/jqueryadmin/jquery-library.php

[BlackBird]

Some good news:

* There's another theme "Le frog" available for download now. --> http://www.websitebakers.com/pages/libs/jqueryadmin/jquery-library.php
* "erpe" wrote a nice article about jQueryAdmin on AMASP. --> http://www.websitebakers.com/pages/topics/include-jquery.php
* I've created an NL translation file that will be added in v0.17; but as I'm not a "native speaker" and just using online translators to create this file, it would be very kind if anyone who is a "native speaker" could take a look at the translations. (File attached.)

If you'd like to add your own jQuery UI Themes, you don't have to wait for someone to upload it on AMASP. Just download the theme you like (or create your own using Themeroller) from http://jqueryui.com/themeroller, create a subfolder under ./modules/jqueryadmin/jquery-ui-1.8/themes and unpack the theme to that folder. There's nothing to be done in addition, except choosing that theme when creating your own preset.

[gelöscht durch Administrator]

[BlackBird]

@oeh - You make me fear that you're kidnapped by aliens. Are you still on air?

[BlackBird]

I just uploaded v0.17 to AMASP. http://www.websitebakers.com/pages/libs/jqueryadmin.php

* New: clueTip 1.0.6 plugin is included (used by the Backend). See http://plugins.learningjquery.com/cluetip/#getting-started for details
* New: Added jquery.hoverIntent. js (used by clueTip) to subfolder jquery-ui-1.8/external
* Fix: When using the "plugin=" param for the [[jQueryInclude]] droplet, the jQuery base was not loaded automatically. (When creating a preset, it is added to the preset file.) The droplet now looks if the base file is already included and adds it if not.
* Some Backend enhancements (Tooltips on icons using the clueTip Plugin, for example)

Edit: Uploaded fixed v0.17.

Admin Screenshot v0.17

[oeh]

@oeh - You make me fear that you're kidnapped by aliens. Are you still on air?

Hi I've not been kidnapped by aliens, just had my hands full regarding dog related stuff,
and a person making my life a bit to hellish for my liking .

Well, I'm back again whistling in the awesome nice and sunny weather. Ahh, finally
the darn snow are almost gone.

 

I've also translated the v0.17 Norwegian language file.


[gelöscht durch Administrator]

[BlackBird]

Great, thanks for the translation. I will add it to the next version. Maybe this will be our first RC.

Regarding the translations, "oeh" sent me an example by PN I'd like to answer here.

Take for example the Scroll to top droplet . It has an output text "Scroll to top"  this text needs to be translatable and to work on multilingual sites.

Hm. In this case, the markup has to be added to the page "by hand". I think I know what you mean - you'd like to insert something like

Code: [Select]

<a id="toTop" href="#">^ <?php echo translate(&#39;Scroll to Top&#39;); ?></a>
into the page and have translations for different page languages automatically. I'm not sure if this should be a feature for jQueryAdmin. But, on the other hand, it's not very hard to implement. (It's already implemented in wbTemplate, which is part of the wblib I created.)

I don't know if there are already solutions for this. (Droplets or other modules.) Maybe someone else knows.

Just to fantasize a bit... I could think of an implementation like this:

* A plugin can have language files, like modules have.
* The jQueryAdmin droplets regard some kind of markup, for example: <!-- jquery begin translation --><Text><!-- jquery end translation -->
* If it finds a markup like this in the page, and if the plugin has language files, it tries to find a translation for the <text>, leaving it as is if none is found

With this solution, the <text> will still work if the jQueryAdmin droplet is not used (or a translation is not available).

A translation file may look like this:

Code: [Select]

<?php
$LANG=array(
  &#39;This is text to be translated&#39; => &#39;This is the translation&#39;,
);
?>

And the markup in the page would look like this:

Code: [Select]

<!-- jquery begin translation -->This is text to be translated<!-- jquery end translation -->
If the droplet finds a translation for that text, the markup will be replaced with that text. If not, you will still see the original text on the page.

But! As v1.x is in Beta state now, this would be a feature for a future version. (2.x or something)

[erpe0812]

Added a new plugin: easySlider
http://www.websitebakers.com/pages/libs/jqueryadmin/jquery-library.php

rgds

erpe

[BlackBird]

Really nice plugin, thanks to erpe! I just checked this out, works like a charm. Also, very good plugin readme. Just copy&paste and you're done.