Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Making JS local function globally accessible

I have a function inside a function that I need to access directly.

//#############################################################
//# Global vars
//#############################################################
var canvasWidth = 585;
var canvasHeight = 780;

//#############################################################
//# Init the canvas
//#############################################################
window.onload = function() {
    initStage();
};

//#############################################################
//# Init the main stage
//#############################################################
function initStage() {

    //*************************************************************
    //* Create a stage to work with
    //*************************************************************
    var stage = new Kinetic.Stage({
        container: "container",
        width: canvasWidth,
        height: canvasHeight
    });

    var layerOne = new Kinetic.Layer();
    var imageObj = new Image();

    //*************************************************************
    //* Load the image into a layer on the stage
    //*************************************************************
    ... Some Code ...

    //*************************************************************
    //* Set the hidden field value to the canvas dataURL
    //*************************************************************
    function autoSave(){
        stage.toDataURL({
            callback: function(dataUrl){
                document.getElementById("mapping-form:hiddenDataURL").value = dataUrl;
                console.log("Auto Save excecuted");
            }, 
            mimeType: 'image/jpeg', 
            quality: 1.0
        });        
    }

    //*************************************************************
    //* Function called to add text to the stage
    //*************************************************************
    ... Some Code ...    

        layerTwo.add(txt);
        stage.add(layerTwo);

    });

}

I'm trying to access autoSave() (that in return requires the stage var from the parent function). I understand why I can't access it, but Im struggling to see how I can alter the code to make it accessible.

My first thought was simply to declare a 'higher scoped' var and assign the function to it. The problem is (as far as I can see) that this doesn't actually allow me to execute the autoSave() at the requested time.

Apologies for the 'basic natur of this question, I'm new to JS and I think this is going to be fundamental!

like image 759
tarka Avatar asked Feb 08 '13 09:02

tarka


2 Answers

You can make your function globally accessible and still keep reference to variables in the scope in which it was created. Simply create and assign it in window scope - e.g. instead of defining it as:

function autoSave() {
    // ... code ...
}

declare it as:

window.autoSave = function() {
    // .... code ....
}

you will now be able to call it anywhere (provided the initStage method has been called to declare it first, of course).

like image 128
Grim Avatar answered Sep 28 '22 06:09

Grim


You can assign the autoSave function to the this object, i.e.

function initStage() {        
    ... Some Code ...
    this.autoSave = function(){
        ... Some Code ...        
    }

    return this;
}

Now you can call

initStage().autoSave();
like image 29
Will Hawker Avatar answered Sep 28 '22 06:09

Will Hawker