WordPress.org
Get WordPress

Plugin Directory

Changeset 2596607


Ignore:
Timestamp:
09/10/2021 01:49:31 AM (5 years ago)
Author:
patrickpelayo
Message:

Added to advanced settings a max-width option for the iframe.

Location:
responsive-iframe/trunk
Files:
6 edited

Legend:

Unmodified
Added
Removed

  • responsive-iframe/trunk/dist/blocks.build.js

    r2419638 r2596607  
    1 !function(e){function t(n){if(r[n])return r[n].exports;var a=r[n]={i:n,l:!1,exports:{}};return e[n].call(a.exports,a,a.exports,t),a.l=!0,a.exports}var r={};t.m=e,t.c=r,t.d=function(e,r,n){t.o(e,r)||Object.defineProperty(e,r,{configurable:!1,enumerable:!0,get:n})},t.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(r,"a",r),r},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=0)}([function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0});r(1)},function(e,t,r){"use strict";function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!==typeof t&&"function"!==typeof t?e:t}function o(e,t){if("function"!==typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}var i,l,c=r(2),s=(r.n(c),r(3)),u=(r.n(s),r(4)),p=function(){function e(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,r,n){return r&&e(t.prototype,r),n&&e(t,n),t}}(),__=wp.i18n.__,m=wp.blocks.registerBlockType,f=wp.element.Fragment,d=wp.components.Placeholder,h=wp.element.Component;m("patrickp/responsive-iframes",{title:__("Responsive iframes"),icon:"desktop",category:"embed",keywords:[__("responsive-iframes"),__("iframe"),__("responsive")],attributes:{iFrameURL:{type:"string",default:window.location.href.match(RESPONSIVE_IFRAME_CONSTANTS.URL_REGEX)[0]},iFrameWidth:{type:"number",default:1e3},iFrameHeight:{type:"number",default:600},wrapperWidth:{type:"number",default:100},scrollBarChecked:{type:"boolean",default:!0},borderChecked:{type:"boolean",default:!0},id:{type:"string"},wrapperClass:{type:"string",default:RESPONSIVE_IFRAME_CONSTANTS.WRAPPER_CLASS_NAME}},edit:(l=i=function(e){function t(e){n(this,t);var r=a(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e)),o=t;return(0,r.props.setAttributes)({id:RESPONSIVE_IFRAME_CONSTANTS.ID_NAME.concat(o.index)}),o.index++,r}return o(t,e),p(t,[{key:"componentDidMount",value:function(){var e=this.props.attributes,t="#".concat(e.id);jQuery(t).css({width:e.iFrameWidth,height:e.iFrameHeight,maxWidth:"none"}),this.scaleIframe()}},{key:"componentDidUpdate",value:function(){var e=this.props.attributes,t="#".concat(e.id);jQuery(t).css({width:e.iFrameWidth,height:e.iFrameHeight}),this.scaleIframe()}},{key:"scaleIframe",value:function(){var e=RESPONSIVE_IFRAME_CONSTANTS.DEFAULT_SCALE_VAL,t=e,r=void 0,n=void 0,a=this.props.attributes,o="#".concat(a.id),i=jQuery(o).parent().width(),l=jQuery(o).width(),c=jQuery(o).height();t=i/l,r=-1*c*(e-t),n=-1*l*(e-t),jQuery(o).css(this.buildCSS(t,r,n))}},{key:"buildCSS",value:function(e,t,r){var n="scale("+e+")";return{transform:n,"-ms-transform":n,"-moz-transform":n,"-o-transform":n,"-webkit-transform":n,"transform-origin":"0 0","-ms-transform-origin":"0 0","-moz-transform-origin":"0 0","-o-transform-origin":"0 0","-webkit-transform-origin":"0 0","margin-bottom":t,"margin-right":r}}},{key:"render",value:function(){var e=this.props,t=e.attributes,r=(e.setAttributes,t.scrollBarChecked?"yes":"no"),n=t.borderChecked?{}:{border:"none"},a=t.wrapperWidth?{maxWidth:t.wrapperWidth+"%"}:{},o={marginLeft:"auto",marginRight:"auto"},i=t.className?t.wrapperClass+" "+t.className:t.wrapperClass,l=Object.assign(o,a),c=t.iFrameURL?wp.element.createElement("iframe",{id:t.id,style:n,class:RESPONSIVE_IFRAME_CONSTANTS.CLASS_NAME,scrolling:r,src:t.iFrameURL}):wp.element.createElement(d,null," ",wp.element.createElement("p",null,"Enter a url into the block settings to the right.")," ");return wp.element.createElement(f,null,wp.element.createElement(u.a,this.props),wp.element.createElement("div",{style:l,className:i},c))}}]),t}(h),i.index=0,l),save:function(e){var t=e.attributes,r=t.scrollBarChecked?"yes":"no",n=t.borderChecked?{}:{border:"none"},a=t.wrapperWidth?{maxWidth:t.wrapperWidth+"%"}:{},o={marginLeft:"auto",marginRight:"auto"},i=t.className?t.wrapperClass+" "+t.className:t.wrapperClass,l=Object.assign(o,a),c=wp.element.createElement("iframe",{style:n,id:t.id,className:RESPONSIVE_IFRAME_CONSTANTS.CLASS_NAME,"data-width-iframe":t.iFrameWidth,"data-height-iframe":t.iFrameHeight,scrolling:r,src:t.iFrameURL});return wp.element.createElement(f,null,wp.element.createElement("div",{style:l,className:i},c))}})},function(e,t){},function(e,t){},function(e,t,r){"use strict";function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!==typeof t&&"function"!==typeof t?e:t}function o(e,t){if("function"!==typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}var i=function(){function e(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,r,n){return r&&e(t.prototype,r),n&&e(t,n),t}}(),l=wp.blockEditor.InspectorControls,c=wp.element.Component,s=wp.components,u=s.Panel,p=s.PanelBody,m=s.TextControl,f=s.CheckboxControl,d=s.RangeControl,h=function(e){function t(e){return n(this,t),a(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e))}return o(t,e),i(t,[{key:"render",value:function(){var e=this.props,t=e.attributes,r=e.setAttributes;return wp.element.createElement(l,null,wp.element.createElement(u,null,wp.element.createElement(p,{title:"Iframe Settings"},wp.element.createElement(m,{label:"Site Address",value:t.iFrameURL,onChange:function(e){r({iFrameURL:e})}}),wp.element.createElement(d,{label:"Site Width",min:0,max:3e3,value:t.iFrameWidth,onChange:function(e){r({iFrameWidth:e})}}),wp.element.createElement(d,{label:"Site Height",min:0,max:3e3,value:t.iFrameHeight,onChange:function(e){r({iFrameHeight:e})}}),wp.element.createElement("div",{className:RESPONSIVE_IFRAME_CONSTANTS.CHK_BX_CLASS},wp.element.createElement(f,{label:"Scroll Bar",checked:t.scrollBarChecked,onChange:function(){r({scrollBarChecked:!t.scrollBarChecked})}}),wp.element.createElement(f,{label:"Border",checked:t.borderChecked,onChange:function(){r({borderChecked:!t.borderChecked})}})),wp.element.createElement(d,{label:"Scale",min:1,max:100,value:t.wrapperWidth,onChange:function(e){r({wrapperWidth:e})}}))))}}]),t}(c);t.a=h}]);
     1!function(e){function t(n){if(r[n])return r[n].exports;var a=r[n]={i:n,l:!1,exports:{}};return e[n].call(a.exports,a,a.exports,t),a.l=!0,a.exports}var r={};t.m=e,t.c=r,t.d=function(e,r,n){t.o(e,r)||Object.defineProperty(e,r,{configurable:!1,enumerable:!0,get:n})},t.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(r,"a",r),r},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=0)}([function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0});r(1)},function(e,t,r){"use strict";function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!==typeof t&&"function"!==typeof t?e:t}function i(e,t){if("function"!==typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}var o,l,s=r(2),c=(r.n(s),r(3)),u=(r.n(c),r(4)),p=function(){function e(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,r,n){return r&&e(t.prototype,r),n&&e(t,n),t}}(),__=wp.i18n.__,m=wp.blocks.registerBlockType,d=wp.element.Fragment,f=wp.components.Placeholder,h=wp.element.Component;m("patrickp/responsive-iframes",{title:__("Responsive iframes"),icon:"desktop",category:"embed",keywords:[__("responsive-iframes"),__("iframe"),__("responsive")],attributes:{iFrameURL:{type:"string",default:window.location.href.match(RESPONSIVE_IFRAME_CONSTANTS.URL_REGEX)[0]},iFrameWidth:{type:"number",default:1e3},iFrameHeight:{type:"number",default:600},wrapperWidth:{type:"number",default:100},scrollBarChecked:{type:"boolean",default:!0},borderChecked:{type:"boolean",default:!0},id:{type:"string"},wrapperClass:{type:"string",default:RESPONSIVE_IFRAME_CONSTANTS.WRAPPER_CLASS_NAME},useMaxWidth:{type:"boolean",default:!1},maxWidth:{type:"number",default:2e3}},edit:(l=o=function(e){function t(e){n(this,t);var r=a(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e)),i=t;return(0,r.props.setAttributes)({id:RESPONSIVE_IFRAME_CONSTANTS.ID_NAME.concat(i.index)}),i.index++,r}return i(t,e),p(t,[{key:"componentDidMount",value:function(){var e=this.props.attributes,t="#".concat(e.id);jQuery(t).css({width:e.iFrameWidth,height:e.iFrameHeight,maxWidth:"none"}),this.scaleIframe()}},{key:"componentDidUpdate",value:function(){var e=this.props.attributes,t="#".concat(e.id);jQuery(t).css({width:e.iFrameWidth,height:e.iFrameHeight}),this.scaleIframe()}},{key:"scaleIframe",value:function(){var e=RESPONSIVE_IFRAME_CONSTANTS.DEFAULT_SCALE_VAL,t=e,r=void 0,n=void 0,a=this.props.attributes,i="#".concat(a.id),o=jQuery(i).parent().width(),l=jQuery(i).width(),s=jQuery(i).height();t=o/l,r=-1*s*(e-t),n=-1*l*(e-t),jQuery(i).css(this.buildCSS(t,r,n))}},{key:"buildCSS",value:function(e,t,r){var n="scale("+e+")";return{transform:n,"-ms-transform":n,"-moz-transform":n,"-o-transform":n,"-webkit-transform":n,"transform-origin":"0 0","-ms-transform-origin":"0 0","-moz-transform-origin":"0 0","-o-transform-origin":"0 0","-webkit-transform-origin":"0 0","margin-bottom":t,"margin-right":r}}},{key:"render",value:function(){var e=this.props,t=e.attributes,r=(e.setAttributes,t.scrollBarChecked?"yes":"no"),n=t.borderChecked?{}:{border:"none"},a=t.wrapperWidth?{maxWidth:t.wrapperWidth+"%"}:{},i={marginLeft:"auto",marginRight:"auto"},o=t.className?t.wrapperClass+" "+t.className:t.wrapperClass,l=Object.assign(i,a),s=t.iFrameURL?wp.element.createElement("iframe",{id:t.id,style:n,class:RESPONSIVE_IFRAME_CONSTANTS.CLASS_NAME,scrolling:r,src:t.iFrameURL}):wp.element.createElement(f,null," ",wp.element.createElement("p",null,"Enter a url into the block settings to the right.")," ");return wp.element.createElement(d,null,wp.element.createElement(u.a,this.props),wp.element.createElement("div",{style:l,className:o},s))}}]),t}(h),o.index=0,l),save:function(e){var t=e.attributes,r=t.scrollBarChecked?"yes":"no",n=t.borderChecked?{}:{border:"none"},a=t.wrapperWidth?{maxWidth:t.wrapperWidth+"%"}:{},i={marginLeft:"auto",marginRight:"auto"},o=t.className?t.wrapperClass+" "+t.className:t.wrapperClass;t.useMaxWidth&&(a={maxWidth:t.maxWidth/16+"rem"});var l=Object.assign(i,a),s=wp.element.createElement("iframe",{style:n,id:t.id,className:RESPONSIVE_IFRAME_CONSTANTS.CLASS_NAME,"data-width-iframe":t.iFrameWidth,"data-height-iframe":t.iFrameHeight,scrolling:r,src:t.iFrameURL});return wp.element.createElement(d,null,wp.element.createElement("div",{style:l,className:o},s))}})},function(e,t){},function(e,t){},function(e,t,r){"use strict";function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!==typeof t&&"function"!==typeof t?e:t}function i(e,t){if("function"!==typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}var o=function(){function e(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,r,n){return r&&e(t.prototype,r),n&&e(t,n),t}}(),l=wp.blockEditor,s=l.InspectorControls,c=l.InspectorAdvancedControls,u=wp.element.Component,p=wp.components,m=p.Panel,d=p.PanelBody,f=p.TextControl,h=p.CheckboxControl,b=p.RangeControl,w=function(e){function t(e){return n(this,t),a(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e))}return i(t,e),o(t,[{key:"render",value:function(){var e=this.props,t=e.attributes,r=e.setAttributes;return wp.element.createElement(s,null,wp.element.createElement(m,null,wp.element.createElement(d,{title:"Iframe Settings"},wp.element.createElement(f,{label:"Site Address",value:t.iFrameURL,onChange:function(e){r({iFrameURL:e})}}),wp.element.createElement(b,{label:"Site Width",min:0,max:3e3,value:t.iFrameWidth,onChange:function(e){r({iFrameWidth:e})}}),wp.element.createElement(b,{label:"Site Height",min:0,max:3e3,value:t.iFrameHeight,onChange:function(e){r({iFrameHeight:e})}}),wp.element.createElement("div",{className:RESPONSIVE_IFRAME_CONSTANTS.CHK_BX_CLASS},wp.element.createElement(h,{label:"Scroll Bar",checked:t.scrollBarChecked,onChange:function(){r({scrollBarChecked:!t.scrollBarChecked})}}),wp.element.createElement(h,{label:"Border",checked:t.borderChecked,onChange:function(){r({borderChecked:!t.borderChecked})}})),wp.element.createElement(b,{label:t.useMaxWidth?"Scale (Disabled by Advanced Setting MAX WIDTH)":"Scale",disabled:t.useMaxWidth,min:1,max:100,value:t.wrapperWidth,onChange:function(e){r({wrapperWidth:e})}})),wp.element.createElement(c,null,wp.element.createElement(h,{label:"UseMaxWidth(This will disable scaling)",checked:t.useMaxWidth,onChange:function(){r({useMaxWidth:!t.useMaxWidth})}}),wp.element.createElement(b,{disabled:!t.useMaxWidth,label:"Max-Width",min:1,max:3e3,value:t.maxWidth,onChange:function(e){r({maxWidth:e})}}))))}}]),t}(u);t.a=w}]);

  • responsive-iframe/trunk/package.json

    r2419638 r2596607  
    11{
    22  "name": "responsive-iframe",
    3   "version": "1.0.0",
     3  "version": "1.1.0",
    44  "private": true,
    55  "scripts": {

  • responsive-iframe/trunk/plugin.php

    r2455939 r2596607  
    66 * Author: PatrickPelayo
    77 * Author URI: http://www.PatrickP.Tech/
    8  * Version: 1.0.1
     8 * Version: 1.1.0
    99 * License: GPL2+
    1010 * License URI: https://www.gnu.org/licenses/gpl-2.0.html

  • responsive-iframe/trunk/readme.txt

    r2455938 r2596607  
    33Tags: responsive, iframe,block
    44Requires at least: 5.4.2
    5 Tested up to: 5.6.0
    6 Stable tag: 1.0.1
     5Tested up to: 5.8.1
     6Stable tag: 1.1.0
    77Requires PHP: 7.0
    88License: GPLv2 or later
    … …  
    4343== Changelog ==
    4444
     45= 1.1.0 =
     46* Adds to advanced settings an option to specify max-width of Iframe
     47
    4548= 1.0.1 =
    4649* updates the readme, and fixes my website link in plugin.php
    … …  
    5154== Upgrade Notice ==
    5255
    53 = 1.1 =
    54 * update optional, only changes readme and fixes my website link in plugin.php
     56= 1.1.0
     57* optional update
    5558
    56 = 1.0 =
     59= 1.0.1 =
     60* optional update, only changes readme and fixes my website link in plugin.php
     61
     62= 1.0.0 =
    5763* first release
    5864   

  • responsive-iframe/trunk/src/block/block.js

    r2419638 r2596607  
    7373            type:'string',
    7474            default:RESPONSIVE_IFRAME_CONSTANTS.WRAPPER_CLASS_NAME //wrapped around the iframe element, includes some basic formating founbd in style.scss
     75        },
     76        useMaxWidth:{
     77            type:'boolean',
     78            default:false
     79        },
     80        maxWidth:{
     81            type:'number',
     82            default:2000
    7583        }
    7684    },
    … …  
    239247        let className = attributes.className ? attributes.wrapperClass + ' ' + attributes.className : attributes.wrapperClass;
    240248       
     249        //user using advanced settings to specify max-width of iframe
     250        if(attributes.useMaxWidth){
     251            maxWidth = {maxWidth:attributes.maxWidth/16 + "rem"};
     252        }
    241253        //style for the wrapper
    242254        let style = Object.assign(center,maxWidth);

  • responsive-iframe/trunk/src/block/inspector.js

    r2419638 r2596607  
    1 const { InspectorControls} = wp.blockEditor;
     1const { InspectorControls,InspectorAdvancedControls} = wp.blockEditor;
    22const { Component } = wp.element;
    33const { Panel,PanelBody, TextControl, CheckboxControl,RangeControl} = wp.components;
     4
    45
    56
    … …  
    4950
    5051                        <RangeControl
    51                             label="Scale"
     52                            label={!attributes.useMaxWidth ? "Scale" : "Scale (Disabled by Advanced Setting MAX WIDTH)"}
     53                            disabled={attributes.useMaxWidth}
    5254                            min={1}
    5355                            max={100}
    … …  
    5658                        /> 
    5759                    </PanelBody>
     60                    <InspectorAdvancedControls>
     61                    <CheckboxControl
     62                                label = 'UseMaxWidth(This will disable scaling)'
     63                                checked = {attributes.useMaxWidth}
     64                                onChange = {()=>{setAttributes({useMaxWidth:!attributes.useMaxWidth});}}
     65                            />
     66                    <RangeControl
     67                        disabled={!attributes.useMaxWidth}
     68                        label="Max-Width"
     69                        min={1}
     70                        max={3000}
     71                        value = {attributes.maxWidth}
     72                        onChange= {(val)=>{setAttributes({maxWidth:val});}}
     73                    /> 
     74                </InspectorAdvancedControls>
    5875                </Panel>
    5976            </InspectorControls>
Note: See TracChangeset for help on using the changeset viewer.