backports murph-skeleton

This commit is contained in:
Simon Vieille 2021-06-23 10:19:49 +02:00
parent 5cf9dcf836
commit 6b7246771c
10 changed files with 64 additions and 53 deletions

View file

@ -1,27 +1,31 @@
<template> <template>
<div> <div>
<nav aria-label="breadcrumb bg-light"> <nav aria-label="breadcrumb" class="d-flex justify-content-between">
<ol class="breadcrumb mb-0 float-right file-manager-views">
<li class="breadcrumb-item">
<span class="fa fa-grip-horizontal" v-on:click="setView('grid')"></span>
</li>
<li class="breadcrumb-item">
<span class="fa fa-list" v-on:click="setView('list')"></span>
</li>
</ol>
<ol class="breadcrumb mb-0 float-right file-manager-actions">
<li class="breadcrumb-item">
<span class="fa fa-upload text-primary" v-bind:data-modal="generateUploadLink(directory)"></span>
<span class="fa fa-folder-plus text-primary" v-bind:data-modal="generateNewDirectoryLink(directory)"></span>
</li>
</ol>
<ol class="breadcrumb mb-0"> <ol class="breadcrumb mb-0">
<li class="breadcrumb-item" v-for="item in breadcrumb"> <li class="breadcrumb-item" v-for="item in breadcrumb" :key="item.label">
<a href="#" v-on:click="setDirectory(item.path)" v-html="item.label"></a> <a class="btn btn-sm" href="#" v-on:click="setDirectory(item.path)" v-html="item.label"></a>
</li> </li>
</ol> </ol>
<div class="d-flex">
<div class="breadcrumb mb-0 file-manager-actions">
<span class="btn btn-sm btn-primary ml-1">
<span class="fa fa-upload" v-bind:data-modal="generateUploadLink(directory)"></span>
</span>
<span class="btn btn-sm btn-primary ml-1">
<span class="fa fa-folder-plus" v-bind:data-modal="generateNewDirectoryLink(directory)"></span>
</span>
</div>
<div class="breadcrumb mb-0 file-manager-views">
<span class="btn btn-sm btn-dark ml-1">
<span class="fa fa-grip-horizontal" v-on:click="setView('grid')"></span>
</span>
<span class="btn btn-sm btn-dark ml-1">
<span class="fa fa-list" v-on:click="setView('list')"></span>
</span>
</div>
</div>
</nav> </nav>
<div class="card-deck" v-if="view == 'grid'"> <div class="card-deck" v-if="view == 'grid'">
@ -39,7 +43,7 @@
</div> </div>
</div> </div>
<div v-for="item in directories" class="card mt-3 ml-3 mb-3 border-0"> <div v-for="item in directories" class="card mt-3 ml-3 mb-3 border-0" :key="item.path">
<div class="card-body p-2"> <div class="card-body p-2">
<div class="card-text" v-on:dblclick="setDirectory(item.path)" v-bind:data-modal="generateInfoLink(item, true, context)"> <div class="card-text" v-on:dblclick="setDirectory(item.path)" v-bind:data-modal="generateInfoLink(item, true, context)">
<div class="text-center"> <div class="text-center">
@ -60,7 +64,7 @@
</div> </div>
</div> </div>
</div> </div>
<div v-for="item in files" class="card mt-3 ml-3 mb-3 border-0" v-on:click="modalUrl = generateInfoLink(item, null, context)" v-bind:data-modal="generateInfoLink(item, null, context)"> <div v-for="item in files" class="card mt-3 ml-3 mb-3 border-0" v-on:click="modalUrl = generateInfoLink(item, null, context)" v-bind:data-modal="generateInfoLink(item, null, context)" :key="item.path">
<div class="card-body p-2"> <div class="card-body p-2">
<div class="card-text"> <div class="card-text">
<div class="text-center"> <div class="text-center">
@ -94,7 +98,7 @@
</td> </td>
</tr> </tr>
<tr v-for="item in directories" v-on:dblclick="setDirectory(item.path)" v-bind:data-modal="generateInfoLink(item, true, context)"> <tr v-for="item in directories" v-on:dblclick="setDirectory(item.path)" v-bind:data-modal="generateInfoLink(item, true, context)" :key="item.path">
<td width="10"> <td width="10">
<span class="fa fa-folder text-warning"></span> <span class="fa fa-folder text-warning"></span>
</td> </td>
@ -108,7 +112,7 @@
<span v-html="item.basename"></span> <span v-html="item.basename"></span>
</td> </td>
</tr> </tr>
<tr v-for="item in files"> <tr v-for="item in files" :key="item.path">
<td width="10"> <td width="10">
<FileIcon v-bind:mime="item.mime" v-bind:path="item.webPath" v-bind:thumb="false" /> <FileIcon v-bind:mime="item.mime" v-bind:path="item.webPath" v-bind:thumb="false" />
</td> </td>
@ -151,14 +155,19 @@ tr {
padding-left: 40px; padding-left: 40px;
} }
.breadcrumb { .breadcrumb, nav {
border-radius: 0; border-radius: 0;
background: #e9ecef;
} }
.file-manager-actions .fa { .file-manager-actions .fa {
padding: 3px; padding: 3px;
cursor: pointer; cursor: pointer;
} }
.breadcrumb-item + .breadcrumb-item::before {
margin-top: 4px;
}
</style> </style>
<script> <script>

