1/* 2 * jQury ratiobox plugin 3 * 4 * The MIT License 5 * 6 * Copyright (c) 2014- Shoji Matsumoto ([email protected]) 7 * 8 * Permission is hereby granted, free of charge, to any person obtaining a copy 9 * of this software and associated documentation files (the "Software"), to deal 10 * in the Software without restriction, including without limitation the rights 11 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 12 * copies of the Software, and to permit persons to whom the Software is 13 * furnished to do so, subject to the following conditions: 14 * 15 * The above copyright notice and this permission notice shall be included in 16 * all copies or substantial portions of the Software. 17 * 18 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 19 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 20 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 21 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 22 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 23 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 24 * THE SOFTWARE. 25 * 26 ********************************************************************* 27 * 28 */ 29 30(function($) { 31 32 function calcRatio(r){ 33 var m = ('' + r).match(/^((\d+(?:\.\d+)?)[:x](\d+(?:\.\d+)?)|(\d*\.?\d+))$/); 34 if (m) { 35 if (m[4]) { 36 // raw float ratio 37 r = parseFloat(m[4]) * 100; 38 } else if (m[2] && m[3]) { 39 // W:H or WxH 40 r = parseFloat(m[3]) / parseFloat(m[2]) * 100; 41 } 42 } else if (r) { 43 console.error('radiobox:invalid data-ratio:' + r); 44 } 45 return r; 46 } 47 48 function unwrapRatioBox($wrapper){ 49 var $ret; 50 if (!$wrapper.is('.ratio-wrap')){ 51 $ret = $wrapper; 52 } else { 53 $ret = $wrapper.children('.ratio-wrapped').removeClass('ratio-wrapped').removeAttr('style'); 54 var h = $ret.attr('data-height'), 55 w = $ret.attr('data-width'), 56 s = $ret.attr('data-style'); 57 if (h) { $ret.attr('height', h); } 58 if (w) { $ret.attr('width', w); } 59 if (s) { $ret.attr('style', s); } 60 $ret.removeAttr('data-height') 61 .removeAttr('data-width') 62 .removeAttr('data-style'); 63 $wrapper.replaceWith($ret); 64 $ret.trigger('ratiounwrapped'); 65 } 66 return $ret; 67 } 68 69 $.fn.extend({ 70 ratiobox : function(force_ratio){ 71 /** 72 * wrap elements as fixed ratio block for iframe, video, etc. 73 * usage: <iframe data-ratio width="640" height="480"></iframe> etc. 74 * attributes: 75 * data-ratio: 76 * <float>(height/width) ex) 0.5 (=2:1) 77 * <width>:<height> ex) 4:3 (=0.75) 78 * <width>x<hegith> ex) 320x240 (=0.75,4:3) 79 * 80 * @param force_ratio: 81 * ignore data-ratio, width, height and forced to ratio. 82 * if force_ratio === null, unwrap elements 83 * 84 * @return
85 * wrapped elements (.ratio-wrap) 86 * 87 */ 88 89 return this.map(function(){ 90 91 if (force_ratio === null) { 92 return unwrapRatioBox($(this)).get(); 93 } 94 95 var $elm = $(this), w, h, r, m; 96 97 if ($elm.parent().is('.ratio-wrap')) { return; } 98 99 if ($elm.is('[data-ratio-ignored]')) { return; } 100 101 h = $elm.attr('height'); 102 w = $elm.attr('width'); 103 r = $elm.attr('data-ratio')||''; 104 105 h = h && h.match(/^\d*\.?\d+(px)?$/) && parseFloat(h) || false; 106 w = w && w.match(/^\d*\.?\d+(px)?$/) && parseFloat(w) || false; 107 108 // data-ratioã å®æ° or N:M or WxH ã§æ¢ã«ããã¨ãã¯åªå ã§æ¡ç¨ 109 r = calcRatio(r); 110 111 // rã決ã¾ã£ããã©ã¼ãããã§ãªããç¡æå®ãheight,widthãå ±ã«æ£æ° 112 if (!r && h && w ) { 113 // height,widthãã¨ãã«æ£æ°ãdata-ratioãæå®ãªã 114 r = h/w * 100; 115 } 116 117 if (force_ratio) { 118 r = calcRatio(force_ratio); 119 } 120 121 if (!r) { 122 // console.log('ratiobox:ignore invalid attributes', $elm[0]); 123 $elm.removeAttr('data-ratio').attr('data-ratio-ignored','1'); 124 return; 125 } 126 var ev = $.Event('ratiowrap'); 127 $elm.trigger(ev); 128 if (ev.isDefaultPrevented()) { 129 console.log('ratiobox:defaultPrevented', elm[0]); 130 $elm.removeAttr('data-ratio').attr('data-ratio-ignored','1'); 131 return; 132 } 133 134 // var disp = $elm.css('display'), vert = $elm.css('vertical-align'); 135 var disp = 'block', vert = 'middle'; 136
137 var $spacer = $('<div class="ratio-spacer"></div>').css({ 138 'padding-top': r+'%', 139 'position':'relative', 140 'height': 0 141 }); 142 var is_inline = disp == 'inline'; 143 var wrapper_css = { 144 'display': is_inline ? 'inline-block' : disp, 145 'vertical-align': vert, 146 'position':'relative', 147 'max-width': '100%', 148 'width': (is_inline && w) ? (w + 'px') : 'auto' 149 }; 150 var $wrapper = $('<div class="ratio-wrap"></div>') 151 .attr('data-ratio-wrapped', r/100) 152 .attr('data-ratio-src', $elm.attr('src')) 153 .css(wrapper_css) 154 .append($spacer); 155 156 $elm.after($wrapper); 157 $wrapper.append($elm); 158 159 $elm.removeAttr('data-ratio') 160 .attr('data-height', $elm.attr('height')||'') 161 .attr('data-width', $elm.attr('width')||'') 162 .attr('data-style', $elm.attr('style')||'') 163 .removeAttr('height') 164 .removeAttr('width') 165 .css({ 166 'position': 'absolute', 167 'top':0, 168 'left':0, 169 'width': '100%', 170 'height': '100%', 171 'display': 'block', 172 'margin': 0 173 }).addClass('ratio-wrapped'); 174 175 // ä¸èº«ã®classã¨ãã¶ãããã«ã¹ã¿ã ã«å½±é¿ãåºãããªã®ã§ããããªã 176 $wrapper.addClass('ratio-wrapped'); 177 178 $elm.trigger('ratiowrapped'); 179 return $wrapper.get(); 180 }); 181 }, 182 ratio: function(ratio){ 183 /** 184 * set wrapped ratio box ratio 185 */ 186 187 if (ratio === undefined) { 188 return parseFloat($(this).attr('data-ratio-wrapped')); 189 } 190 191 if (ratio === null) { 192 return $(this).map(function(){ 193 return unwrapRatioBox($(this)).get(); 194 }); 195 } 196 197 ratio = calcRatio(ratio); 198 199 return this.each(function(){ 200 var $target = $(this); 201 // ãã®ã¸ã .ratio-wrapped ããµãã¤ã«ã¤ãã¦ããï¼æ´å²ççµç·¯ï¼ 202 // .ratio-wrapã«ãµãã¤ã®ç¶æ ããã 203 // - .ratio-wrap ããã®ã¹ã¯ãªããã§å¦çããã 204 // - .ratio-wrapã®å¯¾è±¡ï¼img,iframe,videoãªã©ï¼ãå¦çããã 205 // ç¾ç¶ã§ã¯ä»¥ä¸ã«ãªã£ã¦ãã 206 // div.ratio-wrap.ratio-wrap 207 // div.ratio-spacer 208 // (img|iframe|...).ratio-wrapped 209 if ($(this).is('.ratio-wrapped') && $(this).parent().is('.ratio-wrap')) { 210 $target = $(this).parent(); 211 } 212 if (!$target.is('.ratio-wrap')) { 213 console.error('ratiowrap:this is not .ratio-wrap', $target); 214 return; 215 } 216 $target.attr('data-ratio-wrapped', ratio / 100) 217 .children(':first-child').css('padding-top', ratio+'%'); 218 }); 219 } 220 }); 221 222 // watch [data-ratio] elements 223 setInterval(function(){ 224 $('[data-ratio].ratio-wrap:visible').each(function(){ 225 var $wrapped = $(this); 226 $wrapped.ratio($wrapped.attr('data-ratio')).removeAttr('data-ratio'); 227 }); 228 $('[data-ratio]:not(.ratio-wrapped):visible').ratiobox(); 229 }, 333); 230 231 if (!$('#style-ratiobox')[0]) { 232 $('<style id="style-ratiobox"></style>').text(` 233 .ratio-wrapped iframe, .ratio-wrapped video, .ratio-wrapped img { 234 margin:0; 235 } 236 /* youtube short */ 237 .ratio-wrapped[data-ratio-wrapped^="1."][data-ratio-src*="//www.youtube.com/embed/"] { 238 /* 横ç»å 720px ã®ã¨ãã縦ã 405 ãªã®ã§ */ 239 max-width: min(100%, 405px)!important; 240 } 241 `).appendTo(document.head || document.body); 242 } 243 244})(jQuery);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.