398 lines
10 KiB
JavaScript
398 lines
10 KiB
JavaScript
const SquireButtonFunctions = {
|
|
data(){
|
|
return {
|
|
//active button states
|
|
activeBold: false,
|
|
activeItalics: false,
|
|
activeUnderline: false,
|
|
activeTitle: false,
|
|
activeList: false,
|
|
activeToDo: false,
|
|
activeColor: null,
|
|
activeCode: false,
|
|
activeSubTitle: false,
|
|
//
|
|
lastUsedColor: null,
|
|
}
|
|
},
|
|
methods: {
|
|
//
|
|
// Inside squire init function
|
|
//
|
|
|
|
pathChangeEvent(e){
|
|
|
|
//Reset all button states
|
|
this.activeBold = false
|
|
this.activeTitle = false
|
|
this.activeItalics = false
|
|
this.activeList = false
|
|
this.activeToDo = false
|
|
this.activeColor = null
|
|
this.activeUnderline = false
|
|
this.activeCode = false
|
|
this.activeSubTitle = false
|
|
|
|
if(e.path.indexOf('>U>') > -1 || e.path.search(/U$/) > -1){
|
|
this.activeUnderline = true
|
|
}
|
|
if(e.path.indexOf('>B>') > -1 || e.path.search(/B$/) > -1){
|
|
this.activeBold = true
|
|
}
|
|
if(e.path.indexOf('>I') > -1){
|
|
this.activeItalics = true
|
|
}
|
|
if(e.path.indexOf('fontSize=1.4em') > -1){
|
|
this.activeTitle = true
|
|
}
|
|
if(e.path.indexOf('fontSize=0.9em') > -1){
|
|
this.activeSubTitle = true
|
|
}
|
|
if(e.path.indexOf('OL>LI') > -1){
|
|
this.activeList = true
|
|
}
|
|
if(e.path.indexOf('UL>LI') > -1){
|
|
this.activeToDo = true
|
|
}
|
|
if(e.path.indexOf('CODE') > -1){
|
|
this.activeCode= true
|
|
}
|
|
const colorIndex = e.path.indexOf('color=')
|
|
if(colorIndex > -1){
|
|
//Get all digigs after color index, then limit to 3
|
|
let colors = e.path.substring(colorIndex).match(/\d+/g).slice(0,3)
|
|
|
|
const lastColor = `rgb(${colors.join(',')})`
|
|
this.activeColor = lastColor
|
|
this.lastUsedColor = lastColor
|
|
}
|
|
},
|
|
|
|
//
|
|
//Inside Squire Init
|
|
//
|
|
|
|
removeFormatting(){
|
|
this.selectLineIfNoSelect()
|
|
this.editor.removeAllFormatting()
|
|
},
|
|
//If nothing is selected, select the entire line
|
|
selectLineIfNoSelect(){
|
|
|
|
//Select entire line if range is not set
|
|
let selection = this.editor.getSelection()
|
|
|
|
if(selection.startOffset == selection.endOffset && selection.startContainer == selection.endContainer){
|
|
|
|
let squireRange = this.editor.createRange(
|
|
selection.startContainer, 0,
|
|
selection.endContainer, selection.commonAncestorContainer.textContent.length)
|
|
|
|
this.editor.setSelection(squireRange)
|
|
}
|
|
},
|
|
modifyFont(inSize){
|
|
|
|
this.selectLineIfNoSelect()
|
|
|
|
let fontInfo = this.editor.getFontInfo()
|
|
//Toggle font size between large and normal
|
|
if(fontInfo.size){
|
|
this.editor.setFontSize(null)
|
|
} else {
|
|
this.editor.setFontSize(inSize)
|
|
}
|
|
},
|
|
modifyColor(color){
|
|
|
|
this.selectLineIfNoSelect()
|
|
//Set color of font
|
|
this.editor.setTextColour(color)
|
|
|
|
this.lastUsedColor = color
|
|
},
|
|
applyLastUsedColor(){
|
|
this.modifyColor(this.lastUsedColor)
|
|
},
|
|
toggleList(type){
|
|
|
|
//Undo list if its already a lits
|
|
if(this.editor.hasFormat(type)){
|
|
this.editor.removeList()
|
|
return
|
|
}
|
|
|
|
if(type == 'ol'){
|
|
this.editor.makeOrderedList()
|
|
}
|
|
if(type == 'ul'){
|
|
this.editor.makeUnorderedList()
|
|
}
|
|
},
|
|
toggleUnderline(){
|
|
this.selectLineIfNoSelect()
|
|
if( this.editor.hasFormat('u') ){
|
|
this.editor.removeUnderline()
|
|
} else {
|
|
this.editor.underline()
|
|
}
|
|
},
|
|
toggleBold(){
|
|
this.selectLineIfNoSelect()
|
|
if( this.editor.hasFormat('b') ){
|
|
this.editor.removeBold()
|
|
} else {
|
|
this.editor.bold()
|
|
}
|
|
},
|
|
toggleItalic(){
|
|
this.selectLineIfNoSelect()
|
|
if( this.editor.hasFormat('i') ){
|
|
this.editor.removeItalic()
|
|
} else {
|
|
this.editor.italic()
|
|
}
|
|
},
|
|
modifyCode(){
|
|
|
|
this.selectLineIfNoSelect()
|
|
|
|
this.editor.toggleCode()
|
|
},
|
|
undoCustom(){
|
|
//The same as pressing CTRL + Z
|
|
// this.editor.focus()
|
|
// document.execCommand("undo", false, null)
|
|
this.editor.undo()
|
|
},
|
|
uncheckAllListItems(){
|
|
//
|
|
// Uncheck All List Items
|
|
//
|
|
|
|
//Fetch the container
|
|
let container = document.getElementById('squire-id')
|
|
|
|
Array.from( container.getElementsByClassName('active') ).forEach(item => {
|
|
item.classList.remove('active');
|
|
})
|
|
|
|
//Close menu if user is on mobile, then sort list
|
|
if(this.$store.getters.getIsUserOnMobile){
|
|
this.$router.go(-1)
|
|
}
|
|
},
|
|
deleteCompletedListItems(){
|
|
//
|
|
// Delete Completed List Items
|
|
//
|
|
|
|
//Fetch the container
|
|
let container = document.getElementById('squire-id')
|
|
|
|
//Go through each item, on first level, look for Unordered Lists
|
|
container.childNodes.forEach( (node) => {
|
|
if(node.nodeName == 'UL'){
|
|
|
|
//Create two categories, done and not done list items
|
|
let undoneElements = document.createDocumentFragment()
|
|
|
|
//Go through each item in each list we found
|
|
node.childNodes.forEach( (checkListItem, index) => {
|
|
|
|
//Skip Embedded lists, they are handled with the list item above them. Keep lists with intented items together
|
|
if(checkListItem.nodeName == 'UL'){
|
|
return
|
|
}
|
|
|
|
//Check if list item has active class
|
|
const checkedItem = checkListItem.classList.contains('active')
|
|
|
|
//Check if the next item is a list, Keep lists with intented items together
|
|
let sublist = null
|
|
if(node.childNodes[index+1] && node.childNodes[index+1].nodeName == 'UL'){
|
|
sublist = node.childNodes[index+1]
|
|
}
|
|
|
|
//Push checked items and their sub lists to the done set
|
|
if(!checkedItem){
|
|
|
|
undoneElements.appendChild( checkListItem.cloneNode(true) )
|
|
if(sublist){
|
|
undoneElements.appendChild( sublist.cloneNode(true) )
|
|
}
|
|
|
|
}
|
|
|
|
})
|
|
|
|
//Remove all HTML from node, push unfinished items, then finished below them
|
|
node.innerHTML = null
|
|
node.appendChild(undoneElements)
|
|
|
|
}
|
|
})
|
|
|
|
//Close menu if user is on mobile, then sort list
|
|
if(this.$store.getters.getIsUserOnMobile){
|
|
this.$router.go(-1)
|
|
}
|
|
},
|
|
sortList(){
|
|
//
|
|
// Sort list, checked at the bottom, unchecked at the top
|
|
//
|
|
|
|
//Fetch the container
|
|
let container = document.getElementById('squire-id')
|
|
|
|
//Go through each item, on first level, look for Unordered Lists
|
|
container.childNodes.forEach( (node) => {
|
|
if(node.nodeName == 'UL'){
|
|
|
|
//Create two categories, done and not done list items
|
|
let doneElements = document.createDocumentFragment()
|
|
let undoneElements = document.createDocumentFragment()
|
|
|
|
//Go through each item in each list we found
|
|
node.childNodes.forEach( (checkListItem, index) => {
|
|
|
|
//Skip Embedded lists, they are handled with the list item above them. Keep lists with intented items together
|
|
if(checkListItem.nodeName == 'UL'){
|
|
return
|
|
}
|
|
|
|
//Check if list item has active class
|
|
const checkedItem = checkListItem.classList.contains('active')
|
|
|
|
//Check if the next item is a list, Keep lists with intented items together
|
|
let sublist = null
|
|
if(node.childNodes[index+1] && node.childNodes[index+1].nodeName == 'UL'){
|
|
sublist = node.childNodes[index+1]
|
|
}
|
|
|
|
//Push checked items and their sub lists to the done set
|
|
if(checkedItem){
|
|
|
|
doneElements.appendChild( checkListItem.cloneNode(true) )
|
|
if(sublist){
|
|
doneElements.appendChild( sublist.cloneNode(true) )
|
|
}
|
|
|
|
} else {
|
|
|
|
undoneElements.appendChild( checkListItem.cloneNode(true) )
|
|
if(sublist){
|
|
undoneElements.appendChild( sublist.cloneNode(true) )
|
|
}
|
|
}
|
|
|
|
})
|
|
|
|
//Remove all HTML from node, push unfinished items, then finished below them
|
|
node.innerHTML = null
|
|
node.appendChild(undoneElements)
|
|
node.appendChild(doneElements)
|
|
|
|
}
|
|
})
|
|
|
|
//Close menu if user is on mobile
|
|
if(this.$store.getters.getIsUserOnMobile){
|
|
this.$router.go(-1)
|
|
}
|
|
},
|
|
calculateMath(){
|
|
//
|
|
// Find math in note and calculate the outcome
|
|
//
|
|
|
|
//Fetch the container
|
|
let container = document.getElementById('squire-id')
|
|
|
|
// simple function that trys to evaluate javascript
|
|
const shittyMath = (string) => {
|
|
//Remove all chars but math chars
|
|
const cleanString = String(string).replace(/[a-zA-Z\s]*/g,'')
|
|
try {
|
|
return Function('"use strict"; return (' + cleanString + ')')();
|
|
} catch (error) {
|
|
console.log('Math Error: ', string)
|
|
return null
|
|
}
|
|
}
|
|
|
|
//Go through each item, on first level, look for Unordered Lists
|
|
container.childNodes.forEach( (node) => {
|
|
|
|
const line = node.innerText.trim()
|
|
|
|
// = sign exists and its the last character in the string
|
|
if(line.indexOf('=') != -1 && (line.length-1) == line.indexOf('=')){
|
|
|
|
//Pull out everything before the formula and try to evaluate it
|
|
const formula = line.split('=').shift()
|
|
const output = shittyMath(formula)
|
|
|
|
//If its a number and didn't throw an error, update the line
|
|
if(!isNaN(output) && output != null){
|
|
|
|
//Since there is HTML in the line, splice in the number after the = sign
|
|
let equalLocation = node.innerHTML.indexOf('=')
|
|
let newLine = node.innerHTML.slice(0, equalLocation+1).trim()
|
|
newLine += ` ${output}`
|
|
newLine += node.innerHTML.slice(equalLocation+1).trim()
|
|
|
|
//Slam in that new HTML with the output
|
|
node.innerHTML = newLine
|
|
}
|
|
}
|
|
|
|
})
|
|
|
|
//Close menu if user is on mobile, then sort list
|
|
if(this.$store.getters.getIsUserOnMobile){
|
|
this.$router.go(-1)
|
|
}
|
|
},
|
|
setText(inText){
|
|
|
|
this.editor.setHTML(inText)
|
|
// this.noteText = this.editor._getHTML()
|
|
// this.diffNoteText = this.editor._getHTML()
|
|
},
|
|
getText(){
|
|
|
|
return this.editor.getHTML()
|
|
},
|
|
insertDivide(){
|
|
|
|
this.editor.insertHTML(`<p><div class='divide'></div><br></p>`)
|
|
this.editor.focus()
|
|
this.editor.moveCursorToEnd()
|
|
},
|
|
insertTable(tall, wide){
|
|
console.log(`Table: ${wide} x ${tall}`)
|
|
|
|
//Insert a table
|
|
let tableSyntax = '<div>'
|
|
tableSyntax += '<table>'
|
|
for (let i = 0; i < tall; i++) {
|
|
tableSyntax += '<tr>'
|
|
for (let j = 0; j < wide; j++) {
|
|
tableSyntax += '<td><p><br></p></td>'
|
|
}
|
|
tableSyntax += '</tr>'
|
|
}
|
|
tableSyntax += '</table></div><p><br></p>'
|
|
|
|
this.editor.insertHTML(tableSyntax)
|
|
this.editor.focus()
|
|
this.editor.moveCursorToEnd()
|
|
|
|
this.$router.go(-1)
|
|
},
|
|
},
|
|
}
|
|
|
|
export default SquireButtonFunctions |