mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-05 18:23:48 +00:00
add twemoji
This commit is contained in:
@@ -559,7 +559,6 @@ function get_pretty_name($basename, $name, $mimetype)
|
||||
function get_image_meta_data($file)
|
||||
{
|
||||
if (get_file_type_from_mimetype($file->getMimeType()) === 'jpeg') {
|
||||
return exif_read_data($file);
|
||||
|
||||
return mb_convert_encoding(
|
||||
exif_read_data($file), 'UTF8', 'UTF8'
|
||||
|
||||
@@ -439,7 +439,7 @@ class Editor
|
||||
$temp_filename = $file->getClientOriginalName();
|
||||
|
||||
// File Path
|
||||
$file_path = config('filesystems.disks.local.root') . '/chunks/' . $temp_filename;\
|
||||
$file_path = config('filesystems.disks.local.root') . '/chunks/' . $temp_filename;
|
||||
|
||||
// Generate file
|
||||
File::append($file_path, $file->get());
|
||||
|
||||
50
package-lock.json
generated
50
package-lock.json
generated
@@ -10003,6 +10003,53 @@
|
||||
"resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.5.tgz",
|
||||
"integrity": "sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q="
|
||||
},
|
||||
"twemoji": {
|
||||
"version": "13.0.1",
|
||||
"resolved": "https://registry.npmjs.org/twemoji/-/twemoji-13.0.1.tgz",
|
||||
"integrity": "sha512-mrTBq+XpCLM4zm76NJOjLHoQNV9mHdBt3Cba/T5lS1rxn8ArwpqE47mqTocupNlkvcLxoeZJjYSUW0DU5ZwqZg==",
|
||||
"requires": {
|
||||
"fs-extra": "^8.0.1",
|
||||
"jsonfile": "^5.0.0",
|
||||
"twemoji-parser": "13.0.0",
|
||||
"universalify": "^0.1.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"fs-extra": {
|
||||
"version": "8.1.0",
|
||||
"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.1.0.tgz",
|
||||
"integrity": "sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==",
|
||||
"requires": {
|
||||
"graceful-fs": "^4.2.0",
|
||||
"jsonfile": "^4.0.0",
|
||||
"universalify": "^0.1.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"jsonfile": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
|
||||
"integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=",
|
||||
"requires": {
|
||||
"graceful-fs": "^4.1.6"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"jsonfile": {
|
||||
"version": "5.0.0",
|
||||
"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-5.0.0.tgz",
|
||||
"integrity": "sha512-NQRZ5CRo74MhMMC3/3r5g2k4fjodJ/wh8MxjFbCViWKFjxrnudWSY5vomh+23ZaXzAS7J3fBZIR2dV6WbmfM0w==",
|
||||
"requires": {
|
||||
"graceful-fs": "^4.1.6",
|
||||
"universalify": "^0.1.2"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"twemoji-parser": {
|
||||
"version": "13.0.0",
|
||||
"resolved": "https://registry.npmjs.org/twemoji-parser/-/twemoji-parser-13.0.0.tgz",
|
||||
"integrity": "sha512-zMaGdskpH8yKjT2RSE/HwE340R4Fm+fbie4AaqjDa4H/l07YUmAvxkSfNl6awVWNRRQ0zdzLQ8SAJZuY5MgstQ=="
|
||||
},
|
||||
"type-is": {
|
||||
"version": "1.6.18",
|
||||
"resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
|
||||
@@ -10124,8 +10171,7 @@
|
||||
"universalify": {
|
||||
"version": "0.1.2",
|
||||
"resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
|
||||
"integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==",
|
||||
"dev": true
|
||||
"integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg=="
|
||||
},
|
||||
"unpipe": {
|
||||
"version": "1.0.0",
|
||||
|
||||
@@ -23,6 +23,7 @@
|
||||
"@fortawesome/vue-fontawesome": "^0.1.10",
|
||||
"lodash": "^4.17.20",
|
||||
"node-sass": "^4.14.1",
|
||||
"twemoji": "^13.0.1",
|
||||
"vee-validate": "^3.3.9",
|
||||
"vue": "^2.6.11",
|
||||
"vue-feather-icons": "^5.1.0",
|
||||
|
||||
@@ -29,7 +29,7 @@
|
||||
"/chunks/environment-setup.js": "/chunks/environment-setup.js?id=a2eed5073e52410cab54",
|
||||
"/chunks/files.js": "/chunks/files.js?id=6a283c2c9f8a02500bc6",
|
||||
"/chunks/files~chunks/settings-subscription~chunks/shared-files~chunks/shared-page~chunks/user-subscription.js": "/chunks/files~chunks/settings-subscription~chunks/shared-files~chunks/shared-page~chunks/user-subscription.js?id=b646ec02fb9d6a497e74",
|
||||
"/chunks/files~chunks/shared-files~chunks/shared-page.js": "/chunks/files~chunks/shared-files~chunks/shared-page.js?id=7429f60059bbb3b76a66",
|
||||
"/chunks/files~chunks/shared-files~chunks/shared-page.js": "/chunks/files~chunks/shared-files~chunks/shared-page.js?id=e30bde665233e8108fc2",
|
||||
"/chunks/files~chunks/shared-page.js": "/chunks/files~chunks/shared-page.js?id=47ade53389e84dd64310",
|
||||
"/chunks/forgotten-password.js": "/chunks/forgotten-password.js?id=d5e39543eeb619cb5513",
|
||||
"/chunks/installation-disclaimer.js": "/chunks/installation-disclaimer.js?id=be9304e6ba2c61b6cab3",
|
||||
@@ -75,23 +75,24 @@
|
||||
"/chunks/user-storage.js": "/chunks/user-storage.js?id=5cfec8a8f8a8aef24ef2",
|
||||
"/chunks/user-subscription.js": "/chunks/user-subscription.js?id=c001bef2d6d5171cb359",
|
||||
"/chunks/users.js": "/chunks/users.js?id=6e68cb068f69fba3199c",
|
||||
"/js/main.93835132e94cb70cd948.hot-update.js": "/js/main.93835132e94cb70cd948.hot-update.js",
|
||||
"/js/main.14e2786738b678e42790.hot-update.js": "/js/main.14e2786738b678e42790.hot-update.js",
|
||||
"/js/main.1e09d5a114b47f78f735.hot-update.js": "/js/main.1e09d5a114b47f78f735.hot-update.js",
|
||||
"/js/main.4d2831225ff8c15f9574.hot-update.js": "/js/main.4d2831225ff8c15f9574.hot-update.js",
|
||||
"/js/main.a042e64d43031251bbaa.hot-update.js": "/js/main.a042e64d43031251bbaa.hot-update.js",
|
||||
"/js/main.a694129c76d54bc01c54.hot-update.js": "/js/main.a694129c76d54bc01c54.hot-update.js",
|
||||
"/js/main.b4e7813819304123bca8.hot-update.js": "/js/main.b4e7813819304123bca8.hot-update.js",
|
||||
"/js/main.662b49470346b4b76841.hot-update.js": "/js/main.662b49470346b4b76841.hot-update.js",
|
||||
"/js/main.c8076428be03059b7e5e.hot-update.js": "/js/main.c8076428be03059b7e5e.hot-update.js",
|
||||
"/js/main.3c7083753a45cd005131.hot-update.js": "/js/main.3c7083753a45cd005131.hot-update.js",
|
||||
"/js/main.507f77403a28efa7443a.hot-update.js": "/js/main.507f77403a28efa7443a.hot-update.js",
|
||||
"/js/main.2fd90b99aa2342fdef5f.hot-update.js": "/js/main.2fd90b99aa2342fdef5f.hot-update.js",
|
||||
"/js/main.bd0b6550dcc4e063c4b2.hot-update.js": "/js/main.bd0b6550dcc4e063c4b2.hot-update.js",
|
||||
"/js/main.6be3a1f5d38918f938a0.hot-update.js": "/js/main.6be3a1f5d38918f938a0.hot-update.js",
|
||||
"/js/main.77ffad300745cf6a660f.hot-update.js": "/js/main.77ffad300745cf6a660f.hot-update.js",
|
||||
"/js/main.e8e09c42dd190eb3bbcb.hot-update.js": "/js/main.e8e09c42dd190eb3bbcb.hot-update.js",
|
||||
"/js/main.c91c2d641e78f5b70169.hot-update.js": "/js/main.c91c2d641e78f5b70169.hot-update.js",
|
||||
"/js/main.47d4d2225326852931a0.hot-update.js": "/js/main.47d4d2225326852931a0.hot-update.js",
|
||||
"/js/main.69855deb7789f02f9f19.hot-update.js": "/js/main.69855deb7789f02f9f19.hot-update.js"
|
||||
"/js/main.b906f4dccf00f7d0df9b.hot-update.js": "/js/main.b906f4dccf00f7d0df9b.hot-update.js",
|
||||
"/js/main.51e6604147d828f6788c.hot-update.js": "/js/main.51e6604147d828f6788c.hot-update.js",
|
||||
"/js/main.0cdd7ec9d134e07cbbe5.hot-update.js": "/js/main.0cdd7ec9d134e07cbbe5.hot-update.js",
|
||||
"/js/main.a1bbd60a06d2e7857892.hot-update.js": "/js/main.a1bbd60a06d2e7857892.hot-update.js",
|
||||
"/js/main.7d7511e400150e72f650.hot-update.js": "/js/main.7d7511e400150e72f650.hot-update.js",
|
||||
"/js/main.fd48cad164a60b75fe37.hot-update.js": "/js/main.fd48cad164a60b75fe37.hot-update.js",
|
||||
"/js/main.296e16fc2d46f99aeae1.hot-update.js": "/js/main.296e16fc2d46f99aeae1.hot-update.js",
|
||||
"/js/main.55e979567c0a590fd839.hot-update.js": "/js/main.55e979567c0a590fd839.hot-update.js",
|
||||
"/js/main.8f9251f7ae8357e3db2e.hot-update.js": "/js/main.8f9251f7ae8357e3db2e.hot-update.js",
|
||||
"/js/main.de57ba3a3902452e1149.hot-update.js": "/js/main.de57ba3a3902452e1149.hot-update.js",
|
||||
"/js/main.c29932dfec3afef8d8fd.hot-update.js": "/js/main.c29932dfec3afef8d8fd.hot-update.js",
|
||||
"/js/main.49b9f8ec98d8ee8c9c32.hot-update.js": "/js/main.49b9f8ec98d8ee8c9c32.hot-update.js",
|
||||
"/js/main.c2adbb59071c1ca6d186.hot-update.js": "/js/main.c2adbb59071c1ca6d186.hot-update.js",
|
||||
"/js/main.ac8d05cce080431208c8.hot-update.js": "/js/main.ac8d05cce080431208c8.hot-update.js",
|
||||
"/js/main.f75a1a86202d4cdc281c.hot-update.js": "/js/main.f75a1a86202d4cdc281c.hot-update.js",
|
||||
"/js/main.af5c709a6815af8a4e19.hot-update.js": "/js/main.af5c709a6815af8a4e19.hot-update.js",
|
||||
"/js/main.7318bbc00df71e76481e.hot-update.js": "/js/main.7318bbc00df71e76481e.hot-update.js",
|
||||
"/js/main.d5f1dacf73037666202d.hot-update.js": "/js/main.d5f1dacf73037666202d.hot-update.js",
|
||||
"/js/main.bea7af7eaca85b6fec19.hot-update.js": "/js/main.bea7af7eaca85b6fec19.hot-update.js",
|
||||
"/js/main.8f087722cc55622e0a99.hot-update.js": "/js/main.8f087722cc55622e0a99.hot-update.js"
|
||||
}
|
||||
|
||||
@@ -30,7 +30,7 @@
|
||||
<FontAwesomeIcon v-if="isFolder && !folderIconHandle" :ref="`folder${this.data.unique_id}`" :class="{ 'is-deleted': isDeleted }" class="folder-icon" icon="folder"/>
|
||||
|
||||
<!-- If folder have set emoji -->
|
||||
<div class="emoji" v-if="isFolder && folderIconHandle"> {{folderIconHandle}}</div>
|
||||
<div class="emoji-wrapper" v-if="isFolder && folderIconHandle"> {{folderIconHandle}}</div>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -280,8 +280,13 @@ export default {
|
||||
}, 300)
|
||||
},
|
||||
created() {
|
||||
|
||||
this.$emojisCustomize()
|
||||
|
||||
this.itemName = this.data.name
|
||||
|
||||
|
||||
|
||||
events.$on('newFolder:focus', (unique_id) => {
|
||||
|
||||
if(this.data.unique_id == unique_id) {
|
||||
@@ -312,6 +317,13 @@ export default {
|
||||
@import '@assets/vue-file-manager/_variables';
|
||||
@import '@assets/vue-file-manager/_mixins';
|
||||
|
||||
img.emoji {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
margin: 0 .05em 0 .1em;
|
||||
vertical-align: -0.1em;
|
||||
}
|
||||
|
||||
.slide-from-left-move {
|
||||
transition: transform 300s ease;
|
||||
}
|
||||
@@ -464,8 +476,8 @@ export default {
|
||||
line-height: 0;
|
||||
margin-right: 20px;
|
||||
|
||||
.emoji {
|
||||
@include font-size(35)
|
||||
.emoji-wrapper {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.folder-icon {
|
||||
|
||||
@@ -2,14 +2,14 @@
|
||||
<div class="set-folder-icon">
|
||||
|
||||
<TableWrapper >
|
||||
<TableOption :title="$t('popup_rename.tab_emoji_title')" icon="emoji">
|
||||
<TableOption id="emoji-list" :title="$t('popup_rename.tab_emoji_title')" icon="emoji">
|
||||
<div class="select-emoji-wrapper">
|
||||
<label class="main-label">Pick Yout Emoji Icon:</label>
|
||||
|
||||
<div @click="openMenu" v-if="!selectOpen" class="select-input-wrapper">
|
||||
|
||||
<div class="select-input" v-if="selectedEmoji">
|
||||
<span>{{selectedEmoji.char}}</span>
|
||||
<div class="emoji-preview">{{selectedEmoji.char}}</div>
|
||||
<span>{{selectedEmoji.name}}</span>
|
||||
</div>
|
||||
|
||||
@@ -76,6 +76,9 @@
|
||||
if(this.searchEmoji !== undefined) {
|
||||
emojisList = this.emojis.filter(emoji => emoji.name.includes(this.searchEmoji))
|
||||
}
|
||||
|
||||
this.$emojisCustomize('emoji-list')
|
||||
|
||||
return emojisList ? emojisList : "Not Found"
|
||||
},
|
||||
},
|
||||
@@ -87,13 +90,16 @@
|
||||
selectOpen: false,
|
||||
emojis: emojis,
|
||||
colors: ['#FF6633', '#FFB399', '#FF33FF', '#FFFF99', '#00B3E6',
|
||||
'#E6B333', '#3366E6', '#999966', '#99FF99', '#B34D4D',
|
||||
'#80B300', '#809900', '#E6B3B3', '#6680B3']
|
||||
'#E6B333', '#3366E6', '#999966', '#99FF99', '#B34D4D',
|
||||
'#80B300', '#809900', '#E6B3B3', '#6680B3']
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
openMenu() {
|
||||
this.selectOpen = ! this.selectOpen
|
||||
|
||||
this.$emojisCustomize('emoji-list')
|
||||
|
||||
},
|
||||
setIcon(value) {
|
||||
if(value.emoji)
|
||||
@@ -106,6 +112,9 @@
|
||||
|
||||
|
||||
this.selectOpen = false
|
||||
|
||||
this.$emojisCustomize()
|
||||
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
@@ -194,9 +203,10 @@
|
||||
|
||||
.option {
|
||||
list-style: none;
|
||||
padding: 8px;
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
padding: 6px;
|
||||
cursor: pointer;
|
||||
@include font-size(30);
|
||||
|
||||
&:hover {
|
||||
background: $light_background;
|
||||
@@ -234,6 +244,15 @@
|
||||
.select-input {
|
||||
@include font-size(16);
|
||||
font-weight: 700;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
||||
.emoji-preview {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.not-selected {
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
<!--Else show only folder icon-->
|
||||
<FontAwesomeIcon ref="folderIcon" v-if="isFolder && !folderIconHandle" class="folder-icon" icon="folder"/>
|
||||
|
||||
<div v-if="isFolder && folderIconHandle" class="folder-emoji">{{folderIconHandle}}</div>
|
||||
<div id="thumbnail-emoji" v-if="isFolder && folderIconHandle" class="folder-emoji">{{folderIconHandle}}</div>
|
||||
</div>
|
||||
|
||||
<!--Name-->
|
||||
@@ -54,6 +54,7 @@
|
||||
folderIconHandle(){
|
||||
let icon = undefined
|
||||
|
||||
this.$emojisCustomize()
|
||||
// Set icon folder if set folder from rename popup
|
||||
if(this.setFolderIcon){
|
||||
|
||||
|
||||
17
resources/js/helpers.js
vendored
17
resources/js/helpers.js
vendored
@@ -1,5 +1,6 @@
|
||||
import i18n from '@/i18n/index'
|
||||
import store from './store/index'
|
||||
import twemoji from 'twemoji'
|
||||
import {debounce, includes} from "lodash";
|
||||
import {events} from './bus'
|
||||
import axios from 'axios'
|
||||
@@ -351,7 +352,21 @@ const Helpers = {
|
||||
let body = document.body
|
||||
body.classList.add('windows')
|
||||
}
|
||||
}
|
||||
},
|
||||
Vue.prototype.$emojisCustomize = function (elementId) {
|
||||
this.$nextTick(() => {
|
||||
|
||||
let list = elementId ? document.getElementById(elementId) : document.body
|
||||
|
||||
twemoji.parse(list, {
|
||||
folder: 'svg',
|
||||
ext: '.svg',
|
||||
attributes: () => ({
|
||||
loading: 'lazy'
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user