├── images
    ├── demo.gif
    ├── setup1.png
    └── setup2.png
├── .env.example
├── extension.json
├── package.json
├── .gitignore
├── LICENSE
├── README.md
└── index.html


/images/demo.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AnalogMemory/contentful-tables/HEAD/images/demo.gif


--------------------------------------------------------------------------------
/images/setup1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AnalogMemory/contentful-tables/HEAD/images/setup1.png


--------------------------------------------------------------------------------
/images/setup2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AnalogMemory/contentful-tables/HEAD/images/setup2.png


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


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


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "contentful-tables",
 3 |   "version": "1.0.0",
 4 |   "description": "A Contentful UI-Extension to add editable tabular data",
 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": "https://github.com/AnalogMemory/contentful-tables.git"
16 |   },
17 |   "keywords": [
18 |     "contentful",
19 |     "extension",
20 |     "tables"
21 |   ],
22 |   "author": "Alex M<alex@analogmemory.xyz>",
23 |   "license": "MIT",
24 |   "bugs": {
25 |     "url": "https://github.com/AnalogMemory/contentful-tables/issues"
26 |   },
27 |   "homepage": "https://github.com/AnalogMemory/contentful-tables#readme",
28 |   "devDependencies": {
29 |     "contentful-extension-cli": "^2.0.0"
30 |   }
31 | }
32 | 


