refactor: lazy-load simplemde + minimal lodash

This commit is contained in:
NGPixel 2017-05-27 22:24:46 -04:00
parent 8eaa69ce78
commit ebe288a5b2
10 changed files with 332 additions and 172 deletions

3
.gitignore vendored
View File

@ -31,3 +31,6 @@ config.yml
/repo /repo
/data /data
/uploads /uploads
# IDE exclude
.idea

View File

@ -2,5 +2,6 @@
"eslint.enable": true, "eslint.enable": true,
"puglint.enable": true, "puglint.enable": true,
"standard.enable": false, "standard.enable": false,
"editor.formatOnSave": true "editor.formatOnSave": true,
"editor.tabSize": 2
} }

View File

@ -4,7 +4,6 @@
/* eslint-disable no-new */ /* eslint-disable no-new */
import $ from 'jquery' import $ from 'jquery'
import _ from 'lodash'
import Vue from 'vue' import Vue from 'vue'
import VueResource from 'vue-resource' import VueResource from 'vue-resource'
import VueClipboards from 'vue-clipboards' import VueClipboards from 'vue-clipboards'
@ -17,6 +16,33 @@ import VueI18Next from '@panter/vue-i18next'
import 'jquery-smooth-scroll' import 'jquery-smooth-scroll'
import 'jquery-sticky' import 'jquery-sticky'
// ====================================
// Load minimal lodash
// ====================================
import concat from 'lodash/concat'
import cloneDeep from 'lodash/cloneDeep'
import debounce from 'lodash/debounce'
import deburr from 'lodash/deburr'
import delay from 'lodash/delay'
import filter from 'lodash/filter'
import find from 'lodash/find'
import findKey from 'lodash/findKey'
import forEach from 'lodash/forEach'
import includes from 'lodash/includes'
import isEmpty from 'lodash/isEmpty'
import isNil from 'lodash/isNil'
import join from 'lodash/join'
import kebabCase from 'lodash/kebabCase'
import last from 'lodash/last'
import map from 'lodash/map'
import pullAt from 'lodash/pullAt'
import reject from 'lodash/reject'
import slice from 'lodash/slice'
import split from 'lodash/split'
import trim from 'lodash/trim'
import toUpper from 'lodash/toUpper'
// ==================================== // ====================================
// Load Helpers // Load Helpers
// ==================================== // ====================================
@ -30,6 +56,7 @@ import helpers from './helpers'
import alertComponent from './components/alert.vue' import alertComponent from './components/alert.vue'
import anchorComponent from './components/anchor.vue' import anchorComponent from './components/anchor.vue'
import colorPickerComponent from './components/color-picker.vue' import colorPickerComponent from './components/color-picker.vue'
import editorCodeblockComponent from './components/editor-codeblock.vue'
import loadingSpinnerComponent from './components/loading-spinner.vue' import loadingSpinnerComponent from './components/loading-spinner.vue'
import modalCreatePageComponent from './components/modal-create-page.vue' import modalCreatePageComponent from './components/modal-create-page.vue'
import modalCreateUserComponent from './components/modal-create-user.vue' import modalCreateUserComponent from './components/modal-create-user.vue'
@ -45,6 +72,35 @@ import contentViewComponent from './pages/content-view.component.js'
import editorComponent from './components/editor.component.js' import editorComponent from './components/editor.component.js'
import sourceViewComponent from './pages/source-view.component.js' import sourceViewComponent from './pages/source-view.component.js'
// ====================================
// Build lodash object
// ====================================
const _ = {
deburr,
concat,
cloneDeep,
debounce,
delay,
filter,
find,
findKey,
forEach,
includes,
isEmpty,
isNil,
join,
kebabCase,
last,
map,
pullAt,
reject,
slice,
split,
toUpper,
trim
}
// ==================================== // ====================================
// Initialize Vue Modules // Initialize Vue Modules
// ==================================== // ====================================
@ -101,6 +157,7 @@ $(() => {
colorPicker: colorPickerComponent, colorPicker: colorPickerComponent,
contentView: contentViewComponent, contentView: contentViewComponent,
editor: editorComponent, editor: editorComponent,
editorCodeblock: editorCodeblockComponent,
loadingSpinner: loadingSpinnerComponent, loadingSpinner: loadingSpinnerComponent,
modalCreatePage: modalCreatePageComponent, modalCreatePage: modalCreatePageComponent,
modalCreateUser: modalCreateUserComponent, modalCreateUser: modalCreateUserComponent,

View File

@ -0,0 +1,51 @@
<template lang="pug">
transition(:duration="400")
.modal(v-show='isShown', v-cloak)
transition(name='modal-background')
.modal-background(v-show='isShown')
.modal-container
transition(name='modal-content')
.modal-content.is-expanded(v-show='isShown')
header.is-green
span Insert Code Block
section.is-gapless
.columns.is-stretched
.column.is-one-quarter.modal-sidebar.is-green(style={'max-width':'350px'})
.model-sidebar-header Language
.model-sidebar-content
p.control.is-fullwidth
select(v-model='modeSelected')
option(v-for='mode in modes', v-bind:value='mode.name') {{ mode.caption }}
.column.ace-container
#codeblock-editor
footer
a.button.is-grey.is-outlined(v-on:click='cancel') Discard
a.button.is-green(v-on:click='insertCode') Insert Code Block
</template>
<script>
export default {
name: 'editor-codeblock',
data () {
return {}
},
computed: {
isShown () {
return this.$store.state.editorCodeblock.shown
}
},
methods: {
cancel () {
this.$store.dispatch('editorCodeBlock/close')
},
insertCode () {
this.$store.dispatch('alert', {
style: 'pink',
icon: 'inbox',
msg: 'Your code block has been inserted.'
})
this.cancel()
}
}
}
</script>

View File

@ -1,6 +1,7 @@
'use strict' 'use strict'
import SimpleMDE from 'simplemde' /* global FuseBox */
import filesize from 'filesize.js' import filesize from 'filesize.js'
import $ from 'jquery' import $ from 'jquery'
@ -45,180 +46,186 @@ export default {
}, },
mounted() { mounted() {
let self = this let self = this
mde = new SimpleMDE({ FuseBox.import('/js/simplemde/simplemde.min.js', (SimpleMDE) => {
autofocus: true, mde = new SimpleMDE({
autoDownloadFontAwesome: false, autofocus: true,
element: this.$refs.editorTextArea, autoDownloadFontAwesome: false,
placeholder: 'Enter Markdown formatted content here...', element: this.$refs.editorTextArea,
spellChecker: false, placeholder: 'Enter Markdown formatted content here...',
status: false, spellChecker: false,
toolbar: [ status: false,
{ toolbar: [
name: 'bold', {
action: SimpleMDE.toggleBold, name: 'bold',
className: 'icon-bold', action: SimpleMDE.toggleBold,
title: 'Bold' className: 'icon-bold',
}, title: 'Bold'
{
name: 'italic',
action: SimpleMDE.toggleItalic,
className: 'icon-italic',
title: 'Italic'
},
{
name: 'strikethrough',
action: SimpleMDE.toggleStrikethrough,
className: 'icon-strikethrough',
title: 'Strikethrough'
},
'|',
{
name: 'heading-1',
action: SimpleMDE.toggleHeading1,
className: 'icon-header fa-header-x fa-header-1',
title: 'Big Heading'
},
{
name: 'heading-2',
action: SimpleMDE.toggleHeading2,
className: 'icon-header fa-header-x fa-header-2',
title: 'Medium Heading'
},
{
name: 'heading-3',
action: SimpleMDE.toggleHeading3,
className: 'icon-header fa-header-x fa-header-3',
title: 'Small Heading'
},
{
name: 'quote',
action: SimpleMDE.toggleBlockquote,
className: 'icon-quote-left',
title: 'Quote'
},
'|',
{
name: 'unordered-list',
action: SimpleMDE.toggleUnorderedList,
className: 'icon-th-list',
title: 'Bullet List'
},
{
name: 'ordered-list',
action: SimpleMDE.toggleOrderedList,
className: 'icon-list-ol',
title: 'Numbered List'
},
'|',
{
name: 'link',
action: (editor) => {
/* if(!mdeModalOpenState) {
mdeModalOpenState = true;
$('#modal-editor-link').slideToggle();
} */
window.alert('Coming soon!')
}, },
className: 'icon-link2', {
title: 'Insert Link' name: 'italic',
}, action: SimpleMDE.toggleItalic,
{ className: 'icon-italic',
name: 'image', title: 'Italic'
action: (editor) => {
if (!mdeModalOpenState) {
vueImage.open()
}
}, },
className: 'icon-image', {
title: 'Insert Image' name: 'strikethrough',
}, action: SimpleMDE.toggleStrikethrough,
{ className: 'icon-strikethrough',
name: 'file', title: 'Strikethrough'
action: (editor) => {
if (!mdeModalOpenState) {
vueFile.open()
}
}, },
className: 'icon-paper', '|',
title: 'Insert File' {
}, name: 'heading-1',
{ action: SimpleMDE.toggleHeading1,
name: 'video', className: 'icon-header fa-header-x fa-header-1',
action: (editor) => { title: 'Big Heading'
if (!mdeModalOpenState) {
vueVideo.open()
}
}, },
className: 'icon-video-camera2', {
title: 'Insert Video Player' name: 'heading-2',
}, action: SimpleMDE.toggleHeading2,
'|', className: 'icon-header fa-header-x fa-header-2',
{ title: 'Medium Heading'
name: 'inline-code',
action: (editor) => {
if (!editor.codemirror.doc.somethingSelected()) {
return alerts.pushError('Invalid selection', 'You must select at least 1 character first.')
}
let curSel = editor.codemirror.doc.getSelections()
curSel = _.map(curSel, (s) => {
return '`' + s + '`'
})
editor.codemirror.doc.replaceSelections(curSel)
}, },
className: 'icon-terminal', {
title: 'Inline Code' name: 'heading-3',
}, action: SimpleMDE.toggleHeading3,
{ className: 'icon-header fa-header-x fa-header-3',
name: 'code-block', title: 'Small Heading'
action: (editor) => { },
if (!mdeModalOpenState) { {
if (mde.codemirror.doc.somethingSelected()) { name: 'quote',
vueCodeBlock.initContent = mde.codemirror.doc.getSelection() action: SimpleMDE.toggleBlockquote,
className: 'icon-quote-left',
title: 'Quote'
},
'|',
{
name: 'unordered-list',
action: SimpleMDE.toggleUnorderedList,
className: 'icon-th-list',
title: 'Bullet List'
},
{
name: 'ordered-list',
action: SimpleMDE.toggleOrderedList,
className: 'icon-list-ol',
title: 'Numbered List'
},
'|',
{
name: 'link',
action: (editor) => {
/* if(!mdeModalOpenState) {
mdeModalOpenState = true;
$('#modal-editor-link').slideToggle();
} */
window.alert('Coming soon!')
},
className: 'icon-link2',
title: 'Insert Link'
},
{
name: 'image',
action: (editor) => {
// if (!mdeModalOpenState) {
// vueImage.open()
// }
},
className: 'icon-image',
title: 'Insert Image'
},
{
name: 'file',
action: (editor) => {
// if (!mdeModalOpenState) {
// vueFile.open()
// }
},
className: 'icon-paper',
title: 'Insert File'
},
{
name: 'video',
action: (editor) => {
// if (!mdeModalOpenState) {
// vueVideo.open()
// }
},
className: 'icon-video-camera2',
title: 'Insert Video Player'
},
'|',
{
name: 'inline-code',
action: (editor) => {
if (!editor.codemirror.doc.somethingSelected()) {
return self.$store.dispatch('alert', {
style: 'orange',
icon: 'marquee',
msg: 'Invalid selection. Select at least 1 character.'
})
} }
let curSel = editor.codemirror.doc.getSelections()
vueCodeBlock.open() curSel = self._.map(curSel, (s) => {
} return '`' + s + '`'
})
editor.codemirror.doc.replaceSelections(curSel)
},
className: 'icon-terminal',
title: 'Inline Code'
}, },
className: 'icon-code', {
title: 'Code Block' name: 'code-block',
}, action: (editor) => {
'|', // if (!mdeModalOpenState) {
{ // if (mde.codemirror.doc.somethingSelected()) {
name: 'table', // vueCodeBlock.initContent = mde.codemirror.doc.getSelection()
action: (editor) => { // }
window.alert('Coming soon!')
// todo // vueCodeBlock.open()
// }
},
className: 'icon-code',
title: 'Code Block'
}, },
className: 'icon-table', '|',
title: 'Insert Table' {
}, name: 'table',
{ action: (editor) => {
name: 'horizontal-rule', window.alert('Coming soon!')
action: SimpleMDE.drawHorizontalRule, // todo
className: 'icon-minus2', },
title: 'Horizontal Rule' className: 'icon-table',
title: 'Insert Table'
},
{
name: 'horizontal-rule',
action: SimpleMDE.drawHorizontalRule,
className: 'icon-minus2',
title: 'Horizontal Rule'
}
],
shortcuts: {
'toggleBlockquote': null,
'toggleFullScreen': null
} }
], })
shortcuts: {
'toggleBlockquote': null,
'toggleFullScreen': null
}
})
// Save // Save
this.$root.$on('editor-save', this.save) this.$root.$on('editor-save', this.save)
$(window).bind('keydown', (ev) => { $(window).bind('keydown', (ev) => {
if (ev.ctrlKey || ev.metaKey) { if (ev.ctrlKey || ev.metaKey) {
switch (String.fromCharCode(ev.which).toLowerCase()) { switch (String.fromCharCode(ev.which).toLowerCase()) {
case 's': case 's':
ev.preventDefault() ev.preventDefault()
self.save() self.save()
break break
}
} }
} })
})
this.$store.dispatch('pageLoader/complete') this.$store.dispatch('pageLoader/complete')
})
} }
} }

