New Module: jQueryAdmin v2.13

[mr-fan]

so what - now there is a "insert" Plugin for the jQueryAdmin on the line.....

fot thoose who worked with the first improved "semi" official way to load jQuery Plugins, JS and CSS files to WebsiteBaker...

Just load the jquery-insert Plugin by a click and take your frontend_jquery.js in the template folder and it works as it should!

frontend-jquery.js must exist - there is no fallback - if not - path leads to nowhere...

maybe someone that works with that "insert-methode" could test it with jQueryAdmin and load his plugins like he did bevore just controlled by the backend...and extendable in serveral ways   

have fun
martin



[gelöscht durch Administrator]

[BlackBird]

I've replaced the prettyPhoto Plugin available at http://www.websitebakers.com/pages/libs/jqueryadmin/jquery-library.php with a stripped version. The included demo images made the ZIP 2 MB in size - after stripping the demo out just 60 kB are left! Take a look at the prettyPhoto demo page for a demo instead.

http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/

[BlackBird]

So we'll leave this for next Version.

[oeh]

Well, the solution I suggested was meant for jQueryAdmin only. But maybe someone likes to create an independent module.

A hole different module was not on my mind.
Just as you described, the implementation of translatable "text" as a default. 

[BlackBird]

Well, the solution I suggested was meant for jQueryAdmin only. But maybe someone likes to create an independent module.

[oeh]

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 Expand

<a id="toTop" href="#">^ <?php echo translate('Scroll to Top'); ?></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 Expand


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


And the markup in the page would look like this:

Code Select Expand

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

Yup. You hit the nail there.
This wold take WB a really big step towards being really multilingual.
And even better, coders as such, made this as a standard.

If there are options to translate, I'll do my very best to keep up and translate all
new and existing modules in to Norwegian. That is they are for WB 2.x.x and >=.

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

[erpe0812]

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

rgds

erpe

[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 Expand

<a id="toTop" href="#">^ <?php echo translate('Scroll to Top'); ?></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 Expand


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


And the markup in the page would look like this:

Code Select Expand

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

[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]

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

[BlackBird]

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

[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]

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]

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

[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 Expand


[[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

[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]

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]

[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 Expand


<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]

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 Expand


[[jQueryInclude?plugin=<Name>]]


Example:

Code Select Expand


[[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 Expand


<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]

(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]

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!

[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]

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

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