Calling Hype Function from External Library

[waking (S. Robert)]

I want to create an external library of common functions that I use and link them to various similar Hype documents.

I’ve got the calling the external functions working - although I have to use document.getElementById rather than hypeDocument.getElementById

But I’m not able to get working calling “internal” Hype functions from the external Javascript file that has been brought into the Resource Library.

I created a test Hype document called testExternalLibraryFunctions

Within that document I created a function called: calledFromExternal that has an alert message to let me know if it works

I’ve tried create a function in my external Javascript file and calling it. I want to test it’s ability to call the internal function, but it doesn’t work:

window.parent.HYPE.documents[‘testExternalLibraryFunctions’].functions().calledFromExternal(HYPE.documents[‘testExternalLibraryFunctions’]);

Anyone know how to make this work.

Thank you.

[DBear]

A few things:

• No need to use window.parent unless your Hype document is inside an iframe.
• If you use HYPE.documents["name_of_your_doc"].functions().nameOfInternalFunction(); what do you get in the console? There shouldn’t be a problem calling an internal function this way.

Also, I’m not clear on the reasoning for having external functions call an internal function in Hype as this seems redundant. Am i missing something?

Just an FYI and it may help in your case. If you structure your external javascript file like so:

function myLibrary(hypeDocument, element, event) {

    function myFunction(){
        //do something
    }

    function myOtherFunction(){
        //do something then
        hypeDocument.startTimelineNamed("timeline", hypeDocument.kDirectionForward)
    }

    ///// END /////
    return true;
}

if("HYPE_eventListeners" in window === false) {
	window.HYPE_eventListeners = Array();
}

window.HYPE_eventListeners.push({"type":"HypeDocumentLoad", "callback":myLibrary});

you will be able to call specific Hype API methods within your external script plus also run internal functions (if you need to) by using hypeDocument.functions().myInternalFunction(hypeDocument, element, event);

Be careful though as your external functions may get muddled if they are commonly named and you are using other JS libraries within the browser window where the document lies.

[waking (S. Robert)]

That’s really helpful DBear. Thank you so much! I was able to get calling the external function to work. The myLibrary seems really useful. I tried it out but was not able to get the external functions to run using the method you shared. The internal functions still fire but the externals don’t. I’ve reviewed the code and there aren’t any syntax errors. Not sure why it’s not working for me.

The reason I want the approach of using internal functions stored within Hype and external functions in a library is a follows:

I’m going to be making a series of very similar Hype Documents - I don’t want to have to update the core code that is re-used. Just change it in one place and then re-export the projects. The internal functions will be used for code that is different and specific from one Hype Document to the next.

[DBear]

try this for the myLibrary external file

function myLibrary(hypeDocument, element, event) {

    "use strict";

    // global namespace. think of it as : window.lib = new Object; name this whatever you want
    window.lib = {};
    //
    
    lib.myFunction = function(){
        //do something
    }

    lib.myOtherFunction = function(){
        //do something then
        hypeDocument.startTimelineNamed("timeline", hypeDocument.kDirectionForward)
        // for example
    }

    ///// END /////
    return true;
}

if("HYPE_eventListeners" in window === false) {
	window.HYPE_eventListeners = Array();
}

window.HYPE_eventListeners.push({"type":"HypeDocumentLoad", "callback":myLibrary});

[steve_wolk (steve)]

I can’t seem to get this to work. I tried it with and without putting lib. before the function call in Hype.

Here’s are the files:

test-external.zip

[DBear]

https://vimeo.com/263533909

Password: 12719

This is a video response showing you how to add the external library and then call the functions within Hype.

If you or anyone wants to support more vid tutorials / response then you can check this resource out

http://patreon.com/hype_expert

[MaxZieb (Loves Hype)]

Also check out “Global Behavior” for a lister/broadcaster pattern. This makes a 1:1 call chain obsolete and you can be more dynamic on linking source to target. Also it allow 1:n broadcast and works across iFrames. But then again this might not be your cup of tea. I personally love this programming pattern.

