havingagoatit
havingagoatit

Reputation: 583

How Can i call from external js file

I have a javascript file that contains the following objects and functions........

;( function( window ) {

    'use strict';

    function extend( a, b ) {
        for( var key in b ) { 
            if( b.hasOwnProperty( key ) ) {
                a[key] = b[key];
            }
        }
        return a;
    }

    // taken from https://github.com/inuyaksa/jquery.nicescroll/blob/master/jquery.nicescroll.js
    function hasParent( e, id ) {
        if (!e) return false;
        var el = e.target||e.srcElement||e||false;
        while (el && el.id != id) {
            el = el.parentNode||false;
        }
        return (el!==false);
    }

    // returns the depth of the element "e" relative to element with id=id
    // for this calculation only parents with classname = waypoint are considered
    function getLevelDepth( e, id, waypoint, cnt ) {
        cnt = cnt || 0;
        if ( e.id.indexOf( id ) >= 0 ) return cnt;
        if( classie.has( e, waypoint ) ) {
            ++cnt;
        }
        return e.parentNode && getLevelDepth( e.parentNode, id, waypoint, cnt );
    }


    // returns the closest element to 'e' that has class "classname"
    function closest( e, classname ) {
        if( classie.has( e, classname ) ) {
            return e;
        }
        return e.parentNode && closest( e.parentNode, classname );
    }

function mlPushMenu( el, trigger, options ) {   
        this.el = el;
        this.trigger = trigger;
        this.options = extend( this.defaults, options );
        // support 3d transforms
        this.support = Modernizr.csstransforms3d;
        if( this.support ) {
            this._init();
        }
    }

    mlPushMenu.prototype = {
        defaults : {
            // overlap: there will be a gap between open levels
            // cover: the open levels will be on top of any previous open level
            type : 'overlap', // overlap || cover
            // space between each overlaped level
            levelSpacing : 40,
            // classname for the element (if any) that when clicked closes the current level
            backClass : 'mp-back'
        },
        _init : function() {
            // if menu is open or not
            this.open = false;
            // level depth
            this.level = 0;
            // the moving wrapper
            this.wrapper = document.getElementById( 'mp-pusher' );
            // the mp-level elements
            this.levels = Array.prototype.slice.call( this.el.querySelectorAll( 'div.mp-level' ) );
            // save the depth of each of these mp-level elements
            var self = this;
            this.levels.forEach( function( el, i ) { el.setAttribute( 'data-level', getLevelDepth( el, self.el.id, 'mp-level' ) ); } );
            // the menu items
            this.menuItems = Array.prototype.slice.call( this.el.querySelectorAll( 'li' ) );
            // if type == "cover" these will serve as hooks to move back to the previous level
            this.levelBack = Array.prototype.slice.call( this.el.querySelectorAll( '.' + this.options.backClass ) );
            // event type (if mobile use touch events)
            this.eventtype = mobilecheck() ? 'touchstart' : 'click';
            // add the class mp-overlap or mp-cover to the main element depending on options.type
            classie.add( this.el, 'mp-' + this.options.type );
            // initialize / bind the necessary events
            this._initEvents();
        },

        // close the menu
        _resetMenu : function() {
            this._setTransform('translate3d(0,0,0)');
            this.level = 0;
            // remove class mp-pushed from main wrapper
            classie.remove( this.wrapper, 'mp-pushed' );
            this._toggleLevels();
            this.open = false;
        },



// add to global namespace
    window.mlPushMenu = mlPushMenu;

} )( window );

The question I have is how do I call the object _resetMenu in another script. to my poor knowledge it should be ......

window.mlPushMenu._resetMenu(); 

that should execute that object in my mind but it isn't working so clealy I am wrong ... Any help here would be much appreciated..

this is the example of the button I have created thus far.....

$('.iconM-referrals').on('click', function () {
      window.mlPushMenu._resetMenu();
      $("#colorscreen").remove();
     $("body").append('<div id="colorscreen" class="animated"></div>');
     $("#colorscreen").addClass("fadeInUpBig");
      $('.fadeInUpBig').css('background-color', 'rgba(13,135,22,0.3)');

Upvotes: 3

Views: 174

Answers (1)

Katana314
Katana314

Reputation: 8620

The way you have mlPushMenu set up is as a Constructor, not as a stand-alone module. (See: Any tutorial on Object-Oriented programming) You'd need to construct an instance variable to call the function. For instance:

myInstanceOfPushMenu = new mlPushMenu();
myInstanceOfPushMenu._resetMenu();

This, however, is assuming that the script inclusion and declaration, and anything left out of your question, is all set up properly.

Upvotes: 1

Related Questions