-
Notifications
You must be signed in to change notification settings - Fork 0
/
viewModel.js
107 lines (86 loc) · 4.47 KB
/
viewModel.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
/**
Copyright (c) 2015, 2017, Oracle and/or its affiliates.
The Universal Permissive License (UPL), Version 1.0
*/
define(
['ojs/ojcore', 'knockout', 'jquery'],
function (oj, ko, $) {
'use strict';
function iframeComponentModel(context) {
var self = this;
self.composite = context.element;
self.source = ko.observable();
// listen for the renderIframe event
self.addListener = function () {
document.addEventListener('renderIframe', self.render);
};
// method to redraw the iFrame
self.render = function (e) {
// console.log("data into render event === " + e.detail);
// prepare the code
const newCode = self.prepareSource(e.detail);
// get a hook to the iFrame in the view
var iframe = document.querySelector('#output'),
// Setup iFrame structure
iframe_doc2 = iframe.contentDocument;
// Write to iFrame
iframe_doc2.open();
iframe_doc2.write(newCode);
iframe_doc2.close();
}
self.prepareSource = function (sourceCode) {
var src = '';
// Insert values into src template
// HTML
src = self.base_tpl.replace('</body>', sourceCode.html + '</body>');
//console.log(src);
// var scrp = "<script type='text/javascript' src='http://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.2/require.min.js' />\n\t\t" +
// "<link href='http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css' rel='stylesheet' />\n\t\t" +
// "<link href='http://static.oracle.com/cdn/jet/v4.0.0/default/css/alta/oj-alta-min.css rel='stylesheet' />\n\t\t"
// CSS
var css = '<style>' + sourceCode.css + '</style>';
src = src.replace('</head>', css + '</head>');
var js = '<script>'+sourceCode.js+'</script>';
src = src.replace('</body>', js + '</body>');
// console.log(src);
// Libs css
var libs = '<link href="//static.oracle.com/cdn/jet/v4.0.0/default/css/alta/oj-alta-min.css" rel="stylesheet"></link>';
src = src.replace('</head>', libs + '</head>');
//console.log(src);
// libs js
var libsJS = '<script src="http://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.2/require.min.js" type="text/javascript"></script>';
src = src.replace('</head>', libsJS + '</head>');
// this is the data for the component
src = src.replace('</body>','<script>'+sourceCode.data+'</script>' + '</body>')
// return prepared src with textarea values inserted
return src;
}
//{'knockout':'https://static.oracle.com/cdn/jet/v4.0.0/3rdparty/knockout/knockout-3.4.0','jquery':'https://static.oracle.com/cdn/jet/v4.0.0/3rdparty/jquery/jquery-3.1.1.min','jqueryui-amd':'https://static.oracle.com/cdn/jet/v4.0.0/3rdparty/jquery/jqueryui-amd-1.12.0.min','promise':'https://static.oracle.com/cdn/jet/v4.0.0/3rdparty/es6-promise/es6-promise.min','ojs':'https://static.oracle.com/cdn/jet/v4.0.0/default/js/debug','ojL10n':'https://static.oracle.com/cdn/jet/v4.0.0/default/js/ojL10n','ojtranslations':'https://static.oracle.com/cdn/jet/v4.0.0/default/js/resources','signals':'https://static.oracle.com/cdn/jet/v4.0.0/3rdparty/js-signals/signals.min','text':'https://static.oracle.com/cdn/jet/v4.0.0/3rdparty/require/text','hammerjs':'https://static.oracle.com/cdn/jet/v4.0.0/3rdparty/hammer/hammer-2.0.8.min','ojdnd':'https://static.oracle.com/cdn/jet/v4.0.0/3rdparty/dnd-polyfill/dnd-polyfill-1.0.0.min','customElements':'https://static.oracle.com/cdn/jet/v4.0.0/3rdparty/webcomponents/custom-elements.min'}
// Base template - need to copy the base jet setup
self.base_tpl =
"<!doctype html>\n" +
"<html>\n\t" +
"<head>\n\t\t" +
"<meta charset=\"utf-8\">\n\t\t" +
"<title>Test Title</title>\n\n\t\t\n\t" +
"</head>\n\t" +
"<body>\n\t\n\t" +
"</body>\n" +
"</html>";
self.cdnSetup = "";
self.attached = function (context) {
self.addListener();
}
context.props.then(function (propertyMap) {
self.properties = propertyMap;
console.log("props === " + self.properties.source)
if (self.properties.width) {
self.composite.width = self.properties.width;
}
if (self.properties.height) {
self.composite.height = self.properties.height;
}
});
};
return iframeComponentModel;
});