--------------------------------------------------------------------------------
/.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 Tables
 2 | 
 3 | An ui-extension to add an editable table to handle tabular data as a [Contentful UI Extension](https://www.contentful.com/developers/docs/concepts/uiextensions/).
 4 | 
 5 | ### ⚙️ Setup field Content Models
 6 | 
 7 | Add JSON Object field  
 8 | ![figure](https://github.com/AnalogMemory/contentful-tables/blob/master/images/setup1.png "Add JSON Object field")
 9 | 
10 | Configure appearance to use **Contentful Tables**  
11 | ![figure](https://github.com/AnalogMemory/contentful-tables/blob/master/images/setup2.png "Configure appearance")
12 | 
13 | ### 📝 Editing Table
14 | 
15 | ![figure](https://github.com/AnalogMemory/contentful-tables/blob/master/images/demo.gif "Editing the table")
16 | 
17 | ## ✅ Easy Installation in Contentful Web App
18 | 
19 | * In the contentful web app to to `Settings > Extensions`
20 | * Click the `Add extension`
21 | * Choose `Install from Github`
22 | * Paste this link `https://github.com/AnalogMemory/contentful-tables/blob/master/extension.json`
23 | 
24 | ### Manual Installation
25 | 
26 | ```sh
27 | git clone https://github.com/AnalogMemory/contentful-tables.git
28 | cd contentful-tables
29 | npm install
30 | ```
31 | 
32 | ### Configure
33 | 
34 | Create a configuration file with your credentials for Contentful.
35 | 
36 | ```sh
37 | cp .env.example .env
38 | ```
39 | 
40 | 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).
41 | 
42 | Load environment variables
43 | 
44 | ```sh
45 | source .env
46 | ```
47 | 
48 | ### Create
49 | 
50 | ```sh
51 | npm run create
52 | ```
53 | 
54 | Create task will register the extension in your space on Contentful.
55 | 
56 | ### Update
57 | 
58 | ```sh
59 | npm run update
60 | ```
61 | 
62 | Update task will upload the extension to your space on Contentful.
63 | 
64 | ## License
65 | 
66 | Copyright &copy; Contentful Developer Relations
67 | 
68 | Licensed under the [MIT license](https://github.com/contentful-labs/ui-editable-table/blob/master/LICENSE).
69 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="UTF-8" />
  5 |     <title>Tables for Contentful UI</title>
  6 |     <link
  7 |       rel="stylesheet"
  8 |       href="https://contentful.github.io/ui-extensions-sdk/cf-extension.css"
  9 |     />
 10 |     <script src="https://contentful.github.io/ui-extensions-sdk/cf-extension-api.js"></script>
 11 |     <style>
 12 |       div.input-container {
 13 |         display: inline-block;
 14 |         vertical-align: top;
 15 |         width: 4rem;
 16 |         margin: 0 1rem 1rem 0;
 17 |       }
 18 |       div.input-container label {
 19 |         color: #718096;
 20 |         display: block;
 21 |         font-size: 0.875rem;
 22 |         line-height: 1.5;
 23 |         margin-bottom: 2px;
 24 |       }
 25 |       div.input-container input {
 26 |         display: block;
 27 |         color: #1a202c;
 28 |         border: 1px solid #cbd5e0;
 29 |         font-size: 0.875rem;
 30 |         line-height: 1.5rem;
 31 |         padding: 0.5rem;
 32 |         text-align: center;
 33 |         width: 100%;
 34 |       }
 35 | 
 36 |       table {
 37 |         border-collapse: collapse;
 38 |         table-layout: auto;
 39 |         width: 100%;
 40 |       }
 41 | 
 42 |       th {
 43 |         color: #2d3748;
 44 |         font-size: 1rem;
 45 |         padding: 0;
 46 |       }
 47 | 
 48 |       td {
 49 |         border: 1px solid #cbd5e0;
 50 |         color: #1a202c;
 51 |         font-size: 1rem;
 52 |         padding: 0;
 53 |       }
 54 | 
 55 |       tr:first-child td input {
 56 |         font-weight: bold;
 57 |         text-align: center;
 58 |       }
 59 | 
 60 |       td input {
 61 |         border: none;
 62 |         color: #1a202c;
 63 |         font-size: 1rem;
 64 |         line-height: 1.5;
 65 |         padding: 0.5rem 1rem;
 66 |         text-align: center;
 67 |         width: 100%;
 68 |       }
 69 | 
 70 |       input:hover {
 71 |         background-color: #f7fafc;
 72 |       }
 73 |       input:focus {
 74 |         background-color: #e2e8f0;
 75 |       }
 76 |     </style>
 77 |   </head>
 78 |   <body>
 79 |     <div id="content">
 80 |       <table></table>
 81 |     </div>
 82 |     <script>
 83 |       function getInitialData({ rows, header }) {
 84 |         const data = [header];
 85 |         const columns = data[0].length;
 86 | 
 87 |         for (let i = 0; i < rows; i++) {
 88 |           data.push(new Array(data[0].length));
 89 |         }
 90 | 
 91 |         return data;
 92 |       }
 93 | 
 94 |       function alterData(data) {
 95 |         if (document.querySelector("#rows").value < data.length) {
 96 |           data.length = document.querySelector("#rows").value;
 97 |         } else {
 98 |           for (
 99 |             let i = data.length;
100 |             i < document.querySelector("#rows").value;
101 |             i++
102 |           ) {
103 |             data.push(new Array());
104 |           }
105 |         }
106 | 
107 |         for (let i = 0; i < data.length; i++) {
108 |           if (document.querySelector("#columns").value < data[i].length) {
109 |             data[i].length = document.querySelector("#columns").value;
110 |           } else {
111 |             for (
112 |               let j = data[i].length;
113 |               j < document.querySelector("#columns").value;
114 |               j++
115 |             ) {
116 |               data[i].push("");
117 |             }
118 |           }
119 |         }
120 | 
121 |         return data;
122 |       }
123 | 
124 |       function createDOMTable(elem, tableData) {
125 |         while (elem.rows.length > 0) {
126 |           elem.deleteRow(0);
127 |         }
128 | 
129 |         for (let i = 0; i < tableData.length; i++) {
130 |           let row = elem.insertRow();
131 | 
132 |           for (let j = 0; j < tableData[0].length; j++) {
133 |             row.insertCell().innerHTML = `<input data-row="${i}" data-column="${j}" value="${tableData[
134 |               i
135 |             ][j] || ""}"/>`;
136 |           }
137 |         }
138 |       }
139 | 
140 |       function capitalizeWord(s) {
141 |         if (typeof s !== "string") return "";
142 |         return s.charAt(0).toUpperCase() + s.slice(1);
143 |       }
144 | 
145 |       window.contentfulExtension.init(extension => {
146 |         let value = extension.field.getValue();
147 | 
148 |         if (!value) {
149 |           value = {
150 |             tableData: getInitialData({
151 |               rows: 3,
152 |               header: ["Column 1", "Column 2"]
153 |             })
154 |           };
155 |         }
156 | 
157 |         createDOMTable(document.querySelector("table"), value.tableData);
158 | 
159 |         let inputSizes = ["rows", "columns"];
160 |         for (input in inputSizes) {
161 |           let inputContainer = document.createElement("div");
162 |           let inputLabel = document.createElement("label");
163 |           let inputEl = document.createElement("input");
164 |           inputEl.id = inputSizes[input];
165 |           inputEl.classList.add("size-input");
166 |           if (inputSizes[input] == "rows") {
167 |             inputEl.placeholder = "2";
168 |             inputEl.value = value.tableData.length;
169 |           } else {
170 |             inputEl.placeholder = "3";
171 |             inputEl.value = value.tableData[0].length;
172 |           }
173 |           inputEl.addEventListener(
174 |             "change",
175 |             e => {
176 |               value = {
177 |                 tableData: alterData(value.tableData)
178 |               };
179 |               createDOMTable(document.querySelector("table"), value.tableData);
180 |               extension.window.updateHeight();
181 |               extension.field.setValue(value);
182 |             },
183 |             true
184 |           );
185 |           inputContainer.classList.add("input-container");
186 |           inputLabel.textContent = capitalizeWord(inputSizes[input]);
187 |           inputContainer.appendChild(inputLabel);
188 |           inputContainer.appendChild(inputEl);
189 |           document.body.insertBefore(
190 |             inputContainer,
191 |             document.body.childNodes[0]
192 |           );
193 |           extension.window.updateHeight();
194 |         }
195 | 
196 |         window.addEventListener(
197 |           "change",
198 |           e => {
199 |             if (e.target.classList.contains("size-input")) return false;
200 |             value.tableData[e.target.dataset.row][e.target.dataset.column] =
201 |               e.target.value;
202 |             extension.field.setValue(value);
203 |           },
204 |           true
205 |         );
206 |       });
207 |     </script>
208 |   </body>
209 | </html>
210 | 


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