Topic Closed
mabu
214 Posts
2.1K Downloads
3 Themes
8 Plugins

I am looking for a clean method to add a Javascript to a plugin

(evtl. with PageRunScript hook function)

$external_js[] = "https://somecdn.com/some-jquery-plugin.js"; --- but how to use it in a plugin ?

In the codemirror - plugin i find akward calls like

if (requirePresent){      var location = CKEDITOR.getUrl('plugins/codemirror/js');
                require.config({                     packages: [{
                        name: 'codemirror',                         location: location,                         main: 'codemirror.min.js'.........

and in ckawsome  CKEDITOR.dialog.add('ckawesomeDialog', this.path + 'dialogs/ckawesome.js');

There is a commercial https://ckeditor.com/cke4/addon/doksoftinclude and also

I found it meanwhile myself: https://docs.ckeditor.com/ckeditor4/latest/api/CKEDITOR_scriptLoader.html#method-load  : CKEDITOR.scriptLoader.load( '/myscript.js' );

(i want to load a .json file into a js-array and got with jquery the error of unexpected in line 1/1. But have found a json3.js at github, but not only for that!)

https://gist.github.com/anthonykozak/5bc706dc5128c337bc73f587e187102d  - which must still reduce

Edited: 1 year ago#10985

juergen
1.4K Posts
51.7K Downloads
16 Plugins
design, web development & visual effects

It largely depends on when and where you need the JavaScript (see the docs)

Generally, you'll need

global $page, $addonRelativeCode;

Loading external scripts is best done via

$page->head .= '<script src="https://some.cdn/script.js"></script>';

while for local, static scripts it's

$page->head_js[] = $addonRelativeCode . '/some-local-static.js';

When placed in the GetHead (action) hook, it will always be loaded on every page.

If you only need the JS on a certain Admin_Link or Special_Link page, add it to the corresponding output method.
Same basically also applies to Gadgets (but it has to be noted that most themes load all Gadget assets by default unless they are disabled and re-added to certain layouts manually).

For adding JS components only required for editing certain section types, it's the InlineEdit_Scripts (filter) hook. AFAIK you cannot add external scripts via this (ajax called) hook because async loading components could break the crucuial loading order. But I haven't tried.

 

i want to load a .json file into a js-array and have found a json3.js at github, but not only for that!

In JS use $.getJSON(). It will return the json data (already parsed as JS array/object) to the success method.


In PHP, e.g. use

$my_json = file_get_contents('path/to/the/file.json');

Then you can decode it to a PHP array using

$array_from_my_json = json_decode($my_json);

for further processing.

Or simply output it to the page's JS via

$page->head_script .= "\nvar my_json = '" . $my_json . "';\n";

then you can use this JS

var my_data = JSON.parse(my_json);

to get an object/array from the data.

 

 

Edited: 1 year ago#10986

juergen
1.4K Posts
51.7K Downloads
16 Plugins
design, web development & visual effects

evtl. with PageRunScript hook function

The PageRunScript (filter) hook is rather meant to run PHP script code, mostly in order to modify the $page object by processing GET or POST data.
But you can also use it for pure AJAX responses or even let the execution stack exit with arbitrary output.

Edited: 1 year ago#10987

juergen
1.4K Posts
51.7K Downloads
16 Plugins
design, web development & visual effects

i want to load a .json file into a js-array and got with jquery the error of unexpected in line 1/1. But have found a json3.js at github, but not only for that!

AFAIK CK Editor's script loader will expect JS, not JSON.
Therefore you will have to add this

var my_json = { "here" : "comes", "the" : "json" };

and (better) save the file als .js

Or try to use CKEDITOR.ajax to load JSON. Seems to work similar to jQuery.getJSON().
Both should work.

1 year ago#10988

mabu
214 Posts
2.1K Downloads
3 Themes
8 Plugins

I see that You stand firmly in the software. I tried  before : 

var JSONItems = [];
$.getJSON( "fa/fa5free.json", function( data){
  JSONItems = data;
  console.log(JSONItems);
});

and get the constant error :  JSON.parse: unexpected character at line 1 column 1 of the JSON data. (i tried also other methods with the same error)

Therefore i tried to embedd the  json3.js which runs in a no-conflict mode  and has other advantages.

CKEDITOR.scriptLoader.load( '/myscript.js' ); Now i have also an easy way  embedd the fa5 free  all.js

FA5 has the disadvantage of 3 families. With the method of ckawsome the dropdown functions, but most of the icons at the left side are grayed out depending on what is used instead of fa.

So i need either a complicted styling algorythm. The other possibility are  3 (shorter) dropdowns (and finally a menu as in bootstrap-iconpicker). I hope for monday...

 

Edited: 1 year ago#10991

juergen
1.4K Posts
51.7K Downloads
16 Plugins
design, web development & visual effects
var JSONItems = [];
$.getJSON( "fa/fa5free.json", function( data){
  JSONItems = data;
  console.log(JSONItems);
});

Most likely an incorrect path. You will have to prepend the $addonRelativeCode value here…

GetHead hook:

$page->head_script .= "\n" . 'var fa5_addon_base = "' . $addonRelativeCode . '";' . "\n";

or

InlineEdit_Scripts hook:

$scripts['code'] = 'var fa5_addon_base = "' . $addonRelativeCode . '";';

then in JS try

var JSONItems = [];
$.getJSON( fa5_addon_base + "/fa/fa5free.json", function(data){
  JSONItems = data;
  console.log(JSONItems);
});
Edited: 1 year ago#10992

mabu
214 Posts
2.1K Downloads
3 Themes
8 Plugins

It seems to be the path, because /fa1/fa5free.json gives the same error . But i am not quite sure because the same is if the .json is in the same directory as the ckawsome.js where it is for test embedded. ( Request ./fa5free.json - Line5 - Column15991 - Details messageJSON.parse: unexpected character at line 1 column 1 of the JSON data) -  the same with only  'fa5free.json'

I know  https://www.typesettercms.com/Docs/Plugins/HTML_Head with YourPlugin/script.php ( function plugin_function($js_files){     global $addonRelativeCode,$page;     $page->head_js[] = $addonRelativeCode.'/javascript.js'; }

But $addonRelativeCode is a php - variable, and var al1 = $addonRelativeCode; alert(al1); gives naturally  no path in the ckawsome.js - or what do i see false ?

I only know this.href , this.url,  or  window.location.pathname  or similar(error : undefined). I want to load the.json into a javascript-variable in the ckawsome.js

But the problem is still deeper : An embedded var data = CKEDITOR.ajax.load( 'somedata.txt' ); alert( data ); with somedata.txt in the same folder lets the plugin hang.

The path-problem  is obviously because the plugin is just hooked in. The idea to improve the hook-code comes of course  too late(  var ckplugin_addon_base )

I added $scripts['code'] = 'var fa5_addon_base = "' . $addonRelativeCode . '";';  to the 'get head' in the  script.php , which gives the error " (string)syntax error, unexpected '$scripts' (T_VARIABLE), expecting function (T_FUNCTION) "" - so where must i put it ?

 

Edited: 1 year ago#10993

juergen
1.4K Posts
51.7K Downloads
16 Plugins
design, web development & visual effects

I'm not sure if are we talking abot a Typesetter plugin or a pure CKEditor plugin?

$addonRelativeCode only applies to Typesetter plugins (installed via Admin Toolbox->Plugiins->Manage). Those may also contain CKeditor plugins.

Pure CKeditor plugins (installed via Admin Toolbox->Settings->CKeditor) will go to /data/_ckeditor/[plugin_folder] and neither have PHP backends nor PHP variables.

1 year ago#10994

mabu
214 Posts
2.1K Downloads
3 Themes
8 Plugins

I have these problems within the typesetter - plugin, and i see that i have to deepen my  knowledge about hooks...

I see (first after deep sleep and meditation ) i have to add to addon.ini

[InlineEdit_Scripts]
script = 'script.php'
method = 'class1::InlineEdit_Scripts1'

and then to script.php something like ....

static function InlineEdit_Scripts1($scripts, $type){
    global $addonRelativeCode;
    if( $type !== 'text' ){
      return $scripts;
    }
   $scripts['code'] = 'var fa5_addon_base = "' . $addonRelativeCode . '";';
    return gpAjax::InlineEdit_Text($scripts);
  }

But i am not quite sure about the code of the function(type=text ?). With the above added the error with $.getJSON( 'fa5free.json', function( data){ ...  has disappeared, but i have to test it deeper.

I think it makes sense to develop one code for all :  txt, js , json, etc : var CKbase (it is a bit like that You can also develop it all Yourself....) .

(P.S. I found an interesting video at Youtube :    Responsive columns in Typesetter CMS. It would be an enhancement to be easy able to add a userspecific field to the 'Content Type' -  like a some bootstrap code - together with the magic line - ckeditor plugin)

Edited: 1 year ago#10995

juergen
1.4K Posts
51.7K Downloads
16 Plugins
design, web development & visual effects

The $type parameter of the InlineEdit_Scripts hook function call is used as a filter to only modify the $scripts array for specific section types, so the 'early exit' condition…

if( $type !== 'text' ){
    return $scripts;
}

will exit the function call by returning the unaltered $scripts array for every section that's not of the 'text' (= "Editable Text") type.

Edited: 1 year ago#10996

juergen
1.4K Posts
51.7K Downloads
16 Plugins
design, web development & visual effects

It would be an enhancement to be easy able to add a userspecific field to the 'Content Type'

We have filter hooks (Section Types, NewSections, GetDefaultContent) for that too – unfortunately the array structure to define custom section combos is rather awkward.
You can look up SliderFactory's code to see them in action.

1 year ago#10997

mabu
214 Posts
2.1K Downloads
3 Themes
8 Plugins

Sorry - but i have two more problems :

A. I created a fafree.js file which contains :

var fabfam=[ "fa-500px" , "fa-accessible-icon" , "fa-accusoft" , "fa-adn" ,.............. ],

var farfam  = [.. ];

var fasfam  = [ ...   ];

and loaded the script with

CKEDITOR.scriptLoader.load(CKEDITOR.plugins.getPath('ckawsome5') + 'dialogs/fa5free.js');

But the content does not seem to be included as with the select.js.

A : var nn = farfam.includes("fa-adn"); alert(nn); does only function if if add the code direct into the dialog.js.

I want to check in which of the 3 var's the icon is and change FA to the respective far-fab-fas with this

B    ck_base - problem

static function InlineEdit_Scripts1($scripts, $type){
    global $addonRelativeCode;
    $scripts['code'] = 'var ck_base = "' . $addonRelativeCode . '";';
    return gpAjax::InlineEdit_Text($scripts);
  }

has the problem that alert(ck_base) lets the editor hang.

 

 

Edited: 1 year ago#10998

juergen
1.4K Posts
51.7K Downloads
16 Plugins
design, web development & visual effects

… that alert(ck_base) lets the editor hang.

better try

var ck_base_is = typeof(ck_base) == 'undefined' ? 'undefined' : ck_base;
console.log("ck_base = " + ck_base_is);

and watch the browser's JS console

1 year ago#10999

juergen
1.4K Posts
51.7K Downloads
16 Plugins
design, web development & visual effects

…and add sth. like

console.log('fa5free.js was loaded');

to the end of fa5free.js

1 year ago#11000

mabu
214 Posts
2.1K Downloads
3 Themes
8 Plugins

After F12  the console gives me

A. ck_base = undefined

B.  SyntaxError: missing ] after element list[Learn More]   fa5free-all-min2.js ; (but all 3 lists  are in [ ] - i have checked that thrice!

and also : Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user’s experience. For more help http://xhr.spec.whatwg.org/ 

At https://fonticonpicker.github.io/   the listing is different  : var icm_icons = {.... };

Edited: 1 year ago#11001

juergen
1.4K Posts
51.7K Downloads
16 Plugins
design, web development & visual effects

in http://net.square7.ch/fa5free-all-min2.js
you have 2 quotes, search for

"fa-bus""

 

1 year ago#11003

juergen
1.4K Posts
51.7K Downloads
16 Plugins
design, web development & visual effects

Synchronous XMLHttpRequest on the main thread is deprecated

It's only a 'deprecated' warning - not a real issue.

At https://fonticonpicker.github.io/   the listing is different  : var icm_icons = {.... };

var icm_icons = { 'Web Applications' : [57436, 57437, … ], 'Business Icons' : [57347, 57348, …], … };

That's a JS object with arrays as values

Edited: 1 year ago#11004

juergen
1.4K Posts
51.7K Downloads
16 Plugins
design, web development & visual effects

in our case, the log entry

ck_base = undefined

tells us that the script function trying to access it runs in a different scope.
Therefore we will have to
A) make it a global variable (suboptimal)
    $scripts['code'] = 'window.ck_base = "' . $addonRelativeCode . '";';

or better

B) add it to a already existing global JS object, e.g. the $gp object:

PHP

static function InlineEdit_Scripts1($scripts, $type){
  global $addonRelativeCode;
  $scripts['code'] = '$gp.ck_base = "' . $addonRelativeCode . '";';
  return gpAjax::InlineEdit_Text($scripts);
}

JS

Test:

var ck_base_is = typeof($gp.ck_base) == 'undefined' ? 'undefined' : $gp.ck_base;
console.log("$gp.ck_base = " + ck_base_is);

Load

CKEDITOR.scriptLoader.load(
  $gp.ck_base + 'dialogs/fa5free-all-min.js'
);

but

CKEDITOR.scriptLoader.load(
  CKEDITOR.plugins.getPath('ckawsome5') 
  + 'dialogs/fa5free-all-min.js'
);

should also work with the fixed quotes ("fa-bus"")

Edited: 1 year ago#11005

juergen
1.4K Posts
51.7K Downloads
16 Plugins
design, web development & visual effects

It seems to me that you aren't using a real code editor with syntax highlighting, which immediately reveals bad quoting (and other syntax errors).

A selection of free code editors

Notepad2 --> very fast and lean Windows Notepad replacement (Win7, haven't tested it on Win8-10)
Notepad++ --> a quite capable and very popular editor (Win)
Atom.io --> advanced  (Win/Mac/Linux)
Visual Studio Code --> probably the best (Win/Mac/Linux)

Edited: 1 year ago#11006

mabu
214 Posts
2.1K Downloads
3 Themes
8 Plugins

I  will try Your hints - but i use notepad++ portable with some plugins ! I have also Visual studio code (and visual studio community)  which are so slow that i would have to buy an ssd disk. But i have now the F12 which i found in the web..!

Still  there should be a replacement for XMLHttpRequest for php 7.1  at least in the plugins where jquery is present. There are compatibility checkers like https://github.com/sstalle/php7cc, https://github.com/wimg/PHPCompatibility and https://github.com/frenck/PHPCompatibility which may have a limited value.

------------------------- and now my  result : ----------------------------------------------

ReferenceError: removeAll is not defined[Learn More]  jquery.js:7:1
GET
http://localhost/type51/addons/ckawsome5_/ckawsome5/resources/select2/select2.full.min.css [HTTP/1.1 404 Not Found 16ms] ((:: in plugin.js - but the dropdown functions))
$gp.ck_base = undefined  ckawsome5.js:5:1 ((::  5.1 : Your above test, line 2 : console.log("$gp.ck_base = " + ck_base_is); ))
GET
http://localhost/type51/Admin/CKEditor/undefineddialogs/fa5free-all-min2.js [HTTP/1.1 404 Not Found 12ms] ((:: strange  ..tor/undefineddialogs/fa...))
fa5free.js was loaded  fa5free-all-min2.js:5:1  ((:: 5.1 : from : console.log('fa5free.js was loaded');))
Loading failed for the <script> with source “http://localhost/type51/Admin/CKEditor/undefineddialogs/fa5free-all-min2.js”.  Example:1 ((:: P.S. Loaded first with Your method and then a second time with the ckeditor-method, which has an error))

--------------------------------------------------------------------------------------------

The ckawsome-plugin from ckeditor.com has only : 

ReferenceError: removeAll is not defined[Learn More]    jquery.js:7:1    ---------------    and

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user’s experience. For more help http://xhr

--------------- Inspite of all troubles : I got the selection functioning - i have 2 stylings and hope for monday and the first release.....

Edited: 1 year ago#11007

Topic Closed

 

News

Typesetter 5.1
8/12/2017

Typesetter 5.0.1 is now available for download. 5.1 includes bug fixes, UI/UX improvements, ... Read More

Over 8 Times Faster Than Wordpress
5/3/2016

We've known for a long time that Typesetter is fast. It's something we take pride ... Read More

More News

creisi productions

Dienstleistungen von creisi productions, Luzern (Schweiz): * Konzeption, Planung und Erstellung Ihres Internet-Auftritts * Betreuung und Aktualisierung/Pflege Ihrer Website * ...

Find out more about our Provider Spotlight

Log In

  Register