|
| 1 | +/* |
| 2 | + * OS.js - JavaScript Cloud/Web Desktop Platform |
| 3 | + * |
| 4 | + * Copyright (c) 2011-2019, Anders Evenrud <[email protected]> |
| 5 | + * All rights reserved. |
| 6 | + * |
| 7 | + * Redistribution and use in source and binary forms, with or without |
| 8 | + * modification, are permitted provided that the following conditions are met: |
| 9 | + * |
| 10 | + * 1. Redistributions of source code must retain the above copyright notice, this |
| 11 | + * list of conditions and the following disclaimer |
| 12 | + * 2. Redistributions in binary form must reproduce the above copyright notice, |
| 13 | + * this list of conditions and the following disclaimer in the documentation |
| 14 | + * and/or other materials provided with the distribution |
| 15 | + * |
| 16 | + * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND |
| 17 | + * ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED |
| 18 | + * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE |
| 19 | + * DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR |
| 20 | + * ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES |
| 21 | + * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; |
| 22 | + * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND |
| 23 | + * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT |
| 24 | + * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS |
| 25 | + * SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. |
| 26 | + * |
| 27 | + * @author Anders Evenrud <[email protected]> |
| 28 | + * @licence Simplified BSD License |
| 29 | + */ |
| 30 | +import {EventEmitter} from '@osjs/event-emitter'; |
| 31 | +import {h, app} from 'hyperapp'; |
| 32 | + |
| 33 | +const view = (fileIcon, themeIcon, droppable) => (state, actions) => |
| 34 | + h('div', { |
| 35 | + class: 'osjs-desktop-iconview__wrapper', |
| 36 | + oncontextmenu: ev => actions.openContextMenu({ev}), |
| 37 | + oncreate: el => { |
| 38 | + droppable(el, { |
| 39 | + ondrop: (ev, data, files) => { |
| 40 | + if (data && data.path) { |
| 41 | + actions.addEntry(data); |
| 42 | + } else if (files.length > 0) { |
| 43 | + actions.uploadEntries(files); |
| 44 | + } |
| 45 | + } |
| 46 | + }); |
| 47 | + } |
| 48 | + }, state.entries.map(entry => { |
| 49 | + return h('div', { |
| 50 | + class: 'osjs-desktop-iconview__entry', |
| 51 | + oncontextmenu: ev => actions.openContextMenu({ev, entry}), |
| 52 | + ondblclick: ev => actions.openEntry({ev, entry}) |
| 53 | + }, [ |
| 54 | + h('img', { |
| 55 | + src: themeIcon(fileIcon(entry).name) |
| 56 | + }), |
| 57 | + h('span', { |
| 58 | + }, entry.filename) |
| 59 | + ]); |
| 60 | + })); |
| 61 | + |
| 62 | +/** |
| 63 | + * Desktop Icon View |
| 64 | + */ |
| 65 | +export class DesktopIconView extends EventEmitter { |
| 66 | + |
| 67 | + /** |
| 68 | + * @param {Core} core Core reference |
| 69 | + */ |
| 70 | + constructor(core) { |
| 71 | + super('DesktopIconView'); |
| 72 | + |
| 73 | + this.core = core; |
| 74 | + this.$root = null; |
| 75 | + this.iconview = null; |
| 76 | + } |
| 77 | + |
| 78 | + destroy() { |
| 79 | + if (this.$root && this.$root.parentNode) { |
| 80 | + this.$root.parentNode.removeChild(this.$root); |
| 81 | + } |
| 82 | + |
| 83 | + this.iconview = null; |
| 84 | + this.$root = null; |
| 85 | + |
| 86 | + this.emit('destroy'); |
| 87 | + } |
| 88 | + |
| 89 | + /** |
| 90 | + * @param {object} rect Rectangle from desktop |
| 91 | + */ |
| 92 | + resize(rect) { |
| 93 | + this.$root.style.top = `${rect.top}px`; |
| 94 | + this.$root.style.left = `${rect.left}px`; |
| 95 | + this.$root.style.bottom = `${rect.bottom}px`; |
| 96 | + this.$root.style.right = `${rect.right}px`; |
| 97 | + } |
| 98 | + |
| 99 | + render() { |
| 100 | + if (this.$root) { |
| 101 | + return; |
| 102 | + } |
| 103 | + |
| 104 | + this.$root = document.createElement('div'); |
| 105 | + this.$root.className = 'osjs-desktop-iconview'; |
| 106 | + this.core.$root.appendChild(this.$root); |
| 107 | + |
| 108 | + const root = 'home:/.desktop'; // FIXME |
| 109 | + const {droppable} = this.core.make('osjs/dnd'); |
| 110 | + const {icon: fileIcon} = this.core.make('osjs/fs'); |
| 111 | + const {icon: themeIcon} = this.core.make('osjs/theme'); |
| 112 | + const {copy, readdir, unlink} = this.core.make('osjs/vfs'); |
| 113 | + const error = err => console.error(err); |
| 114 | + const reload = () => readdir(root) |
| 115 | + .then(entries => entries.filter(e => e.filename !== '..')) |
| 116 | + .then(entries => this.iconview.setEntries(entries)); |
| 117 | + |
| 118 | + this.iconview = app({ |
| 119 | + entries: [] |
| 120 | + }, { |
| 121 | + setEntries: entries => ({entries}), |
| 122 | + |
| 123 | + openContextMenu: ({ev, entry}) => { |
| 124 | + if (entry) { |
| 125 | + this.createFileContextMenu(ev, entry); |
| 126 | + } |
| 127 | + }, |
| 128 | + |
| 129 | + openEntry: ({entry}) => { |
| 130 | + if (entry.isDirectory) { |
| 131 | + this.core.run('FileManager', { |
| 132 | + path: entry |
| 133 | + }); |
| 134 | + } else { |
| 135 | + this.core.open(entry); |
| 136 | + } |
| 137 | + }, |
| 138 | + |
| 139 | + uploadEntries: files => { |
| 140 | + // TODO |
| 141 | + }, |
| 142 | + |
| 143 | + addEntry: entry => { |
| 144 | + const dest = `${root}/${entry.filename}`; |
| 145 | + |
| 146 | + copy(entry, dest) |
| 147 | + .then(reload) |
| 148 | + .catch(error); |
| 149 | + }, |
| 150 | + |
| 151 | + removeEntry: entry => { |
| 152 | + unlink(entry) |
| 153 | + .then(reload) |
| 154 | + .catch(error); |
| 155 | + } |
| 156 | + }, view(fileIcon, themeIcon, droppable), this.$root); |
| 157 | + |
| 158 | + reload(); |
| 159 | + } |
| 160 | + |
| 161 | + createFileContextMenu(ev, entry) { |
| 162 | + this.core.make('osjs/contextmenu', { |
| 163 | + position: ev, |
| 164 | + menu: [{ |
| 165 | + label: 'Open', |
| 166 | + onclick: () => this.iconview.openEntry(({entry})) |
| 167 | + }, { |
| 168 | + label: 'Remove', |
| 169 | + onclick: () => this.iconview.removeEntry(entry) |
| 170 | + }] |
| 171 | + }); |
| 172 | + } |
| 173 | +} |
0 commit comments