Basic functionality with files this time!

Author: keevan

.gitignore

@@ -0,0 +1,3 @@
+.DS_Store
+npm-debug.log
+node_modules

CHANGELOG.md

@@ -0,0 +1,3 @@
+## 0.1.0 - First Release
+* Every feature added
+* Every bug fixed

LICENSE.md

@@ -0,0 +1,20 @@
+Copyright (c) 2016 Kevin Khoa Pham
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

README.md

@@ -0,0 +1,26 @@
+# html-to-javascript package
+
+This converts text string to a javascript variable or javascript ready code.
+This package is intended to be used for the conversion of HTML code in to a javascript variable for later use.
+
+The main purpose of this was not only to help me change between javascript and html code efficiently but also keep the indentation used.
+Currently the ones I've encountered online either include the indentation as part of the javascript string (which is honestly wasteful when trying to minify it) or don't indent the lines afterwards.
+![Example of the conversion to a javascript string](https://puu.sh/qhoQV/3b18444414.gif)
+
+
+This is also intended to be used to convert javascript HTML strings to plain HTML and vice versa in a selection.
+Be wary that any javascript variables inside this string will be ignored.
+
+There will be a hotkey for HTML-to-Javascript and one for Javascript-to-HTML.
+
+This is my first atom package.
+
+Please bear with me :D
+
+TODO:
+- Convert Javascript string of HTML back in to HTML form for easy manipulation.
+- Optionally get ignore empty lines (by default)
+- Detect what state it is in and toggle between the two. (rather than just having a key to convert forward, and one backwards)
+- Remove unneeded package generator generated code.
+
+![Thanks Atom](https://f.cloud.github.com/assets/69169/2290250/c35d867a-a017-11e3-86be-cd7c5bf3ff9b.gif)

keymaps/atom-html-to-javascript.cson

@@ -0,0 +1,11 @@
+# Keybindings require three things to be fully defined: A selector that is
+# matched against the focused element, the keystroke and the command to
+# execute.
+#
+# Below is a basic keybinding which registers on all platforms by applying to
+# the root workspace element.
+
+# For more detailed documentation see
+# https://atom.io/docs/latest/behind-atom-keymaps-in-depth
+'atom-workspace':
+  'ctrl-shift-j': 'atom-html-to-javascript:convert'

lib/atom-html-to-javascript-view.coffee

@@ -0,0 +1,22 @@
+module.exports =
+class AtomHtmlToJavascriptView
+  constructor: (serializedState) ->
+    # Create root element
+    @element = document.createElement('div')
+    @element.classList.add('atom-html-to-javascript')
+
+    # Create message element
+    message = document.createElement('div')
+    message.textContent = "The AtomHtmlToJavascript package is Alive! It's ALIVE!"
+    message.classList.add('message')
+    @element.appendChild(message)
+
+  # Returns an object that can be retrieved when package is activated
+  serialize: ->
+
+  # Tear down any state and detach
+  destroy: ->
+    @element.remove()
+
+  getElement: ->
+    @element

lib/atom-html-to-javascript.coffee

@@ -0,0 +1,45 @@
+$ = jQuery = require 'jquery'
+
+
+{CompositeDisposable} = require 'atom'
+
+module.exports =
+	subscriptions: null
+
+	activate: ->
+		@subscriptions = new CompositeDisposable
+		@subscriptions.add atom.commands.add 'atom-workspace',
+		'atom-html-to-javascript:convert': => @convert()
+
+	deactivate: ->
+		@subscriptions.dispose()
+
+	convert: ->
+		if editor = atom.workspace.getActiveTextEditor()
+			selection = editor.getSelectedText()
+			return if !!!selection.trim()
+
+			# Replace all ' in file with \'
+			selection = selection.replace(/'/g , "\\'");
+
+			# Edit selection:
+			lines = selection.split("\n");
+
+
+
+			js_string = "''+\n"
+			# Wrap beginning and end of lines with '
+			# (for the beginning of a line, put it at the beginning of the first non space)
+			# (for the end of a line, trim the end putting '+ at the end of the line)
+			for line in lines
+				num_leading_whitespace = line.search(/\S|$/)
+				string_leading = ''
+				if num_leading_whitespace
+					for [1..num_leading_whitespace]
+						string_leading += "\t"
+
+				js_string += string_leading + "'" + line.trim() + "'+\n"
+
+			editor.insertText(js_string.substring(0,js_string.length-2), {
+					select: true
+			}) # Ignores the last 2 symbols "+\n"

menus/atom-html-to-javascript.cson

@@ -0,0 +1,22 @@
+# See https://atom.io/docs/latest/hacking-atom-package-word-count#menus for more details
+'context-menu':
+  'atom-text-editor': [
+    {
+      'label': 'HTML -> JS'
+      'command': 'atom-html-to-javascript:convert'
+    }
+  ]
+'menu': [
+  {
+    'label': 'Packages'
+    'submenu': [
+      'label': 'atom-html-to-javascript'
+      'submenu': [
+        {
+          'label': 'Convert HTML -> JS'
+          'command': 'atom-html-to-javascript:convert'
+        }
+      ]
+    ]
+  }
+]

package.json

@@ -0,0 +1,19 @@
+{
+  "name": "html-to-javascript",
+  "main": "./lib/atom-html-to-javascript",
+  "version": "0.0.0",
+  "description": "HTML to Javascript as string, and vice versa.",
+  "keywords": [
+  ],
+  "activationCommands": {
+    "atom-workspace": "atom-html-to-javascript:convert"
+  },
+  "repository": "https://github.com/keevan/atom-html-to-javascript",
+  "license": "MIT",
+  "engines": {
+    "atom": ">=1.0.0 <2.0.0"
+  },
+  "dependencies": {
+    "jquery": "^2.0.0"
+  }
+}

spec/atom-html-to-javascript-spec.coffee

@@ -0,0 +1,62 @@
+AtomHtmlToJavascript = require '../lib/atom-html-to-javascript'
+
+# Use the command `window:run-package-specs` (cmd-alt-ctrl-p) to run specs.
+#
+# To run a specific `it` or `describe` block add an `f` to the front (e.g. `fit`
+# or `fdescribe`). Remove the `f` to unfocus the block.
+
+describe "AtomHtmlToJavascript", ->
+  [workspaceElement, activationPromise] = []
+
+  beforeEach ->
+    workspaceElement = atom.views.getView(atom.workspace)
+    activationPromise = atom.packages.activatePackage('atom-html-to-javascript')
+
+  describe "when the atom-html-to-javascript:toggle event is triggered", ->
+    it "hides and shows the modal panel", ->
+      # Before the activation event the view is not on the DOM, and no panel
+      # has been created
+      expect(workspaceElement.querySelector('.atom-html-to-javascript')).not.toExist()
+
+      # This is an activation event, triggering it will cause the package to be
+      # activated.
+      atom.commands.dispatch workspaceElement, 'atom-html-to-javascript:toggle'
+
+      waitsForPromise ->
+        activationPromise
+
+      runs ->
+        expect(workspaceElement.querySelector('.atom-html-to-javascript')).toExist()
+
+        atomHtmlToJavascriptElement = workspaceElement.querySelector('.atom-html-to-javascript')
+        expect(atomHtmlToJavascriptElement).toExist()
+
+        atomHtmlToJavascriptPanel = atom.workspace.panelForItem(atomHtmlToJavascriptElement)
+        expect(atomHtmlToJavascriptPanel.isVisible()).toBe true
+        atom.commands.dispatch workspaceElement, 'atom-html-to-javascript:toggle'
+        expect(atomHtmlToJavascriptPanel.isVisible()).toBe false
+
+    it "hides and shows the view", ->
+      # This test shows you an integration test testing at the view level.
+
+      # Attaching the workspaceElement to the DOM is required to allow the
+      # `toBeVisible()` matchers to work. Anything testing visibility or focus
+      # requires that the workspaceElement is on the DOM. Tests that attach the
+      # workspaceElement to the DOM are generally slower than those off DOM.
+      jasmine.attachToDOM(workspaceElement)
+
+      expect(workspaceElement.querySelector('.atom-html-to-javascript')).not.toExist()
+
+      # This is an activation event, triggering it causes the package to be
+      # activated.
+      atom.commands.dispatch workspaceElement, 'atom-html-to-javascript:toggle'
+
+      waitsForPromise ->
+        activationPromise
+
+      runs ->
+        # Now we can test for view visibility
+        atomHtmlToJavascriptElement = workspaceElement.querySelector('.atom-html-to-javascript')
+        expect(atomHtmlToJavascriptElement).toBeVisible()
+        atom.commands.dispatch workspaceElement, 'atom-html-to-javascript:toggle'
+        expect(atomHtmlToJavascriptElement).not.toBeVisible()

spec/atom-html-to-javascript-view-spec.coffee

@@ -0,0 +1,5 @@
+AtomHtmlToJavascriptView = require '../lib/atom-html-to-javascript-view'
+
+describe "AtomHtmlToJavascriptView", ->
+  it "has one valid test", ->
+    expect("life").toBe "easy"

styles/atom-html-to-javascript.less

@@ -0,0 +1,8 @@
+// The ui-variables file is provided by base themes provided by Atom.
+//
+// See https://github.com/atom/atom-dark-ui/blob/master/styles/ui-variables.less
+// for a full listing of what's available.
+@import "ui-variables";
+
+.atom-html-to-javascript {
+}