Файл: library/wysihtml5/src/views/composer.style.js
Строк: 248
<?php
(function(wysihtml5) {
var dom = wysihtml5.dom,
doc = document,
win = window,
HOST_TEMPLATE = doc.createElement("div"),
/**
* Styles to copy from textarea to the composer element
*/
TEXT_FORMATTING = [
"background-color",
"color", "cursor",
"font-family", "font-size", "font-style", "font-variant", "font-weight",
"line-height", "letter-spacing",
"text-align", "text-decoration", "text-indent", "text-rendering",
"word-break", "word-wrap", "word-spacing"
],
/**
* Styles to copy from textarea to the iframe
*/
BOX_FORMATTING = [
"background-color",
"border-collapse",
"border-bottom-color", "border-bottom-style", "border-bottom-width",
"border-left-color", "border-left-style", "border-left-width",
"border-right-color", "border-right-style", "border-right-width",
"border-top-color", "border-top-style", "border-top-width",
"clear", "display", "float",
"margin-bottom", "margin-left", "margin-right", "margin-top",
"outline-color", "outline-offset", "outline-width", "outline-style",
"padding-left", "padding-right", "padding-top", "padding-bottom",
"position", "top", "left", "right", "bottom", "z-index",
"vertical-align", "text-align",
"-webkit-box-sizing", "-moz-box-sizing", "-ms-box-sizing", "box-sizing",
"-webkit-box-shadow", "-moz-box-shadow", "-ms-box-shadow","box-shadow",
"-webkit-border-top-right-radius", "-moz-border-radius-topright", "border-top-right-radius",
"-webkit-border-bottom-right-radius", "-moz-border-radius-bottomright", "border-bottom-right-radius",
"-webkit-border-bottom-left-radius", "-moz-border-radius-bottomleft", "border-bottom-left-radius",
"-webkit-border-top-left-radius", "-moz-border-radius-topleft", "border-top-left-radius",
"width", "height"
],
ADDITIONAL_CSS_RULES = [
"html { height: 100%; }",
"body { height: 100%; padding: 1px 0 0 0; margin: -1px 0 0 0; }",
"body > p:first-child { margin-top: 0; }",
"._wysihtml5-temp { display: none; }",
wysihtml5.browser.isGecko ?
"body.placeholder { color: graytext !important; }" :
"body.placeholder { color: #a9a9a9 !important; }",
// Ensure that user see's broken images and can delete them
"img:-moz-broken { -moz-force-broken-image-icon: 1; height: 24px; width: 24px; }"
];
/**
* With "setActive" IE offers a smart way of focusing elements without scrolling them into view:
* http://msdn.microsoft.com/en-us/library/ms536738(v=vs.85).aspx
*
* Other browsers need a more hacky way: (pssst don't tell my mama)
* In order to prevent the element being scrolled into view when focusing it, we simply
* move it out of the scrollable area, focus it, and reset it's position
*/
var focusWithoutScrolling = function(element) {
if (element.setActive) {
// Following line could cause a js error when the textarea is invisible
// See https://github.com/xing/wysihtml5/issues/9
try { element.setActive(); } catch(e) {}
} else {
var elementStyle = element.style,
originalScrollTop = doc.documentElement.scrollTop || doc.body.scrollTop,
originalScrollLeft = doc.documentElement.scrollLeft || doc.body.scrollLeft,
originalStyles = {
position: elementStyle.position,
top: elementStyle.top,
left: elementStyle.left,
WebkitUserSelect: elementStyle.WebkitUserSelect
};
dom.setStyles({
position: "absolute",
top: "-99999px",
left: "-99999px",
// Don't ask why but temporarily setting -webkit-user-select to none makes the whole thing performing smoother
WebkitUserSelect: "none"
}).on(element);
element.focus();
dom.setStyles(originalStyles).on(element);
if (win.scrollTo) {
// Some browser extensions unset this method to prevent annoyances
// "Better PopUp Blocker" for Chrome http://code.google.com/p/betterpopupblocker/source/browse/trunk/blockStart.js#100
// Issue: http://code.google.com/p/betterpopupblocker/issues/detail?id=1
win.scrollTo(originalScrollLeft, originalScrollTop);
}
}
};
wysihtml5.views.Composer.prototype.style = function() {
var that = this,
originalActiveElement = doc.querySelector(":focus"),
textareaElement = this.textarea.element,
hasPlaceholder = textareaElement.hasAttribute("placeholder"),
originalPlaceholder = hasPlaceholder && textareaElement.getAttribute("placeholder"),
originalDisplayValue = textareaElement.style.display,
originalDisabled = textareaElement.disabled,
displayValueForCopying;
this.focusStylesHost = HOST_TEMPLATE.cloneNode(false);
this.blurStylesHost = HOST_TEMPLATE.cloneNode(false);
this.disabledStylesHost = HOST_TEMPLATE.cloneNode(false);
// Remove placeholder before copying (as the placeholder has an affect on the computed style)
if (hasPlaceholder) {
textareaElement.removeAttribute("placeholder");
}
if (textareaElement === originalActiveElement) {
textareaElement.blur();
}
// enable for copying styles
textareaElement.disabled = false;
// set textarea to display="none" to get cascaded styles via getComputedStyle
textareaElement.style.display = displayValueForCopying = "none";
if ((textareaElement.getAttribute("rows") && dom.getStyle("height").from(textareaElement) === "auto") ||
(textareaElement.getAttribute("cols") && dom.getStyle("width").from(textareaElement) === "auto")) {
textareaElement.style.display = displayValueForCopying = originalDisplayValue;
}
// --------- iframe styles (has to be set before editor styles, otherwise IE9 sets wrong fontFamily on blurStylesHost) ---------
dom.copyStyles(BOX_FORMATTING).from(textareaElement).to(this.iframe).andTo(this.blurStylesHost);
// --------- editor styles ---------
dom.copyStyles(TEXT_FORMATTING).from(textareaElement).to(this.element).andTo(this.blurStylesHost);
// --------- apply standard rules ---------
dom.insertCSS(ADDITIONAL_CSS_RULES).into(this.element.ownerDocument);
// --------- :disabled styles ---------
textareaElement.disabled = true;
dom.copyStyles(BOX_FORMATTING).from(textareaElement).to(this.disabledStylesHost);
dom.copyStyles(TEXT_FORMATTING).from(textareaElement).to(this.disabledStylesHost);
textareaElement.disabled = originalDisabled;
// --------- :focus styles ---------
textareaElement.style.display = originalDisplayValue;
focusWithoutScrolling(textareaElement);
textareaElement.style.display = displayValueForCopying;
dom.copyStyles(BOX_FORMATTING).from(textareaElement).to(this.focusStylesHost);
dom.copyStyles(TEXT_FORMATTING).from(textareaElement).to(this.focusStylesHost);
// reset textarea
textareaElement.style.display = originalDisplayValue;
dom.copyStyles(["display"]).from(textareaElement).to(this.iframe);
// Make sure that we don't change the display style of the iframe when copying styles oblur/onfocus
// this is needed for when the change_view event is fired where the iframe is hidden and then
// the blur event fires and re-displays it
var boxFormattingStyles = wysihtml5.lang.array(BOX_FORMATTING).without(["display"]);
// --------- restore focus ---------
if (originalActiveElement) {
originalActiveElement.focus();
} else {
textareaElement.blur();
}
// --------- restore placeholder ---------
if (hasPlaceholder) {
textareaElement.setAttribute("placeholder", originalPlaceholder);
}
// --------- Sync focus/blur styles ---------
this.parent.on("focus:composer", function() {
dom.copyStyles(boxFormattingStyles) .from(that.focusStylesHost).to(that.iframe);
dom.copyStyles(TEXT_FORMATTING) .from(that.focusStylesHost).to(that.element);
});
this.parent.on("blur:composer", function() {
dom.copyStyles(boxFormattingStyles) .from(that.blurStylesHost).to(that.iframe);
dom.copyStyles(TEXT_FORMATTING) .from(that.blurStylesHost).to(that.element);
});
this.parent.observe("disable:composer", function() {
dom.copyStyles(boxFormattingStyles) .from(that.disabledStylesHost).to(that.iframe);
dom.copyStyles(TEXT_FORMATTING) .from(that.disabledStylesHost).to(that.element);
});
this.parent.observe("enable:composer", function() {
dom.copyStyles(boxFormattingStyles) .from(that.blurStylesHost).to(that.iframe);
dom.copyStyles(TEXT_FORMATTING) .from(that.blurStylesHost).to(that.element);
});
return this;
};
})(wysihtml5);
?>