yapp 2.1.13 → 2.2.0

package/src/mixins/style.js

@@ -0,0 +1,97 @@
+"use strict";
+
+import { stripPixels } from "../utilities/css";
+import { TOP, LEFT, RIGHT, BOTTOM, LINE_HEIGHT } from "../constants";
+
+function getLineHeight() {
+  const lineHeightInPixels = this.css(LINE_HEIGHT),
+        lineHeight = stripPixels(lineHeightInPixels);
+
+  return lineHeight;
+}
+
+function getPadding(side) {
+  const paddingInPixels = this.css(`padding-${side}`),
+        padding = stripPixels(paddingInPixels);
+
+  return padding;
+}
+
+function getBorderWidth(side) {
+  const borderWidthInPixels = this.css(`border-${side}-width`),
+        borderWidth = stripPixels(borderWidthInPixels);
+
+  return borderWidth;
+}
+
+function getPaddingTop() {
+  const side = TOP,
+        paddingTop = this.getPadding(side);
+
+  return paddingTop;
+}
+
+function getPaddingLeft() {
+  const side = LEFT,
+        paddingLeft = this.getPadding(side);
+
+  return paddingLeft;
+}
+
+function getPaddingRight() {
+  const side = RIGHT,
+        paddingRight = this.getPadding(side);
+
+  return paddingRight;
+}
+
+function getPaddingBottom() {
+  const side = BOTTOM,
+        paddingBottom = this.getPadding(side);
+
+  return paddingBottom;
+}
+
+function getBorderTopWidth() {
+  const side = TOP,
+        borderTopWidth = this.getBorderWidth(side);
+
+  return borderTopWidth;
+}
+
+function getBorderLeftWidth() {
+  const side = LEFT,
+        borderLeftWidth = this.getBorderWidth(side);
+
+  return borderLeftWidth;
+}
+
+function getBorderRightWidth() {
+  const side = RIGHT,
+        borderRightWidth = this.getBorderWidth(side);
+
+  return borderRightWidth;
+}
+
+function getBorderBottomWidth() {
+  const side = BOTTOM,
+        borderBottomWidth = this.getBorderWidth(side);
+
+  return borderBottomWidth;
+}
+
+const styleMixins = {
+  getLineHeight,
+  getPadding,
+  getPaddingTop,
+  getPaddingLeft,
+  getPaddingRight,
+  getPaddingBottom,
+  getBorderWidth,
+  getBorderTopWidth,
+  getBorderLeftWidth,
+  getBorderRightWidth,
+  getBorderBottomWidth
+};
+
+export default styleMixins;

package/src/prettyPrinter.js

@@ -40,57 +40,80 @@ class PrettyPrinter extends Element {
     return height;
   }
 
