Changeset 2156545

Timestamp:

09/14/2019 02:41:31 PM (6 years ago)

Author:

traveledmap

Message:

New pictures slider

Location:

traveledmap-trip-itinerary-embedded-map/trunk

Files:

• .gitignore (modified) (1 diff)
• assets/banner-772x250.png (added)
• assets/example-1.png (added)
• assets/example-2.png (added)
• assets/example-3.png (added)
• assets/icon-256x256.png (added)
• assets/metabox.png (added)
• assets/trip-block.png (added)
• assets/widget-config.png (added)
• dist/blocks.build.js (modified) (1 diff)
• dist/blocks.style.build.css (modified) (1 diff)
• plugin.php (modified) (1 diff)
• readme.txt (modified) (6 diffs)
• src/iframe/iframe-widget.php (modified) (8 diffs)
• src/iframe/render.php (modified) (2 diffs)
• src/iframe/shortcode.php (modified) (2 diffs)
• src/iframe/style.scss (modified) (1 diff)
• src/iframe/trip-block.js (modified) (7 diffs)
• src/iframe/utils/enums.php (added)
• src/iframe/utils/utils.php (modified) (2 diffs)
• src/init.php (modified) (1 diff)

traveledmap-trip-itinerary-embedded-map/trunk/.gitignore

@@ -4 +4 @@
 ## keep compiled files out of version control
 # dist/
+.idea

traveledmap-trip-itinerary-embedded-map/trunk/dist/blocks.build.js

