Skip to content

Commit 1a72602

Browse files
keevankeevan
committed
Basic functionality with files this time!
0 parents  commit 1a72602

12 files changed

+246
-0
lines changed

‎.gitignore

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.DS_Store
2+
npm-debug.log
3+
node_modules

‎CHANGELOG.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
## 0.1.0 - First Release
2+
* Every feature added
3+
* Every bug fixed

‎LICENSE.md

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

‎README.md

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
# html-to-javascript package
2+
3+
This converts text string to a javascript variable or javascript ready code.
4+
This package is intended to be used for the conversion of HTML code in to a javascript variable for later use.
5+
6+
The main purpose of this was not only to help me change between javascript and html code efficiently but also keep the indentation used.
7+
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.
8+
![Example of the conversion to a javascript string](https://puu.sh/qhoQV/3b18444414.gif)
9+
10+
11+
This is also intended to be used to convert javascript HTML strings to plain HTML and vice versa in a selection.
12+
Be wary that any javascript variables inside this string will be ignored.
13+
14+
There will be a hotkey for HTML-to-Javascript and one for Javascript-to-HTML.
15+
16+
This is my first atom package.
17+
18+
Please bear with me :D
19+
20+
TODO:
21+
- Convert Javascript string of HTML back in to HTML form for easy manipulation.
22+
- Optionally get ignore empty lines (by default)
23+
- Detect what state it is in and toggle between the two. (rather than just having a key to convert forward, and one backwards)
24+
- Remove unneeded package generator generated code.
25+
26+
![Thanks Atom](https://f.cloud.github.com/assets/69169/2290250/c35d867a-a017-11e3-86be-cd7c5bf3ff9b.gif)

‎keymaps/atom-html-to-javascript.cson

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
# Keybindings require three things to be fully defined: A selector that is
2+
# matched against the focused element, the keystroke and the command to
3+
# execute.
4+
#
5+
# Below is a basic keybinding which registers on all platforms by applying to
6+
# the root workspace element.
7+
8+
# For more detailed documentation see
9+
# https://atom.io/docs/latest/behind-atom-keymaps-in-depth
10+
'atom-workspace':
11+
'ctrl-shift-j': 'atom-html-to-javascript:convert'

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

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
module.exports =
2+
class AtomHtmlToJavascriptView
3+
constructor: (serializedState) ->
4+
# Create root element
5+
@element = document.createElement('div')
6+
@element.classList.add('atom-html-to-javascript')
7+
8+
# Create message element
9+
message = document.createElement('div')
10+
message.textContent = "The AtomHtmlToJavascript package is Alive! It's ALIVE!"
11+
message.classList.add('message')
12+
@element.appendChild(message)
13+
14+
# Returns an object that can be retrieved when package is activated
15+
serialize: ->
16+
17+
# Tear down any state and detach
18+
destroy: ->
19+
@element.remove()
20+
21+
getElement: ->
22+
@element

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

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
$ = jQuery = require 'jquery'
2+
3+
4+
{CompositeDisposable} = require 'atom'
5+
6+
module.exports =
7+
subscriptions: null
8+
9+
activate: ->
10+
@subscriptions = new CompositeDisposable
11+
@subscriptions.add atom.commands.add 'atom-workspace',
12+
'atom-html-to-javascript:convert': => @convert()
13+
14+
deactivate: ->
15+
@subscriptions.dispose()
16+
17+
convert: ->
18+
if editor = atom.workspace.getActiveTextEditor()
19+
selection = editor.getSelectedText()
20+
return if !!!selection.trim()
21+
22+
# Replace all ' in file with \'
23+
selection = selection.replace(/'/g , "\\'");
24+
25+
# Edit selection:
26+
lines = selection.split("\n");
27+
28+
29+
30+
js_string = "''+\n"
31+
# Wrap beginning and end of lines with '
32+
# (for the beginning of a line, put it at the beginning of the first non space)
33+
# (for the end of a line, trim the end putting '+ at the end of the line)
34+
for line in lines
35+
num_leading_whitespace = line.search(/\S|$/)
36+
string_leading = ''
37+
if num_leading_whitespace
38+
for [1..num_leading_whitespace]
39+
string_leading += "\t"
40+
41+
js_string += string_leading + "'" + line.trim() + "'+\n"
42+
43+
editor.insertText(js_string.substring(0,js_string.length-2), {
44+
select: true
45+
}) # Ignores the last 2 symbols "+\n"

‎menus/atom-html-to-javascript.cson

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
# See https://atom.io/docs/latest/hacking-atom-package-word-count#menus for more details
2+
'context-menu':
3+
'atom-text-editor': [
4+
{
5+
'label': 'HTML -> JS'
6+
'command': 'atom-html-to-javascript:convert'
7+
}
8+
]
9+
'menu': [
10+
{
11+
'label': 'Packages'
12+
'submenu': [
13+
'label': 'atom-html-to-javascript'
14+
'submenu': [
15+
{
16+
'label': 'Convert HTML -> JS'
17+
'command': 'atom-html-to-javascript:convert'
18+
}
19+
]
20+
]
21+
}
22+
]

‎package.json

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"name": "html-to-javascript",
3+
"main": "./lib/atom-html-to-javascript",
4+
"version": "0.0.0",
5+
"description": "HTML to Javascript as string, and vice versa.",
6+
"keywords": [
7+
],
8+
"activationCommands": {
9+
"atom-workspace": "atom-html-to-javascript:convert"
10+
},
11+
"repository": "https://github.com/keevan/atom-html-to-javascript",
12+
"license": "MIT",
13+
"engines": {
14+
"atom": ">=1.0.0 <2.0.0"
15+
},
16+
"dependencies": {
17+
"jquery": "^2.0.0"
18+
}
19+
}

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

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
AtomHtmlToJavascript = require '../lib/atom-html-to-javascript'
2+
3+
# Use the command `window:run-package-specs` (cmd-alt-ctrl-p) to run specs.
4+
#
5+
# To run a specific `it` or `describe` block add an `f` to the front (e.g. `fit`
6+
# or `fdescribe`). Remove the `f` to unfocus the block.
7+
8+
describe "AtomHtmlToJavascript", ->
9+
[workspaceElement, activationPromise] = []
10+
11+
beforeEach ->
12+
workspaceElement = atom.views.getView(atom.workspace)
13+
activationPromise = atom.packages.activatePackage('atom-html-to-javascript')
14+
15+
describe "when the atom-html-to-javascript:toggle event is triggered", ->
16+
it "hides and shows the modal panel", ->
17+
# Before the activation event the view is not on the DOM, and no panel
18+
# has been created
19+
expect(workspaceElement.querySelector('.atom-html-to-javascript')).not.toExist()
20+
21+
# This is an activation event, triggering it will cause the package to be
22+
# activated.
23+
atom.commands.dispatch workspaceElement, 'atom-html-to-javascript:toggle'
24+
25+
waitsForPromise ->
26+
activationPromise
27+
28+
runs ->
29+
expect(workspaceElement.querySelector('.atom-html-to-javascript')).toExist()
30+
31+
atomHtmlToJavascriptElement = workspaceElement.querySelector('.atom-html-to-javascript')
32+
expect(atomHtmlToJavascriptElement).toExist()
33+
34+
atomHtmlToJavascriptPanel = atom.workspace.panelForItem(atomHtmlToJavascriptElement)
35+
expect(atomHtmlToJavascriptPanel.isVisible()).toBe true
36+
atom.commands.dispatch workspaceElement, 'atom-html-to-javascript:toggle'
37+
expect(atomHtmlToJavascriptPanel.isVisible()).toBe false
38+
39+
it "hides and shows the view", ->
40+
# This test shows you an integration test testing at the view level.
41+
42+
# Attaching the workspaceElement to the DOM is required to allow the
43+
# `toBeVisible()` matchers to work. Anything testing visibility or focus
44+
# requires that the workspaceElement is on the DOM. Tests that attach the
45+
# workspaceElement to the DOM are generally slower than those off DOM.
46+
jasmine.attachToDOM(workspaceElement)
47+
48+
expect(workspaceElement.querySelector('.atom-html-to-javascript')).not.toExist()
49+
50+
# This is an activation event, triggering it causes the package to be
51+
# activated.
52+
atom.commands.dispatch workspaceElement, 'atom-html-to-javascript:toggle'
53+
54+
waitsForPromise ->
55+
activationPromise
56+
57+
runs ->
58+
# Now we can test for view visibility
59+
atomHtmlToJavascriptElement = workspaceElement.querySelector('.atom-html-to-javascript')
60+
expect(atomHtmlToJavascriptElement).toBeVisible()
61+
atom.commands.dispatch workspaceElement, 'atom-html-to-javascript:toggle'
62+
expect(atomHtmlToJavascriptElement).not.toBeVisible()

0 commit comments

Comments
 (0)