This commit is contained in:
syuilo 2017-02-21 01:02:32 +09:00
parent 0ecd0dc1a1
commit c5a26efda4
11 changed files with 118 additions and 117 deletions

View File

@ -142,54 +142,57 @@
<script> <script>
this.mixin('i'); this.mixin('i');
this.uploads = [] this.uploads = [];
this.upload = (file, folder) => { this.upload = (file, folder) => {
id = Math.random! const id = Math.random();
ctx = const ctx = {
id: id id: id,
name: file.name || 'untitled' name: file.name || 'untitled',
progress: undefined progress: undefined
};
@uploads.push ctx this.uploads.push(ctx);
this.trigger 'change-uploads' @uploads this.trigger('change-uploads', this.uploads);
this.update(); this.update();
reader = new FileReader! const reader = new FileReader();
reader.onload = (e) => reader.onload = e => {
ctx.img = e.target.result ctx.img = e.target.result;
this.update(); this.update();
reader.read-as-data-URL file };
reader.readAsDataURL(file);
data = new FormData! const data = new FormData();
data.append 'i' this.I.token data.append('i', this.I.token);
data.append 'file' file data.append('file', file);
if folder? if (folder) data.append('folder_id', folder);
data.append 'folder_id' folder
xhr = new XMLHttpRequest! const xhr = new XMLHttpRequest();
xhr.open 'POST' CONFIG.apiUrl + '/drive/files/create' true xhr.open('POST', CONFIG.apiUrl + '/drive/files/create', true);
xhr.onload = (e) => xhr.onload = e => {
drive-file = JSON.parse e.target.response const driveFile = JSON.parse(e.target.response);
this.trigger 'uploaded' drive-file this.trigger('uploaded', driveFile);
this.uploads = @uploads.filter (x) -> x.id != id this.uploads = this.uploads.filter(x => x.id != id);
this.trigger 'change-uploads' @uploads this.trigger('change-uploads', this.uploads);
this.update(); this.update();
};
xhr.upload.onprogress = (e) => xhr.upload.onprogress = e => {
if e.length-computable if (e.lengthComputable) {
if ctx.progress == undefined if (ctx.progress == undefined) ctx.progress = {};
ctx.progress = {} ctx.progress.max = e.total;
ctx.progress.max = e.total ctx.progress.value = e.loaded;
ctx.progress.value = e.loaded
this.update(); this.update();
}
};
xhr.send data xhr.send(data);
};
</script> </script>
</mk-uploader> </mk-uploader>

View File

@ -238,6 +238,8 @@
</style> </style>
<script> <script>
const contains = require('../../../common/scripts/contains');
this.mixin('api'); this.mixin('api');
this.mixin('dialog'); this.mixin('dialog');
this.mixin('input-dialog'); this.mixin('input-dialog');
@ -253,67 +255,70 @@
// * null でルートを表す // * null でルートを表す
this.folder = null; this.folder = null;
this.multiple = if this.opts.multiple? then this.opts.multiple else false this.multiple = this.opts.multiple != null ? this.opts.multiple : false;
// ドロップされようとしているか // ドロップされようとしているか
this.draghover = false; this.draghover = false;
// 自信の所有するアイテムがドラッグをスタートさせたか // 自信の所有するアイテムがドラッグをスタートさせたか
// (自分自身の階層にドロップできないようにするためのフラグ) // (自分自身の階層にドロップできないようにするためのフラグ)
this.is-drag-source = false; this.isDragSource = false;
this.on('mount', () => { this.on('mount', () => {
this.refs.uploader.on('uploaded', (file) => { this.refs.uploader.on('uploaded', file => {
@add-file file, true this.addFile(file, true);
});
this.refs.uploader.on('change-uploads', (uploads) => { this.refs.uploader.on('change-uploads', uploads => {
this.uploads = uploads this.update({
this.update(); uploads: uploads
});
});
this.stream.on 'drive_file_created' this.on-stream-drive-file-created this.stream.on 'drive_file_created' this.onStreamDriveFileCreated
this.stream.on 'drive_file_updated' this.on-stream-drive-file-updated this.stream.on 'drive_file_updated' this.onStreamDriveFileUpdated
this.stream.on 'drive_folder_created' this.on-stream-drive-folder-created this.stream.on 'drive_folder_created' this.onStreamDriveFolderCreated
this.stream.on 'drive_folder_updated' this.on-stream-drive-folder-updated this.stream.on 'drive_folder_updated' this.onStreamDriveFolderUpdated
// Riotのバグでnullを渡しても""になる // Riotのバグでnullを渡しても""になる
// https://github.com/riot/riot/issues/2080 // https://github.com/riot/riot/issues/2080
#if this.opts.folder? #if this.opts.folder?
if this.opts.folder? and this.opts.folder != '' if this.opts.folder? and this.opts.folder != ''
@move this.opts.folder this.move this.opts.folder
else else
@load! this.load();
this.on('unmount', () => { this.on('unmount', () => {
this.stream.off 'drive_file_created' this.on-stream-drive-file-created this.stream.off 'drive_file_created' this.onStreamDriveFileCreated
this.stream.off 'drive_file_updated' this.on-stream-drive-file-updated this.stream.off 'drive_file_updated' this.onStreamDriveFileUpdated
this.stream.off 'drive_folder_created' this.on-stream-drive-folder-created this.stream.off 'drive_folder_created' this.onStreamDriveFolderCreated
this.stream.off 'drive_folder_updated' this.on-stream-drive-folder-updated this.stream.off 'drive_folder_updated' this.onStreamDriveFolderUpdated
this.on-stream-drive-file-created = (file) => { this.onStreamDriveFileCreated = (file) => {
@add-file file, true this.addFile file, true
this.on-stream-drive-file-updated = (file) => { this.onStreamDriveFileUpdated = (file) => {
current = if this.folder? then this.folder.id else null current = if this.folder? then this.folder.id else null
if current != file.folder_id if current != file.folder_id
@remove-file file @remove-file file
else else
@add-file file, true this.addFile file, true
this.on-stream-drive-folder-created = (folder) => { this.onStreamDriveFolderCreated = (folder) => {
@add-folder folder, true this.addFolder folder, true
this.on-stream-drive-folder-updated = (folder) => { this.onStreamDriveFolderUpdated = (folder) => {
current = if this.folder? then this.folder.id else null current = if this.folder? then this.folder.id else null
if current != folder.parent_id if current != folder.parent_id
@remove-folder folder this.removeFolder folder
else else
@add-folder folder, true this.addFolder folder, true
this.onmousedown = (e) => { this.onmousedown = (e) => {
if (contains this.refs.folders-container, e.target) or (contains this.refs.files-container, e.target) if (contains this.refs.folders-container, e.target) or (contains this.refs.files-container, e.target)
return true return true
rect = this.refs.main.get-bounding-client-rect! rect = this.refs.main.getBoundingClientRect();
left = e.pageX + this.refs.main.scroll-left - rect.left - window.pageXOffset left = e.pageX + this.refs.main.scroll-left - rect.left - window.pageXOffset
top = e.pageY + this.refs.main.scroll-top - rect.top - window.pageYOffset top = e.pageY + this.refs.main.scroll-top - rect.top - window.pageYOffset
@ -341,13 +346,13 @@
this.refs.selection.style.top = cursorY + 'px' this.refs.selection.style.top = cursorY + 'px'
up = (e) => up = (e) =>
document.document-element.removeEventListener 'mousemove' move document.documentElement.removeEventListener 'mousemove' move
document.document-element.removeEventListener 'mouseup' up document.documentElement.removeEventListener 'mouseup' up
this.refs.selection.style.display = 'none' this.refs.selection.style.display = 'none'
document.document-element.addEventListener 'mousemove' move document.documentElement.addEventListener 'mousemove' move
document.document-element.addEventListener 'mouseup' up document.documentElement.addEventListener 'mouseup' up
this.path-oncontextmenu = (e) => { this.path-oncontextmenu = (e) => {
e.preventDefault(); e.preventDefault();
@ -359,7 +364,7 @@
e.stopPropagation(); e.stopPropagation();
// ドラッグ元が自分自身の所有するアイテムかどうか // ドラッグ元が自分自身の所有するアイテムかどうか
if !@is-drag-source if !@isDragSource
// ドラッグされてきたものがファイルだったら // ドラッグされてきたものがファイルだったら
if e.dataTransfer.effectAllowed == 'all' if e.dataTransfer.effectAllowed == 'all'
e.dataTransfer.dropEffect = 'copy' e.dataTransfer.dropEffect = 'copy'
@ -373,7 +378,7 @@
this.ondragenter = (e) => { this.ondragenter = (e) => {
e.preventDefault(); e.preventDefault();
if !@is-drag-source if !@isDragSource
this.draghover = true this.draghover = true
this.ondragleave = (e) => { this.ondragleave = (e) => {
@ -421,7 +426,7 @@
return false return false
if (this.folders.some (f) => f.id == folder) if (this.folders.some (f) => f.id == folder)
return false return false
@remove-folder folder this.removeFolder folder
this.api('drive/folders/update', { this.api('drive/folders/update', {
folder_id: folder folder_id: folder
parent_id: if this.folder? then this.folder.id else null parent_id: if this.folder? then this.folder.id else null
@ -483,7 +488,7 @@
name: name name: name
folder_id: if this.folder? then this.folder.id else undefined folder_id: if this.folder? then this.folder.id else undefined
}).then((folder) => { }).then((folder) => {
@add-folder folder, true this.addFolder folder, true
this.update(); this.update();
.catch (err) => .catch (err) =>
console.error err console.error err
@ -533,7 +538,7 @@
x folder.parent x folder.parent
this.update(); this.update();
@load! this.load();
.catch (err, text-status) -> .catch (err, text-status) ->
console.error err console.error err
@ -590,7 +595,7 @@
this.folder = null this.folder = null
this.hierarchyFolders = [] this.hierarchyFolders = []
this.update(); this.update();
@load! this.load();
this.load = () => { this.load = () => {
this.folders = [] this.folders = []
@ -636,20 +641,13 @@
complete = => complete = =>
if flag if flag
load-folders.forEach (folder) => load-folders.forEach (folder) =>
@add-folder folder this.addFolder folder
load-files.forEach (file) => load-files.forEach (file) =>
@add-file file this.addFile file
this.loading = false this.loading = false
this.update(); this.update();
else else
flag := true flag := true
function contains(parent, child)
node = child.parentNode
while node?
if node == parent
return true
node = node.parentNode
return false
</script> </script>
</mk-drive-browser> </mk-drive-browser>

View File

@ -200,10 +200,10 @@
// 親ブラウザに対して、ドラッグが開始されたフラグを立てる // 親ブラウザに対して、ドラッグが開始されたフラグを立てる
// (=あなたの子供が、ドラッグを開始しましたよ) // (=あなたの子供が、ドラッグを開始しましたよ)
this.browser.is-drag-source = true this.browser.isDragSource = true
this.ondragend = (e) => { this.ondragend = (e) => {
this.is-dragging = false this.is-dragging = false
this.browser.is-drag-source = false this.browser.isDragSource = false
</script> </script>
</mk-drive-browser-file> </mk-drive-browser-file>

View File

@ -155,11 +155,11 @@
// 親ブラウザに対して、ドラッグが開始されたフラグを立てる // 親ブラウザに対して、ドラッグが開始されたフラグを立てる
// (=あなたの子供が、ドラッグを開始しましたよ) // (=あなたの子供が、ドラッグを開始しましたよ)
this.browser.is-drag-source = true this.browser.isDragSource = true
this.ondragend = (e) => { this.ondragend = (e) => {
this.is-dragging = false this.is-dragging = false
this.browser.is-drag-source = false this.browser.isDragSource = false
this.oncontextmenu = (e) => { this.oncontextmenu = (e) => {
e.preventDefault(); e.preventDefault();

View File

@ -133,7 +133,7 @@
this.page = 0 this.page = 0
this.on('mount', () => { this.on('mount', () => {
@load! this.load();
this.load = () => { this.load = () => {
this.loading = true this.loading = true
@ -155,7 +155,7 @@
this.page = 0 this.page = 0
else else
this.page++ this.page++
@load! this.load();
this.close = () => { this.close = () => {
this.unmount(); this.unmount();

View File

@ -64,7 +64,7 @@
this.initializing = true this.initializing = true
this.on('mount', () => { this.on('mount', () => {
this.stream.on 'drive_file_created' this.on-stream-drive-file-created this.stream.on 'drive_file_created' this.onStreamDriveFileCreated
this.api('drive/stream', { this.api('drive/stream', {
type: 'image/*' type: 'image/*'
@ -75,9 +75,9 @@
this.update(); this.update();
this.on('unmount', () => { this.on('unmount', () => {
this.stream.off 'drive_file_created' this.on-stream-drive-file-created this.stream.off 'drive_file_created' this.onStreamDriveFileCreated
this.on-stream-drive-file-created = (file) => { this.onStreamDriveFileCreated = (file) => {
if /^image\/.+$/.test file.type if /^image\/.+$/.test file.type
@images.unshift file @images.unshift file
if @images.length > 9 if @images.length > 9

View File

@ -98,10 +98,10 @@
this.refs.timeline.add-post post this.refs.timeline.add-post post
this.on-stream-follow = () => { this.on-stream-follow = () => {
@load! this.load();
this.on-stream-unfollow = () => { this.on-stream-unfollow = () => {
@load! this.load();
this.on-scroll = () => { this.on-scroll = () => {
current = window.scrollY + window.inner-height current = window.scrollY + window.inner-height

View File

@ -30,7 +30,7 @@
this.image = @images.0 this.image = @images.0
this.mousemove = (e) => { this.mousemove = (e) => {
rect = this.refs.view.get-bounding-client-rect! rect = this.refs.view.getBoundingClientRect();
mouse-x = e.client-x - rect.left mouse-x = e.client-x - rect.left
mouse-y = e.client-y - rect.top mouse-y = e.client-y - rect.top
xp = mouse-x / this.refs.view.offset-width * 100 xp = mouse-x / this.refs.view.offset-width * 100

View File

@ -324,7 +324,7 @@
this.on('mount', () => { this.on('mount', () => {
this.refs.uploader.on('uploaded', (file) => { this.refs.uploader.on('uploaded', (file) => {
@add-file file this.addFile file
this.refs.uploader.on('change-uploads', (uploads) => { this.refs.uploader.on('change-uploads', (uploads) => {
this.trigger 'change-uploading-files' uploads this.trigger 'change-uploading-files' uploads
@ -382,7 +382,7 @@
// (ドライブの)ファイルだったら // (ドライブの)ファイルだったら
if obj.type == 'file' if obj.type == 'file'
@add-file obj.file this.addFile obj.file
catch catch
// ignore // ignore
@ -409,7 +409,7 @@
i = riot.mount browser, do i = riot.mount browser, do
multiple: true multiple: true
i[0].one 'selected' (files) => i[0].one 'selected' (files) =>
files.forEach @add-file files.forEach this.addFile
this.change-file = () => { this.change-file = () => {
files = this.refs.file.files files = this.refs.file.files

View File

@ -146,10 +146,10 @@
this.multiple = if this.opts.multiple? then this.opts.multiple else false this.multiple = if this.opts.multiple? then this.opts.multiple else false
this.on('mount', () => { this.on('mount', () => {
this.stream.on 'drive_file_created' this.on-stream-drive-file-created this.stream.on 'drive_file_created' this.onStreamDriveFileCreated
this.stream.on 'drive_file_updated' this.on-stream-drive-file-updated this.stream.on 'drive_file_updated' this.onStreamDriveFileUpdated
this.stream.on 'drive_folder_created' this.on-stream-drive-folder-created this.stream.on 'drive_folder_created' this.onStreamDriveFolderCreated
this.stream.on 'drive_folder_updated' this.on-stream-drive-folder-updated this.stream.on 'drive_folder_updated' this.onStreamDriveFolderUpdated
// Riotのバグでnullを渡しても""になる // Riotのバグでnullを渡しても""になる
// https://github.com/riot/riot/issues/2080 // https://github.com/riot/riot/issues/2080
@ -159,36 +159,36 @@
else if this.opts.file? and this.opts.file != '' else if this.opts.file? and this.opts.file != ''
@cf this.opts.file, true @cf this.opts.file, true
else else
@load! this.load();
this.on('unmount', () => { this.on('unmount', () => {
this.stream.off 'drive_file_created' this.on-stream-drive-file-created this.stream.off 'drive_file_created' this.onStreamDriveFileCreated
this.stream.off 'drive_file_updated' this.on-stream-drive-file-updated this.stream.off 'drive_file_updated' this.onStreamDriveFileUpdated
this.stream.off 'drive_folder_created' this.on-stream-drive-folder-created this.stream.off 'drive_folder_created' this.onStreamDriveFolderCreated
this.stream.off 'drive_folder_updated' this.on-stream-drive-folder-updated this.stream.off 'drive_folder_updated' this.onStreamDriveFolderUpdated
this.on-stream-drive-file-created = (file) => { this.onStreamDriveFileCreated = (file) => {
@add-file file, true this.addFile file, true
this.on-stream-drive-file-updated = (file) => { this.onStreamDriveFileUpdated = (file) => {
current = if this.folder? then this.folder.id else null current = if this.folder? then this.folder.id else null
if current != file.folder_id if current != file.folder_id
@remove-file file @remove-file file
else else
@add-file file, true this.addFile file, true
this.on-stream-drive-folder-created = (folder) => { this.onStreamDriveFolderCreated = (folder) => {
@add-folder folder, true this.addFolder folder, true
this.on-stream-drive-folder-updated = (folder) => { this.onStreamDriveFolderUpdated = (folder) => {
current = if this.folder? then this.folder.id else null current = if this.folder? then this.folder.id else null
if current != folder.parent_id if current != folder.parent_id
@remove-folder folder this.removeFolder folder
else else
@add-folder folder, true this.addFolder folder, true
@_move = (ev) => @_move = (ev) =>
@move ev.item.folder this.move ev.item.folder
this.move = (target-folder) => { this.move = (target-folder) => {
@cd target-folder @cd target-folder
@ -222,7 +222,7 @@
this.update(); this.update();
this.trigger 'open-folder' this.folder, silent this.trigger 'open-folder' this.folder, silent
@load! this.load();
.catch (err, text-status) -> .catch (err, text-status) ->
console.error err console.error err
@ -278,7 +278,7 @@
this.hierarchyFolders = [] this.hierarchyFolders = []
this.update(); this.update();
this.trigger('move-root'); this.trigger('move-root');
@load! this.load();
this.load = () => { this.load = () => {
this.folders = [] this.folders = []
@ -326,9 +326,9 @@
complete = => complete = =>
if flag if flag
load-folders.forEach (folder) => load-folders.forEach (folder) =>
@add-folder folder this.addFolder folder
load-files.forEach (file) => load-files.forEach (file) =>
@add-file file this.addFile file
this.loading = false this.loading = false
this.update(); this.update();

View File

@ -193,7 +193,7 @@
this.on('mount', () => { this.on('mount', () => {
this.refs.uploader.on('uploaded', (file) => { this.refs.uploader.on('uploaded', (file) => {
@add-file file this.addFile file
this.refs.uploader.on('change-uploads', (uploads) => { this.refs.uploader.on('change-uploads', (uploads) => {
this.trigger 'change-uploading-files' uploads this.trigger 'change-uploading-files' uploads
@ -225,7 +225,7 @@
multiple: true multiple: true
.0 .0
browser.on('selected', (files) => { browser.on('selected', (files) => {
files.forEach @add-file files.forEach this.addFile
this.change-file = () => { this.change-file = () => {
files = this.refs.file.files files = this.refs.file.files