/trunk/dist/was.wm.js |
@@ -0,0 +1,257 @@ |
/*! was.wm.js - v1.0.1 - 2018-01-24 |
* http://grimore.org |
* Copyright (c) 2018 Wizardry and Steamworks <office@grimore.org>; Licensed GPL-3.0 */ |
// Load the window manager desktop icons. |
function loadWindowManagerIcons(path) { |
// Search and load all nucleons. |
$.get(path, function(nucleons) { |
var ix = 0, iy = 0; |
var states = {}; |
var cookie = Cookies.get('window-manager-icons'); |
if(cookie) { |
states = JSON.parse(cookie); |
} |
$.each(nucleons, function(index, file) { |
// Skip files starting with full stop (POSIX). |
if (/^\./.test(file)) { |
return; |
} |
$.get(path + '/' + file, function(data) { |
data = $(data).get(0); |
var nucleon = data.getAttribute('data-target'); |
|
if(typeof states[nucleon] !== 'undefined') { |
var sx = states[nucleon].x, |
sy = states[nucleon].y; |
|
data.style.webkitTransform = |
data.style.transform = |
'translate(' + sx + 'px, ' + sy + 'px)'; |
|
// Update the position attributes |
data.setAttribute('data-x', sx); |
data.setAttribute('data-y', sy); |
|
$('#window-manager-desktop').append(data); |
return; |
} |
|
// Translate the desktop icons so they do not overlap. |
data.style.webkitTransform = |
data.style.transform = |
'translate(' + ix + 'px, ' + iy + 'px)'; |
|
// Update the position attributes |
data.setAttribute('data-x', ix); |
data.setAttribute('data-y', iy); |
|
$('#window-manager-desktop').append(data); |
// Translate by the desktop icon size. |
ix += 64; |
}); |
}); |
}); |
} |
|
// Open a window manager window. |
function openWindowManagerWindow(nucleon) { |
// If the nucleon already exists, then do not append the content again. |
if($('#' + nucleon).length) { |
return; |
} |
|
// Store the icon. |
var nucleon_icon = $('#' + nucleon + '-window-manager-button-icon').attr('src'); |
|
// Change the nucleon icon to a loading icon. |
$('#' + nucleon + '-window-manager-button-icon').attr('src', '/img/loader.gif'); |
|
// Disable button for successive clicks. |
$('#' + nucleon + '-window-manager-button').prop('disabled', true); |
|
// Load the nucleon. |
$.get('/' + nucleon + '/index.html', function(data) { |
// Get the DOM object. |
data = $(data).get(0); |
|
// Select all new scripts that have to be inserted into the DOM. |
var nucleonScripts = []; |
$(data).find('script').each(function() { |
var src = $(this).attr('src'); |
if(src === undefined) { |
return; |
} |
nucleonScripts[src] = $(this); |
}); |
// Remove scripts from the nucleon if they are already added to the DOM. |
$(document).find('script').each(function() { |
var src = $(this).attr('src'); |
if(nucleonScripts[src] === undefined) { |
return; |
} |
nucleonScripts[src].remove(); |
}); |
|
// Restore windows to their saved position. |
var cookie = Cookies.get('window-manager-windows'); |
if(cookie) { |
var states = JSON.parse(cookie); |
if(typeof states[nucleon] !== 'undefined') { |
var x = states[nucleon].x, |
y = states[nucleon].y, |
wm = $(data).find('.window-manager-window').get(0); |
|
wm.style.webkitTransform = |
wm.style.transform = |
'translate(' + x + 'px, ' + y + 'px)'; |
|
// Update the position attributes |
wm.setAttribute('data-x', x); |
wm.setAttribute('data-y', y); |
} |
} |
$(data).hide().appendTo('#window-manager-desktop').fadeIn(750); |
}).done(function(data) { |
// Change the nucleon icon back. |
$('#' + nucleon + '-window-manager-button-icon').attr('src', nucleon_icon); |
// Enable the button. |
$('#' + nucleon + '-window-manager-button').prop('disabled', false); |
}); |
} |
|
// Retrieve the top-most window manager window z-index. |
function getTopWindowIndex() { |
return Math.max.apply(null, |
$.map($('.window-manager-window'), function(e, n) { |
if ($(e).css('position') !== 'static') { |
return parseInt($(e).css('z-index')) || 1; |
} |
}) |
); |
} |
|
// Draggable and moveable windows. |
$(document).ready(() => { |
function dragMoveListener (event) { |
var target = event.target, states, cookie, |
// keep the dragged position in the data-x/data-y attributes |
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx, |
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy; |
|
// translate the element |
target.style.webkitTransform = |
target.style.transform = |
'translate(' + x + 'px, ' + y + 'px)'; |
|
// update the position attributes |
target.setAttribute('data-x', x); |
target.setAttribute('data-y', y); |
|
if(target.classList.contains('window-manager-window')) { |
// Save the window position. |
states = {}; |
cookie = Cookies.get('window-manager-windows'); |
if(cookie) { |
states = JSON.parse(cookie); |
} |
|
states[$(event.target).data('target')] = { |
x: x, |
y: y |
}; |
|
Cookies.set('window-manager-windows', states, { path: '' }); |
} |
|
if(target.classList.contains('window-manager-icon')) { |
// Save the icon position. |
states = {}; |
cookie = Cookies.get('window-manager-icons'); |
if(cookie) { |
states = JSON.parse(cookie); |
} |
|
states[$(event.target).data('target')] = { |
x: x, |
y: y |
}; |
|
Cookies.set('window-manager-icons', states, { path: '' }); |
} |
} |
|
// Window manager windows. |
interact('.window-manager-window') |
.draggable({ |
// enable inertial throwing |
inertia: true, |
// keep the element within the area of it's parent |
restrict: { |
restriction: $('#window-manager-desktop').get(0), |
endOnly: true, |
elementRect: { top: 0, left: 0, bottom: 1, right: 1 } |
}, |
|
// enable autoScroll |
autoScroll: true, |
|
onmove: dragMoveListener, |
onend: function (event) { |
event.target.style.opacity = 1; |
}, |
onstart: function(event) { |
// Move windows to top on drag. |
event.target.style.zIndex = getTopWindowIndex() + 1; |
event.target.style.opacity = 0.5; |
} |
}) |
.allowFrom('.panel-heading'); |
|
// Window manager icons. |
interact('.window-manager-icon') |
.draggable({ |
// enable inertial throwing |
inertia: false, |
// keep the element within the area of it's parent |
restrict: { |
restriction: $('#window-manager-desktop').get(0), |
endOnly: true, |
elementRect: { top: 0, left: 0, bottom: 1, right: 1 } |
}, |
snap: { |
targets: [ |
interact.createSnapGrid({ x: 64, y: 64 }) |
], |
range: Infinity, |
relativePoints: [ { x: 0, y: 0 } ] |
}, |
// enable autoScroll |
autoScroll: true, |
|
onmove: dragMoveListener, |
onend: function (event) { |
event.target.style.opacity = 1; |
}, |
onstart: function(event) { |
event.target.style.opacity = 0.5; |
} |
}); |
|
// Closing windows. |
$(document).on('click', '.window-manager-close-button', function(event) { |
var wm = $('#' + $(this).data('target')); |
wm.fadeOut(750, function() { |
wm.remove(); |
}); |
}); |
|
// Windows clicking brings to front. |
$(document).on('click', '.window-manager-window', function(event) { |
$(event.target) |
.closest('.window-manager-window') |
.css('z-index', getTopWindowIndex() + 1); |
}); |
|
// this is used later in the resizing and gesture demos |
window.dragMoveListener = dragMoveListener; |
}); |
/trunk/dist/was.wm.min.js |
@@ -0,0 +1,5 @@ |
/*! was.wm.js - v1.0.1 - 2018-01-24 |
* http://grimore.org |
* Copyright (c) 2018 Wizardry and Steamworks <office@grimore.org>; Licensed GPL-3.0 */ |
|
function loadWindowManagerIcons(t){$.get(t,function(n){var e=0,a={},o=Cookies.get("window-manager-icons");o&&(a=JSON.parse(o)),$.each(n,function(n,o){/^\./.test(o)||$.get(t+"/"+o,function(t){var n=(t=$(t).get(0)).getAttribute("data-target");if(void 0!==a[n]){var o=a[n].x,i=a[n].y;return t.style.webkitTransform=t.style.transform="translate("+o+"px, "+i+"px)",t.setAttribute("data-x",o),t.setAttribute("data-y",i),void $("#window-manager-desktop").append(t)}t.style.webkitTransform=t.style.transform="translate("+e+"px, 0px)",t.setAttribute("data-x",e),t.setAttribute("data-y",0),$("#window-manager-desktop").append(t),e+=64})})})}function openWindowManagerWindow(t){if(!$("#"+t).length){var n=$("#"+t+"-window-manager-button-icon").attr("src");$("#"+t+"-window-manager-button-icon").attr("src","/img/loader.gif"),$("#"+t+"-window-manager-button").prop("disabled",!0),$.get("/"+t+"/index.html",function(n){n=$(n).get(0);var e=[];$(n).find("script").each(function(){var t=$(this).attr("src");void 0!==t&&(e[t]=$(this))}),$(document).find("script").each(function(){var t=$(this).attr("src");void 0!==e[t]&&e[t].remove()});var a=Cookies.get("window-manager-windows");if(a){var o=JSON.parse(a);if(void 0!==o[t]){var i=o[t].x,r=o[t].y,d=$(n).find(".window-manager-window").get(0);d.style.webkitTransform=d.style.transform="translate("+i+"px, "+r+"px)",d.setAttribute("data-x",i),d.setAttribute("data-y",r)}}$(n).hide().appendTo("#window-manager-desktop").fadeIn(750)}).done(function(e){$("#"+t+"-window-manager-button-icon").attr("src",n),$("#"+t+"-window-manager-button").prop("disabled",!1)})}}function getTopWindowIndex(){return Math.max.apply(null,$.map($(".window-manager-window"),function(t,n){if("static"!==$(t).css("position"))return parseInt($(t).css("z-index"))||1}))}$(document).ready(()=>{function t(t){var n,e,a=t.target,o=(parseFloat(a.getAttribute("data-x"))||0)+t.dx,i=(parseFloat(a.getAttribute("data-y"))||0)+t.dy;a.style.webkitTransform=a.style.transform="translate("+o+"px, "+i+"px)",a.setAttribute("data-x",o),a.setAttribute("data-y",i),a.classList.contains("window-manager-window")&&(n={},(e=Cookies.get("window-manager-windows"))&&(n=JSON.parse(e)),n[$(t.target).data("target")]={x:o,y:i},Cookies.set("window-manager-windows",n,{path:""})),a.classList.contains("window-manager-icon")&&(n={},(e=Cookies.get("window-manager-icons"))&&(n=JSON.parse(e)),n[$(t.target).data("target")]={x:o,y:i},Cookies.set("window-manager-icons",n,{path:""}))}interact(".window-manager-window").draggable({inertia:!0,restrict:{restriction:$("#window-manager-desktop").get(0),endOnly:!0,elementRect:{top:0,left:0,bottom:1,right:1}},autoScroll:!0,onmove:t,onend:function(t){t.target.style.opacity=1},onstart:function(t){t.target.style.zIndex=getTopWindowIndex()+1,t.target.style.opacity=.5}}).allowFrom(".panel-heading"),interact(".window-manager-icon").draggable({inertia:!1,restrict:{restriction:$("#window-manager-desktop").get(0),endOnly:!0,elementRect:{top:0,left:0,bottom:1,right:1}},snap:{targets:[interact.createSnapGrid({x:64,y:64})],range:1/0,relativePoints:[{x:0,y:0}]},autoScroll:!0,onmove:t,onend:function(t){t.target.style.opacity=1},onstart:function(t){t.target.style.opacity=.5}}),$(document).on("click",".window-manager-close-button",function(t){var n=$("#"+$(this).data("target"));n.fadeOut(750,function(){n.remove()})}),$(document).on("click",".window-manager-window",function(t){$(t.target).closest(".window-manager-window").css("z-index",getTopWindowIndex()+1)}),window.dragMoveListener=t}); |