PHP Classes

File: js/interface.js

Recommend this page to a friend!
  Classes of Brett Dutton   JackBooted PHP Framework   js/interface.js   Download  
File: js/interface.js
Role: Auxiliary data
Content type: text/plain
Description: Auxiliary data
Class: JackBooted PHP Framework
Web application framework using simplified MVC
Author: By
Last change:
Date: 8 years ago
Size: 10,945 bytes
 

Contents

Class file image Download
/** * @file interface.js * * @brief * JsonEditor is an editor to display and edit JSON data in a treeview. * * Supported browsers: Chrome, Firefox, Safari, Opera, Internet Explorer 8+ * * @license * This json editor is open sourced with the intention to use the editor as * a component in your own application. Not to just copy and monetize the editor * as it is. * * Licensed under the Apache License, Version 2.0 (the "License"); you may not * use this file except in compliance with the License. You may obtain a copy * of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the * License for the specific language governing permissions and limitations under * the License. * * Copyright (C) 2011-2012 Jos de Jong, http://jsoneditoronline.org * * @author Jos de Jong, <wjosdejong@gmail.com> * @date 2012-10-08 */ var editor = null; var formatter = null; var main = {}; main.formatterToEditor = function() { try { editor.set(formatter.get()); } catch (err) { main.showError(err); } }; main.editorToFormatter = function () { try { formatter.set(editor.get()); } catch (err) { main.showError(err); } }; main.eventParams = {}; main.onMouseDown = function (event) { var leftButtonDown = event.which ? (event.which == 1) : (event.button == 1); if (!leftButtonDown) { return; } if (!main.eventParams.mousedown) { main.eventParams.mousedown = true; main.eventParams.mousemove = JSONEditor.Events.addEventListener(document, 'mousemove', main.onMouseMove); main.eventParams.mouseup = JSONEditor.Events.addEventListener(document, 'mouseup', main.onMouseUp); main.eventParams.screenX = event.screenX; main.eventParams.splitterValue = main.getSplitterValue(); } JSONEditor.Events.preventDefault(event); }; main.onMouseMove = function (event) { var width = (window.innerWidth || document.body.offsetWidth || document.documentElement.offsetWidth); var diff = event.screenX - main.eventParams.screenX; var value = main.eventParams.splitterValue + diff / width; main.setSplitterValue(value); main.resize(); JSONEditor.Events.preventDefault(event); }; main.onMouseUp = function (event) { if (main.eventParams.mousedown) { JSONEditor.Events.removeEventListener(document, 'mousemove', main.eventParams.mousemove); JSONEditor.Events.removeEventListener(document, 'mouseup', main.eventParams.mouseup); main.eventParams.mousemove = undefined; main.eventParams.mouseup = undefined; main.eventParams.mousedown = false; } JSONEditor.Events.preventDefault(event); }; /** * Set a value for the splitter (UI is not adjusted) * @param {Number} value A number between 0.1 and 0.9 * @return {Number} value The stored value */ main.setSplitterValue = function (value) { value = Number(value); if (value < 0.1) { value = 0.1; } if (value > 0.9) { value = 0.9; } main.splitterValue = value; try { localStorage['splitterValue'] = value; } catch (e) { console.log(e); } return value; }; /** * Get the splitter value from local storage * @return {Number} value A value between 0.1 and 0.9 */ main.getSplitterValue = function () { var value = main.splitterValue; if (value == undefined) { // read from localStorage once try { if (localStorage['splitterValue'] != undefined) { value = Number(localStorage['splitterValue']); // read value = main.setSplitterValue(value); // verify and store } } catch (e) { console.log(e); } } if (value == undefined) { value = main.setSplitterValue(0.5); } if (value == undefined) { value = 0.5; } return value; }; main.load = function( json ) { try { // formatter var container = document.getElementById("jsonformatter"); formatter = new JSONFormatter(container); formatter.set(json); formatter.onError = function (err) { main.showError(err); }; // editor container = document.getElementById("jsoneditor"); editor = new JSONEditor(container); editor.set(json); // splitter var domSplitter = document.getElementById('splitter'); domSplitter.appendChild(document.createElement('br')); domSplitter.appendChild(document.createElement('br')); domSplitter.appendChild(document.createElement('br')); var toForm = document.createElement('button'); toForm.id = 'toForm'; toForm.title = 'JSON to Editor'; toForm.className = 'convert'; toForm.innerHTML = '<div class="convert-right"></div>'; toForm.onclick = function () { this.focus(); main.formatterToEditor(); }; domSplitter.appendChild(toForm); domSplitter.appendChild(document.createElement('br')); domSplitter.appendChild(document.createElement('br')); var toJSON = document.createElement('button'); toJSON.id = 'toJSON'; toJSON.title = 'Editor to JSON'; toJSON.className = 'convert'; toJSON.innerHTML = '<div class="convert-left"></div>'; toJSON.onclick = function () { this.focus(); main.editorToFormatter(); }; domSplitter.appendChild(toJSON); JSONEditor.Events.addEventListener(domSplitter, "mousedown", main.onMouseDown); // resize JSONEditor.Events.addEventListener(window, 'resize', main.resize); // TODO: implement a focus method formatter.textarea.focus(); // TODO: a nicer method to check for changes var formatterLastContent; var editorLastContent; function checkChange () { try { // check for change in formatter var formatterJSON = formatter.get(); var formatterContent = JSON.stringify(formatterJSON); if (formatterContent != formatterLastContent) { formatterLastContent = formatterContent; editorLastContent = formatterContent; editor.set(formatterJSON); } else { // check for change in editor var editorJSON = editor.get(); var editorContent = JSON.stringify(editorJSON); if (editorContent != editorLastContent) { editorLastContent = editorContent; formatterLastContent = editorContent; formatter.set(editorJSON); } } } catch (err) { main.showError(err); } setTimeout(checkChange, 1000); } /* TODO: use checkChange checkChange(); */ } catch (err) { var msg = err.message || err; main.showError('Error: ' + msg); } }; main.resize = function() { var domEditor = document.getElementById('jsoneditor'); var domFormatter = document.getElementById('jsonformatter'); var domSplitter = document.getElementById('splitter'); var domAd = document.getElementById('ad'); var domAdInfo = document.getElementById('adInfo'); var width = window.innerWidth || document.body.offsetWidth || document.documentElement.offsetWidth; var height = window.innerHeight || document.body.offsetHeight || document.documentElement.offsetHeight; width *= 0.6; var adWidth = domAd ? domAd.clientWidth : 0; var splitterWidth = domSplitter.clientWidth; if (adWidth) { width -= (adWidth + 15); // Not so nice, +15 here for the margin } var splitterLeft = width * main.getSplitterValue(); // resize formatter domFormatter.style.width = Math.round(splitterLeft) + 'px'; // resize editor // the width has a -1 to prevent the width from being just half a pixel // wider than the window, causing the content elements to wrap... domEditor.style.left = Math.round(splitterLeft + splitterWidth) + 'px'; domEditor.style.width = Math.round(width - splitterLeft - splitterWidth - 1) + 'px'; //editor.onResize(); // TODO // resize ad text if (domAdInfo && domAd) { var infoHeight = domAdInfo.clientHeight; domAd.style.paddingTop = infoHeight + 'px'; } }; main.errorFrame = undefined; main.showError = function (message) { if (!main.errorFrame) { var width = 500; var top = 5; var windowWidth = document.body.offsetWidth || window.innerWidth; main.errorFrame = document.createElement('div'); main.errorFrame.style.position = 'absolute'; main.errorFrame.style.left = (windowWidth - width) / 2 + 'px'; main.errorFrame.style.width = width + 'px'; main.errorFrame.style.top = top + 'px'; document.body.appendChild(main.errorFrame); } var error = document.createElement('div'); error.className = 'error'; error.style.position = 'relative'; main.errorFrame.appendChild(error); var table = document.createElement('table'); table.style.width = '100%'; error.appendChild(table); var tbody = document.createElement('tbody'); table.appendChild(tbody); var tr = document.createElement('tr'); tbody.appendChild(tr); var tdMessage = document.createElement('td'); tdMessage.innerHTML = message; tr.appendChild(tdMessage); var tdClose = document.createElement('td'); tdClose.style.textAlign = 'right'; tdClose.style.verticalAlign = 'top'; tr.appendChild(tdClose); var closeDiv = document.createElement('button'); closeDiv.innerHTML = '&times;'; closeDiv.title = 'Close error message'; tdClose.appendChild(closeDiv); closeDiv.onclick = function () { if (error.parentNode) { error.parentNode.removeChild(error); } if (main.errorFrame.childNodes.length == 0) { main.errorFrame.parentNode.removeChild(main.errorFrame); main.errorFrame = undefined; } } }; main.hideAds = function() { var domAd = document.getElementById("ad"); if (domAd) { domAd.parentNode.removeChild(domAd); main.resize(); } }; main.removeAds = function () { var domRemoveAds = document.getElementById('removeAds'); if (domRemoveAds) { domRemoveAds.style.display = 'none'; } main.resize(); };