View file

@ -17,7 +17,7 @@ module.exports = () => {
$.post(route, datas) $.post(route, datas)
.always(() => { .always(() => {
document.location.href = document.location.href document.location.reload()
}) })
}) })
} }

View file

@ -3,6 +3,6 @@ const $ = require('jquery')
module.exports = function () { module.exports = function () {
$('*[data-jschoice]').each(function (key, item) { $('*[data-jschoice]').each(function (key, item) {
new Choices(item) return new Choices(item)
}) })
} }

View file

@ -10,6 +10,12 @@ const isDateSupported = () => {
return input.value !== value return input.value !== value
} }
const createDatePicker = (input) => {
return new Datepicker.Datepicker(input, {
format: 'yyyy-mm-dd'
})
}
module.exports = () => { module.exports = () => {
if (isDateSupported()) { if (isDateSupported()) {
return return
@ -18,9 +24,7 @@ module.exports = () => {
const inputs = document.querySelectorAll('input[type="date"]') const inputs = document.querySelectorAll('input[type="date"]')
const size = inputs.length const size = inputs.length
for (let i = 0, c = inputs.length; i < c; i++) { for (let i = 0, c = size; i < c; i++) {
new Datepicker.Datepicker(inputs[i], { createDatePicker(inputs[i])
format: 'yyyy-mm-dd'
})
} }
} }

View file

@ -2,7 +2,6 @@ const $ = require('jquery')
const DocumentSelector = () => { const DocumentSelector = () => {
const forms = $('.document-selector-form') const forms = $('.document-selector-form')
const btnSubmit = $('#download-archive-form button')
const handler = function () { const handler = function () {
forms.each((fi, f) => { forms.each((fi, f) => {

View file

@ -44,7 +44,7 @@ const fileManagerBrowser = function (callback) {
$('body').on('click', '#file-manager-insert', clickCallback) $('body').on('click', '#file-manager-insert', clickCallback)
new Vue({ return new Vue({
el: '#fm-modal-content', el: '#fm-modal-content',
template: '<FileManager context="tinymce" />', template: '<FileManager context="tinymce" />',
components: { components: {
@ -53,10 +53,10 @@ const fileManagerBrowser = function (callback) {
}) })
} }
if (typeof tinymce !== 'undefined') { if (typeof window.tinymce !== 'undefined') {
tinymce.murph = tinymce.murph || {} window.tinymce.murph = window.tinymce.murph || {}
tinymce.murph.selector = tinymce.murph.selector || '*[data-tinymce]' window.tinymce.murph.selector = window.tinymce.murph.selector || '*[data-tinymce]'
tinymce.murph.configurationBase = tinymce.murph.configurationBase || { window.tinymce.murph.configurationBase = window.tinymce.murph.configurationBase || {
base_url: '/vendor/tinymce/', base_url: '/vendor/tinymce/',
cache_suffix: '?v=4.1.6', cache_suffix: '?v=4.1.6',
importcss_append: true, importcss_append: true,
@ -70,18 +70,18 @@ if (typeof tinymce !== 'undefined') {
file_picker_types: 'image', file_picker_types: 'image',
init_instance_callback: function (editor) { init_instance_callback: function (editor) {
editor.on('SetContent', () => { editor.on('SetContent', () => {
tinymce.triggerSave(false, true) window.tinymce.triggerSave(false, true)
}) })
editor.on('Change', () => { editor.on('Change', () => {
tinymce.triggerSave(false, true) window.tinymce.triggerSave(false, true)
}) })
} }
} }
tinymce.murph.modes = tinymce.murph.modes || {} window.tinymce.murph.modes = window.tinymce.murph.modes || {}
tinymce.murph.modes.default = tinymce.murph.modes.default || { window.tinymce.murph.modes.default = window.tinymce.murph.modes.default || {
plugins: 'print preview importcss searchreplace visualblocks visualchars fullscreen template table charmap hr pagebreak nonbreaking toc insertdatetime advlist lists wordcount textpattern noneditable help charmap quickbars link image code autoresize', plugins: 'print preview importcss searchreplace visualblocks visualchars fullscreen template table charmap hr pagebreak nonbreaking toc insertdatetime advlist lists wordcount textpattern noneditable help charmap quickbars link image code autoresize',
menubar: 'file edit view insert format tools table tc help', menubar: 'file edit view insert format tools table tc help',
toolbar: 'undo redo | bold italic underline strikethrough | link image | fontselect fontsizeselect formatselect | alignleft aligncenter alignright alignjustify | outdent indent | numlist bullist checklist | forecolor backcolor casechange permanentpen formatpainter removeformat | pagebreak | charmap | fullscreen preview', toolbar: 'undo redo | bold italic underline strikethrough | link image | fontselect fontsizeselect formatselect | alignleft aligncenter alignright alignjustify | outdent indent | numlist bullist checklist | forecolor backcolor casechange permanentpen formatpainter removeformat | pagebreak | charmap | fullscreen preview',
@ -89,7 +89,7 @@ if (typeof tinymce !== 'undefined') {
contextmenu: 'link image imagetools table configurepermanentpen' contextmenu: 'link image imagetools table configurepermanentpen'
} }
tinymce.murph.modes.light = tinymce.murph.modes.light || { window.tinymce.murph.modes.light = window.tinymce.murph.modes.light || {
contextmenu: 'link image imagetools table configurepermanentpen', contextmenu: 'link image imagetools table configurepermanentpen',
quickbars_selection_toolbar: 'bold italic', quickbars_selection_toolbar: 'bold italic',
toolbar: 'undo redo | bold italic underline' toolbar: 'undo redo | bold italic underline'
@ -97,7 +97,7 @@ if (typeof tinymce !== 'undefined') {
} }
const buildConfiguration = (conf) => { const buildConfiguration = (conf) => {
return Object.assign({}, tinymce.murph.configurationBase, conf) return Object.assign({}, window.tinymce.murph.configurationBase, conf)
} }
const makeId = () => { const makeId = () => {
@ -113,7 +113,7 @@ const makeId = () => {
} }
const doInitEditor = () => { const doInitEditor = () => {
$(tinymce.murph.selector).each((i, v) => { $(window.tinymce.murph.selector).each((i, v) => {
const element = $(v) const element = $(v)
let id = null let id = null
@ -130,15 +130,15 @@ const doInitEditor = () => {
mode = 'default' mode = 'default'
} }
if (!tinymce.murph.modes.hasOwnProperty(mode)) { if (!Object.prototype.hasOwnProperty.call(window.tinymce.murph.modes, mode)) {
return return
} }
const conf = buildConfiguration(tinymce.murph.modes[mode]) const conf = buildConfiguration(window.tinymce.murph.modes[mode])
conf.mode = 'exact' conf.mode = 'exact'
conf.elements = id conf.elements = id
tinymce.init(conf) window.tinymce.init(conf)
}) })
} }

View file

@ -7,7 +7,7 @@ module.exports = () => {
return return
} }
new Vue({ return new Vue({
el: '#file-manager', el: '#file-manager',
template: '<FileManager context="crud" />', template: '<FileManager context="crud" />',
components: { components: {

View file

@ -44,7 +44,7 @@ const fileManagerBrowser = function (callback) {
$('body').on('click', '#file-manager-insert', clickCallback) $('body').on('click', '#file-manager-insert', clickCallback)
new Vue({ return new Vue({
el: '#fm-modal-content', el: '#fm-modal-content',
template: '<FileManager context="tinymce" />', template: '<FileManager context="tinymce" />',
components: { components: {

View file

@ -7,7 +7,6 @@ module.exports = function () {
const target = e.target const target = e.target
const form = $(target) const form = $(target)
const data = new FormData(target) const data = new FormData(target)
const type = form.attr('enctype')
const method = form.attr('method') const method = form.attr('method')
const files = form.find('input[type=file]') const files = form.find('input[type=file]')
@ -22,11 +21,11 @@ module.exports = function () {
contentType: false, contentType: false,
type: method || 'GET', type: method || 'GET',
success: function (data) { success: function (data) {
if (data.hasOwnProperty('_dispatch')) { if (Object.prototype.hasOwnProperty.call(data, '_dispatch')) {
$('body').trigger(data._dispatch) $('body').trigger(data._dispatch)
} }
if (data.hasOwnProperty('_message') && data.hasOwnProperty('_level')) { if (Object.prototype.hasOwnProperty.call(data, '_message') && Object.prototype.hasOwnProperty.call(data, '_level')) {
const message = data._message const message = data._message
const level = data._level const level = data._level
const titles = { const titles = {

View file

@ -6,7 +6,7 @@ module.exports = () => {
const element = $(list) const element = $(list)
const route = element.attr('data-sortable-route') const route = element.attr('data-sortable-route')
new Sortable(list, { return new Sortable(list, {
handle: '*[data-sortable-item]', handle: '*[data-sortable-item]',
sort: true, sort: true,
animation: 150, animation: 150,
@ -25,7 +25,7 @@ module.exports = () => {
$.post(route, datas) $.post(route, datas)
.always((data) => { .always((data) => {
document.location.href = document.location.href document.location.reload()
}) })
} }
}) })