oolib 2.134.4 → 2.134.5
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/dist/components/IFrameInput/comps/Embed.js +13 -4
- package/dist/components/IFrameInput/styled.d.ts +1 -1
- package/dist/components/IFrameInput/styled.js +7 -4
- package/dist/components/IFrameInput/utils/filters.d.ts +1 -0
- package/dist/components/IFrameInput/utils/filters.js +12 -3
- package/package.json +1 -1
|
@@ -31,15 +31,24 @@ var mixins_1 = require("../../../themes/mixins");
|
|
|
31
31
|
var embadableUrl_1 = require("../utils/embadableUrl");
|
|
32
32
|
var _EXPORTS_1 = require("../../../utils/_EXPORTS");
|
|
33
33
|
var styled_components_1 = require("styled-components");
|
|
34
|
+
var filters_1 = require("../utils/filters");
|
|
34
35
|
var Embed = function (_a) {
|
|
35
36
|
var isBlock = _a.isBlock, readOnly = _a.readOnly, value = _a.value, isValidURL = _a.isValidURL, onChange = _a.onChange;
|
|
37
|
+
var _b = (0, react_1.useState)(value ? (0, filters_1.extractHeight)(value) : "450px"), height = _b[0], setHeight = _b[1];
|
|
36
38
|
var theme = (0, styled_components_1.useTheme)();
|
|
37
|
-
|
|
38
|
-
|
|
39
|
+
// const { user } = theme?.useGetQueryData('userData') || {};
|
|
40
|
+
// const screenWidth = useScreenWidth()
|
|
39
41
|
var embedRef = (0, react_1.useRef)(null);
|
|
40
|
-
|
|
42
|
+
var handleOnLoad = function () {
|
|
43
|
+
var _a;
|
|
44
|
+
setHeight((_a = (0, filters_1.extractHeight)(value)) === null || _a === void 0 ? void 0 : _a.replace(/[^\d.]/g, '')); // strip any special charachter like curly quotes, set height as a number
|
|
45
|
+
};
|
|
46
|
+
(0, react_1.useEffect)(function () {
|
|
47
|
+
handleOnLoad();
|
|
48
|
+
}, [onChange]);
|
|
49
|
+
return (react_1.default.createElement(styled_1.StyledEmbedPreview, { readOnly: readOnly, attrHeight: Number(height) },
|
|
41
50
|
react_1.default.createElement(styled_1.StyledEmbedWrapper, null,
|
|
42
51
|
react_1.default.createElement(styled_1.StyledEmbed // styled iFrame element
|
|
43
|
-
, { src: (0, embadableUrl_1.embadableURL)(value, isValidURL), ref: isBlock && embedRef, width: "100%", height: "100%", allowFullScreen: true, mozallowfullscreen: true, webkitallowfullscreen: true, style: { border: 0 } }))));
|
|
52
|
+
, { src: (0, embadableUrl_1.embadableURL)(value, isValidURL), ref: isBlock && embedRef, onLoad: handleOnLoad, width: "100%", height: "100%", allowFullScreen: true, mozallowfullscreen: true, webkitallowfullscreen: true, style: { border: 0 } }))));
|
|
44
53
|
};
|
|
45
54
|
exports.Embed = Embed;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export const
|
|
1
|
+
export const StyledEmbedPreview: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
2
2
|
export const StyledEmbedWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
3
3
|
export const StyledEmbed: import("styled-components").StyledComponent<"iframe", any, {}, never>;
|
|
4
4
|
export const StyledPunchViewerContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
@@ -7,15 +7,18 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
7
7
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
8
8
|
};
|
|
9
9
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
10
|
-
exports.StyledPunchViewerContainer = exports.StyledEmbed = exports.StyledEmbedWrapper = exports.
|
|
10
|
+
exports.StyledPunchViewerContainer = exports.StyledEmbed = exports.StyledEmbedWrapper = exports.StyledEmbedPreview = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
var themes_1 = require("../../themes");
|
|
13
13
|
var white = themes_1.colors.white;
|
|
14
|
-
exports.
|
|
14
|
+
exports.StyledEmbedPreview = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n /* padding-top: 2rem; */\n padding-top: ", ";\n height: ", ";\n"], ["\n display: flex;\n /* padding-top: 2rem; */\n padding-top: ", ";\n height: ", ";\n"])), function (_a) {
|
|
15
15
|
var readOnly = _a.readOnly;
|
|
16
16
|
return !readOnly && "2rem";
|
|
17
|
+
}, function (_a) {
|
|
18
|
+
var attrHeight = _a.attrHeight;
|
|
19
|
+
return attrHeight ? "".concat(attrHeight, "px") : 'auto';
|
|
17
20
|
});
|
|
18
|
-
exports.StyledEmbedWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: relative;\n padding-top: 62%;\n height:
|
|
19
|
-
exports.StyledEmbed = styled_components_1.default.iframe(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100
|
|
21
|
+
exports.StyledEmbedWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: relative;\n padding-top: 62%;\n height: inherit;\n width: 100%;\n"], ["\n position: relative;\n padding-top: 62%;\n height: inherit;\n width: 100%;\n"])));
|
|
22
|
+
exports.StyledEmbed = styled_components_1.default.iframe(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n position: absolute;\n top: 0;\n left: 0;\n height: inherit;\n width: 100%;\n /* height: 100%; */\n"], ["\n position: absolute;\n top: 0;\n left: 0;\n height: inherit;\n width: 100%;\n /* height: 100%; */\n"])));
|
|
20
23
|
exports.StyledPunchViewerContainer = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), white);
|
|
21
24
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.filterIFrameURL = exports.filterPPTURL = void 0;
|
|
3
|
+
exports.extractHeight = exports.filterIFrameURL = exports.filterPPTURL = void 0;
|
|
4
4
|
function filterPPTURL(address) {
|
|
5
5
|
if (address) {
|
|
6
6
|
if (address.search('google') > -1) {
|
|
@@ -14,9 +14,18 @@ function filterPPTURL(address) {
|
|
|
14
14
|
}
|
|
15
15
|
exports.filterPPTURL = filterPPTURL;
|
|
16
16
|
function filterIFrameURL(address) {
|
|
17
|
+
var _a;
|
|
17
18
|
var tempElement = document.createElement('div');
|
|
18
19
|
tempElement.innerHTML = address;
|
|
19
|
-
var srcValue = tempElement.querySelector('iframe').getAttribute('src');
|
|
20
|
-
return srcValue;
|
|
20
|
+
var srcValue = (_a = tempElement.querySelector('iframe')) === null || _a === void 0 ? void 0 : _a.getAttribute('src');
|
|
21
|
+
return srcValue.replace(/“|”/g, ''); // remove any curly quotes from src if there are any
|
|
21
22
|
}
|
|
22
23
|
exports.filterIFrameURL = filterIFrameURL;
|
|
24
|
+
function extractHeight(address) {
|
|
25
|
+
var _a;
|
|
26
|
+
var tempElement = document.createElement('div');
|
|
27
|
+
tempElement.innerHTML = address;
|
|
28
|
+
var heightValue = (_a = tempElement.querySelector('iframe')) === null || _a === void 0 ? void 0 : _a.getAttribute('height');
|
|
29
|
+
return heightValue;
|
|
30
|
+
}
|
|
31
|
+
exports.extractHeight = extractHeight;
|