From e9abf1e3b996cc1f5aa75f15175f40b1f17c2939 Mon Sep 17 00:00:00 2001
From: Kevin Sawicki <kevin@github.com>
Date: Wed, 19 Sep 2012 11:26:37 -0700
Subject: [PATCH] Add wrap guide extension

Initially places a vertical line in each editor
at 80 characters.
---
 spec/extensions/wrap-guide-spec.coffee      | 36 +++++++++++++++++++++
 src/extensions/wrap-guide/index.coffee      |  1 +
 src/extensions/wrap-guide/wrap-guide.coffee | 28 ++++++++++++++++
 static/wrap-guide.css                       |  8 +++++
 4 files changed, 73 insertions(+)
 create mode 100644 spec/extensions/wrap-guide-spec.coffee
 create mode 100644 src/extensions/wrap-guide/index.coffee
 create mode 100644 src/extensions/wrap-guide/wrap-guide.coffee
 create mode 100644 static/wrap-guide.css

diff --git a/spec/extensions/wrap-guide-spec.coffee b/spec/extensions/wrap-guide-spec.coffee
new file mode 100644
index 000000000..4b40d4bad
--- /dev/null
+++ b/spec/extensions/wrap-guide-spec.coffee
@@ -0,0 +1,36 @@
+$ = require 'jquery'
+RootView = require 'root-view'
+
+describe "WrapGuide", ->
+  [rootView, editor, wrapGuide] = []
+
+  beforeEach ->
+    rootView = new RootView(require.resolve('fixtures/sample.js'))
+    requireExtension('wrap-guide')
+    rootView.attachToDom()
+    editor = rootView.getActiveEditor()
+    wrapGuide = rootView.find('.wrap-guide').view()
+
+  afterEach ->
+    rootView.deactivate()
+
+  describe "@initialize", ->
+    it "appends a wrap guide to all existing and new editors", ->
+      expect(rootView.panes.find('.pane').length).toBe 1
+      expect(rootView.panes.find('.lines > .wrap-guide').length).toBe 1
+      editor.splitRight()
+      expect(rootView.find('.pane').length).toBe 2
+      expect(rootView.panes.find('.lines > .wrap-guide').length).toBe 2
+
+  describe "@updateGuide", ->
+    it "positions the guide at 80 characters", ->
+      width = editor.charWidth * 80
+      expect(width).toBeGreaterThan(0)
+      expect(wrapGuide.position().left).toBe(width)
+
+  describe "font-size-change", ->
+    it "updates the wrap guide position", ->
+      initial = wrapGuide.position().left
+      expect(initial).toBeGreaterThan(0)
+      rootView.trigger('increase-font-size')
+      expect(wrapGuide.position().left).toBeGreaterThan(initial)
diff --git a/src/extensions/wrap-guide/index.coffee b/src/extensions/wrap-guide/index.coffee
new file mode 100644
index 000000000..57a87beb6
--- /dev/null
+++ b/src/extensions/wrap-guide/index.coffee
@@ -0,0 +1 @@
+module.exports = require 'wrap-guide/wrap-guide'
diff --git a/src/extensions/wrap-guide/wrap-guide.coffee b/src/extensions/wrap-guide/wrap-guide.coffee
new file mode 100644
index 000000000..a4136be94
--- /dev/null
+++ b/src/extensions/wrap-guide/wrap-guide.coffee
@@ -0,0 +1,28 @@
+{View} = require 'space-pen'
+
+module.exports =
+class WrapGuide extends View
+  @activate: (rootView) ->
+    requireStylesheet 'wrap-guide.css'
+
+    for editor in rootView.getEditors()
+      @appendToEditorPane(rootView, editor) if rootView.parents('html').length
+
+    rootView.on 'editor-open', (e, editor) =>
+      @appendToEditorPane(rootView, editor)
+
+  @appendToEditorPane: (rootView, editor) ->
+    if lines = editor.pane()?.find('.lines')
+      lines.append(new WrapGuide(rootView, editor))
+
+  @content: ->
+    @div class: 'wrap-guide'
+
+  initialize: (@rootView, @editor) =>
+    @updateGuide(@editor)
+    @editor.on 'editor-path-change', => @updateGuide(@editor)
+    @rootView.on 'font-size-change', => @updateGuide(@editor)
+
+  updateGuide: (editor) ->
+    width = editor.charWidth * 80
+    @css("left", width + "px")
diff --git a/static/wrap-guide.css b/static/wrap-guide.css
new file mode 100644
index 000000000..74979de4c
--- /dev/null
+++ b/static/wrap-guide.css
@@ -0,0 +1,8 @@
+.wrap-guide {
+  height: 100%;
+  width: 1px;
+  background: rgba(150, 150, 150, .33);
+  z-index: 100;
+  position: absolute;
+  top: 0px;
+}
\ No newline at end of file