Skip to content

Commit 018d13f

Browse files
author
Carlos Bonilla
committed
v1.1
1 parent bc2de0c commit 018d13f

File tree

13 files changed

+546
-68
lines changed

13 files changed

+546
-68
lines changed

‎dist/apps.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,15 +37,15 @@
3737
<script src="mochi/js/helpers/respond.min.js"></script>
3838
<![endif]-->
3939
</head>
40-
<body data-device="ipad">
40+
<body>
4141

4242
<div id="container">
4343

4444
<div id="content">
4545

4646
<h1>Digital Sandbox Apps</h1>
4747
<hr>
48-
<p>Drop links to your HTML5-powered apps here. Format this page any way you want!</p>
48+
<p>Drop links to your apps here. Format this page any way you want!</p>
4949

5050
</div>
5151

‎dist/frontend/css/style.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/frontend/img/web/devices/apple/ipad-l.png‎

36.2 KB
Loading

‎dist/frontend/img/web/devices/apple/ipad.png‎

36.4 KB
Loading

‎dist/frontend/img/web/devices/apple/iphone6plus-l.png‎

45.3 KB
Loading

‎dist/frontend/img/web/devices/apple/iphone6plus.png‎

48.8 KB
Loading

‎dist/frontend/js/onload.js‎

Lines changed: 250 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ $(document).ready(
3939
function DigitalSandboxWrapper()
4040
{
4141
this._vars();
42+
this._toolbar();
4243
this._init();
4344
};
4445

@@ -48,9 +49,9 @@ DigitalSandboxWrapper.prototype =
4849
{
4950
this.href = window.location.href;
5051
this.url = {};
51-
this.iframe = $('#content > iframe');
52+
this.iframe = $('#inner-content > iframe');
5253

53-
if (/^([^#]+)(?:#([^#]*))?$/.test(this.href))
54+
if (/^([^\?]+)(?:\?([^\?]*))?$/.test(this.href))
5455
{
5556
this.url.dir = RegExp.$1;
5657
this.url.query = RegExp.$2;
@@ -76,6 +77,17 @@ DigitalSandboxWrapper.prototype =
7677
}
7778
},
7879

80+
_toolbar : function()
81+
{
82+
$m.extend(
83+
'toolbar',
84+
DigitalSandboxToolbar,
85+
function() {
86+
this.onload()
87+
}
88+
);
89+
},
90+
7991
_init : function()
8092
{
8193
this.iframe.attr(
@@ -109,60 +121,258 @@ DigitalSandboxApps.prototype =
109121
this.items.each(
110122
function()
111123
{
112-
$(this)
113-
.attr('target','_top')
114-
.on(
115-
'click',
116-
function(event)
117-
{
118-
var e = $(this),
119-
h = {new : e.attr('href')};
120-
121-
try
122-
{
123-
h.old = window.parent.location.href;
124+
var a = $(this),
125+
u = a.attr('href');
124126

125-
event.preventDefault();
127+
if (/^\.\/\?/.test(u))
128+
{
129+
a
130+
.attr('target','_top')
131+
.on(
132+
'click',
133+
function(event)
134+
{
135+
var e = $(this),
136+
h = {new : e.attr('href')};
126137

127-
if (window.frameElement)
138+
try
128139
{
129-
window.parent.location.replace(h.new);
140+
h.old = window.parent.location.href;
130141

131-
if (/\/$/.test(h.old))
142+
event.preventDefault();
143+
144+
if (window.frameElement)
145+
{
146+
window.parent.location.replace(h.new)
147+
}
148+
else
132149
{
133-
window.parent.location.reload(true)
150+
window.location.replace(
151+
/^(\.\/)(.+)$/.test(h.new)
152+
? (RegExp.$1 + 'index.html' + RegExp.$2)
153+
: h.new
154+
);
134155
}
135156
}
136-
else
157+
catch(Exception)
137158
{
138-
window.location.replace(
139-
/^(\.\/)(.+)$/.test(h.new)
140-
? (RegExp.$1 + 'index.html' + RegExp.$2)
141-
: h.new
142-
);
143-
}
144-
}
145-
catch(Exception)
146-
{
147-
if (!/^https?:\/\//i.test(h.new))
148-
{
149-
e.attr(
150-
'href',
151-
h.new = h.new.replace(/\?\d+/,'')
152-
);
153-
154-
if (/^(\.\/)(?:index\.html)?(#.+)$/.test(h.new))
159+
if (!/^https?:\/\//i.test(h.new))
155160
{
156161
e.attr(
157162
'href',
158-
h.new = RegExp.$1 + 'index.html?' + Math.floor(Date.now()/1000) + RegExp.$2
163+
h.new = h.new.replace(/\?\d+/,'')
159164
);
165+
166+
if (/^(\.\/)(?:index\.html)?(\?.+)$/.test(h.new))
167+
{
168+
e.attr(
169+
'href',
170+
h.new = RegExp.$1 + 'index.html?' + Math.floor(Date.now()/1000) + RegExp.$2
171+
);
172+
}
160173
}
161174
}
162175
}
163-
}
164-
);
176+
);
177+
}
165178
}
166179
);
167180
}
168181
};
182+
183+
/*
184+
[][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][]
185+
[][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][]
186+
[][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][]
187+
*/
188+
189+
function DigitalSandboxToolbar()
190+
{
191+
this._vars();
192+
this._html();
193+
};
194+
195+
DigitalSandboxToolbar.prototype =
196+
{
197+
_vars : function()
198+
{
199+
this.options = {
200+
201+
buttons : {
202+
reload : 'Refresh',
203+
device : 'Device Mode',
204+
rotate : 'Orientation',
205+
launch : 'Index',
206+
}
207+
};
208+
},
209+
210+
_html : function()
211+
{
212+
$m.container.append(
213+
'<div id="toolbar">'
214+
+ ' <div id="inner-toolbar"></div>'
215+
+ '</div>'
216+
);
217+
},
218+
219+
onload : function()
220+
{
221+
_.each(
222+
this.options.buttons,
223+
function(v,k)
224+
{
225+
$('#inner-toolbar').append(
226+
'<span data-button="'+k+'" title="'+v+'"></span>'
227+
);
228+
229+
switch (k)
230+
{
231+
case 'device':
232+
$m.extend(
233+
k,
234+
DigitalSandboxDevice,
235+
function() {
236+
this.onload()
237+
}
238+
);
239+
break;
240+
}
241+
}
242+
);
243+
244+
$m.onClick(
245+
$('#inner-toolbar').find('> [data-button]'),
246+
function() {
247+
$m.toolbar.select(this)
248+
}
249+
);
250+
},
251+
252+
select : function(button)
253+
{
254+
var b = _.isElement(button) ? $(button) : button,
255+
k = b.attr('data-button'),
256+
f = 'do'+window.s.capitalize(k);
257+
258+
this[f](b)
259+
},
260+
261+
doReload : function(b){$m.wrapper.iframe.attr('src',$m.wrapper.iframe.attr('src'))},
262+
doLaunch : function(b){$m.wrapper.iframe.attr('src','./apps.html')/*window.location.href=window.location.href.replace(/\/\?.*$/,'')*/},
263+
doDevice : function(b){$m.device.open(b)},
264+
doRotate : function(b){$m.device.rotate()}
265+
};
266+
267+
/*
268+
[][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][]
269+
[][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][]
270+
[][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][]
271+
*/
272+
273+
function DigitalSandboxDevice()
274+
{
275+
this._vars();
276+
this._html();
277+
};
278+
279+
DigitalSandboxDevice.prototype =
280+
{
281+
_vars : function()
282+
{
283+
this.options = {
284+
285+
buttons : {
286+
default : 'Default',
287+
ipad : 'iPad',
288+
iphone6plus : 'iPhone 6 Plus'
289+
},
290+
291+
container_id : 'device-menu'
292+
};
293+
},
294+
295+
_html : function()
296+
{
297+
this.container = $('#inner-toolbar [data-button="device"]').append(
298+
'<div id="'+this.options.container_id+'">'
299+
+ ' <div id="inner-'+this.options.container_id+'">'
300+
+ ' <span data-action="exit"></span>'
301+
+ ' </div>'
302+
+ '</div>'
303+
).find('#'+this.options.container_id);
304+
},
305+
306+
onload : function()
307+
{
308+
_.each(
309+
this.options.buttons,
310+
function(v,k)
311+
{
312+
var id = 'inner-'+$m.device.options.container_id;
313+
314+
$('#'+id).append(
315+
'<span data-button="'+k+'"><span>'+v+'</span></span>'
316+
);
317+
318+
switch (k)
319+
{
320+
case 'default':
321+
$('#'+id+' [data-button="'+k+'"]').addClass('selected');
322+
break;
323+
}
324+
}
325+
);
326+
327+
$m.onClick(
328+
$('#inner-'+this.options.container_id).find('[data-button]'),
329+
function() {
330+
$m.device.select(this)
331+
}
332+
);
333+
334+
$m.onClick(
335+
$('#inner-'+this.options.container_id).find('[data-action]'),
336+
function() {
337+
$m.device.action(this)
338+
}
339+
);
340+
},
341+
342+
select : function(button)
343+
{
344+
var b = _.isElement(button) ? $(button) : button,
345+
k = b.attr('data-button'),
346+
f = 'do_'+k,
347+
s = b.hasClass('selected');
348+
349+
if (!s)
350+
{
351+
$('#inner-'+this.options.container_id+' [data-button="'+k+'"]').addClass('selected');
352+
$('#inner-'+this.options.container_id+' :not([data-button="'+k+'"])').removeClass('selected');
353+
$m.body.attr('data-device',k);
354+
}
355+
},
356+
357+
action : function(button)
358+
{
359+
var b = _.isElement(button) ? $(button) : button,
360+
k = b.attr('data-action'),
361+
f = k;
362+
363+
this[f]()
364+
},
365+
366+
rotate : function()
367+
{
368+
var a = 'data-orientation',
369+
o = $m.body.attr(a),
370+
v = !o ? 'l' : (o == 'l' ? 'p' : 'l');
371+
372+
$m.body.attr(a,v)
373+
},
374+
375+
open : function(){if(!this.container.hasClass('open'))this.container.addClass('open')},
376+
close : function(){this.container.removeClass('open')},
377+
exit : function(){setTimeout(function(){$m.device.close()},50)}
378+
};

0 commit comments

Comments
 (0)