Initial commit
This commit is contained in:
Joey Kimsey
111
app/js/main.js
Normal file
111
app/js/main.js
Normal file
@ -0,0 +1,111 @@
|
||||
/**
|
||||
* app/js/main.js
|
||||
*
|
||||
* This file is for 'access anywhere' javascript.
|
||||
*
|
||||
* @version 3.0
|
||||
* @author Joey Kimsey <Joey@thetempusproject.com>
|
||||
* @link https://TheTempusProject.com
|
||||
* @license https://opensource.org/licenses/MIT [MIT LICENSE]
|
||||
*/
|
||||
/**
|
||||
* Automatically selects/de-selects all check boxes associated with that field
|
||||
**/
|
||||
function checkAll(ele) {
|
||||
var checkboxes = document.getElementsByTagName( 'input' );
|
||||
if (ele.checked) {
|
||||
test = true;
|
||||
} else {
|
||||
test = false;
|
||||
}
|
||||
for ( var i = 0; i < checkboxes.length; i++ ) {
|
||||
if ( checkboxes[i].type == 'checkbox' ) {
|
||||
if ( checkboxes[i].name == ele.value ) {
|
||||
checkboxes[i].checked = test;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function copyAll( ele ) {
|
||||
var eleName = '#' + ele;
|
||||
var text = $( eleName ).text();
|
||||
text = text.replaceAll( "''", "\n" ).trim();
|
||||
text = text.substring( 1, text.length - 1 );
|
||||
navigator.clipboard.writeText( text );
|
||||
console.log( '#' + ele );
|
||||
}
|
||||
|
||||
function insertTag( box, tag ) {
|
||||
var Field = document.getElementById( box );
|
||||
var currentPos = cursorPos( Field );
|
||||
var val = Field.value;
|
||||
var before = val.substring( 0, currentPos );
|
||||
var after = val.substring( currentPos, val.length );
|
||||
Field.value = before + '(' + tag + ')' + after;
|
||||
}
|
||||
|
||||
function cursorPos( el ) {
|
||||
if ( el.selectionStart ) {
|
||||
return el.selectionStart;
|
||||
} else if ( document.selection ) {
|
||||
el.focus();
|
||||
var r = document.selection.createRange();
|
||||
if ( r == null ) {
|
||||
return 0;
|
||||
}
|
||||
var re = el.createTextRange(),
|
||||
rc = re.duplicate();
|
||||
re.moveToBookmark( r.getBookmark() );
|
||||
rc.setEndPoint( 'EndToStart', re );
|
||||
return rc.text.length;
|
||||
}
|
||||
return 0;
|
||||
}
|
||||
|
||||
function getRandomInt(min, max) {
|
||||
const minCeiled = Math.ceil(min);
|
||||
const maxFloored = Math.floor(max);
|
||||
return Math.floor(Math.random() * (maxFloored - minCeiled) + minCeiled);
|
||||
}
|
||||
|
||||
$(document).ready(function() {
|
||||
$('select').each(function() {
|
||||
var selectedValue = $(this).attr('value');
|
||||
if (selectedValue) {
|
||||
$(this).removeAttr('value');
|
||||
$(this).find('option').each(function() {
|
||||
if ($(this).attr('value') === selectedValue) {
|
||||
$(this).prop('selected', true);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// with the dynamic footer, you need to adjust the content padding to make sure the footer doesn't overlap the content
|
||||
window.onload = function () {
|
||||
function updateFooterPadding() {
|
||||
var footer = document.querySelector('footer');
|
||||
var container = document.querySelector('.container-fluid.top-pad');
|
||||
if ( ! container ) {
|
||||
return;
|
||||
}
|
||||
// footer has no height but its children do!
|
||||
var footerHeight = Array.from(footer.children).reduce((totalHeight, child) => {
|
||||
return totalHeight + child.offsetHeight;
|
||||
}, 0);
|
||||
|
||||
footerHeight += 20; // Add 20px for padding
|
||||
|
||||
// console.error(footerHeight);
|
||||
|
||||
container.style.setProperty('--footer-height', footerHeight + 'px');
|
||||
}
|
||||
|
||||
// Update padding on initial load
|
||||
updateFooterPadding();
|
||||
|
||||
// Update padding on window resize
|
||||
window.addEventListener('resize', updateFooterPadding);
|
||||
};
|
||||
233
app/js/wysiwyg.js
Normal file
233
app/js/wysiwyg.js
Normal file
@ -0,0 +1,233 @@
|
||||
/**
|
||||
* app/js/wysiwyg.js
|
||||
*
|
||||
* This is css used in the debuging console.
|
||||
*
|
||||
* @version 3.0
|
||||
* @author Joey Kimsey <Joey@thetempusproject.com>
|
||||
* @link https://TheTempusProject.com
|
||||
* @license https://opensource.org/licenses/MIT [MIT LICENSE]
|
||||
*/
|
||||
// define vars
|
||||
const editor = document.getElementsByClassName('wp-webdeasy-comment-editor')[0];
|
||||
const toolbar = editor.getElementsByClassName('toolbar')[0];
|
||||
const buttons = toolbar.querySelectorAll('.editor-btn:not(.has-submenu)');
|
||||
const contentArea = editor.getElementsByClassName('content-area')[0];
|
||||
const visuellView = contentArea.getElementsByClassName('visuell-view')[0];
|
||||
const htmlView = contentArea.getElementsByClassName('html-view')[0];
|
||||
const modal = document.getElementsByClassName('modal')[0];
|
||||
|
||||
// add active tag event
|
||||
document.addEventListener('selectionchange', selectionChange);
|
||||
|
||||
// add paste event
|
||||
visuellView.addEventListener('paste', pasteEvent);
|
||||
|
||||
// add paragraph tag on new line
|
||||
contentArea.addEventListener('keypress', addParagraphTag);
|
||||
|
||||
// add toolbar button actions
|
||||
for(let i = 0; i < buttons.length; i++) {
|
||||
let button = buttons[i];
|
||||
|
||||
button.addEventListener('click', function(e) {
|
||||
let action = this.dataset.action;
|
||||
|
||||
switch(action) {
|
||||
case 'toggle-view':
|
||||
execCodeAction(this, editor);
|
||||
break;
|
||||
case 'createLink':
|
||||
execLinkAction();
|
||||
break;
|
||||
default:
|
||||
execDefaultAction(action);
|
||||
}
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* This function toggles between visual and html view
|
||||
*/
|
||||
function execCodeAction(button, editor) {
|
||||
|
||||
if(button.classList.contains('active')) { // show visuell view
|
||||
visuellView.innerHTML = htmlView.value;
|
||||
htmlView.style.display = 'none';
|
||||
visuellView.style.display = 'block';
|
||||
|
||||
button.classList.remove('active');
|
||||
} else { // show html view
|
||||
htmlView.innerText = visuellView.innerHTML;
|
||||
visuellView.style.display = 'none';
|
||||
htmlView.style.display = 'block';
|
||||
|
||||
button.classList.add('active');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* This function adds a link to the current selection
|
||||
*/
|
||||
function execLinkAction() {
|
||||
modal.style.display = 'block';
|
||||
let selection = saveSelection();
|
||||
|
||||
let submit = modal.querySelectorAll('button.done')[0];
|
||||
let close = modal.querySelectorAll('.close')[0];
|
||||
|
||||
// done button active => add link
|
||||
submit.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
let newTabCheckbox = modal.querySelectorAll('#new-tab')[0];
|
||||
let linkInput = modal.querySelectorAll('#linkValue')[0];
|
||||
let linkValue = linkInput.value;
|
||||
let newTab = newTabCheckbox.checked;
|
||||
|
||||
restoreSelection(selection);
|
||||
|
||||
if(window.getSelection().toString()) {
|
||||
let a = document.createElement('a');
|
||||
a.href = linkValue;
|
||||
if(newTab) a.target = '_blank';
|
||||
window.getSelection().getRangeAt(0).surroundContents(a);
|
||||
}
|
||||
|
||||
modal.style.display = 'none';
|
||||
linkInput.value = '';
|
||||
|
||||
// deregister modal events
|
||||
submit.removeEventListener('click', arguments.callee);
|
||||
close.removeEventListener('click', arguments.callee);
|
||||
});
|
||||
|
||||
// close modal on X click
|
||||
close.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
let linkInput = modal.querySelectorAll('#linkValue')[0];
|
||||
|
||||
modal.style.display = 'none';
|
||||
linkInput.value = '';
|
||||
|
||||
// deregister modal events
|
||||
submit.removeEventListener('click', arguments.callee);
|
||||
close.removeEventListener('click', arguments.callee);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* This function executes all 'normal' actions
|
||||
*/
|
||||
function execDefaultAction(action) {
|
||||
document.execCommand(action, false);
|
||||
}
|
||||
|
||||
/**
|
||||
* Saves the current selection
|
||||
*/
|
||||
function saveSelection() {
|
||||
if(window.getSelection) {
|
||||
sel = window.getSelection();
|
||||
if(sel.getRangeAt && sel.rangeCount) {
|
||||
let ranges = [];
|
||||
for(var i = 0, len = sel.rangeCount; i < len; ++i) {
|
||||
ranges.push(sel.getRangeAt(i));
|
||||
}
|
||||
return ranges;
|
||||
}
|
||||
} else if (document.selection && document.selection.createRange) {
|
||||
return document.selection.createRange();
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Loads a saved selection
|
||||
*/
|
||||
function restoreSelection(savedSel) {
|
||||
if(savedSel) {
|
||||
if(window.getSelection) {
|
||||
sel = window.getSelection();
|
||||
sel.removeAllRanges();
|
||||
for(var i = 0, len = savedSel.length; i < len; ++i) {
|
||||
sel.addRange(savedSel[i]);
|
||||
}
|
||||
} else if(document.selection && savedSel.select) {
|
||||
savedSel.select();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Sets the current selected format buttons active/inactive
|
||||
*/
|
||||
function selectionChange(e) {
|
||||
|
||||
for(let i = 0; i < buttons.length; i++) {
|
||||
let button = buttons[i];
|
||||
|
||||
// don't remove active class on code toggle button
|
||||
if(button.dataset.action === 'toggle-view') continue;
|
||||
|
||||
button.classList.remove('active');
|
||||
}
|
||||
|
||||
if(!childOf(window.getSelection().anchorNode.parentNode, editor)) return false;
|
||||
|
||||
parentTagActive(window.getSelection().anchorNode.parentNode);
|
||||
}
|
||||
|
||||
/**
|
||||
* Checks if the passed child has the passed parent
|
||||
*/
|
||||
function childOf(child, parent) {
|
||||
return parent.contains(child);
|
||||
}
|
||||
|
||||
/**
|
||||
* Sets the tag active that is responsible for the current element
|
||||
*/
|
||||
function parentTagActive(elem) {
|
||||
if(!elem ||!elem.classList || elem.classList.contains('visuell-view')) return false;
|
||||
|
||||
let toolbarButton;
|
||||
|
||||
// active by tag names
|
||||
let tagName = elem.tagName.toLowerCase();
|
||||
toolbarButton = document.querySelectorAll(`.toolbar .editor-btn[data-tag-name="${tagName}"]`)[0];
|
||||
if(toolbarButton) {
|
||||
toolbarButton.classList.add('active');
|
||||
}
|
||||
|
||||
// active by text-align
|
||||
let textAlign = elem.style.textAlign;
|
||||
toolbarButton = document.querySelectorAll(`.toolbar .editor-btn[data-style="textAlign:${textAlign}"]`)[0];
|
||||
if(toolbarButton) {
|
||||
toolbarButton.classList.add('active');
|
||||
}
|
||||
|
||||
return parentTagActive(elem.parentNode);
|
||||
}
|
||||
|
||||
/**
|
||||
* Handles the paste event and removes all HTML tags
|
||||
*/
|
||||
function pasteEvent(e) {
|
||||
e.preventDefault();
|
||||
|
||||
let text = (e.originalEvent || e).clipboardData.getData('text/plain');
|
||||
document.execCommand('insertHTML', false, text);
|
||||
}
|
||||
|
||||
/**
|
||||
* This functions adds a paragraph tag when the enter key is pressed
|
||||
*/
|
||||
function addParagraphTag(evt) {
|
||||
if (evt.keyCode == '13') {
|
||||
|
||||
// don't add a p tag on list item
|
||||
if(window.getSelection().anchorNode.parentNode.tagName === 'LI') return;
|
||||
document.execCommand('formatBlock', false, 'p');
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user