View File

@ -1,6 +1,13 @@
'use strict' 'use strict'
import _ from 'lodash' import deburr from 'lodash/deburr'
import filter from 'lodash/filter'
import isEmpty from 'lodash/isEmpty'
import join from 'lodash/join'
import kebabCase from 'lodash/kebabCase'
import map from 'lodash/map'
import split from 'lodash/split'
import trim from 'lodash/trim'
module.exports = { module.exports = {
/** /**
@ -9,11 +16,11 @@ module.exports = {
* @returns {string} Safe path * @returns {string} Safe path
*/ */
makeSafePath: (rawPath) => { makeSafePath: (rawPath) => {
let rawParts = _.split(_.trim(rawPath), '/') let rawParts = split(trim(rawPath), '/')
rawParts = _.map(rawParts, (r) => { rawParts = map(rawParts, (r) => {
return _.kebabCase(_.deburr(_.trim(r))) return kebabCase(deburr(trim(r)))
}) })
return _.join(_.filter(rawParts, (r) => { return !_.isEmpty(r) }), '/') return join(filter(rawParts, (r) => { return !isEmpty(r) }), '/')
} }
} }

View File

@ -4,6 +4,7 @@ import Vuex from 'vuex'
import alert from './modules/alert' import alert from './modules/alert'
import anchor from './modules/anchor' import anchor from './modules/anchor'
import editor from './modules/editor' import editor from './modules/editor'
import editorCodeblock from './modules/editor-codeblock'
import modalCreatePage from './modules/modal-create-page' import modalCreatePage from './modules/modal-create-page'
import modalCreateUser from './modules/modal-create-user' import modalCreateUser from './modules/modal-create-user'
import modalDiscardPage from './modules/modal-discard-page' import modalDiscardPage from './modules/modal-discard-page'
@ -28,6 +29,7 @@ export default new Vuex.Store({
alert, alert,
anchor, anchor,
editor, editor,
editorCodeblock,
modalCreatePage, modalCreatePage,
modalCreateUser, modalCreateUser,
modalDiscardPage, modalDiscardPage,

View File

@ -1,6 +1,6 @@
'use strict' 'use strict'
import _ from 'lodash' import debounce from 'lodash/debounce'
export default { export default {
state: { state: {
@ -24,7 +24,7 @@ export default {
commit('alertChange', opts) commit('alertChange', opts)
dispatch('alertDismiss') dispatch('alertDismiss')
}, },
alertDismiss: _.debounce(({ commit }) => { alertDismiss: debounce(({ commit }) => {
let opts = { shown: false } let opts = { shown: false }
commit('alertChange', opts) commit('alertChange', opts)
}, 3000) }, 3000)

View File

@ -0,0 +1,16 @@
'use strict'
export default {
namespaced: true,
state: {
shown: false
},
getters: {},
mutations: {
shownChange: (state, shownState) => { state.shown = shownState }
},
actions: {
open({ commit }) { commit('shownChange', true) },
close({ commit }) { commit('shownChange', false) }
}
}

16
fuse.js
View File

@ -79,6 +79,22 @@ const SHIMS = {
console.info(colors.white('└── ') + colors.green('Running global tasks...')) console.info(colors.white('└── ') + colors.green('Running global tasks...'))
let globalTasks = Promise.mapSeries([ let globalTasks = Promise.mapSeries([
/**
* SimpleMDE
*/
() => {
return fs.accessAsync('./assets/js/simplemde').then(() => {
console.info(colors.white(' └── ') + colors.magenta('SimpleMDE directory already exists. Task aborted.'))
return true
}).catch(err => {
if (err.code === 'ENOENT') {
console.info(colors.white(' └── ') + colors.green('Copy + Minify SimpleMDE to assets...'))
return fs.copy('./node_modules/simplemde/dist/simplemde.min.js', './assets/js/simplemde/simplemde.min.js')
} else {
throw err
}
})
},
/** /**
* ACE Modes * ACE Modes
*/ */