stagehacks/Cue-View
1
0
Fork 0
mirror of https://github.com/stagehacks/Cue-View.git synced 2026-08-06 06:13:40 +00:00
Code Issues Packages Projects Releases 9 Wiki Activity

Update view.js

Browse Source
This commit is contained in:
sparks-alec
2022-02-06 23:16:04 -05:00
parent e08a4f71dd
commit c703609829
1 changed files with 20 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/view.js
+20 -6
View File
@@ -23,7 +23,7 @@ drawDeviceFrame = function (id) {
d = DEVICE.all[id];
let str = '<html><head>';
str += "<link href='./plugins/" +d.type +'/' +d.type +".css' rel='stylesheet' type='text/css'>";
str += "<link href='./plugins/" +d.type +"/styles.css' rel='stylesheet' type='text/css'>";
// scrollbar styles are inline to prevent the styles flickering in
str += '<style>';
@@ -39,11 +39,16 @@ drawDeviceFrame = function (id) {
str += generateBodyHTML(d);
// str += "<script src='node_modules/lodash/core.min.js'></script>";
// str += "<script src='./plugins/" +d.type +"/update.js'></script>";
str += '</body></html>';
$deviceDrawArea.setAttribute('class', `${d.type} draw-area`);
$deviceDrawArea.contentWindow.document.open();
$deviceDrawArea.contentWindow.document.write(str);
$deviceDrawArea.contentWindow.document.close();
if (d.pinIndex) {
$devicePinned.style.display = 'block';
@@ -51,6 +56,8 @@ drawDeviceFrame = function (id) {
$devicePinned.style.display = 'none';
}
};
generateBodyHTML = function(d){
@@ -83,19 +90,26 @@ generateBodyHTML = function(d){
module.exports.draw = function (device) {
let $deviceDrawArea = document.getElementById(`device-${device.id}-draw-area`);
let $deviceDrawArea = document.getElementById(`device-${device.id}-draw-area`).contentWindow.document;
if($deviceDrawArea){
$deviceDrawArea.contentDocument.body.innerHTML = generateBodyHTML(device);
const scriptEl = $deviceDrawArea.createRange().createContextualFragment(generateBodyHTML(device));
$deviceDrawArea.body.replaceChildren(scriptEl);
}else{
drawDeviceFrame(device.id);
}
device.drawn = true;
};
module.exports.update = function(device, type, data){
let $iframe = document.getElementById(`device-${device.id}-draw-area`);
$iframe.contentWindow.updateElement(type, data);
let doc = document.getElementById(`device-${device.id}-draw-area`).contentWindow.document;
PLUGINS.all[device.type].update(device, doc, type, data);
}
module.exports.addDeviceToList = function (device) {
@@ -167,7 +181,7 @@ switchDevice = function (id) {
var $deviceWrapper = document.getElementById('device-' + i);
if (!$deviceWrapper) {
var html = `<div class="col device-wrapper" id="device-${i}"><img id="device-${i}-pinned" class="device-pin" src="src/img/outline_push_pin_white_18dp.png"><iframe id="device-${i}-draw-area" class="draw-area"></iframe><div id="device-${i}-settings"></div></div>`;
var html = `<div class="col device-wrapper" id="device-${i}"><img id="device-${i}-pinned" class="device-pin" src="src/img/outline_push_pin_white_18dp.png"><iframe id="device-${i}-draw-area" class="draw-area"></iframe></div>`;
document
.getElementById('all-devices')
.insertAdjacentHTML('afterbegin', html);