Hype Global Behavior (Custom Behavior Extension)

[HypeGlobalBehavior] This idea got triggered back in the day when trying to explain Custom Behavior as Tweets. The idea stuck with me … Mostly I use Hype these days for Widgets in CMS-Projects, hence I thought I share the concept of a unified communication pipeline across individual widget. So, I recreated LocalConnection from the Flash-days with a little Twitter-twist and named it GlobalBehavior: Hint: The code is an extension. It enables all Hype-Widget loaded on the sa…

[DBear]

Not sure this is relevant Max as the OP and subsequent posts are for creating a function library that the posters want to use across multiple projects not the ability to communicate between Hype documents within a single HTML page. It’s a great Extension but not what the OP wants

Please don’t hijack the thread

[MaxZieb (Loves Hype)]

Well it’s not clear if he tries to solve a communication problem between page context and Hype-files or why he wants to have a shares lib.

Also might I point out that you missed a scoping issue in your video. The code only works as long as there is only on single Hype-Widget. When extending Hype through HypeDocumentLoad using the callback function myLibrary(hypeDocument, element, event) the hypeDocument is local to the function myLibrary … so if your signature in lib.myOtherFunction has no arguments =function() that actually receive the current hypeDocument lib.myOtherFunction is actually only calling the last Hype-Widget that was extend through the eventlistener HypeDocumentLoad.

To fix that you need to extend the signature to lib.myOtherFunction = function (hypeDocument) {…} as now you can be sure that the correct hypeDocument is actually targeted inside of lib.myOtherFunction.

Hope this helps.

[DBear]

Valid point max but as this is (what I believe) to be only a Library that can be imported into one document at a time and to be used on one html page (not several documents used within the same page) then the approach I have is fine. If this is not the case I’ll gladly redo or suggest another way but I can’t cover every conceivable way in 1 video as it would be way too long

Hope this helps!

[MarkHunte]

Really nice and clear video tutorial mate.

[MaxZieb (Loves Hype)]

Here is a template for libraries that …

