Otaku-Projects /
AngularJS-CRUD-PHP
| @@ 1967-2499 (lines=533) @@ | ||
| 1964 | ||
| 1965 | })(UIkit2); |
|
| 1966 | ||
| 1967 | (function(UI) { |
|
| 1968 | ||
| 1969 | "use strict"; |
|
| 1970 | ||
| 1971 | var active = false, hoverIdle, flips = { |
|
| 1972 | x: { |
|
| 1973 | 'bottom-left' : 'bottom-right', |
|
| 1974 | 'bottom-right' : 'bottom-left', |
|
| 1975 | 'bottom-center' : 'bottom-center', |
|
| 1976 | 'top-left' : 'top-right', |
|
| 1977 | 'top-right' : 'top-left', |
|
| 1978 | 'top-center' : 'top-center', |
|
| 1979 | 'left-top' : 'right-top', |
|
| 1980 | 'left-bottom' : 'right-bottom', |
|
| 1981 | 'left-center' : 'right-center', |
|
| 1982 | 'right-top' : 'left-top', |
|
| 1983 | 'right-bottom' : 'left-bottom', |
|
| 1984 | 'right-center' : 'left-center' |
|
| 1985 | }, |
|
| 1986 | y: { |
|
| 1987 | 'bottom-left' : 'top-left', |
|
| 1988 | 'bottom-right' : 'top-right', |
|
| 1989 | 'bottom-center' : 'top-center', |
|
| 1990 | 'top-left' : 'bottom-left', |
|
| 1991 | 'top-right' : 'bottom-right', |
|
| 1992 | 'top-center' : 'bottom-center', |
|
| 1993 | 'left-top' : 'left-bottom', |
|
| 1994 | 'left-bottom' : 'left-top', |
|
| 1995 | 'left-center' : 'left-center', |
|
| 1996 | 'right-top' : 'right-bottom', |
|
| 1997 | 'right-bottom' : 'right-top', |
|
| 1998 | 'right-center' : 'right-center' |
|
| 1999 | }, |
|
| 2000 | xy: { |
|
| 2001 | 'bottom-left' : 'top-right', |
|
| 2002 | 'bottom-right' : 'top-left', |
|
| 2003 | 'bottom-center' : 'top-center', |
|
| 2004 | 'top-left' : 'bottom-right', |
|
| 2005 | 'top-right' : 'bottom-left', |
|
| 2006 | 'top-center' : 'bottom-center', |
|
| 2007 | 'left-top' : 'right-bottom', |
|
| 2008 | 'left-bottom' : 'right-top', |
|
| 2009 | 'left-center' : 'right-center', |
|
| 2010 | 'right-top' : 'left-bottom', |
|
| 2011 | 'right-bottom' : 'left-top', |
|
| 2012 | 'right-center' : 'left-center' |
|
| 2013 | } |
|
| 2014 | }; |
|
| 2015 | ||
| 2016 | UI.component('dropdown', { |
|
| 2017 | ||
| 2018 | defaults: { |
|
| 2019 | mode : 'hover', |
|
| 2020 | pos : 'bottom-left', |
|
| 2021 | offset : 0, |
|
| 2022 | remaintime : 800, |
|
| 2023 | justify : false, |
|
| 2024 | boundary : UI.$win, |
|
| 2025 | delay : 0, |
|
| 2026 | dropdownSelector: '.uk-dropdown,.uk-dropdown-blank', |
|
| 2027 | hoverDelayIdle : 250, |
|
| 2028 | preventflip : false |
|
| 2029 | }, |
|
| 2030 | ||
| 2031 | remainIdle: false, |
|
| 2032 | ||
| 2033 | boot: function() { |
|
| 2034 | ||
| 2035 | var triggerevent = UI.support.touch ? 'click' : 'mouseenter'; |
|
| 2036 | ||
| 2037 | // init code |
|
| 2038 | UI.$html.on(triggerevent+'.dropdown.uikit focus pointerdown', '[data-uk-dropdown]', function(e) { |
|
| 2039 | ||
| 2040 | var ele = UI.$(this); |
|
| 2041 | ||
| 2042 | if (!ele.data('dropdown')) { |
|
| 2043 | ||
| 2044 | var dropdown = UI.dropdown(ele, UI.Utils.options(ele.attr('data-uk-dropdown'))); |
|
| 2045 | ||
| 2046 | if (e.type=='click' || (e.type=='mouseenter' && dropdown.options.mode=='hover')) { |
|
| 2047 | dropdown.element.trigger(triggerevent); |
|
| 2048 | } |
|
| 2049 | ||
| 2050 | if (dropdown.dropdown.length) { |
|
| 2051 | e.preventDefault(); |
|
| 2052 | } |
|
| 2053 | } |
|
| 2054 | }); |
|
| 2055 | }, |
|
| 2056 | ||
| 2057 | init: function() { |
|
| 2058 | ||
| 2059 | var $this = this; |
|
| 2060 | ||
| 2061 | this.dropdown = this.find(this.options.dropdownSelector); |
|
| 2062 | this.offsetParent = this.dropdown.parents().filter(function() { |
|
| 2063 | return UI.$.inArray(UI.$(this).css('position'), ['relative', 'fixed', 'absolute']) !== -1; |
|
| 2064 | }).slice(0,1); |
|
| 2065 | ||
| 2066 | if (!this.offsetParent.length) { |
|
| 2067 | this.offsetParent = this.element; |
|
| 2068 | } |
|
| 2069 | ||
| 2070 | this.centered = this.dropdown.hasClass('uk-dropdown-center'); |
|
| 2071 | this.justified = this.options.justify ? UI.$(this.options.justify) : false; |
|
| 2072 | ||
| 2073 | this.boundary = UI.$(this.options.boundary); |
|
| 2074 | ||
| 2075 | if (!this.boundary.length) { |
|
| 2076 | this.boundary = UI.$win; |
|
| 2077 | } |
|
| 2078 | ||
| 2079 | // legacy DEPRECATED! |
|
| 2080 | if (this.dropdown.hasClass('uk-dropdown-up')) { |
|
| 2081 | this.options.pos = 'top-left'; |
|
| 2082 | } |
|
| 2083 | if (this.dropdown.hasClass('uk-dropdown-flip')) { |
|
| 2084 | this.options.pos = this.options.pos.replace('left','right'); |
|
| 2085 | } |
|
| 2086 | if (this.dropdown.hasClass('uk-dropdown-center')) { |
|
| 2087 | this.options.pos = this.options.pos.replace(/(left|right)/,'center'); |
|
| 2088 | } |
|
| 2089 | //-- end legacy |
|
| 2090 | ||
| 2091 | // Init ARIA |
|
| 2092 | this.element.attr('aria-haspopup', 'true'); |
|
| 2093 | this.element.attr('aria-expanded', this.element.hasClass('uk-open')); |
|
| 2094 | this.dropdown.attr('aria-hidden', 'true'); |
|
| 2095 | ||
| 2096 | if (this.options.mode == 'click' || UI.support.touch) { |
|
| 2097 | ||
| 2098 | this.on('click.uk.dropdown', function(e) { |
|
| 2099 | ||
| 2100 | var $target = UI.$(e.target); |
|
| 2101 | ||
| 2102 | if (!$target.parents($this.options.dropdownSelector).length) { |
|
| 2103 | ||
| 2104 | if ($target.is("a[href='#']") || $target.parent().is("a[href='#']") || ($this.dropdown.length && !$this.dropdown.is(':visible')) ){ |
|
| 2105 | e.preventDefault(); |
|
| 2106 | } |
|
| 2107 | ||
| 2108 | $target.blur(); |
|
| 2109 | } |
|
| 2110 | ||
| 2111 | if (!$this.element.hasClass('uk-open')) { |
|
| 2112 | ||
| 2113 | $this.show(); |
|
| 2114 | ||
| 2115 | } else { |
|
| 2116 | ||
| 2117 | if (!$this.dropdown.find(e.target).length || $target.is('.uk-dropdown-close') || $target.parents('.uk-dropdown-close').length) { |
|
| 2118 | $this.hide(); |
|
| 2119 | } |
|
| 2120 | } |
|
| 2121 | }); |
|
| 2122 | ||
| 2123 | } else { |
|
| 2124 | ||
| 2125 | this.on('mouseenter', function(e) { |
|
| 2126 | ||
| 2127 | $this.trigger('pointerenter.uk.dropdown', [$this]); |
|
| 2128 | ||
| 2129 | if ($this.remainIdle) { |
|
| 2130 | clearTimeout($this.remainIdle); |
|
| 2131 | } |
|
| 2132 | ||
| 2133 | if (hoverIdle) { |
|
| 2134 | clearTimeout(hoverIdle); |
|
| 2135 | } |
|
| 2136 | ||
| 2137 | if (active && active == $this) { |
|
| 2138 | return; |
|
| 2139 | } |
|
| 2140 | ||
| 2141 | // pseudo manuAim |
|
| 2142 | if (active && active != $this) { |
|
| 2143 | ||
| 2144 | hoverIdle = setTimeout(function() { |
|
| 2145 | hoverIdle = setTimeout($this.show.bind($this), $this.options.delay); |
|
| 2146 | }, $this.options.hoverDelayIdle); |
|
| 2147 | ||
| 2148 | } else { |
|
| 2149 | ||
| 2150 | hoverIdle = setTimeout($this.show.bind($this), $this.options.delay); |
|
| 2151 | } |
|
| 2152 | ||
| 2153 | }).on('mouseleave', function() { |
|
| 2154 | ||
| 2155 | if (hoverIdle) { |
|
| 2156 | clearTimeout(hoverIdle); |
|
| 2157 | } |
|
| 2158 | ||
| 2159 | $this.remainIdle = setTimeout(function() { |
|
| 2160 | if (active && active == $this) $this.hide(); |
|
| 2161 | }, $this.options.remaintime); |
|
| 2162 | ||
| 2163 | $this.trigger('pointerleave.uk.dropdown', [$this]); |
|
| 2164 | ||
| 2165 | }).on('click', function(e){ |
|
| 2166 | ||
| 2167 | var $target = UI.$(e.target); |
|
| 2168 | ||
| 2169 | if ($this.remainIdle) { |
|
| 2170 | clearTimeout($this.remainIdle); |
|
| 2171 | } |
|
| 2172 | ||
| 2173 | if (active && active == $this) { |
|
| 2174 | if (!$this.dropdown.find(e.target).length || $target.is('.uk-dropdown-close') || $target.parents('.uk-dropdown-close').length) { |
|
| 2175 | $this.hide(); |
|
| 2176 | } |
|
| 2177 | return; |
|
| 2178 | } |
|
| 2179 | ||
| 2180 | if ($target.is("a[href='#']") || $target.parent().is("a[href='#']")){ |
|
| 2181 | e.preventDefault(); |
|
| 2182 | } |
|
| 2183 | ||
| 2184 | $this.show(); |
|
| 2185 | }); |
|
| 2186 | } |
|
| 2187 | }, |
|
| 2188 | ||
| 2189 | show: function(){ |
|
| 2190 | ||
| 2191 | UI.$html.off('click.outer.dropdown'); |
|
| 2192 | ||
| 2193 | if (active && active != this) { |
|
| 2194 | active.hide(true); |
|
| 2195 | } |
|
| 2196 | ||
| 2197 | if (hoverIdle) { |
|
| 2198 | clearTimeout(hoverIdle); |
|
| 2199 | } |
|
| 2200 | ||
| 2201 | this.trigger('beforeshow.uk.dropdown', [this]); |
|
| 2202 | ||
| 2203 | this.checkDimensions(); |
|
| 2204 | this.element.addClass('uk-open'); |
|
| 2205 | ||
| 2206 | // Update ARIA |
|
| 2207 | this.element.attr('aria-expanded', 'true'); |
|
| 2208 | this.dropdown.attr('aria-hidden', 'false'); |
|
| 2209 | ||
| 2210 | this.trigger('show.uk.dropdown', [this]); |
|
| 2211 | ||
| 2212 | UI.Utils.checkDisplay(this.dropdown, true); |
|
| 2213 | UI.Utils.focus(this.dropdown); |
|
| 2214 | active = this; |
|
| 2215 | ||
| 2216 | this.registerOuterClick(); |
|
| 2217 | }, |
|
| 2218 | ||
| 2219 | hide: function(force) { |
|
| 2220 | ||
| 2221 | this.trigger('beforehide.uk.dropdown', [this, force]); |
|
| 2222 | ||
| 2223 | this.element.removeClass('uk-open'); |
|
| 2224 | ||
| 2225 | if (this.remainIdle) { |
|
| 2226 | clearTimeout(this.remainIdle); |
|
| 2227 | } |
|
| 2228 | ||
| 2229 | this.remainIdle = false; |
|
| 2230 | ||
| 2231 | // Update ARIA |
|
| 2232 | this.element.attr('aria-expanded', 'false'); |
|
| 2233 | this.dropdown.attr('aria-hidden', 'true'); |
|
| 2234 | ||
| 2235 | this.trigger('hide.uk.dropdown', [this, force]); |
|
| 2236 | ||
| 2237 | if (active == this) active = false; |
|
| 2238 | }, |
|
| 2239 | ||
| 2240 | registerOuterClick: function(){ |
|
| 2241 | ||
| 2242 | var $this = this; |
|
| 2243 | ||
| 2244 | UI.$html.off('click.outer.dropdown'); |
|
| 2245 | ||
| 2246 | setTimeout(function() { |
|
| 2247 | ||
| 2248 | UI.$html.on('click.outer.dropdown', function(e) { |
|
| 2249 | ||
| 2250 | if (hoverIdle) { |
|
| 2251 | clearTimeout(hoverIdle); |
|
| 2252 | } |
|
| 2253 | ||
| 2254 | var $target = UI.$(e.target); |
|
| 2255 | ||
| 2256 | if (active == $this && !$this.element.find(e.target).length) { |
|
| 2257 | $this.hide(true); |
|
| 2258 | UI.$html.off('click.outer.dropdown'); |
|
| 2259 | } |
|
| 2260 | }); |
|
| 2261 | }, 10); |
|
| 2262 | }, |
|
| 2263 | ||
| 2264 | checkDimensions: function() { |
|
| 2265 | ||
| 2266 | if (!this.dropdown.length) return; |
|
| 2267 | ||
| 2268 | // reset |
|
| 2269 | this.dropdown.removeClass('uk-dropdown-top uk-dropdown-bottom uk-dropdown-left uk-dropdown-right uk-dropdown-stack uk-dropdown-autoflip').css({ |
|
| 2270 | topLeft :'', |
|
| 2271 | left :'', |
|
| 2272 | marginLeft :'', |
|
| 2273 | marginRight :'' |
|
| 2274 | }); |
|
| 2275 | ||
| 2276 | if (this.justified && this.justified.length) { |
|
| 2277 | this.dropdown.css('min-width', ''); |
|
| 2278 | } |
|
| 2279 | ||
| 2280 | var $this = this, |
|
| 2281 | pos = UI.$.extend({}, this.offsetParent.offset(), {width: this.offsetParent[0].offsetWidth, height: this.offsetParent[0].offsetHeight}), |
|
| 2282 | posoffset = this.options.offset, |
|
| 2283 | dropdown = this.dropdown, |
|
| 2284 | offset = dropdown.show().offset() || {left: 0, top: 0}, |
|
| 2285 | width = dropdown.outerWidth(), |
|
| 2286 | height = dropdown.outerHeight(), |
|
| 2287 | boundarywidth = this.boundary.width(), |
|
| 2288 | boundaryoffset = this.boundary[0] !== window && this.boundary.offset() ? this.boundary.offset(): {top:0, left:0}, |
|
| 2289 | dpos = this.options.pos; |
|
| 2290 | ||
| 2291 | var variants = { |
|
| 2292 | 'bottom-left' : {top: 0 + pos.height + posoffset, left: 0}, |
|
| 2293 | 'bottom-right' : {top: 0 + pos.height + posoffset, left: 0 + pos.width - width}, |
|
| 2294 | 'bottom-center' : {top: 0 + pos.height + posoffset, left: 0 + pos.width / 2 - width / 2}, |
|
| 2295 | 'top-left' : {top: 0 - height - posoffset, left: 0}, |
|
| 2296 | 'top-right' : {top: 0 - height - posoffset, left: 0 + pos.width - width}, |
|
| 2297 | 'top-center' : {top: 0 - height - posoffset, left: 0 + pos.width / 2 - width / 2}, |
|
| 2298 | 'left-top' : {top: 0, left: 0 - width - posoffset}, |
|
| 2299 | 'left-bottom' : {top: 0 + pos.height - height, left: 0 - width - posoffset}, |
|
| 2300 | 'left-center' : {top: 0 + pos.height / 2 - height / 2, left: 0 - width - posoffset}, |
|
| 2301 | 'right-top' : {top: 0, left: 0 + pos.width + posoffset}, |
|
| 2302 | 'right-bottom' : {top: 0 + pos.height - height, left: 0 + pos.width + posoffset}, |
|
| 2303 | 'right-center' : {top: 0 + pos.height / 2 - height / 2, left: 0 + pos.width + posoffset} |
|
| 2304 | }, |
|
| 2305 | css = {}, |
|
| 2306 | pp; |
|
| 2307 | ||
| 2308 | pp = dpos.split('-'); |
|
| 2309 | css = variants[dpos] ? variants[dpos] : variants['bottom-left']; |
|
| 2310 | ||
| 2311 | // justify dropdown |
|
| 2312 | if (this.justified && this.justified.length) { |
|
| 2313 | justify(dropdown.css({left:0}), this.justified, boundarywidth); |
|
| 2314 | } else { |
|
| 2315 | ||
| 2316 | if (this.options.preventflip !== true) { |
|
| 2317 | ||
| 2318 | var fdpos; |
|
| 2319 | ||
| 2320 | switch(this.checkBoundary(pos.left + css.left, pos.top + css.top, width, height, boundarywidth)) { |
|
| 2321 | case "x": |
|
| 2322 | if(this.options.preventflip !=='x') fdpos = flips['x'][dpos] || 'right-top'; |
|
| 2323 | break; |
|
| 2324 | case "y": |
|
| 2325 | if(this.options.preventflip !=='y') fdpos = flips['y'][dpos] || 'top-left'; |
|
| 2326 | break; |
|
| 2327 | case "xy": |
|
| 2328 | if(!this.options.preventflip) fdpos = flips['xy'][dpos] || 'right-bottom'; |
|
| 2329 | break; |
|
| 2330 | } |
|
| 2331 | ||
| 2332 | if (fdpos) { |
|
| 2333 | ||
| 2334 | pp = fdpos.split('-'); |
|
| 2335 | css = variants[fdpos] ? variants[fdpos] : variants['bottom-left']; |
|
| 2336 | dropdown.addClass('uk-dropdown-autoflip'); |
|
| 2337 | ||
| 2338 | // check flipped |
|
| 2339 | if (this.checkBoundary(pos.left + css.left, pos.top + css.top, width, height, boundarywidth)) { |
|
| 2340 | pp = dpos.split('-'); |
|
| 2341 | css = variants[dpos] ? variants[dpos] : variants['bottom-left']; |
|
| 2342 | } |
|
| 2343 | } |
|
| 2344 | } |
|
| 2345 | } |
|
| 2346 | ||
| 2347 | if (width > boundarywidth) { |
|
| 2348 | dropdown.addClass('uk-dropdown-stack'); |
|
| 2349 | this.trigger('stack.uk.dropdown', [this]); |
|
| 2350 | } |
|
| 2351 | ||
| 2352 | dropdown.css(css).css('display', '').addClass('uk-dropdown-'+pp[0]); |
|
| 2353 | }, |
|
| 2354 | ||
| 2355 | checkBoundary: function(left, top, width, height, boundarywidth) { |
|
| 2356 | ||
| 2357 | var axis = ""; |
|
| 2358 | ||
| 2359 | if (left < 0 || ((left - UI.$win.scrollLeft())+width) > boundarywidth) { |
|
| 2360 | axis += "x"; |
|
| 2361 | } |
|
| 2362 | ||
| 2363 | if ((top - UI.$win.scrollTop()) < 0 || ((top - UI.$win.scrollTop())+height) > window.innerHeight) { |
|
| 2364 | axis += "y"; |
|
| 2365 | } |
|
| 2366 | ||
| 2367 | return axis; |
|
| 2368 | } |
|
| 2369 | }); |
|
| 2370 | ||
| 2371 | ||
| 2372 | UI.component('dropdownOverlay', { |
|
| 2373 | ||
| 2374 | defaults: { |
|
| 2375 | justify : false, |
|
| 2376 | cls : '', |
|
| 2377 | duration: 200 |
|
| 2378 | }, |
|
| 2379 | ||
| 2380 | boot: function() { |
|
| 2381 | ||
| 2382 | // init code |
|
| 2383 | UI.ready(function(context) { |
|
| 2384 | ||
| 2385 | UI.$('[data-uk-dropdown-overlay]', context).each(function() { |
|
| 2386 | var ele = UI.$(this); |
|
| 2387 | ||
| 2388 | if (!ele.data('dropdownOverlay')) { |
|
| 2389 | UI.dropdownOverlay(ele, UI.Utils.options(ele.attr('data-uk-dropdown-overlay'))); |
|
| 2390 | } |
|
| 2391 | }); |
|
| 2392 | }); |
|
| 2393 | }, |
|
| 2394 | ||
| 2395 | init: function() { |
|
| 2396 | ||
| 2397 | var $this = this; |
|
| 2398 | ||
| 2399 | this.justified = this.options.justify ? UI.$(this.options.justify) : false; |
|
| 2400 | this.overlay = this.element.find('uk-dropdown-overlay'); |
|
| 2401 | ||
| 2402 | if (!this.overlay.length) { |
|
| 2403 | this.overlay = UI.$('<div class="uk-dropdown-overlay"></div>').appendTo(this.element); |
|
| 2404 | } |
|
| 2405 | ||
| 2406 | this.overlay.addClass(this.options.cls); |
|
| 2407 | ||
| 2408 | this.on({ |
|
| 2409 | ||
| 2410 | 'beforeshow.uk.dropdown': function(e, dropdown) { |
|
| 2411 | $this.dropdown = dropdown; |
|
| 2412 | ||
| 2413 | if ($this.justified && $this.justified.length) { |
|
| 2414 | justify($this.overlay.css({display:'block', marginLeft:'', marginRight:''}), $this.justified, $this.justified.outerWidth()); |
|
| 2415 | } |
|
| 2416 | }, |
|
| 2417 | ||
| 2418 | 'show.uk.dropdown': function(e, dropdown) { |
|
| 2419 | ||
| 2420 | var h = $this.dropdown.dropdown.outerHeight(true); |
|
| 2421 | ||
| 2422 | $this.dropdown.element.removeClass('uk-open'); |
|
| 2423 | ||
| 2424 | $this.overlay.stop().css('display', 'block').animate({height: h}, $this.options.duration, function() { |
|
| 2425 | ||
| 2426 | $this.dropdown.dropdown.css('visibility', ''); |
|
| 2427 | $this.dropdown.element.addClass('uk-open'); |
|
| 2428 | ||
| 2429 | UI.Utils.checkDisplay($this.dropdown.dropdown, true); |
|
| 2430 | }); |
|
| 2431 | ||
| 2432 | $this.pointerleave = false; |
|
| 2433 | }, |
|
| 2434 | ||
| 2435 | 'hide.uk.dropdown': function() { |
|
| 2436 | $this.overlay.stop().animate({height: 0}, $this.options.duration); |
|
| 2437 | }, |
|
| 2438 | ||
| 2439 | 'pointerenter.uk.dropdown': function(e, dropdown) { |
|
| 2440 | clearTimeout($this.remainIdle); |
|
| 2441 | }, |
|
| 2442 | ||
| 2443 | 'pointerleave.uk.dropdown': function(e, dropdown) { |
|
| 2444 | $this.pointerleave = true; |
|
| 2445 | } |
|
| 2446 | }); |
|
| 2447 | ||
| 2448 | ||
| 2449 | this.overlay.on({ |
|
| 2450 | ||
| 2451 | 'mouseenter': function() { |
|
| 2452 | if ($this.remainIdle) { |
|
| 2453 | clearTimeout($this.dropdown.remainIdle); |
|
| 2454 | clearTimeout($this.remainIdle); |
|
| 2455 | } |
|
| 2456 | }, |
|
| 2457 | ||
| 2458 | 'mouseleave': function(){ |
|
| 2459 | ||
| 2460 | if ($this.pointerleave && active) { |
|
| 2461 | ||
| 2462 | $this.remainIdle = setTimeout(function() { |
|
| 2463 | if(active) active.hide(); |
|
| 2464 | }, active.options.remaintime); |
|
| 2465 | } |
|
| 2466 | } |
|
| 2467 | }) |
|
| 2468 | } |
|
| 2469 | ||
| 2470 | }); |
|
| 2471 | ||
| 2472 | ||
| 2473 | function justify(ele, justifyTo, boundarywidth, offset) { |
|
| 2474 | ||
| 2475 | ele = UI.$(ele); |
|
| 2476 | justifyTo = UI.$(justifyTo); |
|
| 2477 | boundarywidth = boundarywidth || window.innerWidth; |
|
| 2478 | offset = offset || ele.offset(); |
|
| 2479 | ||
| 2480 | if (justifyTo.length) { |
|
| 2481 | ||
| 2482 | var jwidth = justifyTo.outerWidth(); |
|
| 2483 | ||
| 2484 | ele.css('min-width', jwidth); |
|
| 2485 | ||
| 2486 | if (UI.langdirection == 'right') { |
|
| 2487 | ||
| 2488 | var right1 = boundarywidth - (justifyTo.offset().left + jwidth), |
|
| 2489 | right2 = boundarywidth - (ele.offset().left + ele.outerWidth()); |
|
| 2490 | ||
| 2491 | ele.css('margin-right', right1 - right2); |
|
| 2492 | ||
| 2493 | } else { |
|
| 2494 | ele.css('margin-left', justifyTo.offset().left - offset.left); |
|
| 2495 | } |
|
| 2496 | } |
|
| 2497 | } |
|
| 2498 | ||
| 2499 | })(UIkit2); |
|
| 2500 | ||
| 2501 | (function(UI) { |
|
| 2502 | ||
| @@ 2-534 (lines=533) @@ | ||
| 1 | /*! UIkit 2.27.4 | http://www.getuikit.com | (c) 2014 YOOtheme | MIT License */ |
|
| 2 | (function(UI) { |
|
| 3 | ||
| 4 | "use strict"; |
|
| 5 | ||
| 6 | var active = false, hoverIdle, flips = { |
|
| 7 | x: { |
|
| 8 | 'bottom-left' : 'bottom-right', |
|
| 9 | 'bottom-right' : 'bottom-left', |
|
| 10 | 'bottom-center' : 'bottom-center', |
|
| 11 | 'top-left' : 'top-right', |
|
| 12 | 'top-right' : 'top-left', |
|
| 13 | 'top-center' : 'top-center', |
|
| 14 | 'left-top' : 'right-top', |
|
| 15 | 'left-bottom' : 'right-bottom', |
|
| 16 | 'left-center' : 'right-center', |
|
| 17 | 'right-top' : 'left-top', |
|
| 18 | 'right-bottom' : 'left-bottom', |
|
| 19 | 'right-center' : 'left-center' |
|
| 20 | }, |
|
| 21 | y: { |
|
| 22 | 'bottom-left' : 'top-left', |
|
| 23 | 'bottom-right' : 'top-right', |
|
| 24 | 'bottom-center' : 'top-center', |
|
| 25 | 'top-left' : 'bottom-left', |
|
| 26 | 'top-right' : 'bottom-right', |
|
| 27 | 'top-center' : 'bottom-center', |
|
| 28 | 'left-top' : 'left-bottom', |
|
| 29 | 'left-bottom' : 'left-top', |
|
| 30 | 'left-center' : 'left-center', |
|
| 31 | 'right-top' : 'right-bottom', |
|
| 32 | 'right-bottom' : 'right-top', |
|
| 33 | 'right-center' : 'right-center' |
|
| 34 | }, |
|
| 35 | xy: { |
|
| 36 | 'bottom-left' : 'top-right', |
|
| 37 | 'bottom-right' : 'top-left', |
|
| 38 | 'bottom-center' : 'top-center', |
|
| 39 | 'top-left' : 'bottom-right', |
|
| 40 | 'top-right' : 'bottom-left', |
|
| 41 | 'top-center' : 'bottom-center', |
|
| 42 | 'left-top' : 'right-bottom', |
|
| 43 | 'left-bottom' : 'right-top', |
|
| 44 | 'left-center' : 'right-center', |
|
| 45 | 'right-top' : 'left-bottom', |
|
| 46 | 'right-bottom' : 'left-top', |
|
| 47 | 'right-center' : 'left-center' |
|
| 48 | } |
|
| 49 | }; |
|
| 50 | ||
| 51 | UI.component('dropdown', { |
|
| 52 | ||
| 53 | defaults: { |
|
| 54 | mode : 'hover', |
|
| 55 | pos : 'bottom-left', |
|
| 56 | offset : 0, |
|
| 57 | remaintime : 800, |
|
| 58 | justify : false, |
|
| 59 | boundary : UI.$win, |
|
| 60 | delay : 0, |
|
| 61 | dropdownSelector: '.uk-dropdown,.uk-dropdown-blank', |
|
| 62 | hoverDelayIdle : 250, |
|
| 63 | preventflip : false |
|
| 64 | }, |
|
| 65 | ||
| 66 | remainIdle: false, |
|
| 67 | ||
| 68 | boot: function() { |
|
| 69 | ||
| 70 | var triggerevent = UI.support.touch ? 'click' : 'mouseenter'; |
|
| 71 | ||
| 72 | // init code |
|
| 73 | UI.$html.on(triggerevent+'.dropdown.uikit focus pointerdown', '[data-uk-dropdown]', function(e) { |
|
| 74 | ||
| 75 | var ele = UI.$(this); |
|
| 76 | ||
| 77 | if (!ele.data('dropdown')) { |
|
| 78 | ||
| 79 | var dropdown = UI.dropdown(ele, UI.Utils.options(ele.attr('data-uk-dropdown'))); |
|
| 80 | ||
| 81 | if (e.type=='click' || (e.type=='mouseenter' && dropdown.options.mode=='hover')) { |
|
| 82 | dropdown.element.trigger(triggerevent); |
|
| 83 | } |
|
| 84 | ||
| 85 | if (dropdown.dropdown.length) { |
|
| 86 | e.preventDefault(); |
|
| 87 | } |
|
| 88 | } |
|
| 89 | }); |
|
| 90 | }, |
|
| 91 | ||
| 92 | init: function() { |
|
| 93 | ||
| 94 | var $this = this; |
|
| 95 | ||
| 96 | this.dropdown = this.find(this.options.dropdownSelector); |
|
| 97 | this.offsetParent = this.dropdown.parents().filter(function() { |
|
| 98 | return UI.$.inArray(UI.$(this).css('position'), ['relative', 'fixed', 'absolute']) !== -1; |
|
| 99 | }).slice(0,1); |
|
| 100 | ||
| 101 | if (!this.offsetParent.length) { |
|
| 102 | this.offsetParent = this.element; |
|
| 103 | } |
|
| 104 | ||
| 105 | this.centered = this.dropdown.hasClass('uk-dropdown-center'); |
|
| 106 | this.justified = this.options.justify ? UI.$(this.options.justify) : false; |
|
| 107 | ||
| 108 | this.boundary = UI.$(this.options.boundary); |
|
| 109 | ||
| 110 | if (!this.boundary.length) { |
|
| 111 | this.boundary = UI.$win; |
|
| 112 | } |
|
| 113 | ||
| 114 | // legacy DEPRECATED! |
|
| 115 | if (this.dropdown.hasClass('uk-dropdown-up')) { |
|
| 116 | this.options.pos = 'top-left'; |
|
| 117 | } |
|
| 118 | if (this.dropdown.hasClass('uk-dropdown-flip')) { |
|
| 119 | this.options.pos = this.options.pos.replace('left','right'); |
|
| 120 | } |
|
| 121 | if (this.dropdown.hasClass('uk-dropdown-center')) { |
|
| 122 | this.options.pos = this.options.pos.replace(/(left|right)/,'center'); |
|
| 123 | } |
|
| 124 | //-- end legacy |
|
| 125 | ||
| 126 | // Init ARIA |
|
| 127 | this.element.attr('aria-haspopup', 'true'); |
|
| 128 | this.element.attr('aria-expanded', this.element.hasClass('uk-open')); |
|
| 129 | this.dropdown.attr('aria-hidden', 'true'); |
|
| 130 | ||
| 131 | if (this.options.mode == 'click' || UI.support.touch) { |
|
| 132 | ||
| 133 | this.on('click.uk.dropdown', function(e) { |
|
| 134 | ||
| 135 | var $target = UI.$(e.target); |
|
| 136 | ||
| 137 | if (!$target.parents($this.options.dropdownSelector).length) { |
|
| 138 | ||
| 139 | if ($target.is("a[href='#']") || $target.parent().is("a[href='#']") || ($this.dropdown.length && !$this.dropdown.is(':visible')) ){ |
|
| 140 | e.preventDefault(); |
|
| 141 | } |
|
| 142 | ||
| 143 | $target.blur(); |
|
| 144 | } |
|
| 145 | ||
| 146 | if (!$this.element.hasClass('uk-open')) { |
|
| 147 | ||
| 148 | $this.show(); |
|
| 149 | ||
| 150 | } else { |
|
| 151 | ||
| 152 | if (!$this.dropdown.find(e.target).length || $target.is('.uk-dropdown-close') || $target.parents('.uk-dropdown-close').length) { |
|
| 153 | $this.hide(); |
|
| 154 | } |
|
| 155 | } |
|
| 156 | }); |
|
| 157 | ||
| 158 | } else { |
|
| 159 | ||
| 160 | this.on('mouseenter', function(e) { |
|
| 161 | ||
| 162 | $this.trigger('pointerenter.uk.dropdown', [$this]); |
|
| 163 | ||
| 164 | if ($this.remainIdle) { |
|
| 165 | clearTimeout($this.remainIdle); |
|
| 166 | } |
|
| 167 | ||
| 168 | if (hoverIdle) { |
|
| 169 | clearTimeout(hoverIdle); |
|
| 170 | } |
|
| 171 | ||
| 172 | if (active && active == $this) { |
|
| 173 | return; |
|
| 174 | } |
|
| 175 | ||
| 176 | // pseudo manuAim |
|
| 177 | if (active && active != $this) { |
|
| 178 | ||
| 179 | hoverIdle = setTimeout(function() { |
|
| 180 | hoverIdle = setTimeout($this.show.bind($this), $this.options.delay); |
|
| 181 | }, $this.options.hoverDelayIdle); |
|
| 182 | ||
| 183 | } else { |
|
| 184 | ||
| 185 | hoverIdle = setTimeout($this.show.bind($this), $this.options.delay); |
|
| 186 | } |
|
| 187 | ||
| 188 | }).on('mouseleave', function() { |
|
| 189 | ||
| 190 | if (hoverIdle) { |
|
| 191 | clearTimeout(hoverIdle); |
|
| 192 | } |
|
| 193 | ||
| 194 | $this.remainIdle = setTimeout(function() { |
|
| 195 | if (active && active == $this) $this.hide(); |
|
| 196 | }, $this.options.remaintime); |
|
| 197 | ||
| 198 | $this.trigger('pointerleave.uk.dropdown', [$this]); |
|
| 199 | ||
| 200 | }).on('click', function(e){ |
|
| 201 | ||
| 202 | var $target = UI.$(e.target); |
|
| 203 | ||
| 204 | if ($this.remainIdle) { |
|
| 205 | clearTimeout($this.remainIdle); |
|
| 206 | } |
|
| 207 | ||
| 208 | if (active && active == $this) { |
|
| 209 | if (!$this.dropdown.find(e.target).length || $target.is('.uk-dropdown-close') || $target.parents('.uk-dropdown-close').length) { |
|
| 210 | $this.hide(); |
|
| 211 | } |
|
| 212 | return; |
|
| 213 | } |
|
| 214 | ||
| 215 | if ($target.is("a[href='#']") || $target.parent().is("a[href='#']")){ |
|
| 216 | e.preventDefault(); |
|
| 217 | } |
|
| 218 | ||
| 219 | $this.show(); |
|
| 220 | }); |
|
| 221 | } |
|
| 222 | }, |
|
| 223 | ||
| 224 | show: function(){ |
|
| 225 | ||
| 226 | UI.$html.off('click.outer.dropdown'); |
|
| 227 | ||
| 228 | if (active && active != this) { |
|
| 229 | active.hide(true); |
|
| 230 | } |
|
| 231 | ||
| 232 | if (hoverIdle) { |
|
| 233 | clearTimeout(hoverIdle); |
|
| 234 | } |
|
| 235 | ||
| 236 | this.trigger('beforeshow.uk.dropdown', [this]); |
|
| 237 | ||
| 238 | this.checkDimensions(); |
|
| 239 | this.element.addClass('uk-open'); |
|
| 240 | ||
| 241 | // Update ARIA |
|
| 242 | this.element.attr('aria-expanded', 'true'); |
|
| 243 | this.dropdown.attr('aria-hidden', 'false'); |
|
| 244 | ||
| 245 | this.trigger('show.uk.dropdown', [this]); |
|
| 246 | ||
| 247 | UI.Utils.checkDisplay(this.dropdown, true); |
|
| 248 | UI.Utils.focus(this.dropdown); |
|
| 249 | active = this; |
|
| 250 | ||
| 251 | this.registerOuterClick(); |
|
| 252 | }, |
|
| 253 | ||
| 254 | hide: function(force) { |
|
| 255 | ||
| 256 | this.trigger('beforehide.uk.dropdown', [this, force]); |
|
| 257 | ||
| 258 | this.element.removeClass('uk-open'); |
|
| 259 | ||
| 260 | if (this.remainIdle) { |
|
| 261 | clearTimeout(this.remainIdle); |
|
| 262 | } |
|
| 263 | ||
| 264 | this.remainIdle = false; |
|
| 265 | ||
| 266 | // Update ARIA |
|
| 267 | this.element.attr('aria-expanded', 'false'); |
|
| 268 | this.dropdown.attr('aria-hidden', 'true'); |
|
| 269 | ||
| 270 | this.trigger('hide.uk.dropdown', [this, force]); |
|
| 271 | ||
| 272 | if (active == this) active = false; |
|
| 273 | }, |
|
| 274 | ||
| 275 | registerOuterClick: function(){ |
|
| 276 | ||
| 277 | var $this = this; |
|
| 278 | ||
| 279 | UI.$html.off('click.outer.dropdown'); |
|
| 280 | ||
| 281 | setTimeout(function() { |
|
| 282 | ||
| 283 | UI.$html.on('click.outer.dropdown', function(e) { |
|
| 284 | ||
| 285 | if (hoverIdle) { |
|
| 286 | clearTimeout(hoverIdle); |
|
| 287 | } |
|
| 288 | ||
| 289 | var $target = UI.$(e.target); |
|
| 290 | ||
| 291 | if (active == $this && !$this.element.find(e.target).length) { |
|
| 292 | $this.hide(true); |
|
| 293 | UI.$html.off('click.outer.dropdown'); |
|
| 294 | } |
|
| 295 | }); |
|
| 296 | }, 10); |
|
| 297 | }, |
|
| 298 | ||
| 299 | checkDimensions: function() { |
|
| 300 | ||
| 301 | if (!this.dropdown.length) return; |
|
| 302 | ||
| 303 | // reset |
|
| 304 | this.dropdown.removeClass('uk-dropdown-top uk-dropdown-bottom uk-dropdown-left uk-dropdown-right uk-dropdown-stack uk-dropdown-autoflip').css({ |
|
| 305 | topLeft :'', |
|
| 306 | left :'', |
|
| 307 | marginLeft :'', |
|
| 308 | marginRight :'' |
|
| 309 | }); |
|
| 310 | ||
| 311 | if (this.justified && this.justified.length) { |
|
| 312 | this.dropdown.css('min-width', ''); |
|
| 313 | } |
|
| 314 | ||
| 315 | var $this = this, |
|
| 316 | pos = UI.$.extend({}, this.offsetParent.offset(), {width: this.offsetParent[0].offsetWidth, height: this.offsetParent[0].offsetHeight}), |
|
| 317 | posoffset = this.options.offset, |
|
| 318 | dropdown = this.dropdown, |
|
| 319 | offset = dropdown.show().offset() || {left: 0, top: 0}, |
|
| 320 | width = dropdown.outerWidth(), |
|
| 321 | height = dropdown.outerHeight(), |
|
| 322 | boundarywidth = this.boundary.width(), |
|
| 323 | boundaryoffset = this.boundary[0] !== window && this.boundary.offset() ? this.boundary.offset(): {top:0, left:0}, |
|
| 324 | dpos = this.options.pos; |
|
| 325 | ||
| 326 | var variants = { |
|
| 327 | 'bottom-left' : {top: 0 + pos.height + posoffset, left: 0}, |
|
| 328 | 'bottom-right' : {top: 0 + pos.height + posoffset, left: 0 + pos.width - width}, |
|
| 329 | 'bottom-center' : {top: 0 + pos.height + posoffset, left: 0 + pos.width / 2 - width / 2}, |
|
| 330 | 'top-left' : {top: 0 - height - posoffset, left: 0}, |
|
| 331 | 'top-right' : {top: 0 - height - posoffset, left: 0 + pos.width - width}, |
|
| 332 | 'top-center' : {top: 0 - height - posoffset, left: 0 + pos.width / 2 - width / 2}, |
|
| 333 | 'left-top' : {top: 0, left: 0 - width - posoffset}, |
|
| 334 | 'left-bottom' : {top: 0 + pos.height - height, left: 0 - width - posoffset}, |
|
| 335 | 'left-center' : {top: 0 + pos.height / 2 - height / 2, left: 0 - width - posoffset}, |
|
| 336 | 'right-top' : {top: 0, left: 0 + pos.width + posoffset}, |
|
| 337 | 'right-bottom' : {top: 0 + pos.height - height, left: 0 + pos.width + posoffset}, |
|
| 338 | 'right-center' : {top: 0 + pos.height / 2 - height / 2, left: 0 + pos.width + posoffset} |
|
| 339 | }, |
|
| 340 | css = {}, |
|
| 341 | pp; |
|
| 342 | ||
| 343 | pp = dpos.split('-'); |
|
| 344 | css = variants[dpos] ? variants[dpos] : variants['bottom-left']; |
|
| 345 | ||
| 346 | // justify dropdown |
|
| 347 | if (this.justified && this.justified.length) { |
|
| 348 | justify(dropdown.css({left:0}), this.justified, boundarywidth); |
|
| 349 | } else { |
|
| 350 | ||
| 351 | if (this.options.preventflip !== true) { |
|
| 352 | ||
| 353 | var fdpos; |
|
| 354 | ||
| 355 | switch(this.checkBoundary(pos.left + css.left, pos.top + css.top, width, height, boundarywidth)) { |
|
| 356 | case "x": |
|
| 357 | if(this.options.preventflip !=='x') fdpos = flips['x'][dpos] || 'right-top'; |
|
| 358 | break; |
|
| 359 | case "y": |
|
| 360 | if(this.options.preventflip !=='y') fdpos = flips['y'][dpos] || 'top-left'; |
|
| 361 | break; |
|
| 362 | case "xy": |
|
| 363 | if(!this.options.preventflip) fdpos = flips['xy'][dpos] || 'right-bottom'; |
|
| 364 | break; |
|
| 365 | } |
|
| 366 | ||
| 367 | if (fdpos) { |
|
| 368 | ||
| 369 | pp = fdpos.split('-'); |
|
| 370 | css = variants[fdpos] ? variants[fdpos] : variants['bottom-left']; |
|
| 371 | dropdown.addClass('uk-dropdown-autoflip'); |
|
| 372 | ||
| 373 | // check flipped |
|
| 374 | if (this.checkBoundary(pos.left + css.left, pos.top + css.top, width, height, boundarywidth)) { |
|
| 375 | pp = dpos.split('-'); |
|
| 376 | css = variants[dpos] ? variants[dpos] : variants['bottom-left']; |
|
| 377 | } |
|
| 378 | } |
|
| 379 | } |
|
| 380 | } |
|
| 381 | ||
| 382 | if (width > boundarywidth) { |
|
| 383 | dropdown.addClass('uk-dropdown-stack'); |
|
| 384 | this.trigger('stack.uk.dropdown', [this]); |
|
| 385 | } |
|
| 386 | ||
| 387 | dropdown.css(css).css('display', '').addClass('uk-dropdown-'+pp[0]); |
|
| 388 | }, |
|
| 389 | ||
| 390 | checkBoundary: function(left, top, width, height, boundarywidth) { |
|
| 391 | ||
| 392 | var axis = ""; |
|
| 393 | ||
| 394 | if (left < 0 || ((left - UI.$win.scrollLeft())+width) > boundarywidth) { |
|
| 395 | axis += "x"; |
|
| 396 | } |
|
| 397 | ||
| 398 | if ((top - UI.$win.scrollTop()) < 0 || ((top - UI.$win.scrollTop())+height) > window.innerHeight) { |
|
| 399 | axis += "y"; |
|
| 400 | } |
|
| 401 | ||
| 402 | return axis; |
|
| 403 | } |
|
| 404 | }); |
|
| 405 | ||
| 406 | ||
| 407 | UI.component('dropdownOverlay', { |
|
| 408 | ||
| 409 | defaults: { |
|
| 410 | justify : false, |
|
| 411 | cls : '', |
|
| 412 | duration: 200 |
|
| 413 | }, |
|
| 414 | ||
| 415 | boot: function() { |
|
| 416 | ||
| 417 | // init code |
|
| 418 | UI.ready(function(context) { |
|
| 419 | ||
| 420 | UI.$('[data-uk-dropdown-overlay]', context).each(function() { |
|
| 421 | var ele = UI.$(this); |
|
| 422 | ||
| 423 | if (!ele.data('dropdownOverlay')) { |
|
| 424 | UI.dropdownOverlay(ele, UI.Utils.options(ele.attr('data-uk-dropdown-overlay'))); |
|
| 425 | } |
|
| 426 | }); |
|
| 427 | }); |
|
| 428 | }, |
|
| 429 | ||
| 430 | init: function() { |
|
| 431 | ||
| 432 | var $this = this; |
|
| 433 | ||
| 434 | this.justified = this.options.justify ? UI.$(this.options.justify) : false; |
|
| 435 | this.overlay = this.element.find('uk-dropdown-overlay'); |
|
| 436 | ||
| 437 | if (!this.overlay.length) { |
|
| 438 | this.overlay = UI.$('<div class="uk-dropdown-overlay"></div>').appendTo(this.element); |
|
| 439 | } |
|
| 440 | ||
| 441 | this.overlay.addClass(this.options.cls); |
|
| 442 | ||
| 443 | this.on({ |
|
| 444 | ||
| 445 | 'beforeshow.uk.dropdown': function(e, dropdown) { |
|
| 446 | $this.dropdown = dropdown; |
|
| 447 | ||
| 448 | if ($this.justified && $this.justified.length) { |
|
| 449 | justify($this.overlay.css({display:'block', marginLeft:'', marginRight:''}), $this.justified, $this.justified.outerWidth()); |
|
| 450 | } |
|
| 451 | }, |
|
| 452 | ||
| 453 | 'show.uk.dropdown': function(e, dropdown) { |
|
| 454 | ||
| 455 | var h = $this.dropdown.dropdown.outerHeight(true); |
|
| 456 | ||
| 457 | $this.dropdown.element.removeClass('uk-open'); |
|
| 458 | ||
| 459 | $this.overlay.stop().css('display', 'block').animate({height: h}, $this.options.duration, function() { |
|
| 460 | ||
| 461 | $this.dropdown.dropdown.css('visibility', ''); |
|
| 462 | $this.dropdown.element.addClass('uk-open'); |
|
| 463 | ||
| 464 | UI.Utils.checkDisplay($this.dropdown.dropdown, true); |
|
| 465 | }); |
|
| 466 | ||
| 467 | $this.pointerleave = false; |
|
| 468 | }, |
|
| 469 | ||
| 470 | 'hide.uk.dropdown': function() { |
|
| 471 | $this.overlay.stop().animate({height: 0}, $this.options.duration); |
|
| 472 | }, |
|
| 473 | ||
| 474 | 'pointerenter.uk.dropdown': function(e, dropdown) { |
|
| 475 | clearTimeout($this.remainIdle); |
|
| 476 | }, |
|
| 477 | ||
| 478 | 'pointerleave.uk.dropdown': function(e, dropdown) { |
|
| 479 | $this.pointerleave = true; |
|
| 480 | } |
|
| 481 | }); |
|
| 482 | ||
| 483 | ||
| 484 | this.overlay.on({ |
|
| 485 | ||
| 486 | 'mouseenter': function() { |
|
| 487 | if ($this.remainIdle) { |
|
| 488 | clearTimeout($this.dropdown.remainIdle); |
|
| 489 | clearTimeout($this.remainIdle); |
|
| 490 | } |
|
| 491 | }, |
|
| 492 | ||
| 493 | 'mouseleave': function(){ |
|
| 494 | ||
| 495 | if ($this.pointerleave && active) { |
|
| 496 | ||
| 497 | $this.remainIdle = setTimeout(function() { |
|
| 498 | if(active) active.hide(); |
|
| 499 | }, active.options.remaintime); |
|
| 500 | } |
|
| 501 | } |
|
| 502 | }) |
|
| 503 | } |
|
| 504 | ||
| 505 | }); |
|
| 506 | ||
| 507 | ||
| 508 | function justify(ele, justifyTo, boundarywidth, offset) { |
|
| 509 | ||
| 510 | ele = UI.$(ele); |
|
| 511 | justifyTo = UI.$(justifyTo); |
|
| 512 | boundarywidth = boundarywidth || window.innerWidth; |
|
| 513 | offset = offset || ele.offset(); |
|
| 514 | ||
| 515 | if (justifyTo.length) { |
|
| 516 | ||
| 517 | var jwidth = justifyTo.outerWidth(); |
|
| 518 | ||
| 519 | ele.css('min-width', jwidth); |
|
| 520 | ||
| 521 | if (UI.langdirection == 'right') { |
|
| 522 | ||
| 523 | var right1 = boundarywidth - (justifyTo.offset().left + jwidth), |
|
| 524 | right2 = boundarywidth - (ele.offset().left + ele.outerWidth()); |
|
| 525 | ||
| 526 | ele.css('margin-right', right1 - right2); |
|
| 527 | ||
| 528 | } else { |
|
| 529 | ele.css('margin-left', justifyTo.offset().left - offset.left); |
|
| 530 | } |
|
| 531 | } |
|
| 532 | } |
|
| 533 | ||
| 534 | })(UIkit2); |
|
| 535 | ||
