WordPress.org
Get WordPress

Plugin Directory

Changeset 2624662


Ignore:
Timestamp:
11/04/2021 05:22:41 PM (4 years ago)
Author:
patrickpelayo
Message:

Adding Breakpoint Support to the iframes

Location:
responsive-iframe/trunk
Files:
9 edited

Legend:

Unmodified
Added
Removed

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

    r2596611 r2624662  
    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+"px"});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}]);
     1!function(e){function t(r){if(n[r])return n[r].exports;var a=n[r]={i:r,l:!1,exports:{}};return e[r].call(a.exports,a,a.exports,t),a.l=!0,a.exports}var n={};t.m=e,t.c=n,t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=1)}([function(e,t,n){"use strict";var r={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},breakPoints:{type:"array",default:[]}};t.a=r},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});n(2)},function(e,t,n){"use strict";function r(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=n(3),c=(n.n(s),n(4)),u=(n.n(c),n(5)),m=n(0),p=n(7),d=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),__=wp.i18n.__,f=wp.blocks.registerBlockType,h=wp.element.Fragment,b=wp.components.Placeholder,E=wp.element.Component;f("patrickp/responsive-iframes",{title:__("Responsive iframes"),icon:"desktop",category:"embed",keywords:[__("responsive-iframes"),__("iframe"),__("responsive")],attributes:m.a,edit:(l=o=function(e){function t(e){r(this,t);var n=a(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e)),i=t;return(0,n.props.setAttributes)({id:RESPONSIVE_IFRAME_CONSTANTS.ID_NAME.concat(i.index)}),i.index++,n}return i(t,e),d(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,n=void 0,r=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,n=-1*s*(e-t),r=-1*l*(e-t),jQuery(i).css(this.buildCSS(t,n,r))}},{key:"buildCSS",value:function(e,t,n){var r="scale("+e+")";return{transform:r,"-ms-transform":r,"-moz-transform":r,"-o-transform":r,"-webkit-transform":r,"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":n}}},{key:"render",value:function(){var e=this.props,t=e.attributes,n=(e.setAttributes,t.scrollBarChecked?"yes":"no"),r=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:r,class:RESPONSIVE_IFRAME_CONSTANTS.CLASS_NAME,scrolling:n,src:t.iFrameURL}):wp.element.createElement(b,null," ",wp.element.createElement("p",null,"Enter a url into the block settings to the right.")," ");return wp.element.createElement(h,null,wp.element.createElement(u.a,this.props),wp.element.createElement("div",{style:l,className:o},s))}}]),t}(E),o.index=0,l),save:function(e){var t=e.attributes,n=t.scrollBarChecked?"yes":"no",r=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=JSON.stringify(t.breakPoints);t.useMaxWidth&&(a={maxWidth:t.maxWidth+"px"});var s=Object.assign(i,a),c=wp.element.createElement("iframe",{style:r,id:t.id,className:RESPONSIVE_IFRAME_CONSTANTS.CLASS_NAME,"data-break-points":l,"data-width-iframe":t.iFrameWidth,"data-height-iframe":t.iFrameHeight,scrolling:n,src:t.iFrameURL});return wp.element.createElement(h,null,wp.element.createElement("div",{style:s,className:o},c))},deprecated:[p.a]})},function(e,t){},function(e,t){},function(e,t,n){"use strict";function r(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=n(6),l=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),s=wp.blockEditor,c=s.InspectorControls,u=s.InspectorAdvancedControls,m=wp.element.Component,p=wp.components,d=p.Panel,f=p.PanelBody,h=p.TextControl,b=p.CheckboxControl,E=p.RangeControl,w=p.Button,k={BREAKPOINTS:{BREAKPOINT_TITLE:"BreakPoint",BREAKPOINT_W:1e3,IFRAME_W:1e3}},y=function(e){function t(e){return r(this,t),a(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e))}return i(t,e),l(t,[{key:"addBreakPoint",value:function(){var e=this.props,t=e.attributes,n=e.setAttributes,r=JSON.parse(JSON.stringify(t.breakPoints)),a=new o.a.BreakPoint(k.BREAKPOINTS.BREAKPOINT_TITLE,k.BREAKPOINTS.BREAKPOINT_W,k.BREAKPOINTS.IFRAME_W);r.push(a),n({breakPoints:r})}},{key:"updateBreakPoint",value:function(e,t,n){var r=this.props,a=r.attributes,i=r.setAttributes,o=JSON.parse(JSON.stringify(a.breakPoints));o[n].breakPointW=e,o[n].siteW=t,i({breakPoints:o})}},{key:"updateBreakPointTitle",value:function(e,t){var n=this.props,r=n.attributes,a=n.setAttributes,i=JSON.parse(JSON.stringify(r.breakPoints));i[t].breakPointTitle=e,a({breakPoints:i})}},{key:"removeBreakPoint",value:function(e){var t=this.props,n=t.attributes,r=t.setAttributes,a=JSON.parse(JSON.stringify(n.breakPoints));a.splice(e,1),r({breakPoints:a})}},{key:"removeAllBreakPoints",value:function(){var e=this.props,t=e.attributes,n=e.setAttributes,r=t.breakPoints;r=[],n({breakPoints:r})}},{key:"render",value:function(){var e=this,t=this.props,n=t.attributes,r=t.setAttributes,a=n.breakPoints;return wp.element.createElement(c,null,wp.element.createElement(d,null,wp.element.createElement(f,{title:"Iframe Settings"},wp.element.createElement(h,{label:"Site Address",value:n.iFrameURL,onChange:function(e){r({iFrameURL:e})}}),wp.element.createElement(E,{label:"Site Width",min:0,max:3e3,value:n.iFrameWidth,onChange:function(e){r({iFrameWidth:e})}}),wp.element.createElement(E,{label:"Site Height",min:0,max:3e3,value:n.iFrameHeight,onChange:function(e){r({iFrameHeight:e})}}),wp.element.createElement("div",{className:RESPONSIVE_IFRAME_CONSTANTS.CHK_BX_CLASS},wp.element.createElement(b,{label:"Scroll Bar",checked:n.scrollBarChecked,onChange:function(){r({scrollBarChecked:!n.scrollBarChecked})}}),wp.element.createElement(b,{label:"Border",checked:n.borderChecked,onChange:function(){r({borderChecked:!n.borderChecked})}})),wp.element.createElement(E,{label:n.useMaxWidth?"Scale (Disabled by Advanced Setting MAX WIDTH)":"Scale",disabled:n.useMaxWidth,min:1,max:100,value:n.wrapperWidth,onChange:function(e){r({wrapperWidth:e})}})),wp.element.createElement(u,null,wp.element.createElement(f,{title:"BreakPoints",initialOpen:!1},wp.element.createElement(w,{className:"responsiveIframeButton",onClick:function(){e.addBreakPoint()}},"Add Break Point"),wp.element.createElement("ul",null,a.map(function(t,n){return wp.element.createElement(f,{title:""!==t.breakPointTitle?t.breakPointTitle:k.BREAKPOINTS.BREAKPOINT_TITLE,initialOpen:!1},wp.element.createElement("li",null,wp.element.createElement(h,{label:"Name",value:t.breakPointTitle,onChange:function(t){e.updateBreakPointTitle(t,n)}}),wp.element.createElement(E,{label:"BreakPoint Width",min:0,max:3e3,value:t.breakPointW,onChange:function(r){e.updateBreakPoint(r,t.siteW,n)}}),wp.element.createElement(E,{label:"Site Width",min:0,max:3e3,value:t.siteW,onChange:function(r){e.updateBreakPoint(t.breakPointW,r,n)}}),wp.element.createElement(w,{className:"responsiveIframeButtonRed",onClick:function(){e.removeBreakPoint(n)}},"Remove BreakPoint")))})),wp.element.createElement(w,{className:"responsiveIframeButtonRed",onClick:function(){e.removeAllBreakPoints()}},"Remove All BreakPoints")),wp.element.createElement(f,{title:"Other Options",initialOpen:!1},wp.element.createElement(b,{label:"UseMaxWidth(This will disable scaling)",checked:n.useMaxWidth,onChange:function(){r({useMaxWidth:!n.useMaxWidth})}}),wp.element.createElement(E,{disabled:!n.useMaxWidth,label:"Max-Width",min:1,max:3e3,value:n.maxWidth,onChange:function(e){r({maxWidth:e})}})))))}}]),t}(m);t.a=y},function(e,t,n){"use strict";var r={BreakPoint:function(e,t,n){this.breakPointTitle=e,this.breakPointW=t,this.siteW=n}};t.a=r},function(e,t,n){"use strict";var r=n(0),a=wp.element.Fragment,i={attributes:r.a,save:function(e){var t=e.attributes,n=t.scrollBarChecked?"yes":"no",r=t.borderChecked?{}:{border:"none"},i=t.wrapperWidth?{maxWidth:t.wrapperWidth+"%"}:{},o={marginLeft:"auto",marginRight:"auto"},l=t.className?t.wrapperClass+" "+t.className:t.wrapperClass;t.useMaxWidth&&(i={maxWidth:t.maxWidth+"px"});var s=Object.assign(o,i),c=wp.element.createElement("iframe",{style:r,id:t.id,className:RESPONSIVE_IFRAME_CONSTANTS.CLASS_NAME,"data-width-iframe":t.iFrameWidth,"data-height-iframe":t.iFrameHeight,scrolling:n,src:t.iFrameURL});return wp.element.createElement(a,null,wp.element.createElement("div",{style:s,className:l},c))}};t.a=i}]);

  • responsive-iframe/trunk/dist/blocks.style.build.css

    r2419638 r2624662  
    1 .responsiveIframeWrapper{margin-top:3em;margin-bottom:3em}
     1.responsiveIframeWrapper{margin-top:3em;margin-bottom:3em}.responsiveIframeButton{color:#2271b1;text-decoration:underline}.responsiveIframeButtonRed{color:red;text-decoration:underline}

  • responsive-iframe/trunk/package.json

    r2596611 r2624662  
    11{
    22  "name": "responsive-iframe",
    3   "version": "1.1.1",
     3  "version": "1.2.0",
    44  "private": true,
    55  "scripts": {

  • responsive-iframe/trunk/plugin.php

    r2596611 r2624662  
    66 * Author: PatrickPelayo
    77 * Author URI: http://www.PatrickP.Tech/
    8  * Version: 1.1.1
     8 * Version: 1.2.0
    99 * License: GPL2+
    1010 * License URI: https://www.gnu.org/licenses/gpl-2.0.html

  • responsive-iframe/trunk/readme.txt

    r2596611 r2624662  
    44Requires at least: 5.4.2
    55Tested up to: 5.8.1
    6 Stable tag: 1.1.1
     6Stable tag: 1.2.0
    77Requires PHP: 7.0
    88License: GPLv2 or later
    … …  
    3636Additional CSS - Any additional CSS will be applied to the iframe's parent element. Use this to provide some additional styling.
    3737
     38* **BreakPoints**
     39Available under advanced settings, and will let you specify the width of the site to display depending on the width of the device.
     40Multiple breakpoints can be used. The lowest BreakPoint Width will take effect over any higher BreakPoint Widths when the screen device is below or at its BreakPoint Width.
     41Example Breakpoint 1 250px, Breakpoint 2 350px. A device with a screen width of 250px will only trigger Breakpoint 1. ScreenWidth 251px, will only trigger BreakPoint 2.
     42Name - The name you wish to give the breakpoint
     43BreakPoint Width - At and below this width, this breakpoint is triggered.
     44Site Width - This is the width of the website to display when the breakpoint is triggered
     45
     46
    3847== Screenshots ==
    39481. Example of New York Times in an iframe.
    … …  
    4251
    4352== Changelog ==
     53
     54= 1.2.0 =
     55* Added to advanced settings the ability to add breakpoints to the iframe.
    4456
    4557= 1.1.1 =
    … …  
    5668   
    5769== Upgrade Notice ==
     70
     71= 1.2.0
     72* Good update if you want more control on the iframe apperance for differant devices
    5873
    5974= 1.1.0
    … …  
    7590 
    7691 Click directly underneath the iframe element, you want to select the block so you can edit it.
    77  
     92 Top ToolBar on the page also has three horizontal lines that let you select your blocks in the editor.
    7893 = What can I stylize without breaking the iframe =
    7994 

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

    r2596611 r2624662  
    1212//  Import JS
    1313import Inspector from './inspector';
     14import attributes from '../js/attributes';
     15
     16// Import Depreciated Blocks
     17import v1_1_1 from './depreciated/v1_1_1';
    1418
    1519const { __ } = wp.i18n; // Import __() from wp.i18n
    … …  
    4246        __( 'responsive' ),
    4347    ],
    44     attributes:{
    45         iFrameURL:{
    46             type:'string',
    47             default: (window.location.href).match(RESPONSIVE_IFRAME_CONSTANTS.URL_REGEX)[0] //regular expression to get the local website address to display an example
    48         },
    49         iFrameWidth:{
    50             type:'number',
    51             default:1000
    52         },
    53         iFrameHeight:{
    54             type:'number',
    55             default:600
    56         },
    57         wrapperWidth:{
    58             type:'number',
    59             default:100
    60         },
    61         scrollBarChecked:{
    62             type:'boolean',
    63             default:true
    64         },
    65         borderChecked:{
    66             type:'boolean',
    67             default:true   
    68         },
    69         id:{
    70             type:'string'
    71         },
    72         wrapperClass:{
    73             type:'string',
    74             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
    83         }
    84     },
    85 
     48    attributes,
    8649    /**
    8750     * The edit function describes the structure of your block in the context of the editor.
    … …  
    246209        let center = {marginLeft:'auto',marginRight:'auto'};
    247210        let className = attributes.className ? attributes.wrapperClass + ' ' + attributes.className : attributes.wrapperClass;
    248        
     211        let breakPoints = JSON.stringify(attributes.breakPoints);
     212
    249213        //user using advanced settings to specify max-width of iframe
    250214        if(attributes.useMaxWidth){
    … …  
    255219       
    256220        //The block holds data attributes for the actual width and height of the iframe
    257         let block = <iframe style={border} id={attributes.id} className={RESPONSIVE_IFRAME_CONSTANTS.CLASS_NAME} data-width-iframe={attributes.iFrameWidth} data-height-iframe={attributes.iFrameHeight} scrolling={scrollBar} src={attributes.iFrameURL}></iframe>
     221        let block = <iframe style={border} id={attributes.id} className={RESPONSIVE_IFRAME_CONSTANTS.CLASS_NAME} data-break-points={breakPoints} data-width-iframe={attributes.iFrameWidth} data-height-iframe={attributes.iFrameHeight} scrolling={scrollBar} src={attributes.iFrameURL}></iframe>
    258222   
    259223        return (
    … …  
    265229        );
    266230    },
     231    deprecated:[
     232        v1_1_1
     233    ]
    267234} );

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

    r2596607 r2624662  
    11const { InspectorControls,InspectorAdvancedControls} = wp.blockEditor;
    22const { Component } = wp.element;
    3 const { Panel,PanelBody, TextControl, CheckboxControl,RangeControl} = wp.components;
     3const { Panel,PanelBody, TextControl, CheckboxControl,RangeControl,Button} = wp.components;
    44
     5//import structures
     6import Structures from '../js/structures';
    57
     8const DEFAULTS = {
     9    BREAKPOINTS:{
     10        BREAKPOINT_TITLE:"BreakPoint",
     11        BREAKPOINT_W:1000,
     12        IFRAME_W:1000
     13    }
     14}
    615
    716export default class Inspector extends Component{
    817    constructor(props){
    9         super(props);
     18        super(props);       
     19    }
     20
     21    addBreakPoint(){
     22        let {attributes,setAttributes} = this.props;
     23        let hardCopyBreakpoints = JSON.parse(JSON.stringify(attributes.breakPoints));
    1024       
     25        const breakpoint = new Structures.BreakPoint(DEFAULTS.BREAKPOINTS.BREAKPOINT_TITLE,
     26            DEFAULTS.BREAKPOINTS.BREAKPOINT_W,DEFAULTS.BREAKPOINTS.IFRAME_W);
     27        hardCopyBreakpoints.push(breakpoint);
     28       
     29        setAttributes({
     30            breakPoints:hardCopyBreakpoints
     31        });
    1132    }
     33
     34    updateBreakPoint(newBreakP_W, newSiteW, index){
     35        let {attributes,setAttributes} = this.props;
     36        let breakPoints = JSON.parse(JSON.stringify(attributes.breakPoints));
     37
     38        breakPoints[index].breakPointW = newBreakP_W;
     39        breakPoints[index].siteW = newSiteW;
     40
     41        setAttributes({
     42            breakPoints:breakPoints
     43        });       
     44    }
     45
     46    updateBreakPointTitle(newTitle,index){
     47        let {attributes,setAttributes} = this.props;
     48        let breakPoints = JSON.parse(JSON.stringify(attributes.breakPoints));
     49
     50        breakPoints[index].breakPointTitle = newTitle;
     51
     52        setAttributes({
     53            breakPoints:breakPoints
     54        });   
     55    }
     56
     57    removeBreakPoint(index) {
     58        let {attributes,setAttributes} = this.props;
     59        let breakPoints = JSON.parse(JSON.stringify(attributes.breakPoints));
     60
     61        breakPoints.splice(index,1);
     62        setAttributes({
     63            breakPoints:breakPoints
     64        });     
     65    }
     66    removeAllBreakPoints(){
     67        let {attributes,setAttributes} = this.props;
     68       
     69        let breakPoints = attributes.breakPoints;
     70
     71        breakPoints = [];
     72        setAttributes({
     73            breakPoints:breakPoints
     74        });
     75    }
     76
    1277    render(){
    13         let {attributes,setAttributes} = this.props;
     78        let {attributes,setAttributes} = this.props;
     79        let breakPoints = attributes.breakPoints;
    1480       
    1581        return(
    … …  
    59125                    </PanelBody>
    60126                    <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>
     127                        <PanelBody title="BreakPoints" initialOpen={false}>
     128                            <Button className="responsiveIframeButton" onClick={()=>{this.addBreakPoint();}}>Add Break Point</Button>
     129                            <ul>
     130                                {breakPoints.map((bp,index)=>{
     131                                    return <PanelBody title={bp.breakPointTitle !== "" ? bp.breakPointTitle : DEFAULTS.BREAKPOINTS.BREAKPOINT_TITLE} initialOpen={false}>
     132                                            <li>
     133                                                <TextControl label="Name" value = {bp.breakPointTitle}
     134                            onChange= {(val)=>{this.updateBreakPointTitle(val,index)}}></TextControl>
     135                                                <RangeControl label="BreakPoint Width" min={0} max={3000} value={bp.breakPointW} onChange={(val)=>{this.updateBreakPoint(val,bp.siteW,index)}}></RangeControl>
     136                                                <RangeControl label="Site Width" min={0} max={3000} value={bp.siteW} onChange={(val)=>{this.updateBreakPoint(bp.breakPointW,val,index)}}></RangeControl>
     137                                                <Button className="responsiveIframeButtonRed" onClick={()=>{this.removeBreakPoint(index)}}>Remove BreakPoint</Button>
     138                                            </li>
     139                                        </PanelBody>
     140                                })}
     141                            </ul>
     142                            <Button className="responsiveIframeButtonRed" onClick={()=>{this.removeAllBreakPoints();}}>Remove All BreakPoints</Button>
     143                        </PanelBody>
     144                       
     145
     146                        <PanelBody title="Other Options" initialOpen={false}>
     147                            <CheckboxControl
     148                                        label = 'UseMaxWidth(This will disable scaling)'
     149                                        checked = {attributes.useMaxWidth}
     150                                        onChange = {()=>{setAttributes({useMaxWidth:!attributes.useMaxWidth});}}
     151                                    />
     152                            <RangeControl
     153                                disabled={!attributes.useMaxWidth}
     154                                label="Max-Width"
     155                                min={1}
     156                                max={3000}
     157                                value = {attributes.maxWidth}
     158                                onChange= {(val)=>{setAttributes({maxWidth:val});}}
     159                            /> 
     160                        </PanelBody>
     161                    </InspectorAdvancedControls>
    75162                </Panel>
    76163            </InspectorControls>

  • responsive-iframe/trunk/src/block/style.scss

    r2419638 r2624662  
    88    margin-bottom:3em;
    99}
     10.responsiveIframeButton{
     11    color:#2271b1;
     12    text-decoration: underline;
     13}
     14
     15.responsiveIframeButtonRed{
     16    color:red;
     17    text-decoration: underline;
     18}

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

    r2419638 r2624662  
    7474        }
    7575       
     76        setWidth(selector){
     77            //initialize variables
     78            let width;
     79            const breakPoints = jQuery(selector).data('break-points');
     80   
     81            if(breakPoints.length > 0){
     82                let validBreakPoints = breakPoints.filter((bp)=>{return window.innerWidth <= bp.breakPointW});
     83               
     84                //sort to determine the lowest width valid breakPoint
     85                validBreakPoints.sort(function(a, b){return b.breakPointW - a.breakPointW});
     86
     87                if(validBreakPoints.length > 0){
     88                    const activeBreakPoint = validBreakPoints[validBreakPoints.length-1];
     89                    const siteW = activeBreakPoint.siteW;
     90                    width = siteW;
     91                }else{
     92                    width = jQuery(selector).data('width-iframe');
     93                }
     94            }else{
     95                width = jQuery(selector).data('width-iframe');
     96            }
     97           
     98            return width;
     99        }
    76100
    77101        updateIframe(){
    … …  
    87111                let marginBottom;
    88112                let marginRight;
    89                
     113
    90114                //create a selector for jQuery, and then grab some attributes from some elements
    91115                let selector = className.concat(':eq(' +i+ ')');
    92116                let id = jQuery(selector).attr('id');
    93                 let width = jQuery(selector).data('width-iframe');                
     117                let width = this.setWidth(selector);               
    94118                let height = jQuery(selector).data('height-iframe');
    95119                let parentWidth = jQuery(selector).parent().width();
Note: See TracChangeset for help on using the changeset viewer.