• Offers two endpoints window[‘LIBRARYNAME’] for page functions and space to extend the hypeDocument API for internal use in the Hype Widgets.
• Offers private functions that are not visible to the outside
• Compiles against closure (https://closure-compiler.appspot.com)
• Is inited as a singleton so including it multiple times won’t reinit the library

/*! Your Library.
copyright (c) 2018 YOUR NAME, (URL). LICENSE
*/
/*
* Version-History
* 1.0   Your description here
*
*/

if("LIBRARYNAME" in window === false) window['LIBRARYNAME'] = (function () {

    var kConstant = "SOMETHING";

    var privatFunction = function(arg){
        console.log (arg);
    }
    
    /* Reveal Public interface to hypeDocument */
    var extendHype = function(hypeDocument, element, event) {

        hypeDocument.someFunction = function( arg ){
            //call privat function
            privateFunction(arg);

            //in here "this" equals to hypeDocument 
            //so the following works
            this.showNextScene(this.kSceneTransitionSwap, 1.1);
        }

        return true;
    };

    /* Setup and handlers */
    if("HYPE_eventListeners" in window === false) { window.HYPE_eventListeners = Array(); }
    window.HYPE_eventListeners.push({"type":"HypeDocumentLoad", "callback": extendHype});

    /* Reveal Public interface to window['LIBRARYNAME'] */
    return {
        publicFunction : privatFunction
    };
})();

From within Hype you then can use

 hypeDocument.someFunction("hello world");

From the page level (outside) you then can use

LIBRARYNAME.publicFunction("hello world");

[DBear]

Nice and complex. Well done! There is no need really for extending Hype in this fashion may as well just add the Library as everyone else adds one as if “LIBRARYNAME” is in global scope this won’t work. Also those functions are visible if I look at the source maybe a minify is in order

Me personally I’d rather not go so complex for the posters here but hey ho.

I’m done with this thread … sorry OP

[MarkHunte]

@MaxZieb

Well it’s not clear if he tries to solve a communication problem between page context and Hype-files or why he wants to have a shares lib.

It seems very clear to me what they want. Which is a simple way of having their own portable re usable code for similar Hype Documents.

@waking

I’m going to be making a series of very similar Hype Documents - I don’t want to have to update the core code that is re-used. Just change it in one place and then re-export the projects. The internal functions will be used for code that is different and specific from one Hype Document to the next.

It is some times worth asking the question that you are itching to answer before you post an answer that makes a thread that is flowing very well thank you very much, confusing and more complex than it needs to be.

[MaxZieb (Loves Hype)]

I mearly pointed out an alternate way todo the communications part as that is an essential part of the initial question. While being very aware that the suggestion might not fit the problem 100%. I would have left it at that but then… my “Global Behavior” answer got “flagged for removal”.

After that I looked at the video that talked about extending and explaining the scope of hypeDocument and I saw a major flaw in the scope that would produce weird errors if you use two Hype-Widgets on a page (like with the WordPress-Plugin etc.) with the suggested library template.

I then shared my working template for a library I currently use (suggestions for improvements welcome). Also there is the whole category called Extension Project that you (@MarkHunte) helped create that hasn’t even been mentioned up to this point with a very simple way to build a library
https://forums.tumult.com/c/extension-project

Again… I wouldn’t have even engaged with this thread further if that whole flagging hadn’t happend. And if someone points out an error to me I usually try to fix it.

[MarkHunte]

@MaxZieb

if you use two Hype-Widgets on a page (like with the WordPress-Plugin etc.) with

I see no mention or intent for this type of thing in this thread. So I do not agree with your 'major flaw in the scope'

The only major flaw I see is that you are widening the scope of this thread needlessly.

@MaxZieb You clearly know your stuff but please remember that there are many ways to skin a cat and individually they cannot cover all scenarios. More importantly they should not all be on one thread.

Just to add,

You can link to this thread in your Global one. And explain there that the global one will work for the scenarios you describe ...etc.

Doing it that way keeps both threads in context but also shows a link in both threads as well as notifies the OP of the link.

[h_classen (Hans-Gerd Claßen)]

anyway: it seems @waking is gone to sleep

so: be cool guys

[MaxZieb (Loves Hype)]

@MaxZieb

And if someone points out an error to me I usually try to fix it.

As I stated the above I am fully aware that there are many ways to Rome. Then again as you don't see any indications the library being used in a context with two Hype-Widgets … there is also no indication to the contrary as building a library is always a step twoards universalisation. Therfor I assumed that this might be very relevant.

@MarkHunte

You can link to this thread in your Global one. And explain there that the global one will work for the scenarios you describe …etc.

This is still a discussion forum and not a staffer ticket support system so I only agree as far we are talking about spamming a thread. I don't see this applying to my one "Global Behavior" suggestion. Again, I would have left it at that hadn't I been met with a "flagging" and dismissal. I get that dbear is doing videos now and runs patreon but that produces a dilemma as pointing out an error diminishes the work he put into recording the thing in the first place. Maybe the takeaway is that "live" video is good in a one on one situation (like a privat conversation) but not in a public discussion board that evolves and is open to anybody and will be revisited in the future by others having similar but not identical problem.

[MaxZieb (Loves Hype)]

@MaxZieb

Maybe the takeaway is that “live” video is good in a one on one situation (like a privat conversation) but not in a public discussion board that evolves and is open to anybody

I am also not saying that tutorial videos are a bad thing (on the forum). I personally love them on Youtube. But doing tutorials in video form is a lot of work as one has to prepare them much like a presentation and often record them multiple times to get them finally right. Occasionally even re-shot them when breaking changes in the Software happen and one want's to stay relevant. Just adding this as I think that videos in general are a good thing.

[steve_wolk (steve)]

Thank you so much DBear! Very helpful video. I’m going to sign up for your Hype Tutorials.