Skip to content

Commit 3eb89c7

Browse files
valpackettvalpackett
committed
Initial commit
0 parents  commit 3eb89c7

File tree

10 files changed

+442
-0
lines changed

10 files changed

+442
-0
lines changed

‎.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
dist/
2+
node_modules/

‎.npmignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
demo.html

‎CODE_OF_CONDUCT.md‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
# Contributor Covenant Code of Conduct
2+
3+
## Our Pledge
4+
5+
In the interest of fostering an open and welcoming environment, we as
6+
contributors and maintainers pledge to making participation in our project and
7+
our community a harassment-free experience for everyone, regardless of age, body
8+
size, disability, ethnicity, gender identity and expression, level of experience,
9+
nationality, personal appearance, race, religion, or sexual identity and
10+
orientation.
11+
12+
## Our Standards
13+
14+
Examples of behavior that contributes to creating a positive environment
15+
include:
16+
17+
* Using welcoming and inclusive language
18+
* Being respectful of differing viewpoints and experiences
19+
* Gracefully accepting constructive criticism
20+
* Focusing on what is best for the community
21+
* Showing empathy towards other community members
22+
23+
Examples of unacceptable behavior by participants include:
24+
25+
* The use of sexualized language or imagery and unwelcome sexual attention or
26+
advances
27+
* Trolling, insulting/derogatory comments, and personal or political attacks
28+
* Public or private harassment
29+
* Publishing others' private information, such as a physical or electronic
30+
address, without explicit permission
31+
* Other conduct which could reasonably be considered inappropriate in a
32+
professional setting
33+
34+
## Our Responsibilities
35+
36+
Project maintainers are responsible for clarifying the standards of acceptable
37+
behavior and are expected to take appropriate and fair corrective action in
38+
response to any instances of unacceptable behavior.
39+
40+
Project maintainers have the right and responsibility to remove, edit, or
41+
reject comments, commits, code, wiki edits, issues, and other contributions
42+
that are not aligned to this Code of Conduct, or to ban temporarily or
43+
permanently any contributor for other behaviors that they deem inappropriate,
44+
threatening, offensive, or harmful.
45+
46+
## Scope
47+
48+
This Code of Conduct applies both within project spaces and in public spaces
49+
when an individual is representing the project or its community. Examples of
50+
representing a project or community include using an official project e-mail
51+
address, posting via an official social media account, or acting as an appointed
52+
representative at an online or offline event. Representation of a project may be
53+
further defined and clarified by project maintainers.
54+
55+
## Enforcement
56+
57+
Instances of abusive, harassing, or otherwise unacceptable behavior may be
58+
reported by contacting the project owner at greg@unrelenting.technology. All
59+
complaints will be reviewed and investigated and will result in a response that
60+
is deemed necessary and appropriate to the circumstances. The project owner is
61+
obligated to maintain confidentiality with regard to the reporter of an incident.
62+
Further details of specific enforcement policies may be posted separately.
63+
64+
Project maintainers who do not follow or enforce the Code of Conduct in good
65+
faith may face temporary or permanent repercussions as determined by other
66+
members of the project's leadership.
67+
68+
## Attribution
69+
70+
This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
71+
available at [http://contributor-covenant.org/version/1/4][version]
72+
73+
[homepage]: http://contributor-covenant.org
74+
[version]: http://contributor-covenant.org/version/1/4/

‎LICENSE‎

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

‎README.md‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
[![npm version](https://img.shields.io/npm/v/codeflask-element.svg)](https://www.npmjs.com/package/codeflask-element)
2+
[![npm downloads](https://img.shields.io/npm/dt/codeflask-element.svg)](https://www.npmjs.com/package/codeflask-element)
3+
[![MIT License](https://img.shields.io/badge/mit-license-green.svg?style=flat)](https://mit-license.org/)
4+
5+
# codeflask-element
6+
7+
A Web Components ([Custom Elements] & [Shadow DOM]) wrapper for [CodeFlask].
8+
9+
[Custom Elements]: https://developers.google.com/web/fundamentals/web-components/customelements
10+
[Shadow DOM]: https://developers.google.com/web/fundamentals/web-components/shadowdom
11+
[CodeFlask]: https://github.com/kazzkiq/CodeFlask
12+
13+
## Usage
14+
15+
See `demo.html`.
16+
17+
## Contributing
18+
19+
Please feel free to submit pull requests!
20+
21+
By participating in this project you agree to follow the [Contributor Code of Conduct](http://contributor-covenant.org/version/1/4/).
22+
23+
[The list of contributors is available on GitHub](https://github.com/myfreeweb/codeflask-element/graphs/contributors).
24+
25+
## License
26+
27+
Available under the MIT License.

‎code-flask.js‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
import CodeFlask from 'codeflask'
2+
3+
export default class CodeFlaskElement extends HTMLElement {
4+
constructor () {
5+
super()
6+
this.attachShadow({ mode: 'open' })
7+
this.shadowRoot.innerHTML += `<style> :host { display: block; position: relative;
8+
overflow-x: auto; min-height: 100px; }
9+
.codeflask .token.punctuation { color: var(--codeflask-punctuation, #4a4a4a) }
10+
.codeflask .token.keyword { color: var(--codeflask-keyword, #8500ff) }
11+
.codeflask .token.operator { color: var(--codeflask-operator, #ff5598) }
12+
.codeflask .token.string { color: var(--codeflask-string, #41ad8f) }
13+
.codeflask .token.comment { color: var(--codeflask-comment, #9badb7) }
14+
.codeflask .token.function { color: var(--codeflask-function, #8500ff) }
15+
.codeflask .token.boolean { color: var(--codeflask-boolean, #8500ff) }
16+
.codeflask .token.number { color: var(--codeflask-number, #8500ff) }
17+
.codeflask .token.selector { color: var(--codeflask-selector, #8500ff) }
18+
.codeflask .token.property { color: var(--codeflask-property, #8500ff) }
19+
.codeflask .token.tag { color: var(--codeflask-tag, #8500ff) }
20+
.codeflask .token.attr-value { color: var(--codeflask-attr-value, #8500ff) }
21+
</style>`
22+
this.editorElement = document.createElement('div')
23+
this.editorElement.style.width = '100%'
24+
this.editorElement.style.height = '100%'
25+
this.editorElement.style.position = 'absolute'
26+
this.shadowRoot.appendChild(this.editorElement)
27+
this.flask = new CodeFlask(this.editorElement, {
28+
language: this.getAttribute('language') || 'markup',
29+
lineNumbers: this.lineNumbers,
30+
rtl: this.dir === 'rtl',
31+
defaultTheme: false,
32+
styleParent: this.shadowRoot,
33+
})
34+
this.flask.onUpdate(_ => {
35+
this.dispatchEvent(new CustomEvent('value-changed'))
36+
})
37+
this.value = this.getAttribute('value')
38+
if (!this.value) {
39+
this.initElement = document.createElement('div')
40+
this.shadowRoot.appendChild(this.initElement)
41+
this.initSlot = document.createElement('slot')
42+
this.initElement.appendChild(this.initSlot)
43+
}
44+
}
45+
46+
connectedCallback () {
47+
if (this.initSlot) {
48+
let value = ''
49+
for (const node of this.initSlot.assignedNodes()) {
50+
value += node.outerHTML || node.textContent
51+
}
52+
this.initElement.removeChild(this.initSlot)
53+
this.shadowRoot.removeChild(this.initElement)
54+
if (value.length > 0) {
55+
this.value = value
56+
}
57+
}
58+
}
59+
60+
get value () {
61+
return this.flask.getCode()
62+
}
63+
64+
set value (val) {
65+
this.removeAttribute('value')
66+
return this.flask.updateCode(val)
67+
}
68+
69+
get language () {
70+
return this.flask.opts.language
71+
}
72+
73+
set language (val) {
74+
if (!val) {
75+
return
76+
}
77+
this.flask.updateLanguage(val)
78+
this.dispatchEvent(new CustomEvent('language-changed'))
79+
}
80+
81+
get dir () {
82+
return this.getAttribute('dir') || 'ltr'
83+
}
84+
85+
get lineNumbers () {
86+
return this.hasAttribute('line-numbers')
87+
}
88+
89+
static get observedAttributes () {
90+
return ['language', 'value']
91+
}
92+
93+
attributeChangedCallback (name, oldValue, newValue) {
94+
this[name] = newValue
95+
}
96+
}
97+
98+
customElements.define('code-flask', CodeFlaskElement)

‎demo.html‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<script src="https://unpkg.com/@webcomponents/webcomponentsjs@next/webcomponents-loader.js"></script>
6+
<style id="demo-style">
7+
code-flask {
8+
max-width: 640px;
9+
min-height: 450px;
10+
margin: 0 auto;
11+
background: #f5f5ff;
12+
border-radius: 5px;
13+
color: #222;
14+
--codeflask-tag: blue;
15+
--codeflask-property: red;
16+
}
17+
body { background: #fff; color: #444; text-align: center; }
18+
a { color: #8500ff; }
19+
a:hover { color: #6550ff; }
20+
</style>
21+
</head>
22+
<body>
23+
<h1>
24+
<a href="https://github.com/kazzkiq/CodeFlask">
25+
CodeFlask</a> in a
26+
<a href="https://github.com/myfreeweb/codeflask-element">
27+
Custom Element</a>
28+
</h1>
29+
30+
<script type="module">
31+
import './dist/code-flask.module.js'
32+
</script>
33+
34+
<code-flask id="cfdemo" language="markup">x</code-flask>
35+
36+
<script>
37+
document.addEventListener("DOMContentLoaded", _ => {
38+
const cf = document.getElementById('cfdemo')
39+
cf.addEventListener('value-changed', e =>
40+
console.log('NEW VALUE: ', cf.value))
41+
cf.value = document.getElementById('demo-style')
42+
.outerHTML.replace(/(^|\n)\t\t/g, '$1') + '\n'
43+
cf.value += document.body.innerHTML
44+
.replace(/(^|\n)\t\t/g, '$1')
45+
})
46+
</script>
47+
</body>
48+
</html>

0 commit comments

Comments
 (0)