SmartStoreNET/src/Presentation/SmartStore.Web/Scripts/smartstore.responsiveNav.js at 4.x · mp52016/SmartStoreNET · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
/*
*  Project: Responsive nav/tabs
*  Author: Murat Cakir, SmartStore AG
*  Date: 16.01.2016
*/

; (function ($, window, document, undefined) {

	var pluginName = 'responsiveNav';
	var viewport = ResponsiveBootstrapToolkit;

	function ResponsiveNav(element, options) {
		var self = this;

		this.element = element;
		var el = this.el = $(element);
		var opts = this.options = $.extend({}, options);

		function collapseNav() {
			if (el.data('offcanvas')) return;

			// create offcanvas wrapper
			var offcanvas = $('<aside class="offcanvas offcanvas-nav offcanvas-right offcanvas-overlay offcanvas-fullscreen" data-overlay="true"><div class="offcanvas-content"></div></aside>').appendTo('body');

			// handle .offcanvas-closer click
			offcanvas.one('click', '.offcanvas-closer', function (e) {
				offcanvas.offcanvas('hide');
			});

			// put .tab-content into offcanvas wrapper
			var tabContent = el.find('.tab-content');
			tabContent.appendTo(offcanvas.children().first());
			el.data('tab-content', tabContent).data('offcanvas', offcanvas).addClass('collapsed');

			tabContent.find('.tab-pane').addClass('offcanvas-scrollable');

			el.find('.nav .nav-item')
                .attr('data-toggle', 'offcanvas')
                .attr('data-placement', 'right')
                .attr('data-fullscreen', 'true')
                .attr('data-disablescrolling', 'true')
                .data('target', offcanvas);
		}

		function restoreNav() {
			if (!el.data('offcanvas')) return;

			// move .tab-content back to its origin
			var offcanvas = el.data('offcanvas');
			var tabContent = el.data('tab-content');
			tabContent.appendTo(el);
			offcanvas.remove();

			tabContent.find('.tab-pane').removeClass('offcanvas-scrollable');
			el.removeClass('collapsed').removeData('tab-content').removeData('offcanvas');

			el.find('.nav .nav-item')
                .removeAttr('data-toggle')
                .removeAttr('data-placement')
                .removeAttr('data-fullscreen')
                .removeAttr('data-disablescrolling')
                .removeData('target');
		}

		function toggleOffCanvas() {
            var breakpoint = el.data('breakpoint') || '<lg';
			if (viewport.is(breakpoint)) {
				collapseNav();
			}
			else {
				restoreNav();
			}
		}

		this.init = function () {
            EventBroker.subscribe("page.resized", function (msg, viewport) {
				toggleOffCanvas();
			});

			_.delay(toggleOffCanvas, 10);
		};

		this.initialized = false;
		this.init();
		this.initialized = true;
	}

    ResponsiveNav.prototype = {
        // [...]
    };

	// the global, default plugin options
    var defaults = {
        // [...]
    };
	$[pluginName] = { defaults: defaults };


    $.fn[pluginName] = function (options) {
        return this.each(function () {
            if (!$.data(this, pluginName)) {
                options = $.extend({}, $[pluginName].defaults, options);
                $.data(this, pluginName, new ResponsiveNav(this, options));
            }
        });
    };

})(jQuery, window, document);