2018-05-10 00:33:08 +09:00
|
|
|
<!doctype html>
|
|
|
|
|
<html lang="ja">
|
2019-05-19 16:39:30 +09:00
|
|
|
|
2018-05-10 00:33:08 +09:00
|
|
|
<head>
|
2019-05-19 16:39:30 +09:00
|
|
|
<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>
|
2018-05-10 00:33:08 +09:00
|
|
|
#cb-drag {
|
2019-05-19 16:39:30 +09:00
|
|
|
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">
|
2018-05-10 00:33:08 +09:00
|
|
|
</head>
|
2019-05-19 16:39:30 +09:00
|
|
|
|
2018-05-10 00:33:08 +09:00
|
|
|
<body id="mainView">
|
2019-05-19 16:39:30 +09:00
|
|
|
<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">
|
2018-05-10 00:33:08 +09:00
|
|
|
</div>
|
2019-05-19 16:39:30 +09:00
|
|
|
<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";
|
2018-05-10 00:33:08 +09:00
|
|
|
|
2019-05-19 16:39:30 +09:00
|
|
|
var drag = document.getElementById("mainView");
|
|
|
|
|
var disp = document.getElementById("cb-display");
|
|
|
|
|
var file = document.getElementById("cb-file");
|
2018-05-10 00:33:08 +09:00
|
|
|
|
2019-05-19 16:39:30 +09:00
|
|
|
function makeView(data) {
|
2018-05-10 00:33:08 +09:00
|
|
|
|
2019-05-19 16:39:30 +09:00
|
|
|
var div, img, customEvent;
|
|
|
|
|
var metaData = "<p>■ファイル名: <b>" + data.name + "</b><br>■容量: <b>" + data.size + "</b>バイト</p>";
|
2018-05-10 00:33:08 +09:00
|
|
|
|
2019-05-19 16:39:30 +09:00
|
|
|
div = document.createElement("div");
|
|
|
|
|
div.setAttribute("class", "cb-div");
|
2018-05-10 00:33:08 +09:00
|
|
|
|
2019-05-19 16:39:30 +09:00
|
|
|
img = document.createElement("img");
|
|
|
|
|
img.src = data.url;
|
|
|
|
|
img.setAttribute("class", "cb-image");
|
|
|
|
|
img.style.maxWidth = "100%";
|
|
|
|
|
img.style.height = "auto";
|
2018-05-10 00:33:08 +09:00
|
|
|
|
2019-05-19 16:39:30 +09:00
|
|
|
div.appendChild(img);
|
|
|
|
|
img.insertAdjacentHTML("afterend", metaData);
|
|
|
|
|
disp.appendChild(div);
|
2018-05-10 00:33:08 +09:00
|
|
|
|
2019-05-19 16:39:30 +09:00
|
|
|
customEvent = document.createEvent("HTMLEvents");
|
|
|
|
|
customEvent.initEvent("makeView", true, false);
|
|
|
|
|
div.dispatchEvent(customEvent);
|
2018-05-10 00:33:08 +09:00
|
|
|
|
2019-05-19 16:39:30 +09:00
|
|
|
}
|
2018-05-10 00:33:08 +09:00
|
|
|
|
2019-05-19 16:39:30 +09:00
|
|
|
function readImage(e) {
|
2018-05-10 00:33:08 +09:00
|
|
|
|
2019-05-19 16:39:30 +09:00
|
|
|
var f = (e.dataTransfer) ? e.dataTransfer.files : e.target.files;
|
2018-05-10 00:33:08 +09:00
|
|
|
|
2019-05-19 16:39:30 +09:00
|
|
|
for (var i = 0, l = f.length; i < l; i++) {
|
2018-05-10 00:33:08 +09:00
|
|
|
|
2019-05-19 16:39:30 +09:00
|
|
|
var reader = new FileReader();
|
2018-05-10 00:33:08 +09:00
|
|
|
|
2019-05-19 16:39:30 +09:00
|
|
|
reader.onload = (function (f) {
|
2018-05-10 00:33:08 +09:00
|
|
|
|
2019-05-19 16:39:30 +09:00
|
|
|
var imageData = {};
|
2018-05-10 00:33:08 +09:00
|
|
|
|
2019-05-19 16:39:30 +09:00
|
|
|
return function (evt) {
|
2018-05-10 00:33:08 +09:00
|
|
|
|
2019-05-19 16:39:30 +09:00
|
|
|
if (f.type === "image/gif" || f.type === "image/png" || f.type === "image/jpeg") {
|
2018-05-10 00:33:08 +09:00
|
|
|
|
2019-05-19 16:39:30 +09:00
|
|
|
imageData.type = f.type;
|
|
|
|
|
imageData.name = f.name;
|
|
|
|
|
imageData.size = f.size;
|
|
|
|
|
imageData.date = f.lastModifiedDate.toLocaleDateString();
|
|
|
|
|
imageData.url = evt.target.result;
|
|
|
|
|
makeView(imageData);
|
2018-05-10 00:33:08 +09:00
|
|
|
|
2019-05-19 16:39:30 +09:00
|
|
|
} else {
|
|
|
|
|
return;
|
|
|
|
|
}
|
2018-05-10 00:33:08 +09:00
|
|
|
|
2019-05-19 16:39:30 +09:00
|
|
|
};
|
|
|
|
|
|
|
|
|
|
})(f[i]);
|
|
|
|
|
|
|
|
|
|
reader.readAsDataURL(f[i]);
|
2018-05-10 00:33:08 +09:00
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
2019-05-19 16:39:30 +09:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
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();
|
|
|
|
|
}
|
2018-05-10 00:33:08 +09:00
|
|
|
};
|
|
|
|
|
|
2019-05-19 16:39:30 +09:00
|
|
|
})(this, this.document);
|
2018-05-10 00:33:08 +09:00
|
|
|
|
2019-05-19 16:39:30 +09:00
|
|
|
var photoEditor = (function (window, document) {
|
2018-05-10 00:33:08 +09:00
|
|
|
|
2019-05-19 16:39:30 +09:00
|
|
|
"use strict";
|
2018-05-10 00:33:08 +09:00
|
|
|
|
2019-05-19 16:39:30 +09:00
|
|
|
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();
|
|
|
|
|
}
|
|
|
|
|
};
|
2018-05-10 00:33:08 +09:00
|
|
|
|
2019-05-19 16:39:30 +09:00
|
|
|
})(this, this.document);
|
2018-05-10 00:33:08 +09:00
|
|
|
|
2019-05-19 16:39:30 +09:00
|
|
|
dragAndDrop.init();
|
|
|
|
|
photoEditor.init();
|
|
|
|
|
</script>
|
2018-05-10 00:33:08 +09:00
|
|
|
|
2019-05-19 16:39:30 +09:00
|
|
|
<script type="text/javascript" src="./js/ui/theme.js"></script>
|
|
|
|
|
<script type="text/javascript" src="./js/platform/end.js"></script>
|
2018-05-10 00:33:08 +09:00
|
|
|
</body>
|
2019-05-19 16:39:30 +09:00
|
|
|
|
2018-05-10 00:33:08 +09:00
|
|
|
</html>
|
