liz/wikijs-fork
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Image upload process + right-click menu UI

Browse Source
This commit is contained in:
NGPixel
2016-10-03 00:12:29 -04:00
parent 90afe796ee
commit 819d4ad346
12 changed files with 501 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

132
client/js/components/editor-image.js
View File

@@ -91,10 +91,23 @@ let vueImage = new Vue({
fetchFromUrlDiscard: (ev) => {
vueImage.fetchFromUrlShow = false;
},
/**
* Select a folder
*
* @param {string} fldName The folder name
* @return {Void} Void
*/
selectFolder: (fldName) => {
vueImage.currentFolder = fldName;
vueImage.loadImages();
},
/**
* Refresh folder list and load images from root
*
* @return {Void} Void
*/
refreshFolders: () => {
vueImage.isLoading = true;
vueImage.isLoadingText = 'Fetching folders list...';
@@ -107,6 +120,12 @@ let vueImage = new Vue({
});
});
},
/**
* Loads images in selected folder
*
* @return {Void} Void
*/
loadImages: () => {
vueImage.isLoading = true;
vueImage.isLoadingText = 'Fetching images...';
@@ -114,14 +133,127 @@ let vueImage = new Vue({
socket.emit('uploadsGetImages', { folder: vueImage.currentFolder }, (data) => {
vueImage.images = data;
vueImage.isLoading = false;
vueImage.attachContextMenus();
});
});
},
/**
* Select an image
*
* @param {String} imageId The image identifier
* @return {Void} Void
*/
selectImage: (imageId) => {
vueImage.currentImage = imageId;
},
/**
* Set image alignment
*
* @param {String} align The alignment
* @return {Void} Void
*/
selectAlignment: (align) => {
vueImage.currentAlign = align;
},
/**
* Attach right-click context menus to images and folders
*
* @return {Void} Void
*/
attachContextMenus: () => {
let moveFolders = _.map(vueImage.folders, (f) => {
return {
name: (f !== '') ? f : '/ (root)',
icon: 'fa-folder'
};
});
$.contextMenu('destroy', '.editor-modal-imagechoices > figure');
$.contextMenu({
selector: '.editor-modal-imagechoices > figure',
appendTo: '.editor-modal-imagechoices',
position: (opt, x, y) => {
$(opt.$trigger).addClass('is-contextopen');
let trigPos = $(opt.$trigger).position();
let trigDim = { w: $(opt.$trigger).width() / 2, h: $(opt.$trigger).height() / 2 }
opt.$menu.css({ top: trigPos.top + trigDim.h, left: trigPos.left + trigDim.w });
},
events: {
hide: (opt) => {
$(opt.$trigger).removeClass('is-contextopen');
}
},
items: {
rename: {
name: "Rename",
icon: "fa-edit",
callback: (key, opt) => {
alert("Clicked on " + key);
}
},
move: {
name: "Move to...",
icon: "fa-folder-open-o",
items: moveFolders
},
delete: {
name: "Delete",
icon: "fa-trash",
callback: (key, opt) => {
alert("Clicked on " + key);
}
}
}
});
}
}
});
$('#btn-editor-uploadimage input').on('change', (ev) => {
$(ev.currentTarget).simpleUpload("/uploads/img", {
name: 'imgfile',
data: {
folder: vueImage.currentFolder
},
limit: 20,
expect: 'json',
allowedExts: ["jpg", "jpeg", "gif", "png", "webp"],
allowedTypes: ['image/png', 'image/jpeg', 'image/gif', 'image/webp'],
maxFileSize: 3145728, // max 3 MB
init: () => {
vueImage.isLoading = true;
vueImage.isLoadingText = 'Preparing to upload...';
},
progress: function(progress) {
vueImage.isLoadingText = 'Uploading...' + Math.round(progress) + '%';
},
success: (data) => {
if(data.ok) {
} else {
alerts.pushError('Upload error', data.msg);
}
},
error: function(error) {
vueImage.isLoading = false;
alerts.pushError(error.message, this.upload.file.name);
},
finish: () => {
vueImage.isLoading = false;
}
});
});

