├── .env.example
├── .gitignore
├── LICENSE
├── README.md
├── demo.gif
├── extension.json
├── index.html
├── package-lock.json
└── package.json


/.env.example:
--------------------------------------------------------------------------------
1 | export SPACE_ID=xxxxxxxxxxxx
2 | export CONTENTFUL_MANAGEMENT_ACCESS_TOKEN=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | 
 8 | # Runtime data
 9 | pids
10 | *.pid
11 | *.seed
12 | *.pid.lock
13 | 
14 | # Directory for instrumented libs generated by jscoverage/JSCover
15 | lib-cov
16 | 
17 | # Coverage directory used by tools like istanbul
18 | coverage
19 | 
20 | # nyc test coverage
21 | .nyc_output
22 | 
23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
24 | .grunt
25 | 
26 | # Bower dependency directory (https://bower.io/)
27 | bower_components
28 | 
29 | # node-waf configuration
30 | .lock-wscript
31 | 
32 | # Compiled binary addons (http://nodejs.org/api/addons.html)
33 | build/Release
34 | 
35 | # Dependency directories
36 | node_modules/
37 | jspm_packages/
38 | 
39 | # Typescript v1 declaration files
40 | typings/
41 | 
42 | # Optional npm cache directory
43 | .npm
44 | 
45 | # Optional eslint cache
46 | .eslintcache
47 | 
48 | # Optional REPL history
49 | .node_repl_history
50 | 
51 | # Output of 'npm pack'
52 | *.tgz
53 | 
54 | # Yarn Integrity file
55 | .yarn-integrity
56 | 
57 | # dotenv environment variables file
58 | .env
59 | 
60 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2017 Contentful Developer Relations
 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.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Contentful Editable Table UI Extension
 2 | 
 3 | ❗ Disclaimer
 4 | =====
 5 | 
 6 | **This project is not actively maintained or monitored.** Feel free to fork and work on it in your account. If you want to maintain but also collaborate with fellow developers, feel free to reach out to [Contentful's Developer Relations](mailto:devrel-mkt@contentful.com) team to move the project into our community GitHub organisation [contentful-userland](https://github.com/contentful-userland/).
 7 | 
 8 | -----
 9 | 
10 | 
11 | An editable table to handle tabular data as a [Contentful UI Extension](https://www.contentful.com/developers/docs/concepts/uiextensions/).
12 | 
13 | ![figure](https://raw.githubusercontent.com/contentful-developer-relations/ui-editable-table/master/demo.gif "Editable table as Contentful UI Extension demo")
14 | 
15 | ## Installation
16 | 
17 | ```sh
18 | git clone git@github.com:contentful-labs/ui-editable-table.git
19 | cd ui-editable-table
20 | npm install
21 | ```
22 | 
23 | ### Configure
24 | 
25 | Create a configuration file with your credentials for Contentful.
26 | 
27 | ```sh
28 | cp .env.example .env
29 | ```
30 | 
31 | Open `.env` in a editor of your liking and add your Contentful space ID, and management token. [Learn how to obtain a token](https://www.contentful.com/developers/docs/references/authentication/#getting-an-oauth-token).
32 | 
33 | Load environment variables
34 | 
35 | ```sh
36 | source .env
37 | ```
38 | 
39 | ### Create
40 | 
41 | ```sh
42 | npm run create
43 | ```
44 | 
45 | Create task will register the extension in your space on Contentful.
46 | 
47 | ### Update
48 | 
49 | ```sh
50 | npm run update
51 | ```
52 | 
53 | Update task will upload the extension to your space on Contentful.
54 | 
55 | ## License
56 | 
57 | Copyright © Contentful Developer Relations
58 | 
59 | Licensed under the [MIT license](https://github.com/contentful-labs/ui-editable-table/blob/master/LICENSE).
60 | 


--------------------------------------------------------------------------------
/demo.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/contentful-labs/ui-editable-table/802744a2fa7f29664e825563c5662d63fd6d71cf/demo.gif


--------------------------------------------------------------------------------
/extension.json:
--------------------------------------------------------------------------------
1 | {
2 |   "name": "Contentful UI extension table example",
3 |   "id": "cf-contentful-ui-table-example",
4 |   "fieldTypes": ["Object"],
5 |   "srcdoc": "./index.html"
6 | }


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8"/>
 5 |     <title>Contentful UI extension country select</title>
 6 |     <link rel="stylesheet" href="https://contentful.github.io/ui-extensions-sdk/cf-extension.css">
 7 |     <script src="https://contentful.github.io/ui-extensions-sdk/cf-extension-api.js"></script>
 8 |     <style>
 9 |       input {
10 |           border: none;
11 |           width: 100%;
12 |           font-size: 14px;
13 |           padding: 2px;
14 |           text-align: center;
15 |       }
16 | 
17 |       input:hover { background-color: #eee; }
18 |       input:focus { background-color: #ccf; }
19 | 
20 |       table {
21 |         border-collapse: collapse;
22 |         width: 100%;
23 |       }
24 | 
25 |       td {
26 |           border: 1px solid #999;
27 |           padding: 0;
28 |       }
29 | 
30 |       tr:first-child td input {
31 |           background-color: #ccc;
32 |           font-weight: bold;
33 |           text-align: center;
34 |           user-select: none;
35 |       }
36 |     </style>
37 |   </head>
38 |   <body>
39 |     <div id="content">
40 |       <table></table>
41 |     </div>
42 |     <script>
43 |       function getInitialData({rows, header}) {
44 |         const data = [
45 |           header
46 |         ];
47 |         const columns = data[0].length;
48 | 
49 |         for (let i = 0; i <= rows; i++) {
50 |           data.push(new Array(data[0].length));
51 |         }
52 | 
53 |         return data;
54 |       }
55 | 
56 |       function createDOMTable(elem, tableData) {
57 |         for (let i = 0; i < tableData.length; i++) {
58 |           let row = elem.insertRow();
59 | 
60 |           for (let j = 0; j < tableData[0].length; j++) {
61 |             row.insertCell().innerHTML = `<input data-row="${i}" data-column="${j}" value="${tableData[i][j] || ''}"/>`;
62 |           }
63 |         }
64 |       }
65 | 
66 |       window.contentfulExtension.init(extension => {
67 |         let value = extension.field.getValue()
68 | 
69 |         if (!value) {
70 |           value = {
71 |             tableData : getInitialData({
72 |               rows: 3,
73 |               header: ['FOO', 'BAR', 'BAZ']
74 |             })
75 |           };
76 |         }
77 | 
78 |        createDOMTable(document.querySelector('table'), value.tableData);
79 | 
80 |         window.addEventListener('blur', e => {
81 |           value.tableData[e.target.dataset.row][e.target.dataset.column] = e.target.value;
82 |           extension.field.setValue(value);
83 |         }, true);
84 |       });
85 |     </script>
86 |   </body>
87 | </html>


--------------------------------------------------------------------------------
/package-lock.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "name": "cf-contentful-ui-country-select",
  3 |   "version": "1.0.0",
  4 |   "lockfileVersion": 1,
  5 |   "requires": true,
  6 |   "dependencies": {
  7 |     "ansi-regex": {
  8 |       "version": "2.1.1",
  9 |       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
 10 |       "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
 11 |       "dev": true
 12 |     },
 13 |     "axios": {
 14 |       "version": "0.8.1",
 15 |       "resolved": "https://registry.npmjs.org/axios/-/axios-0.8.1.tgz",
 16 |       "integrity": "sha1-4Or+wPNGE5Un3Dt5/cv/gDSiQEU=",
 17 |       "dev": true,
 18 |       "requires": {
 19 |         "follow-redirects": "0.0.7"
 20 |       }
 21 |     },
 22 |     "bluebird": {
 23 |       "version": "3.5.0",
 24 |       "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.5.0.tgz",
 25 |       "integrity": "sha1-eRQg1/VR7qKJdFOop3ZT+WYG1nw=",
 26 |       "dev": true
 27 |     },
 28 |     "camelcase": {
 29 |       "version": "2.1.1",
 30 |       "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-2.1.1.tgz",
 31 |       "integrity": "sha1-fB0W1nmhu+WcoCys7PsBHiAfWh8=",
 32 |       "dev": true
 33 |     },
 34 |     "cliui": {
 35 |       "version": "3.2.0",
 36 |       "resolved": "https://registry.npmjs.org/cliui/-/cliui-3.2.0.tgz",
 37 |       "integrity": "sha1-EgYBU3qRbSmUD5NNo7SNWFo5IT0=",
 38 |       "dev": true,
 39 |       "requires": {
 40 |         "string-width": "1.0.2",
 41 |         "strip-ansi": "3.0.1",
 42 |         "wrap-ansi": "2.1.0"
 43 |       }
 44 |     },
 45 |     "code-point-at": {
 46 |       "version": "1.1.0",
 47 |       "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",
 48 |       "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=",
 49 |       "dev": true
 50 |     },
 51 |     "contentful-extension-cli": {
 52 |       "version": "2.0.0",
 53 |       "resolved": "https://registry.npmjs.org/contentful-extension-cli/-/contentful-extension-cli-2.0.0.tgz",
 54 |       "integrity": "sha1-fc67dKaBcwChML+Pnf7uRjBvCK4=",
 55 |       "dev": true,
 56 |       "requires": {
 57 |         "bluebird": "3.5.0",
 58 |         "contentful-management": "0.8.6",
 59 |         "lodash": "3.10.1",
 60 |         "yargs": "3.32.0"
 61 |       }
 62 |     },
 63 |     "contentful-management": {
 64 |       "version": "0.8.6",
 65 |       "resolved": "https://registry.npmjs.org/contentful-management/-/contentful-management-0.8.6.tgz",
 66 |       "integrity": "sha1-TNkXUMAzrbIZvgnXlyF6vj4AYN8=",
 67 |       "dev": true,
 68 |       "requires": {
 69 |         "axios": "0.8.1",
 70 |         "inherits": "2.0.3",
 71 |         "redefine": "0.2.1",
 72 |         "underscore-contrib": "0.2.2"
 73 |       }
 74 |     },
 75 |     "debug": {
 76 |       "version": "2.6.8",
 77 |       "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.8.tgz",
 78 |       "integrity": "sha1-5zFTHKLt4n0YgiJCfaF4IdaP9Pw=",
 79 |       "dev": true,
 80 |       "requires": {
 81 |         "ms": "2.0.0"
 82 |       }
 83 |     },
 84 |     "decamelize": {
 85 |       "version": "1.2.0",
 86 |       "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
 87 |       "integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=",
 88 |       "dev": true
 89 |     },
 90 |     "follow-redirects": {
 91 |       "version": "0.0.7",
 92 |       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-0.0.7.tgz",
 93 |       "integrity": "sha1-NLkLqyqRGqNHVx2pDyK9NuzYqRk=",
 94 |       "dev": true,
 95 |       "requires": {
 96 |         "debug": "2.6.8",
 97 |         "stream-consume": "0.1.0"
 98 |       }
 99 |     },
100 |     "inherits": {
101 |       "version": "2.0.3",
102 |       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
103 |       "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=",
104 |       "dev": true
105 |     },
106 |     "invert-kv": {
107 |       "version": "1.0.0",
108 |       "resolved": "https://registry.npmjs.org/invert-kv/-/invert-kv-1.0.0.tgz",
109 |       "integrity": "sha1-EEqOSqym09jNFXqO+L+rLXo//bY=",
110 |       "dev": true
111 |     },
112 |     "is-fullwidth-code-point": {
113 |       "version": "1.0.0",
114 |       "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
115 |       "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
116 |       "dev": true,
117 |       "requires": {
118 |         "number-is-nan": "1.0.1"
119 |       }
120 |     },
121 |     "lcid": {
122 |       "version": "1.0.0",
123 |       "resolved": "https://registry.npmjs.org/lcid/-/lcid-1.0.0.tgz",
124 |       "integrity": "sha1-MIrMr6C8SDo4Z7S28rlQYlHRuDU=",
125 |       "dev": true,
126 |       "requires": {
127 |         "invert-kv": "1.0.0"
128 |       }
129 |     },
130 |     "lodash": {
131 |       "version": "3.10.1",
132 |       "resolved": "https://registry.npmjs.org/lodash/-/lodash-3.10.1.tgz",
133 |       "integrity": "sha1-W/Rejkm6QYnhfUgnid/RW9FAt7Y=",
134 |       "dev": true
135 |     },
136 |     "ms": {
137 |       "version": "2.0.0",
138 |       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
139 |       "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
140 |       "dev": true
141 |     },
142 |     "number-is-nan": {
143 |       "version": "1.0.1",
144 |       "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz",
145 |       "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=",
146 |       "dev": true
147 |     },
148 |     "os-locale": {
149 |       "version": "1.4.0",
150 |       "resolved": "https://registry.npmjs.org/os-locale/-/os-locale-1.4.0.tgz",
151 |       "integrity": "sha1-IPnxeuKe00XoveWDsT0gCYA8FNk=",
152 |       "dev": true,
153 |       "requires": {
154 |         "lcid": "1.0.0"
155 |       }
156 |     },
157 |     "redefine": {
158 |       "version": "0.2.1",
159 |       "resolved": "https://registry.npmjs.org/redefine/-/redefine-0.2.1.tgz",
160 |       "integrity": "sha1-6J7npvJNGf/2JZBWkzLcYDgKiaM=",
161 |       "dev": true
162 |     },
163 |     "stream-consume": {
164 |       "version": "0.1.0",
165 |       "resolved": "https://registry.npmjs.org/stream-consume/-/stream-consume-0.1.0.tgz",
166 |       "integrity": "sha1-pB6tGm1ggc63n2WwYZAbbY89HQ8=",
167 |       "dev": true
168 |     },
169 |     "string-width": {
170 |       "version": "1.0.2",
171 |       "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
172 |       "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
173 |       "dev": true,
174 |       "requires": {
175 |         "code-point-at": "1.1.0",
176 |         "is-fullwidth-code-point": "1.0.0",
177 |         "strip-ansi": "3.0.1"
178 |       }
179 |     },
180 |     "strip-ansi": {
181 |       "version": "3.0.1",
182 |       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
183 |       "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
184 |       "dev": true,
185 |       "requires": {
186 |         "ansi-regex": "2.1.1"
187 |       }
188 |     },
189 |     "underscore": {
190 |       "version": "1.8.3",
191 |       "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.8.3.tgz",
192 |       "integrity": "sha1-Tz+1OxBuYJf8+ctBCfKl6b36UCI=",
193 |       "dev": true
194 |     },
195 |     "underscore-contrib": {
196 |       "version": "0.2.2",
197 |       "resolved": "https://registry.npmjs.org/underscore-contrib/-/underscore-contrib-0.2.2.tgz",
198 |       "integrity": "sha1-EFcOh6txbcktcbVd8khR98J54+c=",
199 |       "dev": true,
200 |       "requires": {
201 |         "underscore": "1.8.3"
202 |       }
203 |     },
204 |     "window-size": {
205 |       "version": "0.1.4",
206 |       "resolved": "https://registry.npmjs.org/window-size/-/window-size-0.1.4.tgz",
207 |       "integrity": "sha1-+OGqHuWlPsW/FR/6CXQqatdpeHY=",
208 |       "dev": true
209 |     },
210 |     "wrap-ansi": {
211 |       "version": "2.1.0",
212 |       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-2.1.0.tgz",
213 |       "integrity": "sha1-2Pw9KE3QV5T+hJc8rs3Rz4JP3YU=",
214 |       "dev": true,
215 |       "requires": {
216 |         "string-width": "1.0.2",
217 |         "strip-ansi": "3.0.1"
218 |       }
219 |     },
220 |     "y18n": {
221 |       "version": "3.2.1",
222 |       "resolved": "https://registry.npmjs.org/y18n/-/y18n-3.2.1.tgz",
223 |       "integrity": "sha1-bRX7qITAhnnA136I53WegR4H+kE=",
224 |       "dev": true
225 |     },
226 |     "yargs": {
227 |       "version": "3.32.0",
228 |       "resolved": "https://registry.npmjs.org/yargs/-/yargs-3.32.0.tgz",
229 |       "integrity": "sha1-AwiOnr+edWtpdRYR0qXvWRSCyZU=",
230 |       "dev": true,
231 |       "requires": {
232 |         "camelcase": "2.1.1",
233 |         "cliui": "3.2.0",
234 |         "decamelize": "1.2.0",
235 |         "os-locale": "1.4.0",
236 |         "string-width": "1.0.2",
237 |         "window-size": "0.1.4",
238 |         "y18n": "3.2.1"
239 |       }
240 |     }
241 |   }
242 | }
243 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "cf-contentful-ui-country-select",
 3 |   "version": "1.0.0",
 4 |   "description": "Contentful UI extension to easily select countries",
 5 |   "main": "index.js",
 6 |   "engines": {
 7 |     "node": ">=7.6"
 8 |   },
 9 |   "scripts": {
10 |     "create": "contentful-extension create --space-id ${SPACE_ID}",
11 |     "update": "contentful-extension update --space-id ${SPACE_ID} --force"
12 |   },
13 |   "repository": {
14 |     "type": "git",
15 |     "url": "git+https://github.com/stefanjudis/contentful-ui-country-select.git"
16 |   },
17 |   "keywords": [
18 |     "contentful"
19 |   ],
20 |   "author": "stefan judis <stefanjudis@gmail.com>",
21 |   "license": "MIT",
22 |   "bugs": {
23 |     "url": "https://github.com/stefanjudis/contentful-ui-country-select/issues"
24 |   },
25 |   "homepage": "https://github.com/stefanjudis/contentful-ui-country-select#readme",
26 |   "devDependencies": {
27 |     "contentful-extension-cli": "^2.0.0"
28 |   }
29 | }
30 | 


--------------------------------------------------------------------------------