Benutzer: Marc.Saleiko/barcelona.js: Unterschied zwischen den Versionen

Aus LehramtsWiki
Wechseln zu: Navigation, Suche
(Die Seite wurde neu angelegt: „→‎! * * Copyright (c) David Bushell | http://dbushell.com/ *: (function(window, document, undefined) { // helper functions var trim = function…“)
 
K (Die Seite wurde geleert.)
 
Zeile 1: Zeile 1:
/*!
*
*  Copyright (c) David Bushell | http://dbushell.com/
*
*/
(function(window, document, undefined)
{


    // helper functions
    var trim = function(str)
    {
        return str.trim ? str.trim() : str.replace(/^\s+|\s+$/g,'');
    };
    var hasClass = function(el, cn)
    {
        return (' ' + el.className + ' ').indexOf(' ' + cn + ' ') !== -1;
    };
    var addClass = function(el, cn)
    {
        if (!hasClass(el, cn)) {
            el.className = (el.className === '') ? cn : el.className + ' ' + cn;
        }
    };
    var removeClass = function(el, cn)
    {
        el.className = trim((' ' + el.className + ' ').replace(' ' + cn + ' ', ' '));
    };
    var hasParent = function(el, id)
    {
        if (el) {
            do {
                if (el.id === id) {
                    return true;
                }
                if (el.nodeType === 9) {
                    break;
                }
            }
            while((el = el.parentNode));
        }
        return false;
    };
    // normalize vendor prefixes
    var doc = document.documentElement;
    var transform_prop = window.Modernizr.prefixed('transform'),
        transition_prop = window.Modernizr.prefixed('transition'),
        transition_end = (function() {
            var props = {
                'WebkitTransition' : 'webkitTransitionEnd',
                'MozTransition'    : 'transitionend',
                'OTransition'      : 'oTransitionEnd otransitionend',
                'msTransition'    : 'MSTransitionEnd',
                'transition'      : 'transitionend'
            };
            return props.hasOwnProperty(transition_prop) ? props[transition_prop] : false;
        })();
   
    /**
    *  Add functionality for navigation slide-in
    */
    window.App = (function()
    {
        var _init = false, app = { };
        var inner = document.getElementById('innerWraper'),
            nav_open = false,
            nav_class = 'js-nav';
        app.init = function()
        {
           
            if (_init) {
                return;
            }
            _init = true;
            var closeNavEnd = function(e)
            {
                if (e && e.target === inner) {
                    document.removeEventListener(transition_end, closeNavEnd, false);
                }
                nav_open = false;
            };
            app.closeNav =function()
            {
                if (nav_open) {
                    // close navigation after transition or immediately
                    var duration = (transition_end && transition_prop) ? parseFloat(window.getComputedStyle(inner, '')[transition_prop + 'Duration']) : 0;
                    if (duration > 0) {
                        document.addEventListener(transition_end, closeNavEnd, false);
                    } else {
                        closeNavEnd(null);
                    }
                }
                removeClass(doc, nav_class);
            };
            app.openNav = function()
            {
                if (nav_open) {
                    return;
                }
                addClass(doc, nav_class);
                nav_open = true;
            };
            app.toggleNav = function(e)
            {
                if (nav_open && hasClass(doc, nav_class)) {
                    app.closeNav();
                } else {
                    app.openNav();
                }
                if (e) {
                    e.preventDefault();
                }
            };
            // open nav with main "nav" button
            document.getElementById('navBtn').addEventListener('click', app.toggleNav, false);
            // close nav with main "close" button
            document.getElementById('closeBtn').addEventListener('click', app.toggleNav, false);
            // close nav by touching the partial off-screen content
            document.addEventListener('click', function(e)
            {
                if (nav_open && !hasParent(e.target, 'nav') && !hasParent(e.target, 'top')) {
                    e.preventDefault();
                    app.closeNav();
                }
            },
            true);
            addClass(doc, 'js-ready');
        };
        return app;
    })();
    if (window.addEventListener)
        {
            window.addEventListener('DOMContentLoaded', window.App.init, false);
        }

Aktuelle Version vom 13. November 2013, 13:24 Uhr