var _editHandler;
var HIGHLIGHT_CLASSNAME = "__brackets-ld-highlight",
KEEP_ALIVE_TIMEOUT = 3000; // Keep alive timeout value, in milliseconds
// determine whether an event should be processed for Live Development
function _validEvent(event) {
if (navigator.platform.substr(0, 3) === "Mac") {
// Mac
return event.metaKey;
} else {
// Windows
return event.ctrlKey;
}
}
// determine the color for a type
function _typeColor(type, highlight) {
switch (type) {
case "html":
return highlight ? "#eec" : "#ffe";
case "css":
return highlight ? "#cee" : "#eff";
case "js":
return highlight ? "#ccf" : "#eef";
default:
return highlight ? "#ddd" : "#eee";
}
}
// compute the screen offset of an element
function _screenOffset(element) {
var elemBounds = element.getBoundingClientRect(),
body = window.document.body,
offsetTop,
offsetLeft;
if (window.getComputedStyle(body).position === "static") {
offsetLeft = elemBounds.left + window.pageXOffset;
offsetTop = elemBounds.top + window.pageYOffset;
} else {
var bodyBounds = body.getBoundingClientRect();
offsetLeft = elemBounds.left - bodyBounds.left;
offsetTop = elemBounds.top - bodyBounds.top;
}
return { left: offsetLeft, top: offsetTop };
}
// set an event on a element
function _trigger(element, name, value, autoRemove) {
var key = "data-ld-" + name;
if (value !== undefined && value !== null) {
element.setAttribute(key, value);
if (autoRemove) {
window.setTimeout(element.removeAttribute.bind(element, key));
}
} else {
element.removeAttribute(key);
}
}
// construct the info menu
function Menu(element) {
this.element = element;
_trigger(this.element, "showgoto", 1, true);
window.setTimeout(window.remoteShowGoto);
this.remove = this.remove.bind(this);
}
Menu.prototype = {
onClick: function (url, event) {
event.preventDefault();
_trigger(this.element, "goto", url, true);
this.remove();
},
createBody: function () {
if (this.body) {
return;
}
// compute the position on screen
var offset = _screenOffset(this.element),
x = offset.left,
y = offset.top + this.element.offsetHeight;
// create the container
this.body = document.createElement("div");
this.body.style.setProperty("z-index", 2147483647);
this.body.style.setProperty("position", "absolute");
this.body.style.setProperty("left", x + "px");
this.body.style.setProperty("top", y + "px");
this.body.style.setProperty("font-size", "11pt");
// draw the background
this.body.style.setProperty("background", "#fff");
this.body.style.setProperty("border", "1px solid #888");
this.body.style.setProperty("-webkit-box-shadow", "2px 2px 6px 0px #ccc");
this.body.style.setProperty("border-radius", "6px");
this.body.style.setProperty("padding", "6px");
},
addItem: function (target) {
var item = document.createElement("div");
item.style.setProperty("padding", "2px 6px");
if (this.body.childNodes.length > 0) {
item.style.setProperty("border-top", "1px solid #ccc");
}
item.style.setProperty("cursor", "pointer");
item.style.setProperty("background", _typeColor(target.type));
item.innerHTML = target.name;
item.addEventListener("click", this.onClick.bind(this, target.url));
if (target.file) {
var file = document.createElement("i");
file.style.setProperty("float", "right");
file.style.setProperty("margin-left", "12px");
file.innerHTML = " " + target.file;
item.appendChild(file);
}
this.body.appendChild(item);
},
show: function () {
if (!this.body) {
this.body = this.createBody();
}
if (!this.body.parentNode) {
document.body.appendChild(this.body);
}
document.addEventListener("click", this.remove);
},
remove: function () {
if (this.body && this.body.parentNode) {
document.body.removeChild(this.body);
}
document.removeEventListener("click", this.remove);
}
};
function Editor(element) {
this.onBlur = this.onBlur.bind(this);
this.onKeyPress = this.onKeyPress.bind(this);
this.element = element;
this.element.setAttribute("contenteditable", "true");
this.element.focus();
this.element.addEventListener("blur", this.onBlur);
this.element.addEventListener("keypress", this.onKeyPress);
this.revertText = this.element.innerHTML;
_trigger(this.element, "edit", 1);
}
Editor.prototype = {
onBlur: function (event) {
this.element.removeAttribute("contenteditable");
this.element.removeEventListener("blur", this.onBlur);
this.element.removeEventListener("keypress", this.onKeyPress);
_trigger(this.element, "edit", 0, true);
},
onKeyPress: function (event) {
switch (event.which) {
case 13: // return
this.element.blur();
break;
case 27: // esc
this.element.innerHTML = this.revertText;
this.element.blur();
break;
}
}
};
function Highlight(color, trigger) {
this.color = color;
this.trigger = !!trigger;
this.elements = [];
this.selector = "";
}
Highlight.prototype = {
_elementExists: function (element) {
var i;
for (i in this.elements) {
if (this.elements[i] === element) {
return true;
}
}
return false;
},
_makeHighlightDiv: function (element, doAnimation) {
var elementBounds = element.getBoundingClientRect(),
highlight = window.document.createElement("div"),
styles = window.getComputedStyle(element);
// Don't highlight elements with 0 width & height
if (elementBounds.width === 0 && elementBounds.height === 0) {
return;
}
highlight.className = HIGHLIGHT_CLASSNAME;
var offset = _screenOffset(element);
var stylesToSet = {
"left": offset.left + "px",
"top": offset.top + "px",
"width": elementBounds.width + "px",
"height": elementBounds.height + "px",
"z-index": 2000000,
"margin": 0,
"padding": 0,
"position": "absolute",
"pointer-events": "none",
"border-top-left-radius": styles.borderTopLeftRadius,
"border-top-right-radius": styles.borderTopRightRadius,
"border-bottom-left-radius": styles.borderBottomLeftRadius,
"border-bottom-right-radius": styles.borderBottomRightRadius,
"border-style": "solid",
"border-width": "1px",
"border-color": "#00a2ff",
"box-shadow": "0 0 1px #fff",
"box-sizing": "border-box"
};
var animateStartValues = {
"background-color": "rgba(0, 162, 255, 0.5)",
"opacity": 0
};
var animateEndValues = {
"background-color": "rgba(0, 162, 255, 0)",
"opacity": 1
};
var transitionValues = {
"-webkit-transition-property": "opacity, background-color",
"-webkit-transition-duration": "300ms, 2.3s",
"transition-property": "opacity, background-color",
"transition-duration": "300ms, 2.3s"
};
function _setStyleValues(styleValues, obj) {
var prop;
for (prop in styleValues) {
obj.setProperty(prop, styleValues[prop]);
}
}
_setStyleValues(stylesToSet, highlight.style);
_setStyleValues(
doAnimation ? animateStartValues : animateEndValues,
highlight.style
);
if (doAnimation) {
_setStyleValues(transitionValues, highlight.style);
window.setTimeout(function () {
_setStyleValues(animateEndValues, highlight.style);
}, 20);
}
window.document.body.appendChild(highlight);
},
add: function (element, doAnimation) {
if (this._elementExists(element) || element === document) {
return;
}
if (this.trigger) {
_trigger(element, "highlight", 1);
}
this.elements.push(element);
this._makeHighlightDiv(element, doAnimation);
},
clear: function () {
var i, highlights = window.document.querySelectorAll("." + HIGHLIGHT_CLASSNAME),
body = window.document.body;
for (i = 0; i < highlights.length; i++) {
body.removeChild(highlights[i]);
}
if (this.trigger) {
for (i = 0; i < this.elements.length; i++) {
_trigger(this.elements[i], "highlight", 0);
}
}
this.elements = [];
},
redraw: function () {
var i, highlighted;
// When redrawing a selector-based highlight, run a new selector
// query to ensure we have the latest set of elements to highlight.
if (this.selector) {
highlighted = window.document.querySelectorAll(this.selector);
} else {
highlighted = this.elements.slice(0);
}
this.clear();
for (i = 0; i < highlighted.length; i++) {
this.add(highlighted[i], false);
}
}
};
var _currentEditor;
function _toggleEditor(element) {
_currentEditor = new Editor(element);
}
var _currentMenu;
function _toggleMenu(element) {
if (_currentMenu) {
_currentMenu.remove();
}
_currentMenu = new Menu(element);
}
var _localHighlight;
var _remoteHighlight;
var _setup = false;Constructor
function DOMEditHandler(htmlDocument) {
this.htmlDocument = htmlDocument;
this.rememberedNodes = null;
this.entityParseParent = htmlDocument.createElement("div");
}RemoteFunctions define the functions to be executed in the browser. This modules should define a single function that returns an object of all exported functions.
function RemoteFunctions(experimental) {
"use strict";
var lastKeepAliveTime = Date.now(); function _domElementToJSON(elem) {
var json = { tag: elem.tagName.toLowerCase(), attributes: {}, children: [] },
i,
len,
node,
value;
len = elem.attributes.length;
for (i = 0; i < len; i++) {
node = elem.attributes.item(i);
value = (node.name === "data-brackets-id") ? parseInt(node.value, 10) : node.value;
json.attributes[node.name] = value;
}
len = elem.childNodes.length;
for (i = 0; i < len; i++) {
node = elem.childNodes.item(i);
// ignores comment nodes and visuals generated by live preview
if (node.nodeType === Node.ELEMENT_NODE && node.className !== HIGHLIGHT_CLASSNAME) {
json.children.push(_domElementToJSON(node));
} else if (node.nodeType === Node.TEXT_NODE) {
json.children.push({ content: node.nodeValue });
}
}
return json;
}
function getSimpleDOM() {
return JSON.stringify(_domElementToJSON(document.documentElement));
}
// init
_editHandler = new DOMEditHandler(window.document);
if (experimental) {
window.document.addEventListener("keydown", onKeyDown);
}
return {
"DOMEditHandler" : DOMEditHandler,
"keepAlive" : keepAlive,
"showGoto" : showGoto,
"hideHighlight" : hideHighlight,
"highlight" : highlight,
"highlightRule" : highlightRule,
"redrawHighlights" : redrawHighlights,
"applyDOMEdits" : applyDOMEdits,
"getSimpleDOM" : getSimpleDOM
};
} function _isRawTextNode(node) {
return (node.nodeType === Node.ELEMENT_NODE && /script|style|noscript|noframes|noembed|iframe|xmp/i.test(node.tagName));
}Event Handlers **
function onMouseOver(event) {
if (_validEvent(event)) {
_localHighlight.add(event.target, true);
}
}
function onMouseOut(event) {
if (_validEvent(event)) {
_localHighlight.clear();
}
}
function onMouseMove(event) {
onMouseOver(event);
document.removeEventListener("mousemove", onMouseMove);
}
function onClick(event) {
if (_validEvent(event)) {
event.preventDefault();
event.stopPropagation();
if (event.altKey) {
_toggleEditor(event.target);
} else {
_toggleMenu(event.target);
}
}
}
function onKeyUp(event) {
if (_setup && !_validEvent(event)) {
document.removeEventListener("keyup", onKeyUp);
document.removeEventListener("mouseover", onMouseOver);
document.removeEventListener("mouseout", onMouseOut);
document.removeEventListener("mousemove", onMouseMove);
document.removeEventListener("click", onClick);
_localHighlight.clear();
_localHighlight = undefined;
_setup = false;
}
}
function onKeyDown(event) {
if (!_setup && _validEvent(event)) {
document.addEventListener("keyup", onKeyUp);
document.addEventListener("mouseover", onMouseOver);
document.addEventListener("mouseout", onMouseOut);
document.addEventListener("mousemove", onMouseMove);
document.addEventListener("click", onClick);
_localHighlight = new Highlight("#ecc", true);
_setup = true;
}
}