Call inner Javascript functions from .js file

Question

I'm working on an ASP.NET MVC 4 application. I am using the GetUikit css library which also offers some basic javascript/ jQuery powered stuff. I'm using the Off canvas component which is actually working.

Getuikit: https://github.com/uikit/uikit http://getuikit.com/index.html

Offcanvas Component: http://getuikit.com/docs/offcanvas.html

I can call the offcanvas as advertised via an anchor tag. That's no problem at all. I would want to be able to hide and show the offcanvas area from javascript. I've tracked down the specific Javascript section in the UIKit provided .js file. This section looks like this:

(function($, UI) {

"use strict";

var $win      = $(window),
    $doc      = $(document),
    Offcanvas = {

    show: function(element) {

        element = $(element);

        if (!element.length) return;            

        var doc       = $("html"),
            bar       = element.find(".uk-offcanvas-bar:first"),
            rtl       = ($.UIkit.langdirection == "right"),
            dir       = (bar.hasClass("uk-offcanvas-bar-flip") ? -1 : 1) * (rtl ? -1 : 1),
            scrollbar = dir == -1 && $win.width() < window.innerWidth ? (window.innerWidth - $win.width()) : 0;

        scrollpos = {x: window.scrollX, y: window.scrollY};

        element.addClass("uk-active");

        doc.css({"width": window.innerWidth, "height": window.innerHeight}).addClass("uk-offcanvas-page");
        doc.css((rtl ? "margin-right" : "margin-left"), (rtl ? -1 : 1) * ((bar.outerWidth() - scrollbar) * dir)).width(); // .width() - force redraw

        bar.addClass("uk-offcanvas-bar-show").width();

        setTimeout(function() {
            /*SELF ADDED FOR ARROW*/
            var elementArrow = document.getElementById('notification-arrow');
            $(elementArrow).css("display", "inline-block");
            /*--------------------*/
        }, 250);


        element.off(".ukoffcanvas").on("click.ukoffcanvas swipeRight.ukoffcanvas swipeLeft.ukoffcanvas", function(e) {                


            var target = $(e.target);

            if (!e.type.match(/swipe/)) {

                if (!target.hasClass("uk-offcanvas-close")) {


                    if (target.hasClass("uk-offcanvas-bar")) return;
                    if (target.parents(".uk-offcanvas-bar:first").length) return;
                }
            }



            e.stopImmediatePropagation();
            Offcanvas.hide();
        });



        $doc.on('keydown.ukoffcanvas', function(e) {
            if (e.keyCode === 27) { // ESC
                Offcanvas.hide();
            }
        });


    },

    hide: function(force) {

        var doc   = $("html"),
            panel = $(".uk-offcanvas.uk-active"),
            rtl   = ($.UIkit.langdirection == "right"),
            bar   = panel.find(".uk-offcanvas-bar:first");

        if (!panel.length) return;

        /*SELF ADDED FOR ARROW*/
        $('#notification-arrow').css("display", "none");
        /*--------------------*/

        if ($.UIkit.support.transition && !force) {

            doc.one($.UIkit.support.transition.end, function() {
                doc.removeClass("uk-offcanvas-page").attr("style", "");
                panel.removeClass("uk-active");
                window.scrollTo(scrollpos.x, scrollpos.y);
            }).css((rtl ? "margin-right" : "margin-left"), "");

            setTimeout(function(){
                bar.removeClass("uk-offcanvas-bar-show");
            }, 50);

        } else {
            doc.removeClass("uk-offcanvas-page").attr("style", "");
            panel.removeClass("uk-active");
            bar.removeClass("uk-offcanvas-bar-show");
            window.scrollTo(scrollpos.x, scrollpos.y);
        }

        panel.off(".ukoffcanvas");
        $doc.off(".ukoffcanvas");
    }

}, scrollpos;


var OffcanvasTrigger = function(element, options) {

    var $this    = this,
        $element = $(element);

    if($element.data("offcanvas")) return;

    this.options = $.extend({
        "target": $element.is("a") ? $element.attr("href") : false
    }, options);

    this.element = $element;

    $element.on("click", function(e) {
        e.preventDefault();
        Offcanvas.show($this.options.target);
    });

    this.element.data("offcanvas", this);
};

OffcanvasTrigger.offcanvas = Offcanvas;

UI["offcanvas"] = OffcanvasTrigger;


// init code
$doc.on("click.offcanvas.uikit", "[data-uk-offcanvas]", function(e) {

    e.preventDefault();

    var ele = $(this);

    if (!ele.data("offcanvas")) {
        var obj = new OffcanvasTrigger(ele, UI.Utils.options(ele.attr("data-uk-offcanvas")));
        ele.trigger("click");
    }
});

})(jQuery, jQuery.UIkit);

I found one similar thread on Stackoverflow ( How can I access the inner functions of this script? ) which suggested I'd need to use the following method:

jQuery.UIkit.offcanvas.offcanvas.show('#alerts-canvas');

Where #alerts-canvas is the id of my offcanvas area. When I try to call this from javascript I get the following Javascript error: Uncaught TypeError: Cannot read property 'offcanvas' of undefined .

I have no idea what I'm doing wrong, but I really hope this will work because I really need this to work.

I made sure the script is linked (this happens for all pages in the general _Layout page.

Do you guys have any idea what I might be doing wrong?

Answer 1

尝试

$.UIkit.offcanvas.show('#alerts-canvas');