cmspageblocks 1.0.13 → 1.0.18
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/build/index.js
CHANGED
|
@@ -3090,7 +3090,7 @@ function _taggedTemplateLiteral(strings, raw) {
|
|
|
3090
3090
|
}
|
|
3091
3091
|
|
|
3092
3092
|
var _templateObject$2;
|
|
3093
|
-
var SliderContainer = styled__default["default"].div(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral(["\n.carousel .control-arrow,.carousel.carousel-slider .control-arrow{-webkit-transition:all .25s ease-in;-moz-transition:all .25s ease-in;-ms-transition:all .25s ease-in;-o-transition:all .25s ease-in;transition:all .25s ease-in;opacity:.4;filter:alpha(opacity=40);position:absolute;z-index:2;top:20px;background:none;border:0;font-size:32px;cursor:pointer}.carousel .control-arrow:focus,.carousel .control-arrow:hover{opacity:1;filter:alpha(opacity=100)}.carousel .control-arrow:before,.carousel.carousel-slider .control-arrow:before{margin:0 5px;display:inline-block;border-top:8px solid transparent;border-bottom:8px solid transparent;content:''}.carousel .control-disabled.control-arrow{opacity:0;filter:alpha(opacity=0);cursor:inherit;display:none}.carousel .control-prev.control-arrow{left:0}.carousel .control-prev.control-arrow:before{border-right:8px solid #fff}.carousel .control-next.control-arrow{right:0}.carousel .control-next.control-arrow:before{border-left:8px solid #fff}.carousel-root{outline:none}.carousel{position:relative;width:100%}.carousel *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.carousel img{width:100%;display:inline-block;pointer-events:none}.carousel .carousel{position:relative}.carousel .control-arrow{outline:0;border:0;background:none;top:50%;margin-top:-13px;font-size:18px}.carousel .thumbs-wrapper{margin:20px;overflow:hidden}.carousel .thumbs{-webkit-transition:all .15s ease-in;-moz-transition:all .15s ease-in;-ms-transition:all .15s ease-in;-o-transition:all .15s ease-in;transition:all .15s ease-in;-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0);-o-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);position:relative;list-style:none;white-space:nowrap}.carousel .thumb{-webkit-transition:border .15s ease-in;-moz-transition:border .15s ease-in;-ms-transition:border .15s ease-in;-o-transition:border .15s ease-in;transition:border .15s ease-in;display:inline-block;margin-right:6px;white-space:nowrap;overflow:hidden;border:3px solid #fff;padding:2px}.carousel .thumb:focus{border:3px solid #ccc;outline:none}.carousel .thumb.selected,.carousel .thumb:hover{border:3px solid #333}.carousel .thumb img{vertical-align:top}.carousel.carousel-slider{position:relative;margin:0;overflow:hidden}.carousel.carousel-slider .control-arrow{top:0;color:#fff;font-size:26px;bottom:0;margin-top:0;padding:5px}.carousel.carousel-slider .control-arrow:hover{background:rgba(0,0,0,0.2)}.carousel .slider-wrapper{overflow:hidden;margin:auto;width:100%;-webkit-transition:height .15s ease-in;-moz-transition:height .15s ease-in;-ms-transition:height .15s ease-in;-o-transition:height .15s ease-in;transition:height .15s ease-in}.carousel .slider-wrapper.axis-horizontal .slider{-ms-box-orient:horizontal;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-moz-flex;display:-webkit-flex;display:flex}.carousel .slider-wrapper.axis-horizontal .slider .slide{flex-direction:column;flex-flow:column}.carousel .slider-wrapper.axis-vertical{-ms-box-orient:horizontal;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-moz-flex;display:-webkit-flex;display:flex}.carousel .slider-wrapper.axis-vertical .slider{-webkit-flex-direction:column;flex-direction:column}.carousel .slider{margin:0;padding:0;position:relative;list-style:none;width:100%}.carousel .slider.animated{-webkit-transition:all .35s ease-in-out;-moz-transition:all .35s ease-in-out;-ms-transition:all .35s ease-in-out;-o-transition:all .35s ease-in-out;transition:all .35s ease-in-out}.carousel .slide{min-width:100%;margin:0;position:relative;text-align:center}.carousel .slide img{width:100%;vertical-align:top;border:0}.carousel .slide iframe{display:inline-block;width:calc(100% - 80px);margin:0 40px 40px;border:0}.carousel .slide .legend{-webkit-transition:all .5s ease-in-out;-moz-transition:all .5s ease-in-out;-ms-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;transition:all .5s ease-in-out;position:absolute;bottom:40px;left:50%;margin-left:-45%;width:90%;border-radius:10px;background:#000;color:#fff;padding:10px;font-size:12px;text-align:center;opacity:0.25;-webkit-transition:opacity .35s ease-in-out;-moz-transition:opacity .35s ease-in-out;-ms-transition:opacity .35s ease-in-out;-o-transition:opacity .35s ease-in-out;transition:opacity .35s ease-in-out}.carousel .control-dots{position:absolute;bottom:0;margin:10px 0;padding:0;text-align:center;width:100%;z-index:1}@media (min-width: 960px){.carousel .control-dots{bottom:0}}.carousel .control-dots .dot{-webkit-transition:opacity .25s ease-in;-moz-transition:opacity .25s ease-in;-ms-transition:opacity .25s ease-in;-o-transition:opacity .25s ease-in;transition:opacity .25s ease-in;opacity:.3;filter:alpha(opacity=30);box-shadow:1px 1px 2px rgba(0,0,0,0.9);background:#fff;border-radius:50%;width:8px;height:8px;cursor:pointer;display:inline-block;margin:0 8px}.carousel .control-dots .dot.selected,.carousel .control-dots .dot:hover{opacity:1;filter:alpha(opacity=100)}.carousel .carousel-status{position:absolute;top:0;right:0;padding:5px;font-size:10px;text-shadow:1px 1px 1px rgba(0,0,0,0.9);color:#fff}.carousel:hover .slide .legend{opacity:1}\n ul li {\n padding: 0 !important;\n }\n div img {\n object-fit: cover;\n }\n .carousel .thumbs-wrapper {\n margin: 16px;\n }\n max-width: 100%;\n width: 100%;\n .carousel .thumbs {\n padding: 0;\n }\n\n"])));
|
|
3093
|
+
var SliderContainer = styled__default["default"].div(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral(["\nwidth: 100%;\n.carousel .control-arrow,.carousel.carousel-slider .control-arrow{-webkit-transition:all .25s ease-in;-moz-transition:all .25s ease-in;-ms-transition:all .25s ease-in;-o-transition:all .25s ease-in;transition:all .25s ease-in;opacity:.4;filter:alpha(opacity=40);position:absolute;z-index:2;top:20px;background:none;border:0;font-size:32px;cursor:pointer}.carousel .control-arrow:focus,.carousel .control-arrow:hover{opacity:1;filter:alpha(opacity=100)}.carousel .control-arrow:before,.carousel.carousel-slider .control-arrow:before{margin:0 5px;display:inline-block;border-top:8px solid transparent;border-bottom:8px solid transparent;content:''}.carousel .control-disabled.control-arrow{opacity:0;filter:alpha(opacity=0);cursor:inherit;display:none}.carousel .control-prev.control-arrow{left:0}.carousel .control-prev.control-arrow:before{border-right:8px solid #fff}.carousel .control-next.control-arrow{right:0}.carousel .control-next.control-arrow:before{border-left:8px solid #fff}.carousel-root{outline:none}.carousel{position:relative;width:100%}.carousel *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.carousel img{width:100%;display:inline-block;pointer-events:none}.carousel .carousel{position:relative}.carousel .control-arrow{outline:0;border:0;background:none;top:50%;margin-top:-13px;font-size:18px}.carousel .thumbs-wrapper{margin:20px;overflow:hidden}.carousel .thumbs{-webkit-transition:all .15s ease-in;-moz-transition:all .15s ease-in;-ms-transition:all .15s ease-in;-o-transition:all .15s ease-in;transition:all .15s ease-in;-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0);-o-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);position:relative;list-style:none;white-space:nowrap}.carousel .thumb{-webkit-transition:border .15s ease-in;-moz-transition:border .15s ease-in;-ms-transition:border .15s ease-in;-o-transition:border .15s ease-in;transition:border .15s ease-in;display:inline-block;margin-right:6px;white-space:nowrap;overflow:hidden;border:3px solid #fff;padding:2px}.carousel .thumb:focus{border:3px solid #ccc;outline:none}.carousel .thumb.selected,.carousel .thumb:hover{border:3px solid #333}.carousel .thumb img{vertical-align:top}.carousel.carousel-slider{position:relative;margin:0;overflow:hidden}.carousel.carousel-slider .control-arrow{top:0;color:#fff;font-size:26px;bottom:0;margin-top:0;padding:5px}.carousel.carousel-slider .control-arrow:hover{background:rgba(0,0,0,0.2)}.carousel .slider-wrapper{overflow:hidden;margin:auto;width:100%;-webkit-transition:height .15s ease-in;-moz-transition:height .15s ease-in;-ms-transition:height .15s ease-in;-o-transition:height .15s ease-in;transition:height .15s ease-in}.carousel .slider-wrapper.axis-horizontal .slider{-ms-box-orient:horizontal;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-moz-flex;display:-webkit-flex;display:flex}.carousel .slider-wrapper.axis-horizontal .slider .slide{flex-direction:column;flex-flow:column}.carousel .slider-wrapper.axis-vertical{-ms-box-orient:horizontal;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-moz-flex;display:-webkit-flex;display:flex}.carousel .slider-wrapper.axis-vertical .slider{-webkit-flex-direction:column;flex-direction:column}.carousel .slider{margin:0;padding:0;position:relative;list-style:none;width:100%}.carousel .slider.animated{-webkit-transition:all .35s ease-in-out;-moz-transition:all .35s ease-in-out;-ms-transition:all .35s ease-in-out;-o-transition:all .35s ease-in-out;transition:all .35s ease-in-out}.carousel .slide{min-width:100%;margin:0;position:relative;text-align:center}.carousel .slide img{width:100%;vertical-align:top;border:0}.carousel .slide iframe{display:inline-block;width:calc(100% - 80px);margin:0 40px 40px;border:0}.carousel .slide .legend{-webkit-transition:all .5s ease-in-out;-moz-transition:all .5s ease-in-out;-ms-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;transition:all .5s ease-in-out;position:absolute;bottom:40px;left:50%;margin-left:-45%;width:90%;border-radius:10px;background:#000;color:#fff;padding:10px;font-size:12px;text-align:center;opacity:0.25;-webkit-transition:opacity .35s ease-in-out;-moz-transition:opacity .35s ease-in-out;-ms-transition:opacity .35s ease-in-out;-o-transition:opacity .35s ease-in-out;transition:opacity .35s ease-in-out}.carousel .control-dots{position:absolute;bottom:0;margin:10px 0;padding:0;text-align:center;width:100%;z-index:1}@media (min-width: 960px){.carousel .control-dots{bottom:0}}.carousel .control-dots .dot{-webkit-transition:opacity .25s ease-in;-moz-transition:opacity .25s ease-in;-ms-transition:opacity .25s ease-in;-o-transition:opacity .25s ease-in;transition:opacity .25s ease-in;opacity:.3;filter:alpha(opacity=30);box-shadow:1px 1px 2px rgba(0,0,0,0.9);background:#fff;border-radius:50%;width:8px;height:8px;cursor:pointer;display:inline-block;margin:0 8px}.carousel .control-dots .dot.selected,.carousel .control-dots .dot:hover{opacity:1;filter:alpha(opacity=100)}.carousel .carousel-status{position:absolute;top:0;right:0;padding:5px;font-size:10px;text-shadow:1px 1px 1px rgba(0,0,0,0.9);color:#fff}.carousel:hover .slide .legend{opacity:1}\n ul li {\n padding: 0 !important;\n }\n div img {\n object-fit: cover;\n }\n .carousel .thumbs-wrapper {\n margin: 16px;\n }\n max-width: 100%;\n width: 100%;\n .carousel .thumbs {\n padding: 0;\n }\n\n"])));
|
|
3094
3094
|
|
|
3095
3095
|
function ImageGallery(_ref) {
|
|
3096
3096
|
var options = _ref.options;
|
|
@@ -3114,24 +3114,29 @@ function ImageGallery(_ref) {
|
|
|
3114
3114
|
|
|
3115
3115
|
function ImageSlider(_ref) {
|
|
3116
3116
|
var options = _ref.options;
|
|
3117
|
+
console.debug({
|
|
3118
|
+
sliderOptions: options
|
|
3119
|
+
});
|
|
3120
|
+
var content = options.content;
|
|
3117
3121
|
return /*#__PURE__*/React__default["default"].createElement(SliderContainer, null, /*#__PURE__*/React__default["default"].createElement(js.Carousel, {
|
|
3118
3122
|
showThumbs: false,
|
|
3119
3123
|
swipeable: true,
|
|
3120
3124
|
showStatus: false,
|
|
3121
|
-
dynamicHeight:
|
|
3122
|
-
width: "100%"
|
|
3125
|
+
dynamicHeight: false,
|
|
3126
|
+
width: "100%",
|
|
3127
|
+
showIndicators: content.length > 1 ? true : false
|
|
3123
3128
|
}, options.content.map(function (slide) {
|
|
3124
3129
|
if (!slide.active) return;
|
|
3125
3130
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
3126
3131
|
key: slide.image[0].reference,
|
|
3127
3132
|
style: {
|
|
3128
|
-
height: 600
|
|
3133
|
+
height: options.height ? parseInt(options.height) : 600
|
|
3129
3134
|
}
|
|
3130
3135
|
}, /*#__PURE__*/React__default["default"].createElement("img", {
|
|
3131
3136
|
src: slide ? 'https://cdn.burobork.nl/' + slide.image[0].reference : null,
|
|
3132
3137
|
alt: slide.title,
|
|
3133
3138
|
style: {
|
|
3134
|
-
height: 600
|
|
3139
|
+
height: options.height ? parseInt(options.height) : 600
|
|
3135
3140
|
}
|
|
3136
3141
|
}));
|
|
3137
3142
|
})));
|
|
@@ -4106,7 +4111,11 @@ function GoogleMap(_ref) {
|
|
|
4106
4111
|
}
|
|
4107
4112
|
|
|
4108
4113
|
var Marker = function Marker() {
|
|
4109
|
-
return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, "
|
|
4114
|
+
return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("img", {
|
|
4115
|
+
src: "https://cms.burobork.nl/marker.svg",
|
|
4116
|
+
height: 16,
|
|
4117
|
+
width: 16
|
|
4118
|
+
}));
|
|
4110
4119
|
};
|
|
4111
4120
|
|
|
4112
4121
|
var build = {exports: {}};
|
|
@@ -53998,16 +54007,21 @@ var MEDIA = Object.keys(BREAKPOINTS).reduce(function (acc, label) {
|
|
|
53998
54007
|
}, {});
|
|
53999
54008
|
|
|
54000
54009
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
|
|
54001
|
-
var BlockContainer = styled__default["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\ndisplay: flex;\nflex-direction: row;\nflex-wrap: wrap;\n
|
|
54010
|
+
var BlockContainer = styled__default["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\ndisplay: flex;\nflex-direction: row;\nflex-wrap: wrap;\n.ql-align-center {\n text-align: center;\n}\nul {\n list-style: initial;\n list-style-position: outside;\n padding: 0 0 0 16px;\n li {\n font-size: 1.6rem;\n line-height: 2.4rem;\n padding: 4px 0;\n }\n}\nh1 {\n font-size: 2.8rem;\n line-height: 3.4rem;\n padding: 24px 0 16px;\n}\nh2 {\n font-size: 2.2rem;\n line-height: 2.8rem;\n padding: 16px 0 8px;\n}\np {\n font-size: 1.6rem;\n line-height: 2.4rem;\n max-width: 75ch;\n margin: 0;\n}\ndiv {\n box-sizing: border-box;\n}\nimg {\n display: block;\n width: 100%;\n max-width: 100%;\n /* position: absolute; */\n}\n.half {\n width: 50%;\n ", ";\n}\n.col {\n &-12 {\n width: 100%;\n }\n &-1 {\n width: calc(1 / 12 * 100%);\n }\n &-2 {\n width: calc(2 / 12 * 100%);\n }\n &-3 {\n width: calc(3 / 12 * 100%);\n }\n &-4 {\n width: calc(4 / 12 * 100%);\n }\n &-5 {\n width: calc(5 / 12 * 100%);\n }\n &-6 {\n width: calc(50%);\n }\n &-7 {\n width: calc(7 / 12 * 100%);\n }\n &-8 {\n width: calc(8 / 12 * 100%);\n }\n &-9 {\n width: calc(9 / 12 * 100%);\n }\n &-10 {\n width: calc(10 / 12 * 100%);\n }\n &-11 {\n width: calc(11 / 12 * 100%);\n }\n}\n.center {\n margin: 0 auto;\n}\n", ";\na {\n /* padding: 2px 0; */\n color: ", " !important;\n text-decoration: none;\n position: relative;\n &:before {\n transition: 0.2s all ease-in;\n position: absolute;\n content: '';\n height: 1px;\n width: 20px;\n bottom: 0;\n left: 0;\n background: ", ";\n }\n &:hover {\n &:before {\n width: 100%;\n }\n }\n}\n.image-gallery-fullscreen-button.active {\n top: 0;\n bottom: auto;\n background-color: #000;\n &:before {\n content: '\\274c';\n }\n}\n.image-gallery-content {\n .image-gallery-image {\n img {\n max-height: 500px;\n height: 500px;\n ", ";\n }\n }\n}\n.image-gallery-content.fullscreen {\n .image-gallery-image {\n img {\n /* max-height: 75vh; */\n width: auto;\n margin: 0 auto;\n }\n }\n}\n\n.image-gallery {\n max-width: 100%;\n overflow: hidden;\n}\n.page_row {\n max-width: 1240px;\n width: 100%;\n margin: 0px auto;\n padding: 16px;\n width: 100%;\n flex-direction: column;\n @media (min-width: 676px) {\n flex-direction: row;\n }\n &.full-width {\n max-width: 100%;\n padding: 0;\n }\n\n &.container-width {\n margin: 0 auto;\n @media (min-width: 676px) {\n max-width: 640px;\n }\n\n @media (min-width: 868px) {\n max-width: 820px;\n }\n\n @media (min-width: 992px) {\n max-width: 960px;\n }\n\n @media (min-width: 1290px) {\n max-width: 1260px;\n }\n }\n }\n"], ["\ndisplay: flex;\nflex-direction: row;\nflex-wrap: wrap;\n.ql-align-center {\n text-align: center;\n}\nul {\n list-style: initial;\n list-style-position: outside;\n padding: 0 0 0 16px;\n li {\n font-size: 1.6rem;\n line-height: 2.4rem;\n padding: 4px 0;\n }\n}\nh1 {\n font-size: 2.8rem;\n line-height: 3.4rem;\n padding: 24px 0 16px;\n}\nh2 {\n font-size: 2.2rem;\n line-height: 2.8rem;\n padding: 16px 0 8px;\n}\np {\n font-size: 1.6rem;\n line-height: 2.4rem;\n max-width: 75ch;\n margin: 0;\n}\ndiv {\n box-sizing: border-box;\n}\nimg {\n display: block;\n width: 100%;\n max-width: 100%;\n /* position: absolute; */\n}\n.half {\n width: 50%;\n ", ";\n}\n.col {\n &-12 {\n width: 100%;\n }\n &-1 {\n width: calc(1 / 12 * 100%);\n }\n &-2 {\n width: calc(2 / 12 * 100%);\n }\n &-3 {\n width: calc(3 / 12 * 100%);\n }\n &-4 {\n width: calc(4 / 12 * 100%);\n }\n &-5 {\n width: calc(5 / 12 * 100%);\n }\n &-6 {\n width: calc(50%);\n }\n &-7 {\n width: calc(7 / 12 * 100%);\n }\n &-8 {\n width: calc(8 / 12 * 100%);\n }\n &-9 {\n width: calc(9 / 12 * 100%);\n }\n &-10 {\n width: calc(10 / 12 * 100%);\n }\n &-11 {\n width: calc(11 / 12 * 100%);\n }\n}\n.center {\n margin: 0 auto;\n}\n", ";\na {\n /* padding: 2px 0; */\n color: ", " !important;\n text-decoration: none;\n position: relative;\n &:before {\n transition: 0.2s all ease-in;\n position: absolute;\n content: '';\n height: 1px;\n width: 20px;\n bottom: 0;\n left: 0;\n background: ", ";\n }\n &:hover {\n &:before {\n width: 100%;\n }\n }\n}\n.image-gallery-fullscreen-button.active {\n top: 0;\n bottom: auto;\n background-color: #000;\n &:before {\n content: '\\\\274c';\n }\n}\n.image-gallery-content {\n .image-gallery-image {\n img {\n max-height: 500px;\n height: 500px;\n ", ";\n }\n }\n}\n.image-gallery-content.fullscreen {\n .image-gallery-image {\n img {\n /* max-height: 75vh; */\n width: auto;\n margin: 0 auto;\n }\n }\n}\n\n.image-gallery {\n max-width: 100%;\n overflow: hidden;\n}\n.page_row {\n max-width: 1240px;\n width: 100%;\n margin: 0px auto;\n padding: 16px;\n width: 100%;\n flex-direction: column;\n @media (min-width: 676px) {\n flex-direction: row;\n }\n &.full-width {\n max-width: 100%;\n padding: 0;\n }\n\n &.container-width {\n margin: 0 auto;\n @media (min-width: 676px) {\n max-width: 640px;\n }\n\n @media (min-width: 868px) {\n max-width: 820px;\n }\n\n @media (min-width: 992px) {\n max-width: 960px;\n }\n\n @media (min-width: 1290px) {\n max-width: 1260px;\n }\n }\n }\n"])), MEDIA.PHONE(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n width: 100%;\n "]))), MEDIA.TABLET(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {\n width: 100%;\n }\n "]))), function (props) {
|
|
54002
54011
|
return props.theme.linkColor;
|
|
54003
54012
|
}, function (props) {
|
|
54004
54013
|
return props.theme.primaryColor;
|
|
54005
|
-
}, MEDIA.TABLET(
|
|
54014
|
+
}, MEDIA.TABLET(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n height: auto;\n "]))));
|
|
54015
|
+
var BlockSelf = styled__default["default"].div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n width: 100%;\n"])));
|
|
54006
54016
|
|
|
54007
54017
|
function Block(_ref) {
|
|
54008
54018
|
var pageBlock = _ref.pageBlock;
|
|
54009
54019
|
var options = pageBlock.options;
|
|
54010
54020
|
|
|
54021
|
+
if (options == null) {
|
|
54022
|
+
return null;
|
|
54023
|
+
}
|
|
54024
|
+
|
|
54011
54025
|
switch (options.type) {
|
|
54012
54026
|
case 'button':
|
|
54013
54027
|
return /*#__PURE__*/React__default["default"].createElement(Wrapper, {
|
|
@@ -54087,13 +54101,13 @@ Block.propTypes = {
|
|
|
54087
54101
|
function Wrapper(_ref2) {
|
|
54088
54102
|
var children = _ref2.children,
|
|
54089
54103
|
options = _ref2.options;
|
|
54090
|
-
var classes =
|
|
54104
|
+
var classes = "bu_cpb_".concat(options.type);
|
|
54091
54105
|
Object.entries(options.classes).forEach(function (element) {
|
|
54092
|
-
classes += '';
|
|
54106
|
+
classes += ' ';
|
|
54093
54107
|
classes += element[1];
|
|
54094
54108
|
});
|
|
54095
54109
|
classes = classNames(classes, options.classes.width, options.className);
|
|
54096
|
-
return /*#__PURE__*/React__default["default"].createElement(
|
|
54110
|
+
return /*#__PURE__*/React__default["default"].createElement(BlockSelf, {
|
|
54097
54111
|
className: classes,
|
|
54098
54112
|
style: options.style
|
|
54099
54113
|
}, children);
|
package/package.json
CHANGED
package/src/Main.css.js
CHANGED
|
@@ -5,9 +5,6 @@ export const BlockContainer = styled.div`
|
|
|
5
5
|
display: flex;
|
|
6
6
|
flex-direction: row;
|
|
7
7
|
flex-wrap: wrap;
|
|
8
|
-
${MEDIA.TABLET`
|
|
9
|
-
margin: 80px 0 0;
|
|
10
|
-
`};
|
|
11
8
|
.ql-align-center {
|
|
12
9
|
text-align: center;
|
|
13
10
|
}
|
|
@@ -160,7 +157,7 @@ a {
|
|
|
160
157
|
width: 100%;
|
|
161
158
|
flex-direction: column;
|
|
162
159
|
@media (min-width: 676px) {
|
|
163
|
-
|
|
160
|
+
flex-direction: row;
|
|
164
161
|
}
|
|
165
162
|
&.full-width {
|
|
166
163
|
max-width: 100%;
|
|
@@ -187,3 +184,8 @@ a {
|
|
|
187
184
|
}
|
|
188
185
|
}
|
|
189
186
|
`;
|
|
187
|
+
|
|
188
|
+
|
|
189
|
+
export const BlockSelf = styled.div`
|
|
190
|
+
width: 100%;
|
|
191
|
+
`
|
package/src/components/Block.js
CHANGED
|
@@ -2,11 +2,15 @@ import React from 'react'
|
|
|
2
2
|
import PropTypes from 'prop-types';
|
|
3
3
|
import classNames from 'classnames';
|
|
4
4
|
import {Text, Image, ImageSlider, Button, Map, SearchBar, ImageGallery, Portal} from './BlockTypes';
|
|
5
|
-
import {
|
|
5
|
+
import { BlockSelf } from '../Main.css'
|
|
6
6
|
|
|
7
7
|
function Block({pageBlock}) {
|
|
8
8
|
const { options } = pageBlock;
|
|
9
9
|
|
|
10
|
+
if (options == null) {
|
|
11
|
+
return null;
|
|
12
|
+
}
|
|
13
|
+
|
|
10
14
|
switch(options.type) {
|
|
11
15
|
case 'button': return <Wrapper options={options} key={pageBlock.id}><Button options={options} /></Wrapper>
|
|
12
16
|
case 'map': return <Wrapper options={options} key={pageBlock.id}><Map options={options} /></Wrapper>
|
|
@@ -26,17 +30,17 @@ Block.propTypes = {
|
|
|
26
30
|
}
|
|
27
31
|
|
|
28
32
|
function Wrapper({ children, options }) {
|
|
29
|
-
let classes =
|
|
33
|
+
let classes = `bu_cpb_${options.type}`;
|
|
30
34
|
Object.entries(options.classes).forEach(element => {
|
|
31
|
-
classes += '';
|
|
35
|
+
classes += ' ';
|
|
32
36
|
classes += element[1];
|
|
33
37
|
});
|
|
34
38
|
|
|
35
39
|
classes = classNames(classes, options.classes.width, options.className);
|
|
36
40
|
|
|
37
|
-
return <
|
|
41
|
+
return <BlockSelf className={classes} style={options.style}>
|
|
38
42
|
{children}
|
|
39
|
-
</
|
|
43
|
+
</BlockSelf>
|
|
40
44
|
}
|
|
41
45
|
|
|
42
46
|
export default Block
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import styled from 'styled-components'
|
|
2
2
|
|
|
3
3
|
export const SliderContainer = styled.div`
|
|
4
|
+
width: 100%;
|
|
4
5
|
.carousel .control-arrow,.carousel.carousel-slider .control-arrow{-webkit-transition:all .25s ease-in;-moz-transition:all .25s ease-in;-ms-transition:all .25s ease-in;-o-transition:all .25s ease-in;transition:all .25s ease-in;opacity:.4;filter:alpha(opacity=40);position:absolute;z-index:2;top:20px;background:none;border:0;font-size:32px;cursor:pointer}.carousel .control-arrow:focus,.carousel .control-arrow:hover{opacity:1;filter:alpha(opacity=100)}.carousel .control-arrow:before,.carousel.carousel-slider .control-arrow:before{margin:0 5px;display:inline-block;border-top:8px solid transparent;border-bottom:8px solid transparent;content:''}.carousel .control-disabled.control-arrow{opacity:0;filter:alpha(opacity=0);cursor:inherit;display:none}.carousel .control-prev.control-arrow{left:0}.carousel .control-prev.control-arrow:before{border-right:8px solid #fff}.carousel .control-next.control-arrow{right:0}.carousel .control-next.control-arrow:before{border-left:8px solid #fff}.carousel-root{outline:none}.carousel{position:relative;width:100%}.carousel *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.carousel img{width:100%;display:inline-block;pointer-events:none}.carousel .carousel{position:relative}.carousel .control-arrow{outline:0;border:0;background:none;top:50%;margin-top:-13px;font-size:18px}.carousel .thumbs-wrapper{margin:20px;overflow:hidden}.carousel .thumbs{-webkit-transition:all .15s ease-in;-moz-transition:all .15s ease-in;-ms-transition:all .15s ease-in;-o-transition:all .15s ease-in;transition:all .15s ease-in;-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0);-o-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);position:relative;list-style:none;white-space:nowrap}.carousel .thumb{-webkit-transition:border .15s ease-in;-moz-transition:border .15s ease-in;-ms-transition:border .15s ease-in;-o-transition:border .15s ease-in;transition:border .15s ease-in;display:inline-block;margin-right:6px;white-space:nowrap;overflow:hidden;border:3px solid #fff;padding:2px}.carousel .thumb:focus{border:3px solid #ccc;outline:none}.carousel .thumb.selected,.carousel .thumb:hover{border:3px solid #333}.carousel .thumb img{vertical-align:top}.carousel.carousel-slider{position:relative;margin:0;overflow:hidden}.carousel.carousel-slider .control-arrow{top:0;color:#fff;font-size:26px;bottom:0;margin-top:0;padding:5px}.carousel.carousel-slider .control-arrow:hover{background:rgba(0,0,0,0.2)}.carousel .slider-wrapper{overflow:hidden;margin:auto;width:100%;-webkit-transition:height .15s ease-in;-moz-transition:height .15s ease-in;-ms-transition:height .15s ease-in;-o-transition:height .15s ease-in;transition:height .15s ease-in}.carousel .slider-wrapper.axis-horizontal .slider{-ms-box-orient:horizontal;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-moz-flex;display:-webkit-flex;display:flex}.carousel .slider-wrapper.axis-horizontal .slider .slide{flex-direction:column;flex-flow:column}.carousel .slider-wrapper.axis-vertical{-ms-box-orient:horizontal;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-moz-flex;display:-webkit-flex;display:flex}.carousel .slider-wrapper.axis-vertical .slider{-webkit-flex-direction:column;flex-direction:column}.carousel .slider{margin:0;padding:0;position:relative;list-style:none;width:100%}.carousel .slider.animated{-webkit-transition:all .35s ease-in-out;-moz-transition:all .35s ease-in-out;-ms-transition:all .35s ease-in-out;-o-transition:all .35s ease-in-out;transition:all .35s ease-in-out}.carousel .slide{min-width:100%;margin:0;position:relative;text-align:center}.carousel .slide img{width:100%;vertical-align:top;border:0}.carousel .slide iframe{display:inline-block;width:calc(100% - 80px);margin:0 40px 40px;border:0}.carousel .slide .legend{-webkit-transition:all .5s ease-in-out;-moz-transition:all .5s ease-in-out;-ms-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;transition:all .5s ease-in-out;position:absolute;bottom:40px;left:50%;margin-left:-45%;width:90%;border-radius:10px;background:#000;color:#fff;padding:10px;font-size:12px;text-align:center;opacity:0.25;-webkit-transition:opacity .35s ease-in-out;-moz-transition:opacity .35s ease-in-out;-ms-transition:opacity .35s ease-in-out;-o-transition:opacity .35s ease-in-out;transition:opacity .35s ease-in-out}.carousel .control-dots{position:absolute;bottom:0;margin:10px 0;padding:0;text-align:center;width:100%;z-index:1}@media (min-width: 960px){.carousel .control-dots{bottom:0}}.carousel .control-dots .dot{-webkit-transition:opacity .25s ease-in;-moz-transition:opacity .25s ease-in;-ms-transition:opacity .25s ease-in;-o-transition:opacity .25s ease-in;transition:opacity .25s ease-in;opacity:.3;filter:alpha(opacity=30);box-shadow:1px 1px 2px rgba(0,0,0,0.9);background:#fff;border-radius:50%;width:8px;height:8px;cursor:pointer;display:inline-block;margin:0 8px}.carousel .control-dots .dot.selected,.carousel .control-dots .dot:hover{opacity:1;filter:alpha(opacity=100)}.carousel .carousel-status{position:absolute;top:0;right:0;padding:5px;font-size:10px;text-shadow:1px 1px 1px rgba(0,0,0,0.9);color:#fff}.carousel:hover .slide .legend{opacity:1}
|
|
5
6
|
ul li {
|
|
6
7
|
padding: 0 !important;
|
|
@@ -2,25 +2,29 @@ import React from 'react'
|
|
|
2
2
|
import { Carousel } from 'react-responsive-carousel'
|
|
3
3
|
import { SliderContainer } from './ImageSlide.css'
|
|
4
4
|
|
|
5
|
-
export default function ImageSlider({options}) {
|
|
5
|
+
export default function ImageSlider({ options }) {
|
|
6
|
+
console.debug({ sliderOptions: options })
|
|
7
|
+
const { content } = options
|
|
6
8
|
return (
|
|
7
9
|
<SliderContainer>
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
10
|
+
<Carousel showThumbs={false} swipeable={true} showStatus={false} dynamicHeight={false} width="100%" showIndicators={content.length > 1 ? true : false}>
|
|
11
|
+
{options.content.map(slide => {
|
|
12
|
+
if (!slide.active) return;
|
|
13
|
+
return (
|
|
14
|
+
<div key={slide.image[0].reference} style={{ height: options.height ? parseInt(options.height) : 600 }}>
|
|
15
|
+
<img
|
|
16
|
+
src={
|
|
17
|
+
slide
|
|
18
|
+
? 'https://cdn.burobork.nl/' + slide.image[0].reference
|
|
19
|
+
: null
|
|
20
|
+
}
|
|
21
|
+
alt={slide.title}
|
|
22
|
+
style={{ height: options.height ? parseInt(options.height) : 600 }}
|
|
20
23
|
/>
|
|
21
|
-
</div>
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
24
|
+
</div>
|
|
25
|
+
)
|
|
26
|
+
})}
|
|
27
|
+
</Carousel>
|
|
28
|
+
</SliderContainer>
|
|
25
29
|
)
|
|
26
30
|
}
|