1
client/scss/app.scss
View File

@@ -14,6 +14,7 @@ $warning: $orange;
@import 'bulma';
@import './libs/twemoji-awesome';
@import './libs/animate.min.css';
@import './libs/jquery-contextmenu';
@import './components/_alerts';
@import './components/_editor';

47
client/scss/components/_editor.scss
View File

@@ -17,10 +17,12 @@
a {
color: #FFF !important;
border: none;
transition: background-color 0.4s ease;
&.active, &:hover {
&.active, &:hover, &:focus {
background-color: rgba(0,0,0,0.5);
border-color: #888;
outline: none;
}
}
@@ -63,6 +65,33 @@
opacity: 1;
}
}
#btn-editor-uploadimage {
position: relative;
overflow: hidden;
> label {
display: block;
opacity: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
cursor: pointer;
input[type=file] {
opacity: 0;
position: absolute;
top: -9999px;
left: -9999px;
}
}
}
.editor-modal-imagechoices {
@@ -127,6 +156,20 @@
}
&.is-contextopen {
background-color: $warning;
color: #FFF;
> img {
border-color: darken($warning, 10%);
}
> span > strong {
color: #FFF;
}
}
}
}

131
client/scss/libs/jquery-contextmenu.scss Normal file
View File

@@ -0,0 +1,131 @@
@charset "UTF-8";
/*!
* jQuery contextMenu - Plugin for simple contextMenu handling
*
* Version: v2.2.5-dev
*
* Authors: Björn Brala (SWIS.nl), Rodney Rehm, Addy Osmani (patches for FF)
* Web: http://swisnl.github.io/jQuery-contextMenu/
*
* Copyright (c) 2011-2016 SWIS BV and contributors
*
* Licensed under
* MIT License http://www.opensource.org/licenses/mit-license
*
* Date: 2016-08-27T11:09:08.919Z
*/
.context-menu-icon {
display: list-item;
font-family: inherit;
}
.context-menu-icon::before {
position: absolute;
top: 50%;
left: 0;
width: 2em;
font-family: FontAwesome;
font-size: 14px;
font-style: normal;
font-weight: normal;
line-height: 1;
color: $primary;
text-align: center;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.context-menu-icon.context-menu-hover:before {
color: #fff;
}
.context-menu-icon.context-menu-disabled::before {
color: #bbb;
}
.context-menu-list {
position: absolute;
display: inline-block;
min-width: 13em;
max-width: 26em;
padding: 0 0;
margin: .3em;
font-family: inherit;
font-size: 14px;
list-style-type: none;
background: #fff;
border: 1px solid $primary;
border-radius: .2em;
-webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, .25);
box-shadow: 0 2px 5px rgba(0, 0, 0, .25);
}
.context-menu-item {
position: relative;
padding: 7px 2em;
color: #69707a;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-color: #fff;
font-size: 14px;
text-align: left;
}
.context-menu-separator {
padding: 0;
margin: .35em 0;
border-bottom: 1px solid #e6e6e6;
}
.context-menu-item.context-menu-hover {
color: #fff;
cursor: pointer;
background-color: $primary;
}
.context-menu-item.context-menu-disabled {
color: #bbb;
cursor: default;
background-color: #fff;
}
.context-menu-input.context-menu-hover {
cursor: default;
}
.context-menu-submenu:after {
position: absolute;
top: 50%;
right: .5em;
z-index: 1;
width: 0;
height: 0;
content: '';
border-color: transparent transparent transparent #2f2f2f;
border-style: solid;
border-width: .25em 0 .25em .25em;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
.context-menu-item > .context-menu-list {
top: .3em;
/* re-positioned by js */
right: -.3em;
display: none;
}
.context-menu-item.context-menu-visible > .context-menu-list {
display: block;
}
.context-menu-accesskey {
text-decoration: underline;
}