Skip to content

Commit

Permalink
Basic functionality with files this time!
Browse files Browse the repository at this point in the history
  • Loading branch information
keevan committed Jul 28, 2016
0 parents commit 1a72602
Show file tree
Hide file tree
Showing 12 changed files with 246 additions and 0 deletions.
3 changes: 3 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.DS_Store
npm-debug.log
node_modules
3 changes: 3 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
## 0.1.0 - First Release
* Every feature added
* Every bug fixed
20 changes: 20 additions & 0 deletions LICENSE.md
Original file line number Diff line number Diff line change
@@ -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.
26 changes: 26 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -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)
11 changes: 11 additions & 0 deletions keymaps/atom-html-to-javascript.cson
Original file line number Diff line number Diff line change
@@ -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'
22 changes: 22 additions & 0 deletions lib/atom-html-to-javascript-view.coffee
Original file line number Diff line number Diff line change
@@ -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
45 changes: 45 additions & 0 deletions lib/atom-html-to-javascript.coffee
Original file line number Diff line number Diff line change
@@ -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"
22 changes: 22 additions & 0 deletions menus/atom-html-to-javascript.cson
Original file line number Diff line number Diff line change
@@ -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'
}
]
]
}
]
19 changes: 19 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
@@ -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"
}
}
62 changes: 62 additions & 0 deletions spec/atom-html-to-javascript-spec.coffee
Original file line number Diff line number Diff line change
@@ -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()
5 changes: 5 additions & 0 deletions spec/atom-html-to-javascript-view-spec.coffee
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
AtomHtmlToJavascriptView = require '../lib/atom-html-to-javascript-view'

describe "AtomHtmlToJavascriptView", ->
it "has one valid test", ->
expect("life").toBe "easy"
8 changes: 8 additions & 0 deletions styles/atom-html-to-javascript.less
Original file line number Diff line number Diff line change
@@ -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 {
}

0 comments on commit 1a72602

Please sign in to comment.