-  getInnerBounds() {
-    const gutterWidth = this.getGutterWidth();
-
-    let top = 0, ///
-        left = 0,  ///
-        width = this.getWidth(),
-        height = this.getHeight();
-
-    left += gutterWidth;
-    width -= gutterWidth;
-
-    const innerBounds = Bounds.fromTopLeftWidthAndHeight(top, left, width, height);
-
-    return innerBounds;
-  }
-
   scroll(scrollTop, scrollLeft) {
     this.scrollGutter(scrollTop ,scrollLeft);
     this.scrollSyntax(scrollTop, scrollLeft);
   }
 
   update(tokens) {
-    let innerBounds = null,
+    let gutterWidth = this.getGutterWidth(),
         previousGutterWidth = this.getPreviousGutterWidth();
 
     this.updateSyntax(tokens);
 
     this.updateGutter(tokens);
 
-    const gutterWidth = this.getGutterWidth();
-
     if (previousGutterWidth !== gutterWidth) {
       previousGutterWidth = gutterWidth;  ///
 
       this.setPreviousGutterWidth(previousGutterWidth);
 
-      innerBounds = this.resize();
+      this.resize();
+    } else {
+      gutterWidth = null;
     }
 
+    return gutterWidth;
+  }
+
+  getInnerBounds(gutterWidth) {
+    let top = 0,
+        left = 0,
+        width = this.getWidth(),
+        height = this.getHeight();
+
+    left += gutterWidth;
+    width -= gutterWidth;
+
+    const bounds = Bounds.fromTopLeftWidthAndHeight(top, left, width, height),
+          innerBounds = bounds; ///
+
     return innerBounds;
   }
 
   resize() {
-    const innerBounds = this.getInnerBounds(),
-          bounds = innerBounds; ///
+    const gutterWidth = this.getGutterWidth(),
+          innerBounds = this.getInnerBounds(gutterWidth),
+          syntaxBounds = innerBounds; ///
 
     this.positionGutter();
 
-    this.setSyntaxBounds(bounds);
+    this.setSyntaxBounds(syntaxBounds);
 
-    return innerBounds;
+    return gutterWidth;
+  }
+
+  setBounds(bounds) {
+    const top = bounds.getTop(),
+          left = bounds.getLeft(),
+          width = bounds.getWidth(),
+          height = bounds.getHeight();
+
+    this.position(top, left);
+    this.setWidth(width);
+    this.setHeight(height);
+  }
+
+  position(top, left) {
+    top = `${top}px`;
+    left = `${left}px`;
+
+    const css = {
+      top,
+      left
+    };
+
+    this.css(css);
   }
 
   getPreviousGutterWidth() {
@@ -123,14 +146,12 @@ class PrettyPrinter extends Element {
           resizePrettyPrinter = this.resize.bind(this), ///
           updatePrettyPrinter = this.update.bind(this), ///
           scrollPrettyPrinter = this.scroll.bind(this), ///
-          setPrettyPrinterWidth = this.setWidth.bind(this), ///
-          setPrettyPrinterHeight = this.setHeight.bind(this), ///
+          setPrettyPrinterBounds = this.setBounds.bind(this), ///
           parentContext = Object.assign({}, context, {
             resizePrettyPrinter,
             updatePrettyPrinter,
             scrollPrettyPrinter,
-            setPrettyPrinterWidth,
-            setPrettyPrinterHeight
+            setPrettyPrinterBounds
           });
     
     return parentContext;
@@ -146,13 +167,13 @@ class PrettyPrinter extends Element {
 
   initialise() {
     this.assignContext([
-      "getGutterWidth",
-      "setSyntaxBounds",
-      "positionGutter",
       "updateGutter",
       "updateSyntax",
       "scrollGutter",
-      "scrollSyntax"
+      "scrollSyntax",
+      "positionGutter",
+      "getGutterWidth",
+      "setSyntaxBounds"
     ]);
 
     this.setInitialState();
@@ -172,8 +193,8 @@ class PrettyPrinter extends Element {
 
 export default withStyle(PrettyPrinter)`
 
-  position: relative;
   overflow: hidden;
+  position: absolute;
   
   color: inherit;
   border-color: inherit;

package/src/richTextarea.js

@@ -7,21 +7,6 @@ import { scrollbarThickness, scrollbarThumbBorderRadius } from "./styles";
 import { selectionColour, backgroundColour, selectionBackgroundColour, scrollbarThumbBoxShadowColour, scrollbarThumbBackgroundColour  } from "./scheme/colour";
 
 export default withStyle(class extends RichTextarea {
-  setBounds(bounds) {
-    const top = bounds.getTop(),
-          left = bounds.getLeft(),
-          width = bounds.getWidth(),
-          height = bounds.getHeight();
-
-    this.resize(width, height);
-    this.position(top, left);
-  }
-
-  resize(width, height) {
-    this.setWidth(width);
-    this.setHeight(height);
-  }
-
   position(top, left) {
     top = `${top}px`;
     left = `${left}px`;
@@ -34,35 +19,54 @@ export default withStyle(class extends RichTextarea {
     this.css(css);
   }
 
+  setBounds(bounds) {
+    const top = bounds.getTop(),
+          left = bounds.getLeft(),
+          width = bounds.getWidth(),
+          height = bounds.getHeight();
+
+    this.position(top, left);
+    this.setWidth(width);
+    this.setHeight(height);
+  }
+
   didMount() {
-    const { fancyScrollbars } = this.properties;
+    const { fancyScrollbars, hiddenScrollbars } = this.properties;
 
     if (fancyScrollbars) {
       this.addClass("fancy-scrollbars");
     }
 
+    if (hiddenScrollbars) {
+      this.addClass("hidden-scrollbars");
+    }
+
     super.didMount();
   }
 
   willUnmount() {
-    const { fancyScrollbars } = this.properties;
+    const { fancyScrollbars, hiddenScrollbars } = this.properties;
 
     if (fancyScrollbars) {
       this.removeClass("fancy-scrollbars");
     }
 
+    if (hiddenScrollbars) {
+      this.removeClass("hidden-scrollbars");
+    }
+
     super.willUnmount();
   }
 
   parentContext() {
-    const getRichTextareaContent = this.getContent.bind(this),
-          setRichTextareaBounds = this.setBounds.bind(this),  ///
+    const setRichTextareaBounds = this.setBounds.bind(this),  ///
+          getRichTextareaContent = this.getContent.bind(this),  ///
           setRichTextareaContent = this.setContent.bind(this),  ///
           setRichTextareaReadOnly = this.setReadOnly.bind(this);  ///
 
     return ({
-      getRichTextareaContent,
       setRichTextareaBounds,
+      getRichTextareaContent,
       setRichTextareaContent,
       setRichTextareaReadOnly
     });
@@ -97,6 +101,10 @@ export default withStyle(class extends RichTextarea {
     background-color: ${selectionBackgroundColour};
   }
   
+  .hidden-scrollbars {
+    overflow: hidden;
+  }
+  
   .fancy-scrollbars::-webkit-scrollbar {
     width: ${scrollbarThickness};
     height: ${scrollbarThickness};

package/src/syntax.js

@@ -2,9 +2,20 @@
 
 import withStyle from "easy-with-style";  ///
 
-import ScrollableBoundedElement from "./element/bounded/scrollable";
+import ScrollableElement from "./element/scrollable";
+
+class Syntax extends ScrollableElement {
+  setBounds(bounds) {
+    const top = bounds.getTop(),
+          left = bounds.getLeft(),
+          width = bounds.getWidth(),
+          height = bounds.getHeight();
+
+    this.position(top, left);
+    this.setWidth(width);
+    this.setHeight(height);
+  }
 
-class Syntax extends ScrollableBoundedElement {
   setLanguage(language) {
     const state = {
       language
@@ -55,7 +66,7 @@ class Syntax extends ScrollableBoundedElement {
 	  const setLanguage = this.setLanguage.bind(this),
           updateSyntax = this.update.bind(this), ///
 				  scrollSyntax = this.scroll.bind(this), ///
-          setSyntaxBounds = this.setBounds.bind(this);  ///
+          setSyntaxBounds = this.setBounds.bind(this);  //
 
     return ({
       setLanguage,

package/src/yapp.js

@@ -2,19 +2,18 @@
 
 import withStyle from "easy-with-style";  ///
 
-import { React, Element } from "easy";
+import { React, Bounds, Element } from "easy";
 
+import styleMixins from "./mixins/style";
 import RichTextarea from "./richTextarea";
 import PrettyPrinter from "./prettyPrinter";
 
-import { stripPixels } from "./utilities/css";
 import { getScrollbarThickness } from "./utilities/scrollbarThickness";
 import { pluginFromLanguageAndPlugin } from "./utilities/plugin";
-import { TOP, LEFT, RIGHT, LINE_HEIGHT, BOTTOM } from "./constants";
 import { propertiesFromContentLanguagePluginAndOptions } from "./utilities/properties";
 import { lineCountFromContent, contentFromChildElements } from "./utilities/content";
 import { colour, caretColour, borderColour, backgroundColour } from "./scheme/colour";
-import { DEFAULT_EDITABLE, DEFAULT_FIRA_CODE, DEFAULT_DEFER_RENDER, DEFAULT_HIDDEN_GUTTER, DEFAULT_FANCY_SCROLLBARS } from "./defaults";
+import { DEFAULT_EDITABLE, DEFAULT_FIRA_CODE, DEFAULT_DEFER_RENDER, DEFAULT_HIDDEN_GUTTER, DEFAULT_HIDDEN_SCROLLBARS, DEFAULT_FANCY_SCROLLBARS } from "./defaults";
 
 class Yapp extends Element {
   constructor(selector, plugin) {
@@ -34,32 +33,36 @@ class Yapp extends Element {
     return content;
   }
 
-  getLineHeight() {
-    const lineHeightInPixels = this.css(LINE_HEIGHT),
-          lineHeight = stripPixels(lineHeightInPixels);
-
-    return lineHeight;
-  }
+  getInnerBounds(gutterWidth) {
+    let top,
+        left,
+        width = this.getWidth(),
+        height = this.getHeight();
 
-  getBorderWidth(side) {
-    const borderWidthInPixels = this.css(`border-${side}-width`),
-          borderWidth = stripPixels(borderWidthInPixels);
+    const paddingTop = this.getPaddingTop(),
+          paddingLeft = this.getPaddingLeft(),
+          paddingRight = this.getPaddingRight(),
+          paddingBottom = this.getPaddingBottom(),
+          borderTopWidth = this.getBorderTopWidth(),
+          borderLeftWidth = this.getBorderLeftWidth(),
+          borderRightWidth = this.getBorderRightWidth(),
+          borderBottomWidth = this.getBorderBottomWidth();
 
-    return borderWidth;
-  }
+    top = borderTopWidth + paddingTop;
+    left = borderLeftWidth + paddingLeft;
 
-  getBorderTopWidth() {
-    const side = TOP,
-          borderTopWidth = this.getBorderWidth(side);
+    width -= ( borderLeftWidth + paddingLeft + paddingRight + borderRightWidth );
+    height -= ( borderTopWidth + paddingTop + paddingBottom + borderBottomWidth );
 
-    return borderTopWidth;
-  }
+    if (gutterWidth !== null) {
+      left += gutterWidth;
+      width -= gutterWidth;
+    }
 
-  getBorderLeftWidth() {
-    const side = LEFT,
-          borderLeftWidth = this.getBorderWidth(side);
+    const bounds = Bounds.fromTopLeftWidthAndHeight(top, left, width, height),
+          innerBounds = bounds; ///
 
-    return borderLeftWidth;
+    return innerBounds;
   }
 
   getInitialLineCount() {
@@ -70,23 +73,16 @@ class Yapp extends Element {
     return initialLineCount;
   }
 
-  getBorderRightWidth() {
-    const side = RIGHT,
-          borderRightWidth = this.getBorderWidth(side);
-
-    return borderRightWidth;
-  }
+  getScrollbarThickness() {
+    let scrollbarThickness = 0;
 
-  getBorderBottomWidth() {
-    const side = BOTTOM,
-          borderBottomWidth = this.getBorderWidth(side);
+    const { hiddenScrollbars = DEFAULT_HIDDEN_SCROLLBARS } = this.properties;
 
-    return borderBottomWidth;
-  }
+    if (!hiddenScrollbars) {
+      const { fancyScrollbars = DEFAULT_FANCY_SCROLLBARS } = this.properties;
 
-  getScrollbarThickness() {
-    const { fancyScrollbars = DEFAULT_FANCY_SCROLLBARS } = this.properties,
-          scrollbarThickness = getScrollbarThickness(fancyScrollbars);
+      scrollbarThickness = getScrollbarThickness(fancyScrollbars);
+    }
 
     return scrollbarThickness;
   }
@@ -125,43 +121,46 @@ class Yapp extends Element {
     this.plugin.update(content);
 
     const tokens = this.plugin.getTokens(),
-          innerBounds = this.updatePrettyPrinter(tokens);
+          gutterWidth = this.updatePrettyPrinter(tokens);
 
-    if (innerBounds !== null) {
-      const richTextareaBounds = innerBounds; ///
+    if (gutterWidth !== null) {
+      const innerBounds = this.getInnerBounds(gutterWidth),
+            richTextareaBounds = innerBounds; ///
 
       this.setRichTextareaBounds(richTextareaBounds);
     }
   }
 
   resize() {
-    let width = this.getWidth(),
-        height = this.getHeight();
+    let innerBounds,
+        gutterWidth;
 
-    const borderTopWidth = this.getBorderTopWidth(),
-          borderLeftWidth = this.getBorderLeftWidth(),
-          borderRightWidth = this.getBorderRightWidth(),
-          borderBottomWidth = this.getBorderBottomWidth();
+    gutterWidth = null;
+
+    innerBounds = this.getInnerBounds(gutterWidth);
 
-    height -= ( borderTopWidth + borderBottomWidth );
-    width -= ( borderLeftWidth + borderRightWidth );
+    const prettyPrinterBounds = innerBounds;  ///
 
-    this.setPrettyPrinterWidth(width);
-    this.setPrettyPrinterHeight(height);
+    this.setPrettyPrinterBounds(prettyPrinterBounds);
 
-    const innerBounds = this.resizePrettyPrinter(),
-          richTextareaBounds = innerBounds; ///
+    gutterWidth = this.resizePrettyPrinter();
+
+    innerBounds = this.getInnerBounds(gutterWidth);
+
+    const richTextareaBounds = innerBounds; ///
 
     this.setRichTextareaBounds(richTextareaBounds);
   }
 
   render() {
     const lineHeight = this.getLineHeight(),
+          paddingTop = this.getPaddingTop(),
+          paddingBottom = this.getPaddingBottom(),
           borderTopWidth = this.getBorderTopWidth(),
           initialLineCount = this.getInitialLineCount(),
           borderBottomWidth = this.getBorderBottomWidth(),
           scrollbarThickness = this.getScrollbarThickness(),
-          height = initialLineCount * lineHeight + borderTopWidth + borderBottomWidth + scrollbarThickness;
+          height = borderTopWidth + paddingTop + initialLineCount * lineHeight + paddingBottom + borderBottomWidth + scrollbarThickness;
 
     this.setHeight(height);
 
@@ -193,7 +192,7 @@ class Yapp extends Element {
   }
 
   childElements() {
-    const { hiddenGutter = DEFAULT_HIDDEN_GUTTER, fancyScrollbars = DEFAULT_FANCY_SCROLLBARS } = this.properties,
+    const { hiddenGutter = DEFAULT_HIDDEN_GUTTER, hiddenScrollbars = DEFAULT_HIDDEN_SCROLLBARS, fancyScrollbars = DEFAULT_FANCY_SCROLLBARS } = this.properties,
           changeHandler = this.changeHandler.bind(this),
           scrollHandler = this.scrollHandler.bind(this),
           scrollbarThickness = this.getScrollbarThickness();
@@ -201,7 +200,7 @@ class Yapp extends Element {
     return ([
 
       <PrettyPrinter hiddenGutter={hiddenGutter} scrollbarThickness={scrollbarThickness} />,
-      <RichTextarea onChange={changeHandler} onScroll={scrollHandler} fancyScrollbars={fancyScrollbars} active />
+      <RichTextarea onChange={changeHandler} onScroll={scrollHandler} hiddenScrollbars={hiddenScrollbars} fancyScrollbars={fancyScrollbars} active />
 
     ]);
   }
@@ -260,6 +259,7 @@ class Yapp extends Element {
     "editable",
     "deferRender",
     "hiddenGutter",
+    "noScrollbars",
     "fancyScrollbars"
   ];
 
@@ -281,6 +281,8 @@ class Yapp extends Element {
   }
 }
 
+Object.assign(Yapp.prototype, styleMixins);
+
 export default withStyle(Yapp)`
 
   width: 100%;