@@ -1 @@
-!function(e){function t(l){if(n[l])return n[l].exports;var r=n[l]={i:l,l:!1,exports:{}};return e[l].call(r.exports,r,r.exports,t),r.l=!0,r.exports}var n={};t.m=e,t.c=n,t.d=function(e,n,l){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:l})},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=3)}([function(e,t){},function(e,t){},function(e,t){e.exports=wp.components},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});n(4),n(6)},function(e,t,n){"use strict";function l(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var r=n(0),a=(n.n(r),n(1)),i=(n.n(a),n(2)),o=(n.n(i),n(5)),__=wp.i18n.__,p=wp.blocks.registerBlockType,s=wp.element.Fragment;p("traveledmap/embedded-trip-block",{title:__("Embedded Trip"),icon:"location-alt",category:"traveledmap",keywords:[__("Embedded Map"),__("TraveledMap"),__("Traveled Map"),__("Embedded"),__("Embed")],attributes:{userId:{type:"string",source:"meta",meta:"traveledmap_user_id"},tripId:{type:"string",source:"meta",meta:"traveledmap_trip_id"},nickname:{type:"string",source:"meta",meta:"traveledmap_nickname"},baseUrl:{type:"string",source:"meta",meta:"traveledmap_trip_base_url"},mapUrl:{type:"string"},showPopup:{type:"boolean",default:!0},showPictures:{type:"boolean",default:!0},showPicturesAtStart:{type:"boolean",default:!1},isSticky:{type:"boolean",default:!0},mapHeight:{type:"string",default:"50%"},standardMapHeight:{type:"string",default:"30%"},extendedMapHeight:{type:"string",default:"60%"},marginTop:{type:"number",default:0}},edit:function(e){var t=e.attributes,n=t.baseUrl,r=t.userId,a=t.nickname,p=t.tripId,c=t.showPopup,u=t.showPictures,m=t.showPicturesAtStart,d=t.mapUrl,h=t.isSticky,w=t.mapHeight,g=t.standardMapHeight,b=t.extendedMapHeight,f=t.marginTop,v=e.setAttributes,y=function(e){return function(t){v(l({},e,t))}},E=function(){v({mapUrl:Object(o.a)(n,c,u,m)})},P=function(e){return!(e&&(!Array.isArray(e)||Array.isArray(e)&&e[0]))};return wp.element.createElement("div",{className:"traveledmap-trip-edit-block"},wp.element.createElement("div",null,wp.element.createElement(i.Panel,{header:"Map settings"},wp.element.createElement(i.PanelBody,{title:"Map content",icon:"admin-site-alt",initialOpen:!0},wp.element.createElement(i.PanelRow,null,wp.element.createElement("p",{className:"mb-0 note"},wp.element.createElement("strong",null,"User id:"),"\xa0",function(){return P(r)?P(a)?null:a:r}()||"You need to fill the user id you want to use in the editor's sidebar, save the post and then reload"),wp.element.createElement("p",{className:"note"},wp.element.createElement("strong",null,"Trip id:"),"\xa0",function(){return P(p)?null:p}()||"You need to fill the trip id you want to use in the editor's sidebar, save the post and then reload")),wp.element.createElement(i.PanelRow,null,wp.element.createElement(i.ToggleControl,{label:"Show steps name",help:c?"Popup with step name will be shown":"Popup will be show only if mouse is over the step marker",checked:c,onChange:function(){return v({showPopup:!c})}})),wp.element.createElement(i.PanelRow,null,wp.element.createElement(i.ToggleControl,{label:"Show pictures",help:u?"Pictures panel will be open":"Pictures will be hidden",checked:u,onChange:function(){return v({showPictures:!u})}})),wp.element.createElement(i.PanelRow,null,u&&wp.element.createElement(i.ToggleControl,{label:"Show overview pictures",help:m?"Your trip overview has pictures that will be shown":"The overview pictures will be hidden",checked:m,onChange:function(){return v({showPicturesAtStart:!m})}})),wp.element.createElement(i.PanelRow,null,wp.element.createElement(i.Button,{isPrimary:!0,onClick:E,className:"ml-auto"},"Validate"))),wp.element.createElement(i.PanelBody,{title:"Map settings",icon:"admin-settings",initialOpen:!0},wp.element.createElement(i.PanelRow,null,wp.element.createElement(i.TextControl,{label:"Map height (when it's not sticky)",value:w,onChange:y("mapHeight"),help:"Height can be written in pixels (px) or percents of the screen's height (%). i.e: 200px or 50%",className:"input-100"})),wp.element.createElement(i.PanelRow,null,wp.element.createElement(i.ToggleControl,{label:"Map is sticky",help:h?"The map will be visible on top of the screen while scrolling":"The map will be fixed and won't move",checked:h,onChange:function(){return v({isSticky:!h})},className:"mt-5"})),h&&wp.element.createElement(s,null,wp.element.createElement(i.PanelRow,null,wp.element.createElement(i.TextControl,{label:"Map height when the map is sticky and not extended",value:g,onChange:y("standardMapHeight"),help:"Height can be written in pixels (px) or percents of the screen's height (%). i.e: 200px or 50%",className:"input-100"})),wp.element.createElement(i.PanelRow,null,wp.element.createElement(i.TextControl,{label:"Map height when the map is sticky and extended",value:b,onChange:y("extendedMapHeight"),help:"Height can be written in pixels (px) or percents of the screen's height (%). i.e: 200px or 50%",className:"input-100"})),wp.element.createElement(i.PanelRow,null,wp.element.createElement(i.TextControl,{type:"number",label:"Top margin (Space between the top of the screen and the map when it's sticky)",value:f,onChange:y("marginTop"),help:"Height can be written only in pixels (px). You don't need to write the unit. i.e: 20",className:"input-100"})))))),d&&wp.element.createElement("div",null,wp.element.createElement("iframe",{className:"map-iframe traveledmap-reference-iframe",src:d,frameBorder:"0",style:{height:function(e){return e.replace("%","VH")}(w)}})))},save:function(){return null}})},function(e,t,n){"use strict";n.d(t,"a",function(){return l});var l=function(e,t,n,l){var r=e;return r+=(t?"&showPopup=true":"")+(n?"":"&hidePictures=true")+(l?"&showPicturesAtStart=true":"")}},function(e,t,n){"use strict";var l=n(0),r=(n.n(l),n(1)),a=(n.n(r),n(2)),__=(n.n(a),wp.i18n.__),i=wp.blocks.registerBlockType;wp.element.Fragment;i("traveledmap/embedded-trip-step-block",{title:__("Step scroll anchor"),icon:"location",category:"traveledmap",keywords:[__("Embedded Trip Step"),__("Embed"),__("Step"),__("Trip"),__("City"),__("Place"),__("Scroll"),__("Anchor")],attributes:{tripStepsJson:{type:"string",source:"meta",meta:"traveledmap_trip_steps"},tripSteps:{type:"string"},location:{type:"string"}},edit:function(e){var t=e.attributes,n=t.location,l=t.tripStepsJson,r=t.tripSteps,i=e.setAttributes;if(!r&&l){console.log({tripStepsJson:l});var o=JSON.parse(JSON.parse(l));o?i({tripSteps:o,location:n&&n.length>0?n:Object.keys(o)[0]}):console.warn("Trip steps was not defined",o,l)}return r?wp.element.createElement("div",null,wp.element.createElement(a.SelectControl,{label:"Choose the step the map should move on when reaching this section of the post",value:n,options:Object.keys(r).map(function(e){return{label:r[e],value:e}}),onChange:function(e){return i({location:e})}})):wp.element.createElement("div",{className:"flex-center"},wp.element.createElement(a.Spinner,null))},save:function(e){var t=e.attributes.location;return wp.element.createElement("div",{className:"traveledmap-trip-anchor",id:t})}})}]);
+!function(e){function t(l){if(n[l])return n[l].exports;var r=n[l]={i:l,l:!1,exports:{}};return e[l].call(r.exports,r,r.exports,t),r.l=!0,r.exports}var n={};t.m=e,t.c=n,t.d=function(e,n,l){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:l})},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=3)}([function(e,t){},function(e,t){},function(e,t){e.exports=wp.components},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});n(4),n(6)},function(e,t,n){"use strict";function l(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var r=n(0),a=(n.n(r),n(1)),o=(n.n(a),n(2)),i=(n.n(o),n(5)),__=wp.i18n.__,p=wp.blocks.registerBlockType,s=wp.element.Fragment;p("traveledmap/embedded-trip-block",{title:__("Embedded Trip"),icon:"location-alt",category:"traveledmap",keywords:[__("Embedded Map"),__("TraveledMap"),__("Traveled Map"),__("Embedded"),__("Embed")],attributes:{userId:{type:"string",source:"meta",meta:"traveledmap_user_id"},tripId:{type:"string",source:"meta",meta:"traveledmap_trip_id"},nickname:{type:"string",source:"meta",meta:"traveledmap_nickname"},baseUrl:{type:"string",source:"meta",meta:"traveledmap_trip_base_url"},mapUrl:{type:"string"},showPopup:{type:"boolean",default:!0},showPictures:{type:"boolean",default:!0},showPicturesAtStart:{type:"boolean",default:!1},isSticky:{type:"boolean",default:!0},showOnPhones:{type:"boolean",default:!0},showOnTablets:{type:"boolean",default:!0},showOnLargeScreens:{type:"boolean",default:!0},mapHeight:{type:"string",default:"50%"},standardMapHeight:{type:"string",default:"30%"},extendedMapHeight:{type:"string",default:"60%"},marginTop:{type:"number",default:0}},edit:function(e){var t=e.attributes,n=t.baseUrl,r=t.userId,a=t.nickname,p=t.tripId,c=t.showPopup,m=t.showPictures,u=t.showPicturesAtStart,h=t.mapUrl,d=t.isSticky,w=t.showOnPhones,b=t.showOnTablets,g=t.showOnLargeScreens,f=t.mapHeight,v=t.standardMapHeight,y=t.extendedMapHeight,E=t.marginTop,P=e.setAttributes,T=function(e){return function(t){P(l({},e,t))}},x=function(){P({mapUrl:Object(i.a)(n,c,m,u)})},k=function(e){return!(e&&(!Array.isArray(e)||Array.isArray(e)&&e[0]))};return wp.element.createElement("div",{className:"traveledmap-trip-edit-block"},wp.element.createElement("div",null,wp.element.createElement(o.Panel,{header:"Map settings"},wp.element.createElement(o.PanelBody,{title:"Map content",icon:"admin-site-alt",initialOpen:!0},wp.element.createElement(o.PanelRow,null,wp.element.createElement("p",{className:"mb-0 note"},wp.element.createElement("strong",null,"User id:"),"\xa0",function(){return k(r)?k(a)?null:a:r}()||"You need to fill the user id you want to use in the editor's sidebar, save the post and then reload"),wp.element.createElement("p",{className:"note"},wp.element.createElement("strong",null,"Trip id:"),"\xa0",function(){return k(p)?null:p}()||"You need to fill the trip id you want to use in the editor's sidebar, save the post and then reload")),wp.element.createElement(o.PanelRow,null,wp.element.createElement(o.ToggleControl,{label:"Show on phones",help:w?"The map will be shown on mobile (< 576px)":"The map will be hidden on mobile devices",checked:w,onChange:function(){return P({showOnPhones:!w})}}),wp.element.createElement(o.ToggleControl,{label:"Show on tablets",help:b?"The map will be shown on tablets (> 576px and < 768px)":"The map will be hidden on tablets devices",checked:b,onChange:function(){return P({showOnTablets:!b})}}),wp.element.createElement(o.ToggleControl,{label:"Show on larger screens",help:g?"The map will be shown on larger screens (> 768px)":"The map will be hidden on larger devices",checked:g,onChange:function(){return P({showOnLargeScreens:!g})}})),wp.element.createElement(o.PanelRow,null,wp.element.createElement(o.ToggleControl,{label:"Show steps name",help:c?"Popup with step name will be shown":"Popup will be show only if mouse is over the step marker",checked:c,onChange:function(){return P({showPopup:!c})}})),wp.element.createElement(o.PanelRow,null,wp.element.createElement(o.ToggleControl,{label:"Show pictures",help:m?"Pictures panel will be open":"Pictures will be hidden",checked:m,onChange:function(){return P({showPictures:!m})}})),wp.element.createElement(o.PanelRow,null,m&&wp.element.createElement(o.ToggleControl,{label:"Show overview pictures",help:u?"Your trip overview has pictures that will be shown":"The overview pictures will be hidden",checked:u,onChange:function(){return P({showPicturesAtStart:!u})}})),wp.element.createElement(o.PanelRow,null,wp.element.createElement(o.Button,{isPrimary:!0,onClick:x,className:"ml-auto"},"Validate"))),wp.element.createElement(o.PanelBody,{title:"Map settings",icon:"admin-settings",initialOpen:!0},wp.element.createElement(o.PanelRow,null,wp.element.createElement(o.TextControl,{label:"Map height (when it's not sticky)",value:f,onChange:T("mapHeight"),help:"Height can be written in pixels (px) or percents of the screen's height (%). i.e: 200px or 50%",className:"input-100"})),wp.element.createElement(o.PanelRow,null,wp.element.createElement(o.ToggleControl,{label:"Map is sticky",help:d?"The map will be visible on top of the screen while scrolling":"The map will be fixed and won't move",checked:d,onChange:function(){return P({isSticky:!d})},className:"mt-5"})),d&&wp.element.createElement(s,null,wp.element.createElement(o.PanelRow,null,wp.element.createElement(o.TextControl,{label:"Map height when the map is sticky and not extended",value:v,onChange:T("standardMapHeight"),help:"Height can be written in pixels (px) or percents of the screen's height (%). i.e: 200px or 50%",className:"input-100"})),wp.element.createElement(o.PanelRow,null,wp.element.createElement(o.TextControl,{label:"Map height when the map is sticky and extended",value:y,onChange:T("extendedMapHeight"),help:"Height can be written in pixels (px) or percents of the screen's height (%). i.e: 200px or 50%",className:"input-100"})),wp.element.createElement(o.PanelRow,null,wp.element.createElement(o.TextControl,{type:"number",label:"Top margin (Space between the top of the screen and the map when it's sticky)",value:E,onChange:T("marginTop"),help:"Height can be written only in pixels (px). You don't need to write the unit. i.e: 20",className:"input-100"})))))),h&&wp.element.createElement("div",null,wp.element.createElement("iframe",{className:"map-iframe traveledmap-reference-iframe",src:h,frameBorder:"0",allow:"fullscreen",style:{height:function(e){return e.replace("%","VH")}(f)}})))},save:function(){return null}})},function(e,t,n){"use strict";n.d(t,"a",function(){return l});var l=function(e,t,n,l){var r=e;return r+=(t?"&showPopup=true":"")+(n?"":"&hidePictures=true")+(l?"&showPicturesAtStart=true":"")}},function(e,t,n){"use strict";var l=n(0),r=(n.n(l),n(1)),a=(n.n(r),n(2)),__=(n.n(a),wp.i18n.__),o=wp.blocks.registerBlockType;wp.element.Fragment;o("traveledmap/embedded-trip-step-block",{title:__("Step scroll anchor"),icon:"location",category:"traveledmap",keywords:[__("Embedded Trip Step"),__("Embed"),__("Step"),__("Trip"),__("City"),__("Place"),__("Scroll"),__("Anchor")],attributes:{tripStepsJson:{type:"string",source:"meta",meta:"traveledmap_trip_steps"},tripSteps:{type:"string"},location:{type:"string"}},edit:function(e){var t=e.attributes,n=t.location,l=t.tripStepsJson,r=t.tripSteps,o=e.setAttributes;if(!r&&l){console.log({tripStepsJson:l});var i=JSON.parse(JSON.parse(l));i?o({tripSteps:i,location:n&&n.length>0?n:Object.keys(i)[0]}):console.warn("Trip steps was not defined",i,l)}return r?wp.element.createElement("div",null,wp.element.createElement(a.SelectControl,{label:"Choose the step the map should move on when reaching this section of the post",value:n,options:Object.keys(r).map(function(e){return{label:r[e],value:e}}),onChange:function(e){return o({location:e})}})):wp.element.createElement("div",{className:"flex-center"},wp.element.createElement(a.Spinner,null))},save:function(e){var t=e.attributes.location;return wp.element.createElement("div",{className:"traveledmap-trip-anchor",id:t})}})}]);

