diff options
Diffstat (limited to 'js/core/cover.js')
| -rwxr-xr-x | js/core/cover.js | 95 |
1 files changed, 95 insertions, 0 deletions
diff --git a/js/core/cover.js b/js/core/cover.js new file mode 100755 index 0000000..046ac9d --- /dev/null +++ b/js/core/cover.js | |||
| @@ -0,0 +1,95 @@ | |||
| 1 | /*! UIkit 2.26.4 | http://www.getuikit.com | (c) 2014 YOOtheme | MIT License */ | ||
| 2 | (function(UI){ | ||
| 3 | |||
| 4 | "use strict"; | ||
| 5 | |||
| 6 | UI.component('cover', { | ||
| 7 | |||
| 8 | defaults: { | ||
| 9 | automute : true | ||
| 10 | }, | ||
| 11 | |||
| 12 | boot: function() { | ||
| 13 | |||
| 14 | // auto init | ||
| 15 | UI.ready(function(context) { | ||
| 16 | |||
| 17 | UI.$("[data-uk-cover]", context).each(function(){ | ||
| 18 | |||
| 19 | var ele = UI.$(this); | ||
| 20 | |||
| 21 | if(!ele.data("cover")) { | ||
| 22 | var plugin = UI.cover(ele, UI.Utils.options(ele.attr("data-uk-cover"))); | ||
| 23 | } | ||
| 24 | }); | ||
| 25 | }); | ||
| 26 | }, | ||
| 27 | |||
| 28 | init: function() { | ||
| 29 | |||
| 30 | this.parent = this.element.parent(); | ||
| 31 | |||
| 32 | UI.$win.on('load resize orientationchange', UI.Utils.debounce(function(){ | ||
| 33 | this.check(); | ||
| 34 | }.bind(this), 100)); | ||
| 35 | |||
| 36 | this.on("display.uk.check", function(e) { | ||
| 37 | if(this.element.is(":visible")) this.check(); | ||
| 38 | }.bind(this)); | ||
| 39 | |||
| 40 | this.check(); | ||
| 41 | |||
| 42 | if (this.element.is('iframe') && this.options.automute) { | ||
| 43 | |||
| 44 | var src = this.element.attr('src'); | ||
| 45 | |||
| 46 | this.element.attr('src', '').on('load', function(){ | ||
| 47 | |||
| 48 | this.contentWindow.postMessage('{ "event": "command", "func": "mute", "method":"setVolume", "value":0}', '*'); | ||
| 49 | |||
| 50 | }).attr('src', [src, (src.indexOf('?') > -1 ? '&':'?'), 'enablejsapi=1&api=1'].join('')); | ||
| 51 | } | ||
| 52 | }, | ||
| 53 | |||
| 54 | check: function() { | ||
| 55 | |||
| 56 | this.element.css({ | ||
| 57 | 'width' : '', | ||
| 58 | 'height' : '' | ||
| 59 | }); | ||
| 60 | |||
| 61 | this.dimension = {w: this.element.width(), h: this.element.height()}; | ||
| 62 | |||
| 63 | if (this.element.attr('width') && !isNaN(this.element.attr('width'))) { | ||
| 64 | this.dimension.w = this.element.attr('width'); | ||
| 65 | } | ||
| 66 | |||
| 67 | if (this.element.attr('height') && !isNaN(this.element.attr('height'))) { | ||
| 68 | this.dimension.h = this.element.attr('height'); | ||
| 69 | } | ||
| 70 | |||
| 71 | this.ratio = this.dimension.w / this.dimension.h; | ||
| 72 | |||
| 73 | var w = this.parent.width(), h = this.parent.height(), width, height; | ||
| 74 | |||
| 75 | // if element height < parent height (gap underneath) | ||
| 76 | if ((w / this.ratio) < h) { | ||
| 77 | |||
| 78 | width = Math.ceil(h * this.ratio); | ||
| 79 | height = h; | ||
| 80 | |||
| 81 | // element width < parent width (gap to right) | ||
| 82 | } else { | ||
| 83 | |||
| 84 | width = w; | ||
| 85 | height = Math.ceil(w / this.ratio); | ||
| 86 | } | ||
| 87 | |||
| 88 | this.element.css({ | ||
| 89 | 'width' : width, | ||
| 90 | 'height' : height | ||
| 91 | }); | ||
| 92 | } | ||
| 93 | }); | ||
| 94 | |||
| 95 | })(UIkit); | ||
