Otaku-Projects /
AngularJS-CRUD-PHP
| @@ 3005-3156 (lines=152) @@ | ||
| 3002 | ||
| 3003 | })(UIkit2); |
|
| 3004 | ||
| 3005 | (function(UI) { |
|
| 3006 | ||
| 3007 | "use strict"; |
|
| 3008 | ||
| 3009 | UI.component('nav', { |
|
| 3010 | ||
| 3011 | defaults: { |
|
| 3012 | toggle: '>li.uk-parent > a[href="#"]', |
|
| 3013 | lists: '>li.uk-parent > ul', |
|
| 3014 | multiple: false |
|
| 3015 | }, |
|
| 3016 | ||
| 3017 | boot: function() { |
|
| 3018 | ||
| 3019 | // init code |
|
| 3020 | UI.ready(function(context) { |
|
| 3021 | ||
| 3022 | UI.$('[data-uk-nav]', context).each(function() { |
|
| 3023 | var nav = UI.$(this); |
|
| 3024 | ||
| 3025 | if (!nav.data('nav')) { |
|
| 3026 | var obj = UI.nav(nav, UI.Utils.options(nav.attr('data-uk-nav'))); |
|
| 3027 | } |
|
| 3028 | }); |
|
| 3029 | }); |
|
| 3030 | }, |
|
| 3031 | ||
| 3032 | init: function() { |
|
| 3033 | ||
| 3034 | var $this = this; |
|
| 3035 | ||
| 3036 | this.on('click.uk.nav', this.options.toggle, function(e) { |
|
| 3037 | e.preventDefault(); |
|
| 3038 | var ele = UI.$(this); |
|
| 3039 | $this.open(ele.parent()[0] == $this.element[0] ? ele : ele.parent("li")); |
|
| 3040 | }); |
|
| 3041 | ||
| 3042 | this.update(); |
|
| 3043 | ||
| 3044 | UI.domObserve(this.element, function(e) { |
|
| 3045 | if ($this.element.find($this.options.lists).not('[role]').length) { |
|
| 3046 | $this.update(); |
|
| 3047 | } |
|
| 3048 | }); |
|
| 3049 | }, |
|
| 3050 | ||
| 3051 | update: function() { |
|
| 3052 | ||
| 3053 | var $this = this; |
|
| 3054 | ||
| 3055 | this.find(this.options.lists).each(function() { |
|
| 3056 | ||
| 3057 | var $ele = UI.$(this).attr('role', 'menu'), |
|
| 3058 | parent = $ele.closest('li'), |
|
| 3059 | active = parent.hasClass("uk-active"); |
|
| 3060 | ||
| 3061 | if (!parent.data('list-container')) { |
|
| 3062 | $ele.wrap('<div style="overflow:hidden;height:0;position:relative;"></div>'); |
|
| 3063 | parent.data('list-container', $ele.parent()[active ? 'removeClass':'addClass']('uk-hidden')); |
|
| 3064 | } |
|
| 3065 | ||
| 3066 | // Init ARIA |
|
| 3067 | parent.attr('aria-expanded', parent.hasClass("uk-open")); |
|
| 3068 | ||
| 3069 | if (active) $this.open(parent, true); |
|
| 3070 | }); |
|
| 3071 | }, |
|
| 3072 | ||
| 3073 | open: function(li, noanimation) { |
|
| 3074 | ||
| 3075 | var $this = this, element = this.element, $li = UI.$(li), $container = $li.data('list-container'); |
|
| 3076 | ||
| 3077 | if (!this.options.multiple) { |
|
| 3078 | ||
| 3079 | element.children('.uk-open').not(li).each(function() { |
|
| 3080 | ||
| 3081 | var ele = UI.$(this); |
|
| 3082 | ||
| 3083 | if (ele.data('list-container')) { |
|
| 3084 | ele.data('list-container').stop().animate({height: 0}, function() { |
|
| 3085 | UI.$(this).parent().removeClass('uk-open').end().addClass('uk-hidden'); |
|
| 3086 | }); |
|
| 3087 | } |
|
| 3088 | }); |
|
| 3089 | } |
|
| 3090 | ||
| 3091 | $li.toggleClass('uk-open'); |
|
| 3092 | ||
| 3093 | // Update ARIA |
|
| 3094 | $li.attr('aria-expanded', $li.hasClass('uk-open')); |
|
| 3095 | ||
| 3096 | if ($container) { |
|
| 3097 | ||
| 3098 | if ($li.hasClass('uk-open')) { |
|
| 3099 | $container.removeClass('uk-hidden'); |
|
| 3100 | } |
|
| 3101 | ||
| 3102 | if (noanimation) { |
|
| 3103 | ||
| 3104 | $container.stop().height($li.hasClass('uk-open') ? 'auto' : 0); |
|
| 3105 | ||
| 3106 | if (!$li.hasClass('uk-open')) { |
|
| 3107 | $container.addClass('uk-hidden'); |
|
| 3108 | } |
|
| 3109 | ||
| 3110 | this.trigger('display.uk.check'); |
|
| 3111 | ||
| 3112 | } else { |
|
| 3113 | ||
| 3114 | $container.stop().animate({ |
|
| 3115 | height: ($li.hasClass('uk-open') ? getHeight($container.find('ul:first')) : 0) |
|
| 3116 | }, function() { |
|
| 3117 | ||
| 3118 | if (!$li.hasClass('uk-open')) { |
|
| 3119 | $container.addClass('uk-hidden'); |
|
| 3120 | } else { |
|
| 3121 | $container.css('height', ''); |
|
| 3122 | } |
|
| 3123 | ||
| 3124 | $this.trigger('display.uk.check'); |
|
| 3125 | }); |
|
| 3126 | } |
|
| 3127 | } |
|
| 3128 | } |
|
| 3129 | }); |
|
| 3130 | ||
| 3131 | ||
| 3132 | // helper |
|
| 3133 | ||
| 3134 | function getHeight(ele) { |
|
| 3135 | ||
| 3136 | var $ele = UI.$(ele), height = 'auto'; |
|
| 3137 | ||
| 3138 | if ($ele.is(':visible')) { |
|
| 3139 | height = $ele.outerHeight(); |
|
| 3140 | } else { |
|
| 3141 | ||
| 3142 | var tmp = { |
|
| 3143 | position: $ele.css('position'), |
|
| 3144 | visibility: $ele.css('visibility'), |
|
| 3145 | display: $ele.css('display') |
|
| 3146 | }; |
|
| 3147 | ||
| 3148 | height = $ele.css({position: 'absolute', visibility: 'hidden', display: 'block'}).outerHeight(); |
|
| 3149 | ||
| 3150 | $ele.css(tmp); // reset element |
|
| 3151 | } |
|
| 3152 | ||
| 3153 | return height; |
|
| 3154 | } |
|
| 3155 | ||
| 3156 | })(UIkit2); |
|
| 3157 | ||
| 3158 | (function(UI) { |
|
| 3159 | ||
| @@ 2-153 (lines=152) @@ | ||
| 1 | /*! UIkit 2.27.4 | http://www.getuikit.com | (c) 2014 YOOtheme | MIT License */ |
|
| 2 | (function(UI) { |
|
| 3 | ||
| 4 | "use strict"; |
|
| 5 | ||
| 6 | UI.component('nav', { |
|
| 7 | ||
| 8 | defaults: { |
|
| 9 | toggle: '>li.uk-parent > a[href="#"]', |
|
| 10 | lists: '>li.uk-parent > ul', |
|
| 11 | multiple: false |
|
| 12 | }, |
|
| 13 | ||
| 14 | boot: function() { |
|
| 15 | ||
| 16 | // init code |
|
| 17 | UI.ready(function(context) { |
|
| 18 | ||
| 19 | UI.$('[data-uk-nav]', context).each(function() { |
|
| 20 | var nav = UI.$(this); |
|
| 21 | ||
| 22 | if (!nav.data('nav')) { |
|
| 23 | var obj = UI.nav(nav, UI.Utils.options(nav.attr('data-uk-nav'))); |
|
| 24 | } |
|
| 25 | }); |
|
| 26 | }); |
|
| 27 | }, |
|
| 28 | ||
| 29 | init: function() { |
|
| 30 | ||
| 31 | var $this = this; |
|
| 32 | ||
| 33 | this.on('click.uk.nav', this.options.toggle, function(e) { |
|
| 34 | e.preventDefault(); |
|
| 35 | var ele = UI.$(this); |
|
| 36 | $this.open(ele.parent()[0] == $this.element[0] ? ele : ele.parent("li")); |
|
| 37 | }); |
|
| 38 | ||
| 39 | this.update(); |
|
| 40 | ||
| 41 | UI.domObserve(this.element, function(e) { |
|
| 42 | if ($this.element.find($this.options.lists).not('[role]').length) { |
|
| 43 | $this.update(); |
|
| 44 | } |
|
| 45 | }); |
|
| 46 | }, |
|
| 47 | ||
| 48 | update: function() { |
|
| 49 | ||
| 50 | var $this = this; |
|
| 51 | ||
| 52 | this.find(this.options.lists).each(function() { |
|
| 53 | ||
| 54 | var $ele = UI.$(this).attr('role', 'menu'), |
|
| 55 | parent = $ele.closest('li'), |
|
| 56 | active = parent.hasClass("uk-active"); |
|
| 57 | ||
| 58 | if (!parent.data('list-container')) { |
|
| 59 | $ele.wrap('<div style="overflow:hidden;height:0;position:relative;"></div>'); |
|
| 60 | parent.data('list-container', $ele.parent()[active ? 'removeClass':'addClass']('uk-hidden')); |
|
| 61 | } |
|
| 62 | ||
| 63 | // Init ARIA |
|
| 64 | parent.attr('aria-expanded', parent.hasClass("uk-open")); |
|
| 65 | ||
| 66 | if (active) $this.open(parent, true); |
|
| 67 | }); |
|
| 68 | }, |
|
| 69 | ||
| 70 | open: function(li, noanimation) { |
|
| 71 | ||
| 72 | var $this = this, element = this.element, $li = UI.$(li), $container = $li.data('list-container'); |
|
| 73 | ||
| 74 | if (!this.options.multiple) { |
|
| 75 | ||
| 76 | element.children('.uk-open').not(li).each(function() { |
|
| 77 | ||
| 78 | var ele = UI.$(this); |
|
| 79 | ||
| 80 | if (ele.data('list-container')) { |
|
| 81 | ele.data('list-container').stop().animate({height: 0}, function() { |
|
| 82 | UI.$(this).parent().removeClass('uk-open').end().addClass('uk-hidden'); |
|
| 83 | }); |
|
| 84 | } |
|
| 85 | }); |
|
| 86 | } |
|
| 87 | ||
| 88 | $li.toggleClass('uk-open'); |
|
| 89 | ||
| 90 | // Update ARIA |
|
| 91 | $li.attr('aria-expanded', $li.hasClass('uk-open')); |
|
| 92 | ||
| 93 | if ($container) { |
|
| 94 | ||
| 95 | if ($li.hasClass('uk-open')) { |
|
| 96 | $container.removeClass('uk-hidden'); |
|
| 97 | } |
|
| 98 | ||
| 99 | if (noanimation) { |
|
| 100 | ||
| 101 | $container.stop().height($li.hasClass('uk-open') ? 'auto' : 0); |
|
| 102 | ||
| 103 | if (!$li.hasClass('uk-open')) { |
|
| 104 | $container.addClass('uk-hidden'); |
|
| 105 | } |
|
| 106 | ||
| 107 | this.trigger('display.uk.check'); |
|
| 108 | ||
| 109 | } else { |
|
| 110 | ||
| 111 | $container.stop().animate({ |
|
| 112 | height: ($li.hasClass('uk-open') ? getHeight($container.find('ul:first')) : 0) |
|
| 113 | }, function() { |
|
| 114 | ||
| 115 | if (!$li.hasClass('uk-open')) { |
|
| 116 | $container.addClass('uk-hidden'); |
|
| 117 | } else { |
|
| 118 | $container.css('height', ''); |
|
| 119 | } |
|
| 120 | ||
| 121 | $this.trigger('display.uk.check'); |
|
| 122 | }); |
|
| 123 | } |
|
| 124 | } |
|
| 125 | } |
|
| 126 | }); |
|
| 127 | ||
| 128 | ||
| 129 | // helper |
|
| 130 | ||
| 131 | function getHeight(ele) { |
|
| 132 | ||
| 133 | var $ele = UI.$(ele), height = 'auto'; |
|
| 134 | ||
| 135 | if ($ele.is(':visible')) { |
|
| 136 | height = $ele.outerHeight(); |
|
| 137 | } else { |
|
| 138 | ||
| 139 | var tmp = { |
|
| 140 | position: $ele.css('position'), |
|
| 141 | visibility: $ele.css('visibility'), |
|
| 142 | display: $ele.css('display') |
|
| 143 | }; |
|
| 144 | ||
| 145 | height = $ele.css({position: 'absolute', visibility: 'hidden', display: 'block'}).outerHeight(); |
|
| 146 | ||
| 147 | $ele.css(tmp); // reset element |
|
| 148 | } |
|
| 149 | ||
| 150 | return height; |
|
| 151 | } |
|
| 152 | ||
| 153 | })(UIkit2); |
|
| 154 | ||
