-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtemplate.html
267 lines (209 loc) · 10.2 KB
/
template.html
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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
<html lang="en">
<!--
swiss-html - A Simple Web-browser Split Screen
https://github.com/brunobraga/swiss-html
Copyright (c) Bruno Braga and individual contributors.
All rights reserved.
Redistribution and use in source and binary forms, with or without modification,
are permitted provided that the following conditions are met:
1. Redistributions of source code must retain the above copyright notice,
this list of conditions and the following disclaimer.
2. Redistributions in binary form must reproduce the above copyright
notice, this list of conditions and the following disclaimer in the
documentation and/or other materials provided with the distribution.
3. Neither the name of Django nor the names of its contributors may be used
to endorse or promote products derived from this software without
specific prior written permission.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR
ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON
ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
-->
<head>
<script type="text/javascript">
/*
The page title that is displayed by the web browser.
@type {string}
*/
var TITLE = 'Simple Web-browser Split Screen';
/*
The number of columns for the split screen.
Note: The total number of cells in the split screen matrix (frameset) is defined by `ROWS` x `COLUMNS`. So keep in mind:
- value should be an integer number higher than 0 (zero)
- the larger the number, the smaller the space available to load a page (some sites will be responsive to space,
which might change the expected experience - if you need this, consider changing the browser **zoom** settings)
@type {number}
@seealso `ROWS`
*/
var COLUMNS = 2;
/*
The number of rows for the split screen.
Note: The total number of cells in the split screen matrix (frameset) is defined by `ROWS` x `COLUMNS`.
- value should be an integer number higher than 0 (zero)
- the larger the number, the smaller the space available to load a page (some sites will be responsive to space,
which might change the expected experience - if you need this, consider changing the browser **zoom** settings)
@type {number}
@seealso `COLUMNS`
*/
var ROWS = 2;
/*
The main dataset used to load the frames on screen in a split screen style.
@property {string} url
the URL address to point a particular frame to.
Note: watch out for browser security settings, such as X-Frame-Options,
or loading issues with the server, which impact the frame output
@property {number} refresh
determines the rate of refresh, in seconds, forced by this page.
Use zero (0) for no refresh.
@property {number} frame
determines the frame number to which you want the URL to be always displayed on.
Note: You can only set a single fixed frame in this dataset.
Use negative one (-1) to ignore fixing the URL to any particular frame.
In this case, if a frame has no fixed URL, it will randomly select any of '-1' available.
If you combine the REFRESH property with this, you will get an experience that every X seconds
the website may be a different one (random).
Frame position numbers are described below (R - rows, C - columns):
|-----------|-----------|------------|---------------|
| 0*R+0 | 1*R+0 | ..*R+0 | (C-1)*R+0 |
| 0*R+1 | 1*R+1 | ..*R+1 | (C-1)*R+1 |
| 0*R+.. | 1*R+.. | ..*R+.. | (C-1)*R+.. |
| 0*R+(R-1) | 1*R+(R-1) | ..*R+(R-1) | (C-1)*R+(R-1) |
|-----------|-----------|------------|---------------|
See the function `checkFrameSetup` for a representation of this output based on your specified settings.
@type {Array.{}}
*/
var DATASET = [
{
'url': 'https://www.bing.com',
'refresh': 0, /* refresh rate in seconds (zero means to remain static) */
'frame': -1 /* '-1' means this URL will be randomly selected to load on a frame without any fixed URLs. You can add as many URLs without frames as you like. */
},
{
'url': 'https://www.ubuntu.com',
'refresh': 0, /* refresh rate in seconds (zero means to remain static) */
'frame': -1 /* '-1' means this URL will be randomly selected to load on a frame without any fixed URLs. You can add as many URLs without frames as you like. */
},
{
'url': 'https://www.linux.com',
'refresh': 0, /* refresh rate in seconds (zero means to remain static) */
'frame': 0 /* Fixes this URL to the frame[0] */
},
];
/*
===========================================================================
MAIN CODE - DO NOT CHANGE ANYTHING HERE (unless you know what you are doing)
===========================================================================
*/
/*
Outputs the structure of the frames (number positions) to help desgin the dataset used to load URLs.
The numbers start with zero (e.g. 10 columns mean numbers from 0-9.)
Note: This relies on the global vars `COLUMNS` and `ROWS`.
@return undefined Outputs to Console (use your browser Dev tools)
*/
function checkFrameSetup() {
var t={};
for(var r = 0; r < ROWS; r++) {
var l = {};
for(var c = 0; c < COLUMNS; c++) {
l['Col ' + (c + 1)] = c * ROWS + r;
}
t['Row ' + (r + 1)] = l;
}
console.table(t);
}
/*
Loads a specified frame with a specific URL, which can be derived from two scenarios:
(a) The frame and URL are specified in the `DATASET` object, with a specific frame number set in the `frame` property; or
(b) If URLs with no specific frame number are available (i.e. `frame` property is set to `-1` value), a random one will be selected.
Once a URL is selected, it will load in the specific frame position, and setup the refresh rate if specified in the property `refresh`.
@param {number} the frame number to be loaded with a specific URL
@return undefined
@seealso `DATASET` object and documentation.
*/
function loadFrame(frameId) {
var page;
// check for a fixed page for the current frame
var fixedPages = DATASET.filter(a => a.frame == frameId);
if (fixedPages.length > 1)
throw 'Error with pages object. the [frame] property must be unique, if set. Use -1 instead if you do not want to fix it.';
if (fixedPages.length == 0) {
// no fixed URLs found, just randomise the available URLs
// select any non fixed URLs
var nonFixedPages = DATASET.filter(a => a.frame == -1);
// randomly pick one available
var chosen = Math.floor((Math.random() * nonFixedPages.length));
page = nonFixedPages[chosen];
}
else {
// there is a fixed page for this frame so use it
page = fixedPages[0];
}
// Validate
if (page == undefined) {
console.warn('No details provided for frame [' + frameId + '], and no dynamic links available. Ignoring... :-(');
return;
}
if (page.url == undefined) {
console.warn('No URL provided to frame [' + frameId + ']. Ignoring...');
return;
}
// load the frame
console.log('Loading frame [' + frameId + '] with URL [' + page.url + '].');
top.frames[frameId].location.href= page.url;
if (!top.frames[frameId].location)
console.error('This URL [' + page.url + '] does not allow cross-site/domain frame loading (see X-Frame-Options Error).');
// schedule the next refresh, if applicable
if (page.refresh > 0) {
console.log('Scheduling frame [' + frameId + '] in [' + page.refresh + '] seconds.')
setTimeout(function(){
loadFrame(frameId);
}, page.refresh * 1000);
}
}
/*
Starting point of the application. This will:
- build the frames under the <HEAD> tag of the page's HTML
- call the `loadFrame` function for each cell in the frameset
@return undefined
@seealso `loadFrame` object and documentation.
*/
function init() {
// Rename page Title
document.title = TITLE;
// helper function to build the required frameset sizing structure
var _star = function(size) {
var temp = [];
for(var i = 0; i < size; i++) temp.push('*');
return temp.join(',');
}
// create the main frameset
var f = document.getElementsByTagName('html')[0].appendChild(document.createElement('frameset'));
f.cols = _star(COLUMNS);
f.framespacing = '0';
f.border = '1';
if (ROWS > 1 || COLUMNS > 1) f.border = '3';
// create the underlying frames based on specified rows and columns
for(var i = 0; i < COLUMNS; i++) {
var col = f.appendChild(document.createElement('frameset'));
col.rows = _star(ROWS);
for(var j = 0; j < ROWS; j++) {
var row = col.appendChild(document.createElement('frame'));
row.id = i + '-' + j;
}
}
// call the frame loading for each on of the cells in the split screen matrix.
for(var i = 0; i < ROWS * COLUMNS; i++) loadFrame(i);
}
// Application starts here
init();
</script>
<meta charset="UTF-8">
<title></title>
</head>
</html>