traveledmap-trip-itinerary-embedded-map/trunk/dist/blocks.style.build.css

@@ -1 @@
-.wp-block-traveledmap-trip{z-index:2000}.wp-block-traveledmap-trip .traveledmap-post-map{width:100%;height:500px;-webkit-transition:height .3s ease;-o-transition:height .3s ease;transition:height .3s ease;margin-bottom:0}.wp-block-traveledmap-trip .actions-wrapper{background-color:rgba(255,255,255,0.75);padding:5px;margin-top:-7px}.wp-block-traveledmap-trip .actions-wrapper button{background-color:transparent;border:1px solid #404040;border-radius:50px;color:#404040;width:30px;height:30px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;padding:0;margin:0;-webkit-transition:color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;transition:color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;-o-transition:color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;transition:color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;transition:color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out}.wp-block-traveledmap-trip .actions-wrapper button:focus{outline:none}.wp-block-traveledmap-trip .actions-wrapper button:hover{background-color:#404040;color:white}.wp-block-traveledmap-trip .actions-wrapper button .expand-icon,.wp-block-traveledmap-trip .actions-wrapper button .reduce-icon,.wp-block-traveledmap-trip .actions-wrapper button .show-icon,.wp-block-traveledmap-trip .actions-wrapper button .hide-icon{display:-ms-flexbox;display:flex}.wp-block-traveledmap-trip .actions-wrapper button .expand-icon svg,.wp-block-traveledmap-trip .actions-wrapper button .reduce-icon svg,.wp-block-traveledmap-trip .actions-wrapper button .show-icon svg,.wp-block-traveledmap-trip .actions-wrapper button .hide-icon svg{width:14px;height:14px}.wp-block-traveledmap-trip.is-extended button .expand-icon{display:none}.wp-block-traveledmap-trip.is-extended button .reduce-icon{display:block}.wp-block-traveledmap-trip:not(.is-extended) button .expand-icon,.wp-block-traveledmap-trip:not(.is-extended) button .hide-icon{display:block}.wp-block-traveledmap-trip:not(.is-extended) button .reduce-icon{display:none}.wp-block-traveledmap-trip.is-hidden .toggle-expand-button{display:none}.wp-block-traveledmap-trip.is-hidden button .expand-icon,.wp-block-traveledmap-trip.is-hidden button .hide-icon{display:none}.wp-block-traveledmap-trip.is-hidden button .reduce-icon,.wp-block-traveledmap-trip.is-hidden button .show-icon{display:block}.wp-block-traveledmap-trip:not(.is-hidden) button .hide-icon{display:block}.wp-block-traveledmap-trip:not(.is-hidden) button .show-icon{display:none}.wp-block-traveledmap-trip .flex-center{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.wp-block-traveledmap-trip .mr-5{margin-right:5px !important}.traveledmap-trip-widget-wrapper{position:relative}.traveledmap-trip-widget-wrapper .traveledmap-trip-widget-map-container{z-index:2000}.traveledmap-trip-widget-wrapper .traveledmap-trip-widget-map-container .traveledmap-trip-widget-map-content.not-extandable .traveledmap-trip-widget-overlay{display:none}.traveledmap-trip-widget-wrapper .traveledmap-trip-widget-map-container .traveledmap-trip-widget-map-content{position:relative;height:100%;overflow:hidden}.traveledmap-trip-widget-wrapper .traveledmap-trip-widget-map-container .traveledmap-trip-widget-map-content .traveledmap-trip-widget-map{height:100%;width:100%;margin-bottom:0}.traveledmap-trip-widget-wrapper .traveledmap-trip-widget-map-container .traveledmap-trip-widget-map-content .traveledmap-trip-widget-overlay{position:absolute;right:0;bottom:0;left:0;-webkit-transform:translateY(100%);-ms-transform:translateY(100%);transform:translateY(100%);height:50px;width:100%;background-color:rgba(0,0,0,0.6);-webkit-transition:-webkit-transform .3s ease;transition:-webkit-transform .3s ease;-o-transition:transform .3s ease;transition:transform .3s ease;transition:transform .3s ease, -webkit-transform .3s ease;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;color:white;cursor:pointer}.traveledmap-trip-widget-wrapper .traveledmap-trip-widget-map-container .traveledmap-trip-widget-map-content .traveledmap-trip-widget-overlay svg{width:18px;height:18px;-webkit-transition:-webkit-transform .2s ease;transition:-webkit-transform .2s ease;-o-transition:transform .2s ease;transition:transform .2s ease;transition:transform .2s ease, -webkit-transform .2s ease}.traveledmap-trip-widget-wrapper .traveledmap-trip-widget-map-container .traveledmap-trip-widget-map-content .traveledmap-trip-widget-overlay:hover svg{-webkit-transform:scale(1.3);-ms-transform:scale(1.3);transform:scale(1.3)}@media (max-width: 768px){.traveledmap-trip-widget-wrapper .traveledmap-trip-widget-map-container .traveledmap-trip-widget-map-content .traveledmap-trip-widget-overlay {display:none}}.traveledmap-trip-widget-wrapper .traveledmap-trip-widget-map-container .traveledmap-trip-widget-map-content:hover .traveledmap-trip-widget-overlay{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}.traveledmap-trip-widget-overlay{background-color:red}.traveledmap-is-hidden{display:none}
+.wp-block-traveledmap-trip{z-index:2000}.wp-block-traveledmap-trip .traveledmap-post-map{width:100%;height:500px;-webkit-transition:height .3s ease;-o-transition:height .3s ease;transition:height .3s ease;margin-bottom:0}.wp-block-traveledmap-trip .actions-wrapper{background-color:rgba(255,255,255,0.75);padding:5px;margin-top:-7px}.wp-block-traveledmap-trip .actions-wrapper button{background-color:transparent;border:1px solid #404040;border-radius:50px;color:#404040;width:30px;height:30px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;padding:0;margin:0;-webkit-transition:color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;transition:color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;-o-transition:color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;transition:color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;transition:color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out}.wp-block-traveledmap-trip .actions-wrapper button:focus{outline:none}.wp-block-traveledmap-trip .actions-wrapper button:hover{background-color:#404040;color:white}.wp-block-traveledmap-trip .actions-wrapper button .expand-icon,.wp-block-traveledmap-trip .actions-wrapper button .reduce-icon,.wp-block-traveledmap-trip .actions-wrapper button .show-icon,.wp-block-traveledmap-trip .actions-wrapper button .hide-icon{display:-ms-flexbox;display:flex}.wp-block-traveledmap-trip .actions-wrapper button .expand-icon svg,.wp-block-traveledmap-trip .actions-wrapper button .reduce-icon svg,.wp-block-traveledmap-trip .actions-wrapper button .show-icon svg,.wp-block-traveledmap-trip .actions-wrapper button .hide-icon svg{width:14px;height:14px}.wp-block-traveledmap-trip.is-extended button .expand-icon{display:none}.wp-block-traveledmap-trip.is-extended button .reduce-icon{display:block}.wp-block-traveledmap-trip:not(.is-extended) button .expand-icon,.wp-block-traveledmap-trip:not(.is-extended) button .hide-icon{display:block}.wp-block-traveledmap-trip:not(.is-extended) button .reduce-icon{display:none}.wp-block-traveledmap-trip.is-hidden .toggle-expand-button{display:none}.wp-block-traveledmap-trip.is-hidden button .expand-icon,.wp-block-traveledmap-trip.is-hidden button .hide-icon{display:none}.wp-block-traveledmap-trip.is-hidden button .reduce-icon,.wp-block-traveledmap-trip.is-hidden button .show-icon{display:block}.wp-block-traveledmap-trip:not(.is-hidden) button .hide-icon{display:block}.wp-block-traveledmap-trip:not(.is-hidden) button .show-icon{display:none}.wp-block-traveledmap-trip .flex-center{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.wp-block-traveledmap-trip .mr-5{margin-right:5px !important}.traveledmap-trip-breakpoints{display:none}.traveledmap-trip-widget-wrapper{position:relative}.traveledmap-trip-widget-wrapper .traveledmap-trip-widget-map-container{z-index:2000}.traveledmap-trip-widget-wrapper .traveledmap-trip-widget-map-container .traveledmap-trip-widget-map-content.not-extandable .traveledmap-trip-widget-overlay{display:none}.traveledmap-trip-widget-wrapper .traveledmap-trip-widget-map-container .traveledmap-trip-widget-map-content{position:relative;height:100%;overflow:hidden}.traveledmap-trip-widget-wrapper .traveledmap-trip-widget-map-container .traveledmap-trip-widget-map-content .traveledmap-trip-widget-map{height:100%;width:100%;margin-bottom:0}.traveledmap-trip-widget-wrapper .traveledmap-trip-widget-map-container .traveledmap-trip-widget-map-content .traveledmap-trip-widget-overlay{position:absolute;right:0;bottom:0;left:0;-webkit-transform:translateY(100%);-ms-transform:translateY(100%);transform:translateY(100%);height:50px;width:100%;background-color:rgba(0,0,0,0.6);-webkit-transition:-webkit-transform .3s ease;transition:-webkit-transform .3s ease;-o-transition:transform .3s ease;transition:transform .3s ease;transition:transform .3s ease, -webkit-transform .3s ease;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;color:white;cursor:pointer}.traveledmap-trip-widget-wrapper .traveledmap-trip-widget-map-container .traveledmap-trip-widget-map-content .traveledmap-trip-widget-overlay svg{width:18px;height:18px;-webkit-transition:-webkit-transform .2s ease;transition:-webkit-transform .2s ease;-o-transition:transform .2s ease;transition:transform .2s ease;transition:transform .2s ease, -webkit-transform .2s ease}.traveledmap-trip-widget-wrapper .traveledmap-trip-widget-map-container .traveledmap-trip-widget-map-content .traveledmap-trip-widget-overlay:hover svg{-webkit-transform:scale(1.3);-ms-transform:scale(1.3);transform:scale(1.3)}@media (max-width: 768px){.traveledmap-trip-widget-wrapper .traveledmap-trip-widget-map-container .traveledmap-trip-widget-map-content .traveledmap-trip-widget-overlay {display:none}}.traveledmap-trip-widget-wrapper .traveledmap-trip-widget-map-container .traveledmap-trip-widget-map-content:hover .traveledmap-trip-widget-overlay{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}.traveledmap-trip-widget-overlay{background-color:red}.traveledmap-is-hidden{display:none}

traveledmap-trip-itinerary-embedded-map/trunk/plugin.php

@@ -2 +2 @@
 /**
  * Plugin Name: TraveledMap Trip itinerary: Embedded map
- * Plugin URI: https://wordpress.org/plugins/traveledmap-trip-itinerary-embedded-map/
+ * Plugin URI: https://github.com/ahmadawais/create-guten-block/
  * Description: TraveledMap: Trip
- * Author: traveledmap
- * Author URI: https://www.traveledmap.com
- * Version: 1.0
+ * Author: mrahmadawais, maedahbatool
+ * Author URI: https://AhmadAwais.com/
+ * Version: 1.0.0
  * License: GPL2+
  * License URI: https://www.gnu.org/licenses/gpl-2.0.txt
  *
- * @package TraveledMapTripItinerary
+ * @package CGB
  */
 

traveledmap-trip-itinerary-embedded-map/trunk/readme.txt

@@ -6 +6 @@
 Tested up to: 5.2.1
 Requires PHP: 5.6
-Stable tag: 1.0
+Stable tag: 1.0.1
 License: GPLv2
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
@@ -50 +50 @@
 You can customise the widget using different options:
 
+ - <strong>Show on phones</strong> will decide if the map will appear when a user is visiting the website with a mobile (width <= 576px).
+ - <strong>Show on tablets</strong> will decide if the map will appear when a user is visiting the website with a tablet (576px > width <= 768px).
+ - <strong>Show on larger screens</strong> will decide if the map will appear when a user is visiting the website with a larger screen than phone or tablet (> 768px).
  - <strong>Map height</strong>: The default map's height when it's not expanded.
  - <strong>Widget is sticky</strong>: If checked, the widget will be sticky to the top of the screen even if he's not expanded. This way, it will follow the user scroll even in reduced size.
@@ -84 +87 @@
  - <strong>Map height</strong> can be defined in pixels (px) or percentage (%) of the screen's height. It will define the height of the map when it's not sticky.
  - <strong>Map is sticky</strong> will decide if the map sticks to the top of the screen while user scroll to read the blog post.
+ - <strong>Show on phones</strong> will decide if the map will appear when a user is visiting the website with a mobile (width <= 576px).
+ - <strong>Show on tablets</strong> will decide if the map will appear when a user is visiting the website with a tablet (576px > width <= 768px).
+ - <strong>Show on larger screens</strong> will decide if the map will appear when a user is visiting the website with a larger screen than phone or tablet (> 768px).
  - <strong>Height of the map in its standard height</strong>: This is the height the map will take. Either you can specify a fixed height with pixels (e.g 300px)
  or you can specify a percentage relative to the screen height (e.g 40%).
@@ -92 +98 @@
 
 **Shortcode example**
-[embedded_trip show_popup="0" show_pictures="1" show_pictures_at_start="0" map_height="60%" is_sticky="1" standard_map_height="35%" extended_map_height="70%" margin_top="10"]
+[embedded_trip show_popup="0" show_pictures="1" show_pictures_at_start="0" map_height="60%" is_sticky="1" show_on_phones="1" show_on_tablets="1" show_on_large_screens="1" standard_map_height="35%" extended_map_height="70%" margin_top="10"]
 
 
@@ -137 +143 @@
 == Screenshots ==
 
-1. Example - Expanded widget
-2. Example - Reduced widget
-3. Example - Standard map
-4. How to use - Widget configuration
-5. How to use - Standard map block
-6. How to use - metabox
+1. Example - Expanded widget: `/assets/example-1.png`
+2. Example - Reduced widget: `/assets/example-2.png`
+3. Example - Standard map: `/assets/example-3.png`
+4. How to use - metabox: `/assets/metabox.png`
+5. How to use - Standard map block: `/assets/trip-block.png`
+6. How to use - Widget configuration: `/assets/widget-config.png`
 
 == Changelog ==
@@ -149 +155 @@
 * Creation of the plugin
 
+= 1.0.1 =
+* New pictures slider
+
 == Upgrade Notice ==
 No upgrade to do for the moment

traveledmap-trip-itinerary-embedded-map/trunk/src/iframe/iframe-widget.php

@@ -1 +1 @@
 <?php
+
+require('utils/enums.php');
 
 add_action('widgets_init', function () {
@@ -40 +42 @@
 
         $mapUrl .= '&clusteringRadius=0';
-        $mapUrl .= '&hidePictures=30';
+        $mapUrl .= '&hidePictures=true';
         $mapUrl .= '&hideAttr=true';
         $mapUrl .= '&hideZoom=true';
+        $mapUrl .= '&isWidget=true';
         $mapUrl .= $notExtendedShowSteps ? '&showPopup=true' : '';
 
+        $showOnDevices = 'traveledmap-trip-breakpoints';
+        $showOnDevices .= $instance['show_on_phones'] ? ' ' . DeviceScreensEnum::PHONES : '';
+        $showOnDevices .= $instance['show_on_tablets'] ? ' ' . DeviceScreensEnum::TABLETS : '';
+        $showOnDevices .= $instance['show_on_large_screens'] ? ' ' . DeviceScreensEnum::LARGE_SCREENS : '';
+
+        echo '<div class="' . $showOnDevices . '">';
         echo $args['before_widget'];
         if (!empty($instance['title'])) {
@@ -54 +63 @@
                 <div class="traveledmap-trip-widget-map-container">
                     <div class="traveledmap-trip-widget-map-content' . $extendableClass . '">
-                        <iframe frameborder="0" class="traveledmap-trip-widget-map" src="' . esc_url($mapUrl) . '"></iframe>
+                        <iframe frameborder="0" allow="fullscreen" class="traveledmap-trip-widget-map" data-src="' . esc_url($mapUrl) . '"></iframe>
                         <div class="traveledmap-trip-widget-overlay" onclick="window.traveledMapToggleMap(\'' . $this->id . '\')">
                             ' . self::getExpandIcon() . '
@@ -68 +77 @@
 
         echo $args['after_widget'];
+
+        echo '</div>';
     }
 
@@ -81 +92 @@
         $isStickyName = esc_attr($this->get_field_name('is_sticky'));
         $isStickyValue = esc_attr(self::instanceVarToChecked($instance, 'is_sticky'));
+
+        $showOnPhoneName = esc_attr($this->get_field_name('show_on_phones'));
+        $showOnPhonesValue = esc_attr(self::instanceVarToChecked($instance, 'show_on_phones'));
+        $showOnTabletsName = esc_attr($this->get_field_name('show_on_tablets'));
+        $showOnTabletsValue = esc_attr(self::instanceVarToChecked($instance, 'show_on_tablets'));
+        $showOnLargeScreensName = esc_attr($this->get_field_name('show_on_large_screens'));
+        $showOnLargeScreensValue = esc_attr(self::instanceVarToChecked($instance, 'show_on_large_screens'));
 
         $mapHeightName = esc_attr($this->get_field_name('map_height'));
@@ -123 +141 @@
 
         echo '
+            <p>
+                <input type="checkbox" name="' . $showOnPhoneName . '" ' . $showOnPhonesValue . '>
+                <label for="' . $showOnPhoneName . '">Show on phones</label>,&nbsp;
+                <input type="checkbox" name="' . $showOnTabletsName . '" ' . $showOnTabletsValue . '>
+                <label for="' . $showOnTabletsName . '">Show on tablets</label>,&nbsp; 
+                <input type="checkbox" name="' . $showOnLargeScreensName. '" ' . $showOnLargeScreensValue . '>
+                <label for="' . $showOnLargeScreensName . '">Show on larger screens</label> <br />
+                <small>
+                    You can decides on which type of device the widget will show up.
+                </small>
+            </p>
             <p>
                 <label>Map height (in pixels or percentage)</label>
@@ -262 +291 @@
         $instance['extended_left'] = self::instanceVarToBool($new_instance, 'extended_left');
         $instance['is_sticky'] = self::instanceVarToBool($new_instance, 'is_sticky');
+        $instance['show_on_phones'] = self::instanceVarToBool($new_instance, 'show_on_phones');
+        $instance['show_on_tablets'] = self::instanceVarToBool($new_instance, 'show_on_tablets');
+        $instance['show_on_large_screens'] = self::instanceVarToBool($new_instance, 'show_on_large_screens');
         $instance['not_extended_show_steps'] = self::instanceVarToBool($new_instance, 'not_extended_show_steps');
         $instance['extended_show_steps'] = self::instanceVarToBool($new_instance, 'extended_show_steps');
@@ -468 +500 @@
             
             ' . listenToIframeLocationChanged() . '
+            
+            ' . checkIframeShouldShow() .'
         ';
     }

traveledmap-trip-itinerary-embedded-map/trunk/src/iframe/render.php

@@ -18 +18 @@
     $mapClasses = 'traveledmap-post-map';
 
-    $containerClass = 'wp-block-traveledmap-trip';
+    $containerClass = 'wp-block-traveledmap-trip traveledmap-trip-breakpoints';
     $containerClass .= (bool) $attributes['isSticky'] ? ' map-sticky' : '';
+    $containerClass .= (bool) $attributes['showOnPhones'] ? ' ' . DeviceScreensEnum::PHONES : '';
+    $containerClass .= (bool) $attributes['showOnTablets'] ? ' ' . DeviceScreensEnum::TABLETS : '';
+    $containerClass .= (bool) $attributes['showOnLargeScreens'] ? ' ' . DeviceScreensEnum::LARGE_SCREENS : '';
 
     return '
         <div class="' . $containerClass . '">
-            <iframe id="traveledmap-post-map" class="' . $mapClasses . '" src="' . $mapUrl . '" frameborder="0"></iframe>
+            <iframe id="traveledmap-post-map" allow="fullscreen" class="' . $mapClasses . '" data-src="' . $mapUrl . '" frameborder="0"></iframe>
             <div class="actions-wrapper flex-center">
                 <button type="button" onclick="toggleShow()" class="mr-5">
@@ -87 +90 @@
 
             ' . listenToIframeLocationChanged() .'
+            
+            ' . checkIframeShouldShow() .'
         </div>';
 }

traveledmap-trip-itinerary-embedded-map/trunk/src/iframe/shortcode.php

@@ -12 +12 @@
         'show_pictures_at_start' => '0',
         'is_sticky' => '1',
+        'show_on_phones' => '1',
+        'show_on_tablets' => '1',
+        'show_on_large_screens' => '1',
         'map_height' => '50%',
         'standard_map_height' => '30%',
@@ -29 +32 @@
         'showPicturesAtStart' => $attributes['show_pictures_at_start'],
         'isSticky' => $attributes['is_sticky'],
+        'showOnPhones' => $attributes['show_on_phones'],
+        'showOnTablets' => $attributes['show_on_tablets'],
+        'showOnLargeScreens' => $attributes['show_on_large_screens'],
         'mapHeight' => $attributes['map_height'],
         'standardMapHeight' => $attributes['standard_map_height'],

traveledmap-trip-itinerary-embedded-map/trunk/src/iframe/style.scss

@@ -100 +100 @@
 }
 
+.traveledmap-trip-breakpoints {
+    display: none;
+}
+
 .traveledmap-trip-widget-wrapper {
     //$height: 200px; // be carefull, 200 is also in the JS (iframe-widget.php)

traveledmap-trip-itinerary-embedded-map/trunk/src/iframe/trip-block.js

@@ -68 +68 @@
             default: true,
         },
+        showOnPhones: {
+            type: 'boolean',
+            default: true,
+        },
+        showOnTablets: {
+            type: 'boolean',
+            default: true,
+        },
+        showOnLargeScreens: {
+            type: 'boolean',
+            default: true,
+        },
         mapHeight: {
             type: 'string',
@@ -98 +110 @@
             attributes: {
                 baseUrl, userId, nickname, tripId, showPopup, showPictures, showPicturesAtStart, mapUrl,
-                isSticky, mapHeight, standardMapHeight, extendedMapHeight, marginTop,
+                isSticky, showOnPhones, showOnTablets, showOnLargeScreens, mapHeight, standardMapHeight,
+                extendedMapHeight, marginTop,
             }, setAttributes
         } = props;
@@ -115 +128 @@
 
         const getUser = () => {
-            if(!isEmpty(userId)) {
+            if (!isEmpty(userId)) {
                 return userId;
             }
-            if(!isEmpty(nickname)) {
+            if (!isEmpty(nickname)) {
                 return nickname;
             }
@@ -125 +138 @@
 
         const getTripId = () => {
-            if(!isEmpty(tripId)) {
+            if (!isEmpty(tripId)) {
                 return tripId;
             }
@@ -161 +174 @@
                             <PanelRow>
                                 <ToggleControl
+                                    label="Show on phones"
+                                    help={showOnPhones ? 'The map will be shown on mobile (< 576px)' : 'The map will be hidden on mobile devices'}
+                                    checked={showOnPhones}
+                                    onChange={() => setAttributes({showOnPhones: !showOnPhones})}
+                                />
+                                <ToggleControl
+                                    label="Show on tablets"
+                                    help={showOnTablets ? 'The map will be shown on tablets (> 576px and < 768px)' : 'The map will be hidden on tablets devices'}
+                                    checked={showOnTablets}
+                                    onChange={() => setAttributes({showOnTablets: !showOnTablets})}
+                                />
+                                <ToggleControl
+                                    label="Show on larger screens"
+                                    help={showOnLargeScreens ? 'The map will be shown on larger screens (> 768px)' : 'The map will be hidden on larger devices'}
+                                    checked={showOnLargeScreens}
+                                    onChange={() => setAttributes({showOnLargeScreens: !showOnLargeScreens})}
+                                />
+                            </PanelRow>
+
+                            <PanelRow>
+                                <ToggleControl
                                     label="Show steps name"
                                     help={showPopup ? 'Popup with step name will be shown' : 'Popup will be show only if mouse is over the step marker'}
@@ -219 +253 @@
                                 />
                             </PanelRow>
-                                {
-                                    isSticky && (
-                                        <Fragment>
-                                            <PanelRow>
-                                                <TextControl
-                                                    label="Map height when the map is sticky and not extended"
-                                                    value={standardMapHeight}
-                                                    onChange={onDataChange('standardMapHeight')}
-                                                    help="Height can be written in pixels (px) or percents of the screen's height (%). i.e: 200px or 50%"
-                                                    className="input-100"
-                                                />
-                                            </PanelRow>
-
-                                            <PanelRow>
-                                                <TextControl
-                                                    label="Map height when the map is sticky and extended"
-                                                    value={extendedMapHeight}
-                                                    onChange={onDataChange('extendedMapHeight')}
-                                                    help="Height can be written in pixels (px) or percents of the screen's height (%). i.e: 200px or 50%"
-                                                    className="input-100"
-                                                />
-                                            </PanelRow>
-
-                                            <PanelRow>
-                                                <TextControl
-                                                    type="number"
-                                                    label="Top margin (Space between the top of the screen and the map when it's sticky)"
-                                                    value={marginTop}
-                                                    onChange={onDataChange('marginTop')}
-                                                    help="Height can be written only in pixels (px). You don't need to write the unit. i.e: 20"
-                                                    className="input-100"
-                                                />
-                                            </PanelRow>
-                                        </Fragment>
-                                    )
-                                }
+                            {
+                                isSticky && (
+                                    <Fragment>
+                                        <PanelRow>
+                                            <TextControl
+                                                label="Map height when the map is sticky and not extended"
+                                                value={standardMapHeight}
+                                                onChange={onDataChange('standardMapHeight')}
+                                                help="Height can be written in pixels (px) or percents of the screen's height (%). i.e: 200px or 50%"
+                                                className="input-100"
+                                            />
+                                        </PanelRow>
+
+                                        <PanelRow>
+                                            <TextControl
+                                                label="Map height when the map is sticky and extended"
+                                                value={extendedMapHeight}
+                                                onChange={onDataChange('extendedMapHeight')}
+                                                help="Height can be written in pixels (px) or percents of the screen's height (%). i.e: 200px or 50%"
+                                                className="input-100"
+                                            />
+                                        </PanelRow>
+
+                                        <PanelRow>
+                                            <TextControl
+                                                type="number"
+                                                label="Top margin (Space between the top of the screen and the map when it's sticky)"
+                                                value={marginTop}
+                                                onChange={onDataChange('marginTop')}
+                                                help="Height can be written only in pixels (px). You don't need to write the unit. i.e: 20"
+                                                className="input-100"
+                                            />
+                                        </PanelRow>
+                                    </Fragment>
+                                )
+                            }
                         </PanelBody>
                     </Panel>
@@ -261 +295 @@
                     mapUrl && (
                         <div>
-                            <iframe className="map-iframe traveledmap-reference-iframe" src={mapUrl} frameBorder="0" style={{ height: convertHeightForRendering(mapHeight) }}/>
+                            <iframe className="map-iframe traveledmap-reference-iframe" src={mapUrl} frameBorder="0" allow="fullscreen" style={{ height: convertHeightForRendering(mapHeight) }}/>
                         </div>
                     )

traveledmap-trip-itinerary-embedded-map/trunk/src/iframe/utils/utils.php

@@ -13 +13 @@
                     history.replaceState({}, "", newHash !== null ? "#" + newHash : null);
                     const iframeWindowsTM = window.traveledMapIframes.map(el => el.contentWindow);
-                    console.log("Test hash change", newHash, iframeWindowsTM);
                     iframeWindowsTM.forEach(ifrmWin => ifrmWin.postMessage({ type: "parentWindowHashChanged", detail: { hash: newHash || null }}, "*"));
                 };
@@ -90 +89 @@
     ';
 }
+
+function checkIframeShouldShow() {
+    return '
+        <script>
+            (() => {
+                const PHONES = "' . DeviceScreensEnum::PHONES . '";
+                const TABLETS = "' . DeviceScreensEnum::TABLETS . '";
+                const LARGE_SCREENS = "' . DeviceScreensEnum::LARGE_SCREENS . '";
+                
+                const showElement = (el) => {
+                  const iframe = el.querySelector("iframe");
+                  if(iframe) {
+                    el.style.display = "block";
+                    iframe.setAttribute("src", iframe.getAttribute("data-src"));                
+                  }
+                };
+        
+                const width = window.innerWidth;
+                const isPhone = width <= 576;
+                const isTablet = width > 576 && width <= 768;
+                const isLargeScreen = width > 768;
+                Array.from(document.getElementsByClassName("traveledmap-trip-breakpoints")).forEach(el => {
+                  if(
+                    isPhone && el.classList.contains(PHONES)
+                    || isTablet && el.classList.contains(TABLETS)
+                    || isLargeScreen && el.classList.contains(LARGE_SCREENS)
+                  ) {
+                    showElement(el);
+                  }
+                });
+            })();
+        </script>
+    ';
+}

traveledmap-trip-itinerary-embedded-map/trunk/src/init.php

@@ -79 +79 @@
                 'showPicturesAtStart' => array('type' => 'boolean', 'default' => false),
                 'isSticky' => array('type' => 'boolean', 'default' => true),
+                'showOnPhones' => array('type' => 'boolean', 'default' => true),
+                'showOnTablets' => array('type' => 'boolean', 'default' => true),
+                'showOnLargeScreens' => array('type' => 'boolean', 'default' => true),
                 'mapHeight' => array('type' => 'string', 'default' => '50%'),
                 'standardMapHeight' => array('type' => 'string', 'default' => '30%'),