├── LICENSE
├── README.md
├── app.css
├── app.js
├── index.html
├── skypad-og-image.png
└── vendor
├── codeflask
├── codeflask.css
└── codeflask.js
├── mui
├── mui.min.css
└── mui.min.js
├── prism
├── prism.css
└── prism.js
├── skygear
├── polyfill.min.js
└── skygear.min.js
└── zepto
└── zepto.min.js
/LICENSE:
--------------------------------------------------------------------------------
1 | Apache License
2 | Version 2.0, January 2004
3 | http://www.apache.org/licenses/
4 |
5 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
6 |
7 | 1. Definitions.
8 |
9 | "License" shall mean the terms and conditions for use, reproduction,
10 | and distribution as defined by Sections 1 through 9 of this document.
11 |
12 | "Licensor" shall mean the copyright owner or entity authorized by
13 | the copyright owner that is granting the License.
14 |
15 | "Legal Entity" shall mean the union of the acting entity and all
16 | other entities that control, are controlled by, or are under common
17 | control with that entity. For the purposes of this definition,
18 | "control" means (i) the power, direct or indirect, to cause the
19 | direction or management of such entity, whether by contract or
20 | otherwise, or (ii) ownership of fifty percent (50%) or more of the
21 | outstanding shares, or (iii) beneficial ownership of such entity.
22 |
23 | "You" (or "Your") shall mean an individual or Legal Entity
24 | exercising permissions granted by this License.
25 |
26 | "Source" form shall mean the preferred form for making modifications,
27 | including but not limited to software source code, documentation
28 | source, and configuration files.
29 |
30 | "Object" form shall mean any form resulting from mechanical
31 | transformation or translation of a Source form, including but
32 | not limited to compiled object code, generated documentation,
33 | and conversions to other media types.
34 |
35 | "Work" shall mean the work of authorship, whether in Source or
36 | Object form, made available under the License, as indicated by a
37 | copyright notice that is included in or attached to the work
38 | (an example is provided in the Appendix below).
39 |
40 | "Derivative Works" shall mean any work, whether in Source or Object
41 | form, that is based on (or derived from) the Work and for which the
42 | editorial revisions, annotations, elaborations, or other modifications
43 | represent, as a whole, an original work of authorship. For the purposes
44 | of this License, Derivative Works shall not include works that remain
45 | separable from, or merely link (or bind by name) to the interfaces of,
46 | the Work and Derivative Works thereof.
47 |
48 | "Contribution" shall mean any work of authorship, including
49 | the original version of the Work and any modifications or additions
50 | to that Work or Derivative Works thereof, that is intentionally
51 | submitted to Licensor for inclusion in the Work by the copyright owner
52 | or by an individual or Legal Entity authorized to submit on behalf of
53 | the copyright owner. For the purposes of this definition, "submitted"
54 | means any form of electronic, verbal, or written communication sent
55 | to the Licensor or its representatives, including but not limited to
56 | communication on electronic mailing lists, source code control systems,
57 | and issue tracking systems that are managed by, or on behalf of, the
58 | Licensor for the purpose of discussing and improving the Work, but
59 | excluding communication that is conspicuously marked or otherwise
60 | designated in writing by the copyright owner as "Not a Contribution."
61 |
62 | "Contributor" shall mean Licensor and any individual or Legal Entity
63 | on behalf of whom a Contribution has been received by Licensor and
64 | subsequently incorporated within the Work.
65 |
66 | 2. Grant of Copyright License. Subject to the terms and conditions of
67 | this License, each Contributor hereby grants to You a perpetual,
68 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable
69 | copyright license to reproduce, prepare Derivative Works of,
70 | publicly display, publicly perform, sublicense, and distribute the
71 | Work and such Derivative Works in Source or Object form.
72 |
73 | 3. Grant of Patent License. Subject to the terms and conditions of
74 | this License, each Contributor hereby grants to You a perpetual,
75 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable
76 | (except as stated in this section) patent license to make, have made,
77 | use, offer to sell, sell, import, and otherwise transfer the Work,
78 | where such license applies only to those patent claims licensable
79 | by such Contributor that are necessarily infringed by their
80 | Contribution(s) alone or by combination of their Contribution(s)
81 | with the Work to which such Contribution(s) was submitted. If You
82 | institute patent litigation against any entity (including a
83 | cross-claim or counterclaim in a lawsuit) alleging that the Work
84 | or a Contribution incorporated within the Work constitutes direct
85 | or contributory patent infringement, then any patent licenses
86 | granted to You under this License for that Work shall terminate
87 | as of the date such litigation is filed.
88 |
89 | 4. Redistribution. You may reproduce and distribute copies of the
90 | Work or Derivative Works thereof in any medium, with or without
91 | modifications, and in Source or Object form, provided that You
92 | meet the following conditions:
93 |
94 | (a) You must give any other recipients of the Work or
95 | Derivative Works a copy of this License; and
96 |
97 | (b) You must cause any modified files to carry prominent notices
98 | stating that You changed the files; and
99 |
100 | (c) You must retain, in the Source form of any Derivative Works
101 | that You distribute, all copyright, patent, trademark, and
102 | attribution notices from the Source form of the Work,
103 | excluding those notices that do not pertain to any part of
104 | the Derivative Works; and
105 |
106 | (d) If the Work includes a "NOTICE" text file as part of its
107 | distribution, then any Derivative Works that You distribute must
108 | include a readable copy of the attribution notices contained
109 | within such NOTICE file, excluding those notices that do not
110 | pertain to any part of the Derivative Works, in at least one
111 | of the following places: within a NOTICE text file distributed
112 | as part of the Derivative Works; within the Source form or
113 | documentation, if provided along with the Derivative Works; or,
114 | within a display generated by the Derivative Works, if and
115 | wherever such third-party notices normally appear. The contents
116 | of the NOTICE file are for informational purposes only and
117 | do not modify the License. You may add Your own attribution
118 | notices within Derivative Works that You distribute, alongside
119 | or as an addendum to the NOTICE text from the Work, provided
120 | that such additional attribution notices cannot be construed
121 | as modifying the License.
122 |
123 | You may add Your own copyright statement to Your modifications and
124 | may provide additional or different license terms and conditions
125 | for use, reproduction, or distribution of Your modifications, or
126 | for any such Derivative Works as a whole, provided Your use,
127 | reproduction, and distribution of the Work otherwise complies with
128 | the conditions stated in this License.
129 |
130 | 5. Submission of Contributions. Unless You explicitly state otherwise,
131 | any Contribution intentionally submitted for inclusion in the Work
132 | by You to the Licensor shall be under the terms and conditions of
133 | this License, without any additional terms or conditions.
134 | Notwithstanding the above, nothing herein shall supersede or modify
135 | the terms of any separate license agreement you may have executed
136 | with Licensor regarding such Contributions.
137 |
138 | 6. Trademarks. This License does not grant permission to use the trade
139 | names, trademarks, service marks, or product names of the Licensor,
140 | except as required for reasonable and customary use in describing the
141 | origin of the Work and reproducing the content of the NOTICE file.
142 |
143 | 7. Disclaimer of Warranty. Unless required by applicable law or
144 | agreed to in writing, Licensor provides the Work (and each
145 | Contributor provides its Contributions) on an "AS IS" BASIS,
146 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
147 | implied, including, without limitation, any warranties or conditions
148 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
149 | PARTICULAR PURPOSE. You are solely responsible for determining the
150 | appropriateness of using or redistributing the Work and assume any
151 | risks associated with Your exercise of permissions under this License.
152 |
153 | 8. Limitation of Liability. In no event and under no legal theory,
154 | whether in tort (including negligence), contract, or otherwise,
155 | unless required by applicable law (such as deliberate and grossly
156 | negligent acts) or agreed to in writing, shall any Contributor be
157 | liable to You for damages, including any direct, indirect, special,
158 | incidental, or consequential damages of any character arising as a
159 | result of this License or out of the use or inability to use the
160 | Work (including but not limited to damages for loss of goodwill,
161 | work stoppage, computer failure or malfunction, or any and all
162 | other commercial damages or losses), even if such Contributor
163 | has been advised of the possibility of such damages.
164 |
165 | 9. Accepting Warranty or Additional Liability. While redistributing
166 | the Work or Derivative Works thereof, You may choose to offer,
167 | and charge a fee for, acceptance of support, warranty, indemnity,
168 | or other liability obligations and/or rights consistent with this
169 | License. However, in accepting such obligations, You may act only
170 | on Your own behalf and on Your sole responsibility, not on behalf
171 | of any other Contributor, and only if You agree to indemnify,
172 | defend, and hold each Contributor harmless for any liability
173 | incurred by, or claims asserted against, such Contributor by reason
174 | of your accepting any such warranty or additional liability.
175 |
176 | END OF TERMS AND CONDITIONS
177 |
178 | APPENDIX: How to apply the Apache License to your work.
179 |
180 | To apply the Apache License to your work, attach the following
181 | boilerplate notice, with the fields enclosed by brackets "{}"
182 | replaced with your own identifying information. (Don't include
183 | the brackets!) The text should be enclosed in the appropriate
184 | comment syntax for the file format. We also recommend that a
185 | file or class name and description of purpose be included on the
186 | same "printed page" as the copyright notice for easier
187 | identification within third-party archives.
188 |
189 | Copyright {yyyy} {name of copyright owner}
190 |
191 | Licensed under the Apache License, Version 2.0 (the "License");
192 | you may not use this file except in compliance with the License.
193 | You may obtain a copy of the License at
194 |
195 | http://www.apache.org/licenses/LICENSE-2.0
196 |
197 | Unless required by applicable law or agreed to in writing, software
198 | distributed under the License is distributed on an "AS IS" BASIS,
199 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
200 | See the License for the specific language governing permissions and
201 | limitations under the License.
202 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Skypad
2 |
3 | Simple, real time collaborative notepad on the cloud. First version quickly built in an hour with [Skygear](https://skygear.io)
4 |
5 | #### Try now:
6 | * Create a new note: https://skygear-demo.github.io/skypad
7 |
8 | 
9 |
10 | ## Non-CDN version
11 | * This version's libraries are not served from any CDN. Suitable for independent deployment.
12 |
13 | ---
14 |
15 | # Features
16 |
17 | * Handy - Create a pad instantly.
18 | * Simple UI - Neat, undistracting and responsive.
19 | * Easy Sharing - Share by URL, Twitter or FB.
20 | * Collaboration - Real time sync across all platforms.
21 | * Auto Save - Changes saved on the cloud automatically.
22 | * Syntax Highligting - Support JavaScript, C, HTML and CSS. More comming.
23 |
24 | [Try it here](https://skygear-demo.github.io/skypad)
25 |
26 | # Develop
27 |
28 | * Edit the `config` dict at `app.js`
29 |
30 | ```javascript
31 | const config = {
32 | baseURL: "https://yoursite.com/", // To help generate a correct sharing URL
33 | skygearAPIEndpoint: "https://skypad.skygeario.com/", // API Endpoint
34 | skygearAPIKey: "xxxxc613xxxx4227xxxx6114a401xxxx", // API Key
35 | writerUser: "username", // the default user for creating app
36 | writerPass: "password" // the default user password for creating app
37 | }
38 | ```
39 |
40 | * Sign up at [Skygear](https://portal.skygear.io/signup) to obtain the API Endpoint and API Key.
41 | * Use `signupWithUserName` to create your own writerUser at Skygear.
42 |
43 |
44 | # Deploy
45 |
46 | This app can be deployed on localhost, AWS s3, Skygear hosting, GitHub Page or other static hosts.
47 |
48 | * These files are required to deploy:
49 | * `index.html` - Main layout
50 | * `app.js` - Main app logic
51 | * `app.css` - CSS styling
52 | * `/vendor` - Required external library files
53 |
54 | # Versions
55 |
56 | You can view the previous version as tags, e.g. `v0.1`, `v0.2`
57 |
58 | * `mvp` Quick first usable version
59 | * `v0.1` Social sharing and UI fixed
60 | * `v0.2` Code highlighting
61 | * `v0.3` Create new pad and pad title
62 | * `v1.0` List of my notes (Automatically managed)
63 | * `v1.1` **(Upcoming)** Private notes
64 |
65 | # Feedback and Contribution
66 |
67 | Feel free to open any issue and PR. Contact at hello@skygear.io
68 |
69 | ### Credits & Thanks
70 |
71 | * Code highlighting powered by [CodeFlask](https://github.com/kazzkiq/CodeFlask.js) by [kazzkiq](https://twitter.com/kazzkiq). That's awesome.
72 |
73 | * CSS and base style: [MUI](https://www.muicss.com/) a lightweight material framework.
74 |
75 | * I didn't use complex JS framework but [zepto.js](http://zeptojs.com/) for quick hacks and keep it lightweight.
76 |
77 | ### Mentions
78 |
79 | * [Discussion on HN](https://news.ycombinator.com/item?id=14864089)
80 |
81 |
82 |
83 | ### About Skygear
84 |
85 | [Skygear](https://skygear.io) is a backend for building real-time and cloud-based web/mobile app. Skypad is a perfect simple usecase.
86 |
--------------------------------------------------------------------------------
/app.css:
--------------------------------------------------------------------------------
1 | html,body {
2 | height:100%;
3 | }
4 |
5 | body {
6 | background-color: #111;
7 | }
8 |
9 | div#skypad-title {
10 | position: fixed;
11 | }
12 |
13 | div#skypad-title input {
14 | position: fixed;
15 | border: 0;
16 | height: 30px;
17 | width: 100%;
18 | font-family: monospace;
19 | color: #ecf0f1;
20 | margin: 0;
21 | padding: 6px 10px;
22 | top: 0;
23 | line-height: 24px;
24 | font-weight: 600;
25 | background-color: #2c3e50;
26 | }
27 |
28 | div#skypad-title input:focus {
29 | background: #2980b9;
30 | }
31 |
32 | div#skypad-title input::-webkit-input-placeholder { color: #ccc; }
33 | div#skypad-title input::-moz-placeholder {color: #ccc; }
34 | div#skypad-title input:-ms-input-placeholder { color: #ccc; }
35 | div#skypad-title input:-o-input-placeholder { color: #ccc; }
36 |
37 |
38 | div#skypad-display {
39 | position: fixed;
40 | border: 0;
41 | padding: 20px;
42 | margin-top: 42px;
43 | width: 100%;
44 | top: 0;
45 | color: #fff;
46 | background-color: #111;
47 | font-family: monospace;
48 | height: calc(100% - 130px);
49 | }
50 |
51 | textarea,input:focus {
52 | outline: none;
53 | }
54 | .CodeFlask__pre {
55 | bottom: 0; /* Fix the scrolling problem*/
56 | }
57 |
58 | #credits {
59 | color: #999;
60 | }
61 |
62 | #credits a {
63 | color: #777;
64 | }
65 |
66 | #share-bar {
67 | border: 0;
68 | position: fixed;
69 | margin: 0;
70 | width:100%;
71 | bottom: 0;
72 | height: 40px;
73 | z-index: 20;
74 | color: #fff;
75 | background-color: #333;
76 | font-family: monospace;
77 | padding: 10px;
78 | display: none;
79 | }
80 |
81 | #side-bar {
82 | float;right;
83 | position: fixed;
84 | width: 200px;
85 | max-width: 30%;
86 | top: 42px;
87 | bottom: 0;
88 | color: #fff;
89 | right: 0;
90 | background: #2f3640;
91 | padding: 10px;
92 | border-left: 2px #456184 solid;
93 | transition: 1s;
94 | }
95 |
96 |
97 | #note-list {
98 | list-style-type: none;
99 | }
100 |
101 | #note-list li {
102 | padding-left: 1em;
103 | text-indent: -1em;
104 | text-overflow: ellipsis;
105 | white-space: nowrap;
106 | overflow: hidden;
107 | width: 120px;
108 | }
109 |
110 | #note-list li:before {
111 | content: "📝";
112 | padding-right: 5px;
113 | }
114 |
115 | @media (max-width: 500px ){
116 | #side-bar {
117 | right: -200px;
118 | }
119 | }
120 |
121 | .code-highlight-selector {
122 | float: right;
123 | display: none;
124 | }
125 |
126 | .code-highlight-selector button {
127 | font-size: 12px;
128 | }
129 |
130 | .code-highlight-selector ul {
131 | font-size: 12px;
132 | }
133 |
134 | .code-highlight-selector ul li a {
135 | cursor: pointer;
136 | }
137 | @media (max-height: 400px ){
138 | #share-bar {
139 | visibility: hidden;
140 | }
141 | div#skypad-display {
142 | height: 100%;
143 | }
144 | }
--------------------------------------------------------------------------------
/app.js:
--------------------------------------------------------------------------------
1 | const config = {
2 | baseURL: "https://skygear-demo.github.io/skypad",
3 | skygearAPIEndpoint: "https://skypad.skygeario.com/", // trailing slash is required
4 | skygearAPIKey: "ac59c61350b14227ad5a6114a40176ba",
5 | writerUser: "writer",
6 | writerPass: "writerpass"
7 | }
8 |
9 | let skygearPad = $("div#skypad-display");
10 | let skygearTitle = $("div#skypad-title input");
11 | let noteList = $("#note-list");
12 | let codeHighlightSelector = $(".code-highlight-selector");
13 | const Note = skygear.Record.extend("Note");
14 | let thisNote = null;
15 | let ramdomToken = Math.random().toString(36).substring(7); // for distinguishing tabs
16 |
17 | let cachedCode = '';
18 |
19 | function logoutDefaultUser(callback) {
20 | if (skygear.auth.currentUser && skygear.auth.currentUser.username == config.writerUser) {
21 | skygear.auth.logout().then(
22 | skygear.auth.signupAnonymously().then(
23 | function(user) {
24 | callback(user);
25 | }
26 | )
27 | );
28 | }
29 | }
30 |
31 | function createNoteListItem (note) {
32 | let li = document.createElement('li');
33 |
34 | let item = document.createElement('a');
35 | let noteURL = config.baseURL+"#"+note._id;
36 | item.textContent = note.title;
37 | item.setAttribute('href', noteURL);
38 |
39 | li.append(item)
40 | return li;
41 | }
42 |
43 | function createNote() {
44 | var note = new Note({
45 | title:"",
46 | content: "",
47 | viewcount: 0
48 | });
49 |
50 | note.setPublicReadWriteAccess();
51 | return skygear.publicDB.save(note);
52 | }
53 |
54 | function saveNote(content) {
55 | thisNote['content'] = content;
56 |
57 | var toSaveNote = new Note({
58 | _id: thisNote.id,
59 | content: thisNote.content
60 | });
61 | skygear.publicDB.save(toSaveNote);
62 | }
63 |
64 | function updateTitleUI(title) {
65 | document.title = "Skypad - "+ title + " ";
66 | }
67 |
68 | function saveTitle(title) {
69 | thisNote['title'] = title;
70 |
71 | var toSaveNote = new Note({
72 | _id: thisNote.id,
73 | title: thisNote.title
74 | });
75 | skygear.publicDB.save(toSaveNote);
76 | }
77 |
78 | function increaseNoteCount(note) {
79 | var viewCount = note.viewcount;
80 | viewCount = (viewCount == undefined)? 0 :viewCount;
81 | var toSaveNote = new Note({
82 | _id: note.id,
83 | viewcount: viewCount + 1
84 | });
85 | skygear.publicDB.save(toSaveNote);
86 | }
87 |
88 | function fireSyncTitle(title) {
89 | if (thisNote) {
90 | skygear.pubsub.publish('note/' + thisNote._id, {
91 | token: ramdomToken,
92 | title: title
93 | });
94 | updateTitleUI(title);
95 | saveTitle(title);
96 | }
97 | }
98 |
99 |
100 | function fireSync(content) {
101 | if (thisNote) {
102 | skygear.pubsub.publish('note/' + thisNote._id, {
103 | token: ramdomToken,
104 | content: content
105 | });
106 | saveNote(content);
107 | }
108 | }
109 |
110 | function sync(data) {
111 | if (data.content !== undefined) {
112 | if (data.token === ramdomToken) {
113 | return;
114 | } else {
115 | cachedCode = data.content;
116 | flask.update(data.content);
117 | }
118 | } else {
119 | syncTitle(data);
120 | }
121 | }
122 |
123 | function syncTitle(data) {
124 | loadUserNotes(skygear.auth.currentUser._id);
125 | if (data.token === ramdomToken) {
126 | return;
127 | } else {
128 | skygearTitle.val(data.title);
129 | }
130 | }
131 |
132 | function loadUserNotes(userId) { // User created notes, not included notes user has edited
133 | const query = new skygear.Query(Note);
134 | query.equalTo('_created_by', userId);
135 | query.addDescending('_created_at');
136 |
137 | skygear.publicDB.query(query)
138 | .then(function(records) {
139 | if (records.length == 0) {
140 | console.log("No Record for " + userId);
141 | return;
142 | }
143 |
144 | console.log(`Found ${records.length} notes for user.`);
145 | noteList.empty();
146 | for (let note of records) {
147 | let noteItem = createNoteListItem(note);
148 | noteList.append(noteItem);
149 | }
150 |
151 | }, function(error) {
152 | console.error(error);
153 | });
154 | }
155 |
156 | function loadExistingNote(noteId) {
157 | const query = new skygear.Query(Note);
158 | query.equalTo('_id', noteId);
159 |
160 | skygear.publicDB.query(query)
161 | .then(function(records) {
162 | if (records.length == 0) {
163 | console.log("No Record for " + noteId);
164 | flask.update(
165 | "// ❌ 404 not found.\n\nYou can create a new pad at " + config.baseURL
166 | );
167 | return;
168 | }
169 |
170 | const record = records[0];
171 | var noteURL = config.baseURL+"#"+record._id;
172 |
173 | increaseNoteCount(record);
174 |
175 | skygear.pubsub.on('note/' + record._id, sync);
176 | thisNote = record;
177 |
178 | flask.update(record.content);
179 | displaySharingOptions(noteURL);
180 |
181 | var titleText = record.title? record.title : "untitled";
182 | skygearTitle.val(titleText);
183 | updateTitleUI(titleText);
184 |
185 | }, function(error) {
186 | console.error(error);
187 | });
188 | }
189 |
190 | function initNote (user) {
191 | var noteId = getHashFromURL();
192 | codeHighlightSelector.show();
193 | if (noteId) {
194 | loadExistingNote(noteId);
195 | loadUserNotes(skygear.auth.currentUser._id)
196 | } else {
197 | createNote().then(function(note) {
198 | var noteURL = config.baseURL + "#" + note._id;
199 |
200 | thisNote = note;
201 | skygear.pubsub.on('note/' + note._id, sync);
202 | window.location.hash = note._id;
203 |
204 | var initTitle = 'untitled';
205 | var initContent = '// Welcome to Skypad!' +
206 | '\n// 😎 Share with this URL ' + noteURL +
207 | '\n\n// Start typing.';
208 |
209 | initContent += '\n\n// Now supports Syntax highlight. Uncomment the following lines to try:'+
210 | '\n'+
211 | '\n/*'+
212 | '\nfunction hello(name) {'+
213 | '\n console.log(`hello ${name}!`);'+
214 | '\n}'+
215 | '\n'+
216 | '\nhello(\'world\');'+
217 | '\n*/';
218 | flask.update(initContent);
219 | skygearTitle.val(initTitle);
220 | displaySharingOptions(noteURL)
221 | fireSync(initContent);
222 | fireSyncTitle(initTitle);
223 | loadUserNotes(skygear.auth.currentUser._id);
224 | });
225 | }
226 | }
227 |
228 | function configSkygear(apiEndpoint, apiKey) {
229 | skygear.config({
230 | 'endPoint': apiEndpoint,
231 | 'apiKey': apiKey,
232 | }).then(function() {
233 | if (skygear.auth.currentUser) {
234 | logoutDefaultUser(initNote);
235 | initNote(skygear.auth.currentUser);
236 | } else {
237 | skygear.auth.signupAnonymously().then(function(user) {
238 | initNote(user);
239 | });
240 | }
241 | }, function(error) {
242 | console.error(error.message);
243 | });
244 | }
245 |
246 | function getHashFromURL() {
247 | var readNote = null;
248 | if (window.location.hash) {
249 | // Fragment exists
250 | readNote = window.location.hash.substr(1);
251 | }
252 | return readNote;
253 | }
254 |
255 | function displaySharingOptions(noteURL) {
256 | var shareBarEl = $("#share-bar");
257 |
258 | var shareURLEl = $("#share-url");
259 | var shareTwitterEl = $("#share-twitter");
260 | var shareFBEl = $("#share-fb");
261 |
262 | shareURLEl[0].href = noteURL;
263 | noteURL=noteURL.replace("#","%23");
264 | shareTwitterEl[0].href = shareTwitterEl[0].href.replace('{{note-url}}',noteURL);
265 | shareFBEl[0].href = shareFBEl[0].href.replace('{{note-url}}',noteURL);
266 |
267 | shareBarEl.show();
268 | }
269 |
270 | $().ready(function() {
271 | configSkygear(config.skygearAPIEndpoint, config.skygearAPIKey);
272 | })
273 |
274 | // Code highlight
275 | var flask = new CodeFlask;
276 | flask.run('#skypad-display', { language: 'javascript'});
277 | $('#code-highlight-caption').text("JavaScript");
278 | flask.onUpdate(function(code) {
279 | if (cachedCode !== code) {
280 | cachedCode = code;
281 | fireSync(code);
282 | }
283 |
284 | skygearTitle.on("keyup change blur", function(e){
285 | var title = skygearTitle.val();
286 | fireSyncTitle(title);
287 | })
288 | });
289 |
290 | $(".code-highlight-selector ul li a").on("click touch", function(e) {
291 | var langChosen = e.target.dataset.lang;
292 | flask.run('#skypad-display', { language: langChosen});
293 | langChosen = (langChosen =="clike")? "C" : langChosen;
294 | $('#code-highlight-caption').text(langChosen);
295 | flask.onUpdate(function(code) {
296 | if (cachedCode !== code) {
297 | cachedCode = code;
298 | fireSync(code);
299 | }
300 | });
301 | })
302 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |