where to locate includes/shareable libs, ... ?

By Gregor de Lijzer on Monday, 13 March 2017

Replies 9

Likes 0

Votes 0

i programmed two apps which should share js functions which i like to put in a seperate file.

To simplify let's say the apps are app1 and app2.

the first app is located at htdocs/media/com_easysocial/apps/group/app1/themes/default/canvas/default.js
and the code looks like



EasySocial.require()

.library('ui/datepicker')

.done(function($) {

  function f1(date){

    fDate = $.datepicker.formatDate("YY-mm-dd", date);

    return fDate;

  }

})

the second app is located at htdocs/media/com_easysocial/apps/group/app1/themes/default/canvas/default.js
an looks like



EasySocial.require()

.library('ui/datepicker')

.done(function($) {

  function f1(date){

    fDate = $.datepicker.formatDate("YY-mm-dd", date);

    return fDate;

  }

})

The result should be, that i can call
f1(new Date())
from app1 and app2.

Now i like to have this function (f1) in a file which should be included in both apps so that f1 can be called from both.
Also "ui/datepicker" should be included!

How can i handle this?
Where do i have to put this file?
Should an app have its own folder like htdocs/media/com_easysocial/apps/MY_APPS/app1/themes/... ?

Hey Gregor,

What do you think if write your function in one of the js file and put into your Joomla root folder.

For example this file location -> JoomlaFolder/media/com_easysocial/apps/user/custom/script.js

So when you want to call this function you can load this script.js on the page and everywhere also can call your function in this script.js file.



EasySocial.require()

.library('ui/datepicker')

.script('<?php echo rtrim( JURI::root() , '/' );?>/media/com_easysocial/apps/user/custom/script.js')

.done(function($) {

  function f1(date){

    fDate = $.datepicker.formatDate("YY-mm-dd", date);

    return fDate;

  }

})

Arlex Wong

Monday, 13 March 2017 17:06

0 Likes

0 Votes

0 Comments

#322686

Thanks for the answer Arlex!

As i understood you mentioned the code above is in the file script.js?
And in the files which like to use function of this files i have to write



EasySocial

.script('<?php echo rtrim( JURI::root() , '/' );>/media/com_easysocial/apps/user/custom/script.js')

.done(function($){

   f1(new Date());

})

Gregor de Lijzer

Monday, 13 March 2017 19:22

0 Likes

0 Votes

0 Comments

#322741

You're welcome.

hm currently I am not really sure is it I understand correctly as what you described at above.

Perhaps you can take a look of my explanation and see is it help?

What i mean for this custom js file is put all the function inside this file (JoomlaFolder/media/com_easysocial/apps/user/custom/script.js) so that when you want to call this function you just load this script on your app file, then you can able to call inside the function.

For example this file JoomlaFolder/media/com_easysocial/apps/user/custom/script.js :



EasySocial(function($) {

	var jQuery = $;

           (function($, undefined) {



     function f1(args) {

          xxx;

     }



})(jQuery);

});

Then if you want to call that f1 function in this file :
htdocs/media/com_easysocial/apps/group/app1/themes/default/canvas/default.js
So you have to call this script file JoomlaFolder/media/com_easysocial/apps/user/custom/script.js in order to call that f1 function.



EasySocial.require()

.library('ui/datepicker')

.script('<?php echo rtrim( JURI::root() , '/' );?>/media/com_easysocial/apps/user/custom/script.js')

.done(function($) {

  function f1(date){

    fDate = $.datepicker.formatDate("YY-mm-dd", date);

    return fDate;

  }

})

Arlex Wong

Monday, 13 March 2017 23:06

0 Likes

0 Votes

0 Comments

#322776

I'm sorry Arlex!
This won't work!
Maybe we got also a misunderstanding!

i want to call the f1 function from default.js.(and from many other .js files too)
In your examples you defined f1 in both files default.js and script.js.
i included script.js as you mentioned.

if i just call f1 from default.js with



fDate=f1(new Date());

my console Debugger says "f1 is not defined"

Gregor de Lijzer

Tuesday, 14 March 2017 21:28

0 Likes

0 Votes

0 Comments

#323007

I am sorry for misunderstand in earlier, perhaps you can try following method and see how it goes :

JoomlaFolder/media/com_easysocial/apps/user/custom/script.js



EasySocial.require()

.library('ui/datepicker')

.done(function($) {



  function f1(date){

    fDate = $.datepicker.formatDate("YY-mm-dd", date);

    return fDate;

  }

})

htdocs/media/com_easysocial/apps/group/app1/themes/default/canvas/default.js



EasySocial.require()

.script('<?php echo rtrim( JURI::root() , '/' );?>/media/com_easysocial/apps/user/custom/script.js')

.done(function($) {

     fDate = f1(new Date());;

})

Arlex Wong

Wednesday, 15 March 2017 13:28

0 Likes

0 Votes

0 Comments

#323125

Still my debugger says: "f1 is not defined"
the file script.js is included properly.

Gregor de Lijzer

Thursday, 16 March 2017 01:22

0 Likes

0 Votes

0 Comments

#323294

Hey Gregor,

I am sorry for the delay of this reply,

It seems like that was not possible to use this method when the page is load, for some reason it always execute this script first htdocs/media/com_easysocial/apps/group/app1/themes/default/canvas/default.js , so it was unable to define this f1 function from this script file JoomlaFolder/media/com_easysocial/apps/user/custom/script.js

Arlex Wong

Friday, 17 March 2017 21:02

0 Likes

0 Votes

0 Comments

#323708

Well i tested the same with a script.js file that does not use jQuery nor requires ES. Meaning i use plain JavaScript in script.js like



function f1(s){

  console.log(s);

}

This script is included and the code is visible to default.js. The function f1 is callable.

But at the moment i use jQuery it gets complicated.



function f1(s){

  $.xxx(yyy);

}

Can't believe that it is not possible to make includes with jQuery functionality in ES!!

Gregor de Lijzer

Friday, 17 March 2017 21:36

0 Likes

0 Votes

0 Comments

#323714

Javascripts are rendered by order on the page. If your source script loads after EasySocial, then f1 will be undefined. If your source script loads much earlier before EasySocial, then f1 would work.

This is why, all EasySocial scripts are encapsulated in a module fashion, to ensure that scripts are fully loaded first before the subsequent scripts are being executed.

Mark

Friday, 17 March 2017 23:49

0 Likes

0 Votes

0 Comments

#323733