MightyPork/datatable.directory
1
0
Fork 1
Code Issues 25 Pull Requests Releases Wiki Activity

Merge branch 'editing', split darkmode to own file

Browse Source
This commit is contained in:
MightyPork
2018-08-06 22:39:00 +02:00
parent 8cbfa93adf 78a586328b
commit 84103d6001
60 changed files with 2066 additions and 427 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/assets/js/app.js
Vendored
+7 -104
View File
@@ -1,111 +1,14 @@
/**
* First we will load all of this project's JavaScript dependencies which
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
*/
/* Project entrypoint */
require('./bootstrap')
let url_slug = require('./url-slug')
require('./base-setup')
require('./modules/block-collapse')
require('./modules/flash-messages')
require('./modules/form-autoalias')
require('./vue-init')
$(function () {
// Remove all noscript from forms etc
$('noscript').remove();
// Bootstrap tooltips
$('[data-toggle="tooltip"]').tooltip({
container: 'body'
})
// auto hide flash alerts
let $notifs = $('div.alert').not('.alert-important').addClass('fadeout')
setTimeout(() => {
$notifs.addClass('fade')
setTimeout(() => {
$notifs.addClass('hidden')
}, 500)
}, 2500)
// toggle collapse when clicked outside link, without drag
$('.block-collapse')
.on('mousedown', (e) => {
let $bc = $(e.target).closest('.block-collapse')
$bc.data('mx', e.screenX);
$bc.data('my', e.screenY);
})
.on('mouseup', (e) => {
if (e.target.nodeName === 'A') return
let $bc = $(e.target).closest('.block-collapse')
if (typeof $bc.data('mx') !== 'undefined') {
let x0 = +$bc.data('mx');
let y0 = +$bc.data('my');
if (Math.abs(x0 - e.screenX) > 5 || Math.abs(y0 - e.screenY) > 5) {
// drag
} else {
$(e.target).closest('.block-collapse').toggleClass('reveal')
}
}
})
})
// auto-alias
$(document).on('input keypress paste keyup', 'input[data-autoalias]', function () {
const $this = $(this)
const target_name = $this.data('autoalias')
const delimiter = $this.data('aa-delimiter') || '_'
const new_alias = url_slug($this.val(), {'delimiter': delimiter})
const $target = $(`input[name="${target_name}"]`)
const lastset = $target.data('aa-last-set-val')
// 1. pick up, or 2. continue
if (new_alias === $target.val() || lastset === $target.val()) {
$target.val(new_alias)
$target.data('aa-last-set-val', new_alias)
}
})
$(function () {
// theme switcher without reloading
let themeStyle = $('#theme-style');
const lightURL = themeStyle.data('light-url');
const darkURL = themeStyle.data('dark-url');
const navbar = $('.page-navbar');
const logo = $('#navbar-logo');
window.toggleDarkMode = function () {
let newStyle = document.createElement('link');
newStyle.rel = 'stylesheet';
if (themeStyle.attr('href') === lightURL) {
newStyle.href = darkURL;
navbar.removeClass('navbar-light');
navbar.addClass('navbar-dark');
logo.attr('src', logo.data('src-dark'));
document.cookie = "dark_mode=1";
} else {
newStyle.href = lightURL;
navbar.removeClass('navbar-dark');
navbar.addClass('navbar-light');
logo.attr('src', logo.data('src-light'));
document.cookie = "dark_mode=0;expires=" + new Date().toUTCString();
}
// remove old css after new css has loaded to prevent FOUC
let oldThemeStyle = themeStyle;
themeStyle = $(newStyle);
themeStyle.on('load', () => oldThemeStyle.remove());
$(document.head).append(themeStyle);
};
});
window.Vue = require('vue');
Vue.component('column-editor', require('./components/ColumnEditor.vue'));
Vue.component('v-icon', require('./components/Icon.vue'));
const app = new Vue({
el: '#app'
});
resources/assets/js/base-setup.js
Vendored
+52
View File
@@ -0,0 +1,52 @@
window._ = require('./udash');
window.Popper = require('popper.js').default
/**
* We'll load jQuery and the Bootstrap jQuery plugin which provides support
* for JavaScript based Bootstrap features such as modals and tabs. This
* code may be modified to fit the specific needs of your application.
*/
window.$ = window.jQuery = require('jquery')
require('bootstrap')
/**
* We'll load the axios HTTP library which allows us to easily issue requests
* to our Laravel back-end. This library automatically handles sending the
* CSRF token as a header based on the value of the "XSRF" token cookie.
*/
window.axios = require('axios')
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'
/**
* Next we will register the CSRF Token as a common header with Axios so that
* all outgoing HTTP requests automatically have it attached. This is just
* a simple convenience so we don't have to attach every token manually.
*/
let token = document.head.querySelector('meta[name="csrf-token"]')
if (token) {
window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content
} else {
console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token')
}
/**
* Echo exposes an expressive API for subscribing to channels and listening
* for events that are broadcast by Laravel. Echo and event broadcasting
* allows your team to easily build robust real-time web applications.
*/
// import Echo from 'laravel-echo'
// window.Pusher = require('pusher-js');
// window.Echo = new Echo({
// broadcaster: 'pusher',
// key: process.env.MIX_PUSHER_APP_KEY,
// cluster: process.env.MIX_PUSHER_APP_CLUSTER,
// encrypted: true
// });
resources/assets/js/bootstrap.js
Vendored
-55
View File
@@ -1,55 +0,0 @@
// window._ = require('lodash');
window.Popper = require('popper.js').default;
/**
* We'll load jQuery and the Bootstrap jQuery plugin which provides support
* for JavaScript based Bootstrap features such as modals and tabs. This
* code may be modified to fit the specific needs of your application.
*/
try {
window.$ = window.jQuery = require('jquery');
require('bootstrap');
} catch (e) {}
// /**
// * We'll load the axios HTTP library which allows us to easily issue requests
// * to our Laravel back-end. This library automatically handles sending the
// * CSRF token as a header based on the value of the "XSRF" token cookie.
// */
//
// window.axios = require('axios');
//
// window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
//
// /**
// * Next we will register the CSRF Token as a common header with Axios so that
// * all outgoing HTTP requests automatically have it attached. This is just
// * a simple convenience so we don't have to attach every token manually.
// */
//
// let token = document.head.querySelector('meta[name="csrf-token"]');
//
// if (token) {
// window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
// } else {
// console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
// }
/**
* Echo exposes an expressive API for subscribing to channels and listening
* for events that are broadcast by Laravel. Echo and event broadcasting
* allows your team to easily build robust real-time web applications.
*/
// import Echo from 'laravel-echo'
// window.Pusher = require('pusher-js');
// window.Echo = new Echo({
// broadcaster: 'pusher',
// key: process.env.MIX_PUSHER_APP_KEY,
// cluster: process.env.MIX_PUSHER_APP_CLUSTER,
// encrypted: true
// });
resources/assets/js/components/Icon.vue
+1 -2
View File
@@ -1,12 +1,11 @@
<template>
<i :title="tooltipText">
<i :title="tooltipText" @click="$emit('click')">
<span class="sr-only" v-html=srHtml></span>
</i>
</template>
<script>
export default {
inheritAttrs: false,
props: {
alt: String,
srOnly: Boolean
resources/assets/js/components/RowsEditor.vue
+160
View File
@@ -0,0 +1,160 @@
<template>
<table class="table table-hover table-sm table-fixed td-va-middle">
<thead>
<tr>
<th style="width:3rem" class="border-top-0"></th>
<th style="width:3rem" class="border-top-0"></th>
<th v-for="col in columns" :class="colClasses(col)" :title="col.name">{{col.title}}</th>
</tr>
</thead>
<tbody>
<tr v-for="row in rows" :style="rowStyle(row)">
<td>
<a href="" :class="['btn','btn-outline-danger',{'active': row._remove}]"
@click.prevent="toggleRowDelete(row._id)">
<v-icon :class="row._remove ? 'fa-undo' : 'fa-trash-o'"
:alt="row._remove ? 'Undo Remove' : 'Remove'" />
</a>
</td>
<td>
<a href="" :class="['btn','btn-outline-secondary',{'disabled': row._remove}]"
@click.prevent="toggleRowEditing(row._id)">
<v-icon :class="row._editing ? 'fa-save' : 'fa-pencil'"
:alt="row._editing ? 'Save' : 'Edit'" />
</a>
</td>
<template v-if="row._editing">
<td v-for="col in columns" class="pr-0">
<input v-model="row[col.id]" :class="['form-control', { 'is-invalid': row._errors && row._errors[col.id] }]"
:title="(row._errors && row._errors[col.id]) ? row._errors[col.id][0] : null"
type="text" @keyup.enter="toggleRowEditing(row._id)">
</td>
</template>
<template v-else>
<td v-for="col in columns">
<span class="text-danger strike" title="Original value" v-if="isChanged(row, col.id)">{{row._orig[col.id]}}</span>
<span>{{ row[col.id] }}</span>
<v-icon v-if="isChanged(row, col.id)"
@click="revertCell(row, col.id)"
class="fa-undo text-danger pointer"
alt="Revert Change" />
</td>
</template>
</tr>
</tbody>
</table>
</template>
<style lang="scss" scoped>
@import "base";
</style>
<script>
export default {
props: {
route: String,
xRows: Object, // key'd by _id
columns: Array,
lastPage: Boolean,
},
data: function() {
return {
rows: this.xRows,
}
},
methods: {
busy (yes) {
$('#draft-busy').css('opacity', yes ? 1 : 0)
},
query (data, sucfn, erfn) {
this.busy(true)
if (!sucfn) sucfn = ()=>{}
if (!sucfn) erfn = ()=>{}
window.axios.post(this.route, data).then(sucfn).catch((error) => {
console.error(error.message)
erfn(error.response.data)
}).then(() => {
this.busy(false)
})
},
toggleRowDelete(_id) {
if (!_.isDefined(this.rows[_id])) return;
let remove = !this.rows[_id]._remove
this.query({
action: remove ? 'row.remove' : 'row.restore',
id: _id
}, (resp) => {
// if response is null, this was a New row
// and it was discarded without a way back - hard drop
if (_.isEmpty(resp.data)) {
this.$delete(this.rows, _id)
}
else {
this.$set(this.rows, _id, resp.data)
}
})
},
submitRowChange(row) {
this.query({
action: 'row.update',
data: row
}, (resp) => {
this.$set(this.rows, resp.data._id, resp.data);
}, (er) => {
if (!_.isUndefined(er.errors)) {
this.$set(this.rows[row._id], '_errors', er.errors);
}
})
},
toggleRowEditing(_id) {
if (this.rows[_id]._remove) return false; // can't edit row marked for removal
let editing = !this.rows[_id]._editing
if (!editing) {
this.submitRowChange(this.rows[_id])
} else {
this.$set(this.rows[_id], '_editing', true);
}
},
colClasses(col) {
return [
'border-top-0',
{
'text-danger': col._remove,
'strike': col._remove,
'text-success': col._new
}
]
},
rowStyle(row) {
return {
opacity: row._remove ? .8 : 1,
backgroundColor:
row._remove ? '#FFC4CC':
'transparent'
}
},
isChanged (row, colId) {
return row._changed && row._changed.indexOf(colId) > -1
},
revertCell(row, colId) {
this.submitRowChange(_.merge({}, row, { [colId]: row._orig[colId] }))
}
}
}
</script>
resources/assets/js/url-slug.js → resources/assets/js/lib/url-slug.js
Vendored
View File
resources/assets/js/modules/block-collapse.js
Vendored
+21
View File
@@ -0,0 +1,21 @@
// toggle collapse when clicked outside link, without drag
$(document)
.on('mousedown', '.block-collapse', function(e) {
let $bc = $(e.target).closest('.block-collapse')
$bc.data('mx', e.screenX)
$bc.data('my', e.screenY)
})
.on('mouseup', '.block-collapse', function(e) {
if (e.target.nodeName === 'A') return
let $bc = $(e.target).closest('.block-collapse')
if (typeof $bc.data('mx') !== 'undefined') {
let x0 = +$bc.data('mx')
let y0 = +$bc.data('my')
if (Math.abs(x0 - e.screenX) > 5 || Math.abs(y0 - e.screenY) > 5) {
// drag
} else {
$(e.target).closest('.block-collapse').toggleClass('reveal')
}
}
})
resources/assets/js/modules/flash-messages.js
Vendored
+10
View File
@@ -0,0 +1,10 @@
$(function() {
// auto hide flash alerts
let $notifs = $('div.alert').not('.alert-important').addClass('fadeout')
setTimeout(() => {
$notifs.addClass('fade')
setTimeout(() => {
$notifs.addClass('hidden')
}, 500)
}, 2500)
})
resources/assets/js/modules/form-autoalias.js
Vendored
+19
View File
@@ -0,0 +1,19 @@
let url_slug = require('../lib/url-slug')
// auto-alias
$(document).on('input keypress paste keyup', 'input[data-autoalias]', function () {
const $this = $(this)
const target_name = $this.data('autoalias')
const delimiter = $this.data('aa-delimiter') || '_'
const new_alias = url_slug($this.val(), {'delimiter': delimiter})
const $target = $(`input[name="${target_name}"]`)
const lastset = $target.data('aa-last-set-val')
// 1. pick up, or 2. continue
if (new_alias === $target.val() || lastset === $target.val()) {
$target.val(new_alias)
$target.data('aa-last-set-val', new_alias)
}
})
resources/assets/js/udash.js
Vendored
+12
View File
@@ -0,0 +1,12 @@
// subset of used lodash modules
export { default as each } from 'lodash/each'
export { default as isUndefined } from 'lodash/isUndefined'
export { default as merge } from 'lodash/merge'
export { default as unset } from 'lodash/unset'
export { default as isEmpty } from 'lodash/isEmpty'
function isDefined(x) {
return typeof(x) !== 'undefined';
}
export { isDefined }
resources/assets/js/vue-init.js
Vendored
+27
View File
@@ -0,0 +1,27 @@
window.Vue = require('vue');
const ColumnEditorCtor = Vue.component('column-editor', require('./components/ColumnEditor.vue'));
const RowsEditorCtor = Vue.component('rows-editor', require('./components/RowsEditor.vue'));
const IconCtor = Vue.component('v-icon', require('./components/Icon.vue'));
// const app = new Vue({
// el: '#app'
// });
window.app = {
ColumnEditor: function(selector, data) {
new ColumnEditorCtor({
propsData: data
}).$mount(selector);
},
RowsEditor: function(selector, data) {
new RowsEditorCtor({
propsData: data
}).$mount(selector);
},
Icon: function(selector, data) {
new IconCtor({
propsData: data
}).$mount(selector);
}
}
resources/assets/sass/_helpers.scss
Vendored
+17
View File
@@ -16,3 +16,20 @@
.box-shadow {
box-shadow: 0 2px 3px rgba(black, .3);
}
.strike {
text-decoration: line-through;
}
// for busy loaders etc
.opacity-fade {
transition: opacity .3s ease-in-out;
}
.pointer {
cursor: pointer;
}
.noscript-hide {
display: none;
}
resources/assets/sass/app.scss
Vendored
+2
View File
@@ -20,6 +20,8 @@ html {
@import "bootstrap-customizations/button";
@import "bootstrap-customizations/responsive";
@import "bootstrap-customizations/typography";
@import "bootstrap-customizations/nav";
@import "bootstrap-customizations/table";
@import "infobox";
resources/assets/sass/bootstrap-customizations/_border.scss
Vendored
+20
View File
@@ -15,3 +15,23 @@
.border-2 {
border-width: 2px !important;
}
.rounded-top-0 {
border-top-left-radius: 0 !important;
border-top-right-radius: 0 !important;
}
.rounded-left-0 {
border-top-left-radius: 0 !important;
border-bottom-left-radius: 0 !important;
}
.rounded-right-0 {
border-top-right-radius: 0 !important;
border-bottom-right-radius: 0 !important;
}
.rounded-bottom-0 {
border-bottom-left-radius: 0 !important;
border-bottom-right-radius: 0 !important;
}
resources/assets/sass/bootstrap-customizations/_nav.scss
Vendored
View File
resources/assets/sass/bootstrap-customizations/_responsive.scss
Vendored
+1 -1
View File
@@ -1,5 +1,5 @@
@media (max-width:767px) {
.mobile-only {
.no-mobile {
display: none;
}
resources/assets/sass/bootstrap-customizations/_table.scss
Vendored
+9
View File
@@ -0,0 +1,9 @@
.table-fixed {
table-layout: fixed;
}
.td-va-middle {
td, th {
vertical-align: middle !important;
}
}