<!doctype html>
<html lang="ja">
<head>
<title>Adobe Photo Editor - TheDesk</title>
<meta content="width=device-width,initial-scale=1.0" name="viewport">
<link href="./css/materialize.css" type="text/css" rel="stylesheet">
<link href="./css/themes.css" type="text/css" rel="stylesheet">
<link href="./css/master.css" type="text/css" rel="stylesheet">
<link href="./css/auth.css" type="text/css" rel="stylesheet">
<link href='./css/font-awesome.css' rel='stylesheet' type='text/css'>
<link href='./css/tl.css' rel='stylesheet' type='text/css'>
<link href='./css/userdata.css' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons|Open+Sans:300" rel="stylesheet">
<style>
#cb-drag {
margin-bottom: 8px;
padding: 24px 0;
text-align: center;
}
#cb-drag p {
font-weight: bold;
text-align: center;
}
#cb-file {
cursor: pointer;
}
#cb-display {
margin-bottom: 0;
}
#cb-display p {
margin-top: 8px;
margin-bottom: 0;
line-height: 1.4;
}
.cb-div {
padding: 16px;
margin-bottom: 8px;
}
.cb-image {
cursor: pointer;
}
</style>
<meta charset="utf-8">
</head>
<body id="mainView">
<script type="text/javascript" src="./js/common/jquery.js"></script>
<script type="text/javascript" src="./js/platform/first-not-view.js"></script>
<script type="text/javascript" src="./js/common/materialize.js"></script>
<script type="text/javascript" src="./js/ui/tips.js"></script>
<script type="text/javascript" src="./js/common/time.js"></script>
<script type="text/javascript" src="./js/common/modal.js"></script>
<div>
<div id="cb-drag">
<p>ここに画像ファイルをドラッグし、画像をクリックしてください。</p>
<input type="file" id="cb-file">
</div>
<div id="cb-display"></div>
</div>
<script type="text/javascript" src="https://dme0ih8comzn4.cloudfront.net/imaging/v2/editor.js"></script>
<script type="text/javascript">
var dragAndDrop = (function (window, document) {
"use strict";
var drag = document.getElementById("mainView");
var disp = document.getElementById("cb-display");
var file = document.getElementById("cb-file");
function makeView(data) {
var div, img, customEvent;
var metaData = "<p>■ファイル名: <b>" + data.name + "</b><br>■容量: <b>" + data.size + "</b>バイト</p>";
div = document.createElement("div");
div.setAttribute("class", "cb-div");
img = document.createElement("img");
img.src = data.url;
img.setAttribute("class", "cb-image");
img.style.maxWidth = "100%";
img.style.height = "auto";
div.appendChild(img);
img.insertAdjacentHTML("afterend", metaData);
disp.appendChild(div);
customEvent = document.createEvent("HTMLEvents");
customEvent.initEvent("makeView", true, false);
div.dispatchEvent(customEvent);
}
function readImage(e) {
var f = (e.dataTransfer) ? e.dataTransfer.files : e.target.files;
for (var i = 0, l = f.length; i < l; i++) {
var reader = new FileReader();
reader.onload = (function (f) {
var imageData = {};
return function (evt) {
if (f.type === "image/gif" || f.type === "image/png" || f.type === "image/jpeg") {
imageData.type = f.type;
imageData.name = f.name;
imageData.size = f.size;
imageData.date = f.lastModifiedDate.toLocaleDateString();
imageData.url = evt.target.result;
makeView(imageData);
} else {
return;
}
};
})(f[i]);
reader.readAsDataURL(f[i]);
}
}
function dragFiles() {
drag.addEventListener("drop", function (e) {
e.stopPropagation();
e.preventDefault();
readImage(e);
}, false);
drag.addEventListener("dragover", function (e) {
e.stopPropagation();
e.preventDefault();
}, false);
}
function uploadFiles() {
file.addEventListener("change", function (e) {
readImage(e);
}, false);
}
return {
init: function () {
dragFiles();
uploadFiles();
}
};
})(this, this.document);
var photoEditor = (function (window, document) {
"use strict";
var featherEditor = new Aviary.Feather({
apiKey: "ffee425017ab44b18ce95dab98a5cdc1",
onSave: function (imageID, newURL) {
var img1 = document.getElementById(imageID);
img1.src = newURL;
var electron = require("electron");
var ipc = electron.ipcRenderer;
ipc.send('bmp-image', [newURL, 0]);
window.close();
}
});
function clearImage() {
this.parentNode.style.display = "none";
}
function launchEditor(id, src) {
featherEditor.launch({
image: id,
url: src
});
return false;
}
function editPhoto() {
var id = this.getAttribute("id");
var src = this.getAttribute("src");
launchEditor(id, src);
}
function makeButton() {
var button = document.createElement("button");
button.setAttribute("style",
"width: 64px;"
+ " line-height: 24px;"
+ " background-color: #37474F;"
+ " color: #fff;"
+ " border: none;"
+ " cursor: pointer;"
+ " border-radius: 2px;"
+ " font-size: 14px;"
+ " position: absolute;"
+ " text-align: center;"
+ " top: 16px;"
+ " right: 8px;"
+ " padding: 0;"
+ " z-index: 1000;"
);
button.innerHTML = "削除";
return button;
}
function listener() {
var disp = document.getElementById("cb-display");
disp.addEventListener("makeView", function () {
var image = document.querySelectorAll(".cb-image");
var button = [];
for (var i = 0, l = image.length; i < l; i++) {
button[i] = makeButton();
image[i].setAttribute("id", "cb-image_" + i);
image[i].parentNode.style.position = "relative";
image[i].parentNode.appendChild(button[i]);
button[i].addEventListener("click", clearImage, false);
image[i].addEventListener("click", editPhoto, false);
}
}, false);
}
return {
init: function () {
listener();
}
};
})(this, this.document);
dragAndDrop.init();
photoEditor.init();
</script>
<script type="text/javascript" src="./js/ui/theme.js"></script>
<script type="text/javascript" src="./js/platform/end.js"></script>
</body>
</html>