Re: One way JavaScript initialization

[Ian]

I've always solved that problem with delegation, but maybe there is a better alternative.  I'm not sure if that is one of the ways you are proposing - explaining something rather than linking to zip files is generally easier for the sake of discussion.

Ian

On Tuesday, 27 November 2012 12:24:59 UTC-5, Fedir wrote:

Hi all!
Let me start discussion about JavaScript`s initialization in Joomla!.

Here http://joomlacode.org/gf/project/joomla/tracker/?action=TrackerItemEdit&tracker_item_id=28119 I already tried talked about it with myself :)
Now I will try it here ....
Do not forget check the link above...

So problem:
- a lot scripts with own initialization code
- these scripts (galleries, lightbox etc) stop working on the content that changed by AJAX/AHAH or by other script

Solution:
- allow developers interact with changed DOM elements

Additional:
- own JS options container, and allow overwrite this options

I see two way.
First by using additional events, second it like in Drupal.behaviors.
There http://joomlacode.org/gf/project/joomla/tracker/?action=TrackerItemEdit&tracker_item_id=28119 is two path (I made it for joomla 2.5) and two example plugins, it cannot be final, it just for demonstration.
j_scripts_init_2.patch and examplejs-2.zip - it demonstrate "event" way
j_scripts_init_3.patch and examplejs-3.zip - it is drupal way
Both I not very liked now :)

"Event" way -  should be more simple/understandable for end developers, but in my path I use Mootools for events, not sure that is good idea because "framework depends"
Drupal way -  it is not "try" way :) and can be difficult to understanding for end developers. As practice shows here also a some problem.

Think need select the "event" way independent from Mootools,jQuery etc. For this need make some own Joomla Events.

But I not sure here :)

so will be good  any discussion how to correctly implement it ;)

[Fedir]

yes, righ ...

so my idea now is:

make own Joomla event listener (if need independence from a frameworks) .... then the extension developer do like next:

In add the init script as other scripts $doc->addScript('extension/path/init.js');

Init script looks like next:

Joomla.addEvent('domready, domchanged' ,function(event, element){

  //init code for "element"

})

or

Joomla.addEvent(['load', 'domchanged'] ,function(event, element){
    //init code for "element"

})

and unload, can be useful for clean up before the elemend will be removed

Joomla.addEvent('unload' ,function(event, element){

  //init code for "element"

})

where 'load', 'domready' - default events, that all know/use

'domchanged' - custome event that fires from AJAX script for notify that in DOM something changed

'element' - changed element, default is document

AJAX developer in own script do next if need change something on page (delete some elements etc.):

//before change

Joomla.fireEvent('unload', oldElement);

//after changes is done

Joomla.fireEvent('domchanged', element);

For pass the script options in the init.js we can make Joomla.optionsStorage. For this can be need two methods in JDocument like:

/**

 * Add option for script

 * @param string $tag = extension name

 * @param array $options

 * @param string $prefix = can be

 * 'com' (for components),

 * 'mod' (for modules),

 * 'plg' (for plugins),

 * 'sys' (for joomla core),

 */

public function setScriptOptions( $options, $tag, $prefix )

{

$this->_scripts_otions[$prefix.'_'.$tag] = $options;

return $this;

}

and get options like:

public function getScriptOptions($tag = null,  $prefix = 'sys')

{

if ($tag && $prefix)

{

return (empty($this->_scripts_otions[$prefix.'_'.$tag])) ? array() : $this->_scripts_otions[$prefix.'_'.$tag];

}

else {

return $this->_scripts_otions;

}

}

and some addittional action in DocumentRendererHead (also the result we can try put in some JS file that allow cach it in the browser):

if (!empty($document->_scripts_otions))

{

$buffer .= $tab . '<script type="text/javascript">' . $lnEnd;

$buffer .= 'Joomla.optionsStorage = ' . json_encode($document->_scripts_otions) . ';' . $lnEnd;

$buffer .= $tab . '</script>' . $lnEnd;

}

return $buffer;

after it init.js of the extension will look like:

Joomla.addEvent('domready, domchanged' ,function(event, element){

  var options = Joomla.optionsStorage.plg_verycoolgallery;

  //init code for "element"

})

here http://jsfiddle.net/xsUpb/  I tried make small demonstrattion (based on Mootools eventlistener :) )

Четвер, 29 листопада 2012 р. 16:20:02 UTC+2 користувач Ian написав:

[Gary Mort]

Possibly consider the method used by editor plugins - ie if an editor is loaded on the page, at some point Joomla! will invoke the editor plugin event onInit - it expects the plugins to return a simple string of executable javascript code.  All of these items are collected up into one long string and then wrapped with window.addEvent('domready', function() {} - and then inserted into the document.

This way they are completely framework neutral.

By the same token, add a new JHtml object, call it events and define all the wraps there:

JHtml::_('events.ready');

JHtml::_('events.load');

JHtml::_('events.ajaxUpdate');

The above can return true or false. If true, it is a promise that before the page is finalized, Joomla! will invoke registered events plugins for the events onDomReady, onDomLoad, and onAjaxUpdate. It will include the results of those calls wrapped in a window.addEvent wrapper. The update contract also implies that any ajax calls that are sent through some standard joomla ajax function call will also invoke the ajaxUpdate events upon completion.

The only time when the above method calls should return false is when they are not relevant:

A CLI application which does not use javascript should return false.

It would then be up to the application to decide if special logic should be used[for example, having choosing between 2 different views, one view includes a bare minimum of data and expects to load it via ajax, while the other will take longer but loads all the data.

Now, all of that being said, this sort of function would be more appropriate for the CMS then the Platform. Ideally, most of the existing javascript and JHtml calls should be moved out of the platform and into the CMS - thus making the platform javascript framework agnostic.

[Fedir]

sounds very difficult.

JHtml::_('events'); - can confuse.

I start it for make the life a little bit simple and not vice versa , and not for shock the developer with new API :)

In finall they recomended only change a little the initialisation of they scripts.

Example they have:

window.addEvent('domready', function(){

 alert('I am ready!');

})

or

jQuery(document).ready(function(){

 alert('I am ready!');

})

to something like next:

Joomla.addEvent('domready, domchanged', function(event, element){

   alert('I am ready!');

})

I just thought that add the namespace should be also useful ... 

Example for two diferent scripts:

//caption

Joomla.addEvent('domready, domchanged.sys_caption', function(event, element){

   alert('I am ready!');

})

//gallery

Joomla.addEvent('domready, domchanged.plg_coolgallery', function(event, element){

   alert('I am ready!');

})

As result, it add more flexibility

Example fire event:

Joomla.fireEvent('domchanged', element); //will apply for both script

Joomla.fireEvent('domchanged.sys_caption', element); //will apply only for Gallery script

Субота, 1 грудня 2012 р. 19:16:18 UTC+2 користувач Gary Mort написав:

[Ian]

If you use delegation you don't have to worry about the dom changing - for the most part, it just works.

There is a description of what delegation is at http://mootools.net/docs/core/Element/Element.Delegation.  That is based on the Mootools stuff but I've just that you could apply the principle more generally.

Ian

[Alonzo Turner]

First, I think this discussion belongs in the CMS groups as the Joomla javascript object is not part of the platform as far as I know. But secondly, I think it is a terrible idea to add more JavaScript libraries. I am in favor of what Gary has proposed. Javascript is an element of the UI and the template and shouldn't be part of the core of the Joomla platform. It should be added (in whatever flavor) by the developer to the specific project.

I would like to see an extension of the JHtml class as Gary has suggested. This would allow any developer to plug in any framework they wanted to use. It would allow all of the JavaScript to be updated in one place. The important part is that by plugging in your own framework, you would be able to override the JavaScript which the CMS and platform load by default.

[Fedir]

sorry my examples for init was not full, maybe for better understanding better like now:

Joomla.addEvent('domready, domchanged.plg_coolgallery', function(event, element){

   //jquery developers

  jQuery('.some-class', element).someTrick();

  //mootools developers

  new someTrick(element.getElements('.some-class'));

})

"One way JavaScript initialization" can be part only CMS if need ... I start here because Joomla Object in the core.js and core.js it the part of Joomla Platform :)

I do not sugest add some javascript libraries ..... I just sugest make "one way script initialisation" ... 

who made the site with a lot AJAX/AHAH, based on Joomla ? hand up :)

and you not got the problem when the gallery/lightbox stopped work after change part of the page by AJAX?

This idea first was based on Drupal.behaviors, there you realy no need worry about  this problem (will understand who used) ... but there I not liked realization ... 

Idea based on "Events" should be more simple for end developers

thanks Ian for the link about delegation (similar found also for jquery) ... it really good idea, but think it cannot be as "universall way", not to much people know about it and a lot less use it  ... think this good only for people/teams who made all own 

Понеділок, 3 грудня 2012 р. 18:57:32 UTC+2 користувач Alonzo Turner написав:

[Fedir]

so as I understand, all javascript planed move out from platform,

then better continue in the CMS group .. 

link for new topic I will put here when topic will be ready..

Вівторок, 4 грудня 2012 р. 16:14:41 UTC+2 користувач Fedir написав:

[Fedir]

continued here https://groups.google.com/d/topic/joomla-dev-cms/jyKt5VE5PWw/discussion

Середа, 19 грудня 2012 р. 14:12:02 UTC+2 користувач Fedir написав: