Max/SolidScribe
1
0
Fork 0
Code Issues 24 Pull Requests Releases Wiki Activity

I swear, I'm going to start doing regular commits

Browse Source 
+ Added a ton of shit
+ About to add socket.io oh god.
This commit is contained in:
Max G
2020-01-03 01:26:55 +00:00
parent 8d07a8e11a
commit 4216c1825e
24 changed files with 3171 additions and 360 deletions
Download Patch File Download Diff File Expand all files Collapse all files

195
client/src/components/NoteInputPanel.vue
View File

@@ -15,40 +15,12 @@
</div>
</div>
<!-- Menu -->
<div class="note-top-menu">
<div @click="close" class="ui basic icon button" data-tooltip="Close" data-position="right center" data-inverted="">
<i class="close icon"></i>
</div>
<span class="note-status-indicator" v-on:click="save()">{{statusText}}</span>
<div @click="onTogglePinned" class="ui basic icon button" data-tooltip="Pin to Top" data-position="right center" data-inverted="">
<i class="pin icon" :class="{green:(pinned == 1)}"></i> {{(pinned == 1)?'Pinned':''}}
</div>
<div @click="onToggleArchived" class="ui basic icon button" data-tooltip="Hide on main" data-position="right center" data-inverted="">
<i class="archive icon" :class="{green:(archived == 1)}"></i> {{(archived == 1)?'Archived':''}}
</div>
<!-- <file-upload-button :noteId="noteid" /> -->
<span class="relative" v-on:click="showColorPicker">
<span class="ui basic icon button">
<i class="paint brush icon"></i>
</span>
</span>
<div v-if="attachmentCount > 0" class="ui basic icon button" v-on:click="openEditAttachment" data-tooltip="View Links/Images" data-position="right center" data-inverted="">
<i class="folder icon"></i>
</div>
<span class="note-status-indicator">{{statusText}}</span>
<div class="tinymce-container">
<textarea :id="noteid+'-tinymce-editor'">{{noteText}}</textarea>
</div>
<textarea :id="noteid+'-tinymce-editor'">{{noteText}}</textarea>
<note-tag-edit v-if="!$store.getters.getIsUserOnMobile" :noteId="noteid" :key="'tags-for-note-'+noteid"/>
<color-picker
v-if="colorPickerVisible"
:location="colorPickerLocation"
@@ -56,7 +28,51 @@
:style-object="styleObject"
/>
<div v-if="$store.getters.getIsNoteSettingsOpen">
<div class="all-settings">
<div class="ui grid">
<div class="row">
<div class="sixteen wide column">
<note-tag-edit :noteId="noteid" :key="'tags-for-note-'+noteid"/><br>
<!-- close button -->
<div class="ui small compact basic icon button" v-on:click="$store.commit('toggleNoteSettingsPane')">
<i class="close icon"></i> Close Settings
</div>
<!-- Pin Button -->
<div @click="onToggleArchived" class="ui small compact basic icon button">
<i class="archive icon" :class="{green:(archived == 1)}"></i>
{{(archived == 1)?'Archived':'Archive'}}
</div>
<!-- archive button -->
<div @click="onTogglePinned" class="ui small compact basic icon button">
<i class="pin icon" :class="{green:(pinned == 1)}"></i>
{{(pinned == 1)?'Pinned':'Pin'}}
</div>
<!-- colors button -->
<span class="relative" v-on:click="showColorPicker">
<span class="ui small compact basic icon button">
<i class="paint brush icon"></i>
Colors
</span>
</span>
<!-- attachment button -->
<div v-if="attachmentCount > 0" class="ui small compact basic icon button" v-on:click="openEditAttachment">
<i class="folder icon"></i> Attachments
</div>
<!-- file upload button -->
<file-upload-button :noteId="noteid" />
</div>
</div>
</div>
</div>
<!-- <div class="shade" v-on:click="showAllSettings = false"></div> -->
</div>
</div>
</template>
@@ -72,6 +88,7 @@
'note-tag-edit': require('@/components/NoteTagEdit.vue').default,
'color-picker': require('@/components/ColorPicker.vue').default,
'file-upload-button': require('@/components/FileUploadButton.vue').default,
'delete-button': require('@/components/NoteDeleteButtonComponent.vue').default,
},
data(){
return {
@@ -95,6 +112,10 @@
colorPickerLocation: null,
tinymce: null, //Initialized editor instance
//Settings vars
showAllSettings: true,
lastVisibilityState: null,
}
},
watch: {
@@ -114,10 +135,21 @@
}
},
beforeMount(){
//Load tinymce into the page only do it once
if(document.querySelectorAll('[data-mceload]').length == 0){
let tinyMceIncluder = document.createElement('script')
tinyMceIncluder.setAttribute('src', '/api/static/assets/tinymce/tinymce.min.js')
tinyMceIncluder.setAttribute('data-mceload','loaded')
document.head.appendChild(tinyMceIncluder)
}
},
beforeDestroy(){
this.$bus.$off('toggle_night_mode', this.listener)
document.removeEventListener('visibilitychange', this.visibiltyChangeAction)
this.$off() // Remove all event listeners
this.$bus.$off()
//Trash editor instance on close
this.tinymce.remove()
@@ -127,6 +159,8 @@
//Change TinyMce styles on nightmored change
this.$bus.$on('toggle_night_mode', this.setEditorTextColor )
document.addEventListener('visibilitychange', this.checkForUpdatedNote)
this.$nextTick(() => {
this.loadNote(this.noteid)
})
@@ -139,10 +173,17 @@
// {title: 'My image 2', value: 'http://www.moxiecode.com/my2.gif'}
// ]
//Default plugin options for big browsers
let toolbarOptions = 'customCloseButton | mceTogglePinned | forecolor styleselect | bold italic underline | link | bullist numlist | outdent indent table | h | image'
let pluginOptions = 'paste, link, code, lists, table, hr, image'
//Tweak doc height for mobile
let docHeight = 'calc(100vh - 90px)'
let docHeight = 'calc(100vh - 1px)'
if(this.$store.getters.getIsUserOnMobile){
docHeight = 'calc(100vh - 37px)'
docHeight = 'calc(100vh - 1px)'
toolbarOptions = 'customCloseButton | bullist numlist | mceTogglePinned'
pluginOptions = 'lists'
}
//setup skin as dark if night mode is enabled
@@ -152,12 +193,13 @@
}
const editorId = '#'+this.noteid+'-tinymce-editor'
let vm = this
//Globally defined included in index HTML
tinymce.init({
selector: editorId,
toolbar: 'forecolor backcolor styleselect | bold italic underline | link image | code | undo redo | bullist numlist | outdent indent table, hr, searchreplace | removeformat',
plugins: 'paste, link, code, lists, table, hr, searchreplace, image',
toolbar: toolbarOptions,
plugins: pluginOptions,
browser_spellcheck: true,
menubar: false,
branding: false,
@@ -167,6 +209,25 @@
contextmenu: false,
init_instance_callback: this.editorInitCallback,
imagetools_toolbar: "imageoptions",
setup: editor => {
//Add custom buttons to tinymce instance
editor.ui.registry.addButton('customCloseButton', {
text: 'Close',
icon: 'close',
onAction: function (_) {
vm.close()
}
})
//Add custom buttons to tinymce instance
editor.ui.registry.addButton('mceTogglePinned', {
text: 'Note Settings',
icon: 'settings',
onAction: function (_) {
vm.$store.commit('toggleNoteSettingsPane')
}
})
}
})
},
editorInitCallback(editor){
@@ -197,7 +258,9 @@
}
}
},
setText(inText){
return this.tinymce.setContent(inText)
},
getText(){
//Return text from tinyMce Editor
@@ -208,7 +271,6 @@
this.colorPickerLocation = {'x':event.clientX, 'y':event.clientY}
},
openEditAttachment(){
// this.$bus.$emit('open_edit_attachment', this.currentNoteId)
this.$router.push('/attachments/note/'+this.currentNoteId)
},
onTogglePinned(){
@@ -300,11 +362,12 @@
save(){
return new Promise((resolve, reject) => {
//Clear other debounced events to prevent double calling of save
clearTimeout(this.editDebounce)
// clearTimeout(this.editDebounce)
//Don't save note if its hash doesn't change
const currentNoteText = this.getText()
if( this.lastNoteHash == this.hashString( currentNoteText )){
this.statusText = 'Saved'
return resolve(true)
}
@@ -341,6 +404,34 @@
})
},
checkForUpdatedNote(){
//If user leaves page then returns to page, reload the first batch
if(this.lastVisibilityState == 'hidden' && document.visibilityState == 'visible'){
console.log('Checking for changes is note data')
const postData = {
noteId:this.currentNoteId,
text:this.getText(),
updated: this.updated
}
axios.post('/api/note/difftext', postData)
.then( ({data}) => {
//Don't do anything if nothing has changed
if(data == ''){ return }
if(data.diffs > 0){
//Update text and last updated time for note
this.setText(data.updatedText)
this.updated = data.updated
}
})
}
//Track visibility state
this.lastVisibilityState = document.visibilityState
},
hashString(text){
var hash = 0;
@@ -369,7 +460,7 @@
this.sizeDown = true
//This timeout allows animation to play before closing
setTimeout(() => {
this.$bus.$emit('close_active_note', this.position)
this.$bus.$emit('close_active_note', {position: this.position, noteId: this.noteid})
return
}, 300)
})
@@ -381,6 +472,28 @@
<style type="text/css" scoped>
/*Settings manager styles */
.all-settings {
position: absolute;
bottom: -5px;
right: 10px;
left: 10px;
z-index: 99;
border: 1px solid;
background-color: var(--background_color);
border-color: var(--border_color);
box-sizing: border-box;
border-radius: 7px;
box-shadow: 0px 3px 7px 0px rgba(140,140,140,1);
padding: 1em;
}
/*End Settings manager styles */
.tinymce-container {
/* Uncomment this to see the */
/*border-bottom: 2px solid green !important;*/
}
.note-top-menu {
width: 100%;
display: inline-block;