Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Tree: 63d2a3353f
Fetching contributors…

Cannot retrieve contributors at this time

346 lines (300 sloc) 10.05 kB
<!doctype html>
<html>
<head>
<title>Desktop</title>
<style>
body {
position: absolute;
bottom: 0;
height: 100%;
width: 100%;
background-image: url('images/code.jpg');
background-size: 100%;
padding: 0;
margin: 0;
box-shadow: inset 0px 0px 10px #000000;
}
#configure {
position: absolute;
top: 0;
right: 0;
color: white;
font-family: Arial;
font-weight: bold;
text-shadow: 0px 0px 1px black;
opacity: 0.3;
padding: 5px;
background-color: #000;
border:none;
cursor: pointer;
-webkit-transition: all 0.2s ease-in-out;
}
#configure:hover {
opacity: 1;
}
#apps {
position: absolute;
right: 0;
bottom: 0;
top: 0;
margin: 2em 0;
border-top: 2px white solid;
border-left: 2px white solid;
border-bottom: 2px white solid;
background-color: rgba(0,0,0,0.3);
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
-webkit-transition: all 0.2s ease-in-out;
}
#actions {
position: absolute;
left: 0;
margin: 2em 0;
border-top: 2px white solid;
border-right: 2px white solid;
border-bottom: 2px white solid;
background-color: rgba(0,0,0,0.3);
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
-webkit-transition: all 0.2s ease-in-out;
}
#actions h2, #apps h2 {
color: white;
font-family: Arial;
text-align: center;
text-shadow: 0px 0px 2px black;
}
#actions.show, #actions:hover {
background-color: rgba(0,0,0,0.6);
border-top: 2px white solid;
border-right: 2px white solid;
border-bottom: 2px white solid;
box-shadow: 0px 0px 10px #000;
}
#apps:hover {
background-color: rgba(0,0,0,0.6);
border-top: 2px white solid;
border-left: 2px white solid;
border-bottom: 2px white solid;
box-shadow: 0px 0px 10px #000;
}
#actions button {
width: 128px;
height: 128px;
padding: 10px;
margin: 10px;
display: block;
background-color: transparent;
border: none;
color: white;
text-shadow: 0px 0px 3px black;
font-size: 24px;
cursor: pointer;
}
#share {
background-image: url('images/openshareicon-128x128.png');
}
#save {
background-image: url('images/save-128x128.png');
background-size: 100%;
}
#edit {
background-image: url('images/edit-128x128.png');
background-size: 100%;
}
#view {
background-image: url('images/view-128x128.png');
background-size: 100%;
}
#actions button.recieve {
background-color: blue;
}
</style>
<script>
var addEvent = function(element, evt, func) {
var elements;
if(element instanceof Array) {
elements = element;
}
else elements = [element];
for(var i = 0; i < elements.length; i++) {
elements[i].addEventListener(evt, func, false);
}
};
</script>
<script>
/*
Drop handlers: All the code to handle dropping of data.
*/
window.addEventListener("DOMContentLoaded", function() {
var actions = document.getElementById("actions");
var share = document.getElementById("share");
var edit = document.getElementById("edit");
var view = document.getElementById("view");
var save = document.getElementById("save");
addEvent(document.body, "dragover", function(e) {
e.stopPropagation();
e.preventDefault();
console.log("Entered body");
actions.className = "show";
});
addEvent(document.body, "dragleave", function(e) {
e.stopPropagation();
e.preventDefault();
actions.className = "";
});
addEvent([share, edit, view, save], "dragend", function(e) {
e.stopPropagation();
e.preventDefault();
e.target.className = "";
});
var highlightElement = function(e) {
e.stopPropagation();
e.preventDefault();
};
var dropHandler = function(e) {
e.stopPropagation();
e.preventDefault();
var reader = new FileReader();
var objects = [];
var fileType;
if(e.dataTransfer.files) {
var files = e.dataTransfer.files;
var fileCount = 0;
reader.onload = function(er) {
objects.push(er.target.result);
if(objects.length == fileCount) {
var i = new Intent(e.target.dataset["action"], fileType, objects);
window.navigator.startActivity(i);
}
};
for(var f = 0; f < files.length; f++) {
var file = files[f];
if(!!fileType == false) fileType = file.type; // all files must be the same type as the first file, maybe some better logic can be used
if(file.type == fileType) {
fileCount++;
reader.readAsDataURL(files[f]);
}
}
}
e.target.className = "";
return false;
};
var dragLeaveHandler = function(e) {
e.stopPropagation();
e.preventDefault();
e.target.className = "";
};
var dragEnterHandler = function(e) {
e.stopPropagation();
e.preventDefault();
e.target.className = "recieve";
};
var dragOverHandler = function(e) {
e.stopPropagation();
e.preventDefault();
e.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
};
addEvent([share, edit, view, save], "dragenter", dragEnterHandler);
addEvent([share, edit, view, save], "dragleave", dragLeaveHandler);
addEvent([share, edit, view, save], "dragover", dragOverHandler);
addEvent([share, edit, view, save], "drop", dropHandler);
},false);
</script>
<script>
/*
Click handlers for each of the actions.
Shows a menu of supported base types.
*/
addEvent(window, "DOMContentLoaded", function() {
var actions = document.getElementById("actions");
var share = document.getElementById("share");
var edit = document.getElementById("edit");
var view = document.getElementById("view");
var save = document.getElementById("save");
var pickHandler = function (e) {
var i = new Intent("http://webintents.org/pick", "*");
window.navigator.startActivity(i, function(data) {
var newI = new Intent(e.target.dataset["action"], "*", data);
window.navigator.startActivity(newI);
});
};
addEvent([share, edit, view, save], "click", pickHandler);
});
</script>
<script>
addEvent(window, "DOMContentLoaded", function() {
var bgItem = localStorage.getItem('background-image');
// I am sure this is not secure.
if(bgItem) {
document.body.style.backgroundImage = "url(" + bgItem + ")";
}
});
addEvent(window, "DOMContentLoaded", function() {
var configure = document.getElementById("configure");
var configureHandler = function(e) {
e.stopPropagation();
e.preventDefault();
var i = new Intent("http://webintents.org/pick", "image/*");
window.navigator.startActivity(i, function(data) {
localStorage['background-image'] = data;
document.body.style.backgroundImage = data;
});
return false;
};
addEvent(configure,"click", configureHandler);
});
</script>
<script>
var getAllCallback = function(list) {
var apps = document.getElementById("apps");
var counter = 0;
for (var i in list) {
// we don't want to do anything with extensions yet.
var extInf = list[i];
if (extInf.isApp && extInf.enabled) {
var app = document.createElement("div");
var img = new Image();
img.className = "image";
img.src = find128Image(extInf.icons);
img.addEventListener("click", (function(ext) {
return function() {
chrome.management.launchApp(ext.id);
};
})(extInf));
app.className = "app";
app.appendChild(img);
apps.appendChild(app);
}
}
};
var find128Image = function(icons) {
for (var icon in icons) {
if (icons[icon].size == "128") {
return icons[icon].url;
}
}
return "/noicon.png";
};
var loadApps = function() {
chrome.management.getAll(getAllCallback);
};
addEvent(window, "DOMContentLoaded", loadApps);
</script>
</head>
<body>
<div id="actions">
<h2>Tasks</h2>
<button id="share" data-action="http://webintents.org/share">Share</button>
<button id="view" data-action="http://webintents.org/view">View</button>
<button id="edit" data-action="http://webintents.org/edit">Edit</button>
<button id="save" data-action="http://webintents.org/save">Save</button>
</div>
<div id="configure">
Configure Background
</div>
<div id="apps">
<h2>Apps</h2>
</div>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.