├── .gitignore
├── .gitattributes
├── Screenshot-Autocomplete-Multiple.png
├── extension.json
├── package.json
├── LICENCE.txt
├── README.md
└── index.html


/.gitignore:
--------------------------------------------------------------------------------
1 | /node_modules
2 | 


--------------------------------------------------------------------------------
/.gitattributes:
--------------------------------------------------------------------------------
1 | # Auto detect text files and perform LF normalization
2 | * text=auto


--------------------------------------------------------------------------------
/Screenshot-Autocomplete-Multiple.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SandyRogers/Contentful-Tags-Autocomplete-Extension/HEAD/Screenshot-Autocomplete-Multiple.png


--------------------------------------------------------------------------------
/extension.json:
--------------------------------------------------------------------------------
1 | {
2 |   "id": "AutocompleteLinkedField",
3 |   "name": "Autocomplete Linked Field",
4 |   "srcdoc": "index.html",
5 |   "fieldTypes": ["Symbol", "Symbols"]
6 | }
7 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "autocomplete-linked-field",
 3 |   "version": "2.0.0",
 4 |   "description": "Allows for the autocompletion of entries from like-named fields in Contenful UI.",
 5 |   "scripts": {
 6 |     "test": "echo \"Error: no test specified\" && exit 1",
 7 |     "create": "contentful-extension create --space-id $CONTENTFUL_API_SPACE",
 8 |     "update": "contentful-extension update --space-id $CONTENTFUL_API_SPACE --force",
 9 |     "dev": "contentful-extension update --space-id $CONTENTFUL_API_SPACE --force --src 'http://localhost:3030/index.html'"
10 |   },
11 |   "author": "s@ndyroge.rs",
12 |   "license": "MIT",
13 |   "devDependencies": {
14 |     "contentful-extension-cli": "^2.0.0"
15 |   },
16 |   "dependencies": {
17 |   }
18 | }
19 | 


--------------------------------------------------------------------------------
/LICENCE.txt:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2017 Sandy Rogers
 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:
--------------------------------------------------------------------------------
 1 | # Autocompleting Tags in Contentful
 2 | 
 3 | [Contentful](https://www.contentful.com) is a content management platform. It has a concept of *Tags*, and these fall into their "content as metadata" approach. This means that *Tags* are just another type of [Short-Text Field](https://www.contentful.com/developers/docs/concepts/data-model/) you can add, as a [List](https://www.contentful.com/developers/docs/concepts/data-model/#array-fields). Contentful has a [Tag style appearance](https://www.contentful.com/developers/docs/concepts/editor-interfaces/]) choice for these.
 4 | 
 5 | ## But they don't autocomplete!
 6 | Tags are most useful when they autocomplete as you type things. This lets you keep some kind of consistency in your Tags across documents. Without autocomplete, you end up having "Spiderman" and "Spider-man" and "Spider Man" as three different Tags 😱️
 7 | 
 8 | *This UI extension adds a rendering option for Autocompleting tags to Contentful.*
 9 | 
10 | ![Screenshot of Autocompleting Tags extension](./Screenshot-Autocomplete-Multiple.png)
11 | 
12 | ## Where do the tags come from?
13 | The tags are pulled from all fields which share the same name, throughout the Contentful-Space.
14 | 
15 | (This can be restricted further so as to only pull from within the same content type... _Enable ln142 in index.html_)
16 | 
17 | ## Installation and usage
18 | This uses Contentful's Extensions SDK.
19 | You need to have `npm` and `gulp` installed to use this, and [have the extensions SDK installed](https://github.com/contentful/ui-extensions-sdk).
20 | 
21 | Clone or fork this repository.
22 | 
23 | Install the dependencies needed with `npm install`.
24 | 
25 | Create a _.env_ configuration file with your Contentful credentials:
26 | 
27 | ```bash
28 | export SPACE_ID=<space-id>
29 | export CONTENTFUL_MANAGEMENT_ACCESS_TOKEN=<content-management-access-token>
30 | ```
31 | 
32 | Add the variables to your environment.
33 | 
34 | ```bash
35 | source .env
36 | ```
37 | 
38 | ## Upload the extension to Contentful
39 | 
40 | Create the extension in the space specified in the _.env_ file:
41 | 
42 | ```bash
43 | npm run create
44 | ```
45 | 
46 | ## Local development
47 | 
48 | _This doesn't work if you have web security enabled in your browser, since your localhost will be serving on HTTP. This is probably the case for you. It is possible to disable it, or just `npm run update` your code to the server every time!_
49 | 
50 | Start a local server, changing the port if needed:
51 | 
52 | ```bash
53 | python -m SimpleHTTPServer 3030
54 | ```
55 | 
56 | Tell Contentful to render the widget from your local machine:
57 | 
58 | ```bash
59 | npm run dev
60 | ```
61 | 
62 | ## Update the extension
63 | 
64 | If you want to update the extension after your edit the code, run:
65 | 
66 | ```bash
67 | npm run update
68 | ```
69 | 
70 | ## Using the extension in the Contentful web app
71 | 
72 | Enable the extension in the Contentful web app for a "Short text" field (with "List" selected too) by opening the _Settings_ for a field and selecting this widget in the _appearance_ tab.


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <!-- Core extensions CSS from Contentful. -->
  7 |     <link rel="stylesheet" href="//contentful.github.io/ui-extensions-sdk/cf-extension.css">
  8 | 
  9 |     <style>
 10 |         .tag-field {
 11 |             z-index: 2
 12 |         }
 13 |         
 14 |         ul.suggestion-text {
 15 |             visibility: hidden;
 16 |             background-color: rgba(255, 255, 255, 0.7);
 17 |             padding: 5px 5px;
 18 |             border-radius: 6px;
 19 |             margin-top: -33px;
 20 |             margin-left: -3px;
 21 | 
 22 |             position: absolute;
 23 |         }
 24 | 
 25 |         span.known {
 26 |             color: #2b502b;
 27 |             font-weight: bolder;
 28 |             font-size: 16px;
 29 |         }
 30 | 
 31 |         span.guess {
 32 |             color: #858585;
 33 |             font-weight: bold;
 34 |             font-family: monospace;
 35 |         }
 36 | 
 37 |         span.instruction {
 38 |             color: #9cb883;
 39 |             padding-right: 1em;
 40 |             padding-left: 1em;
 41 |             font-style: italic;
 42 |         }
 43 | 
 44 |         ul {
 45 |             list-style: none;
 46 |         }
 47 | 
 48 |         ul.tag-list {
 49 |             display: flex;
 50 |             flex-wrap: wrap;
 51 |             padding-left: 0px;
 52 |             margin-top: 1rem;
 53 |             margin-bottom: 0px;
 54 |         }
 55 | 
 56 |         .tag-item {
 57 |             background: #eef2f4;
 58 |             line-height: 2rem;
 59 |             border-radius: 2px;
 60 |             padding: 1px 2ex 0 2ex;
 61 |             text-overflow: ellipsis;
 62 |             color: #536171;
 63 |             margin-bottom: 0.643em;
 64 |             margin-right: 1rem;
 65 |         }
 66 | 
 67 |         .tag-item-remove {
 68 |             height: 2rem;
 69 |             float: right;
 70 |             margin-right: -2ex;
 71 |             outline: 0;
 72 |             border: 0;
 73 |             cursor: pointer;
 74 |             background: none;
 75 |             color: inherit;
 76 |         }
 77 |     </style>
 78 | </head>
 79 | 
 80 | <body>
 81 |     <template id="tag">
 82 |         <li class="tag-item">
 83 |             <span class="tag-label"></span>
 84 | 
 85 |             <button aria-label="remove" type="button" class="tag-item-remove">
 86 |                 <cf-icon name="close">
 87 |                     <svg width="18" height="14" viewBox="-1 -1 20 20" xmlns="http://www.w3.org/2000/svg">
 88 |                         <g fill="none" fill-rule="evenodd">
 89 |                             <g fill="#21304A">
 90 |                                 <path d="M6.23 9L1.386 4.154 0 2.769 2.77 0l1.384 1.385L9 6.23l4.846-4.846L15.231 0 18 2.77l-1.385 1.384L11.77 9l4.846 4.846L18 15.231 15.23 18l-1.384-1.385L9 11.77l-4.846 4.846L2.769 18 0 15.23l1.385-1.384L6.23 9z"></path>
 91 |                             </g>
 92 |                         </g>
 93 |                     </svg>
 94 |                 </cf-icon>
 95 |             </button>
 96 |         </li>
 97 |     </template>
 98 | 
 99 |     <template id="suggestion-template">
100 |         <li class="suggestion">
101 |             <span class="known"></span><span class="guess"></span><span class="instruction"></span>
102 |         </li>
103 |     </template>
104 | 
105 |     <template id="alert-text">
106 |         <p>Field Empty... (Confirm an entry with `Enter` key)</p>
107 |     </template>
108 | 
109 |     <!-- Extension DOM Elements -->
110 |     <div class="cf-form-field">
111 |         <input type="text" class="cf-form-input tag-field" id="tag-field">
112 | 
113 |         <ul class="suggestion-text" id="suggestion-text" style="pointer-events: none">
114 |         </ul>
115 | 
116 |         <div class="cf-form-hint">
117 |             <ul class="tag-list" id="tag-list">
118 |             </ul>
119 |         </div>
120 |     </div>
121 | 
122 |     <!-- Contenful UI Extensions SDK API -->
123 |     <script src="//contentful.github.io/ui-extensions-sdk/cf-extension-api.js"></script>
124 | 
125 |     <!-- Javascript event-listeners -->
126 |     <script>
127 |         document.getElementById("tag-field").onblur = function() {
128 |             document.getElementById("suggestion-text").style.visibility = 'hidden';
129 | 
130 |             document.querySelector('#tag-field').placeholder = document.querySelector('#tag-field').value;
131 |             document.querySelector('#tag-field').value = '';
132 |         }
133 | 
134 |         document.getElementById("tag-field").onfocus = function() {
135 |             document.getElementById("suggestion-text").style.visibility = 'visible';
136 | 
137 |             document.querySelector('#tag-field').value = document.querySelector('#tag-field').placeholder;
138 |             document.querySelector('#tag-field').placeholder = '';
139 |         }
140 |     </script>
141 | 
142 |     <script>
143 |         // Set this to 'TRUE', before publising the extention, in order to restrict matches to within the same content-type.
144 |         var restrictMatchesToWithinContentTypes = false;
145 | 
146 |         function tagExtension(extensionsApi) {
147 |             extensionsApi.window.startAutoResizer();
148 | 
149 |             // Get the DOM elements
150 |             var tagFieldEl = document.querySelector('#tag-field');
151 |             var tagListEl = document.querySelector('#tag-list');
152 |             var suggestionTextEl = document.querySelector('.suggestion-text');
153 | 
154 |             // Disable the field whilst we fetch Tags
155 |             tagFieldEl.disabled = true;
156 | 
157 |             var entry = extensionsApi.entry;
158 |             var entryContentType = entry.getSys().contentType.sys.id;
159 |             var field = extensionsApi.field;
160 |             var fieldName = field.id
161 | 
162 |             // Get all entries in the space...
163 |             var allEntries = extensionsApi.space.getEntries({});
164 |             var uniqueTags = null;
165 |             var suggestions = [];
166 | 
167 |             var _thisFieldIsSymbol = field.type == 'Symbol';
168 |             var _tagValues = !field.getValue() ? [] : ( _thisFieldIsSymbol ? [field.getValue()] : field.getValue());
169 | 
170 |             renderTags();
171 | 
172 |             allEntries.then(function (entries) {
173 |                 var allTags = [];
174 |                 var eItems = entries.items;
175 |                 for (var i = 0, len = eItems.length; i < len; i++) {
176 |                     if ( (!restrictMatchesToWithinContentTypes || eItems[i].sys.contentType.sys.id == entryContentType) &&
177 |                         eItems[i].fields.hasOwnProperty(fieldName) &&
178 |                         eItems[i].fields[fieldName].hasOwnProperty(field.locale) )
179 |                     {
180 |                         allTags = allTags.concat(eItems[i].fields[fieldName][field.locale]);
181 |                     }
182 |                 };
183 | 
184 |                 uniqueTags = allTags.filter(function (item, pos) {
185 |                     return allTags.indexOf(item) == pos;
186 |                 });
187 | 
188 |                 tagFieldEl.disabled = false;
189 |             });
190 | 
191 |             window.addEventListener('onbeforeunload', onBeforeUnloadHandler);
192 |             tagFieldEl.addEventListener('input', keyboardInputHandler);
193 |             tagFieldEl.addEventListener('keydown', addTagHandler);
194 | 
195 | 
196 |             function keyboardInputHandler(event) {
197 |                 renderSuggestions();
198 |             }
199 | 
200 |             function addTagHandler(event) {
201 |                 var tagValue = tagFieldEl.value.trim()
202 |                 var key = event.which || event.keyCode;
203 | 
204 |                 if ( (key === 39 || key === 9) && suggestions[0] ) { // 9 is Tab // 39 is Right Arrow Key
205 |                     event.preventDefault();
206 |                     tagFieldEl.value = suggestions[0];
207 | 
208 |                     renderSuggestions();
209 | 
210 |                     return false;
211 |                 } else if ( key === 13 && tagValue ) { // 13 is Enter
212 |                     event.preventDefault();
213 | 
214 |                     if ( _thisFieldIsSymbol ) { _tagValues = [tagValue]; }
215 |                     else { _tagValues.splice(0,0,tagValue); }
216 | 
217 |                     tagFieldEl.value = '';
218 | 
219 |                     renderTags();
220 |                     renderSuggestions();
221 | 
222 |                     return false;
223 |                 }
224 |             }
225 | 
226 |             function onBeforeUnloadHandler(event) {
227 |                 window.removeEventListener('onbeforeunload', onBeforeUnloadHandler);
228 |                 tagFieldEl.removeEventListener('input', keyboardInputHandler);
229 |                 tagFieldEl.removeEventListener('keypress', addTagHandler);
230 |             }
231 | 
232 |             function findSuggestions() {
233 |                 if ( tagFieldEl.value == '' ) return [];
234 | 
235 |                 var suggestionsList = [];
236 |                 var matcher = new RegExp('^' + tagFieldEl.value);
237 |                 for (var i = 0; i < uniqueTags.length; i++) {
238 |                     var x = uniqueTags[i]
239 |                     if ( matcher.test(x) ) suggestionsList.push(x);
240 |                 }
241 | 
242 |                 return suggestionsList.sort(function (a, b) {
243 |                     return a.length - b.length;
244 |                 });
245 |             }
246 | 
247 |             function renderSuggestions() {
248 |                 suggestionTextEl.style.visibility = 'hidden';
249 | 
250 |                 suggestions = findSuggestions();
251 | 
252 |                 while (suggestionTextEl.firstChild) suggestionTextEl.removeChild(suggestionTextEl.firstChild);
253 | 
254 |                 // Do not render if there are no tags.
255 |                 if ( !uniqueTags || suggestions.length == 0 ) {
256 |                     console.log('No tags found!');
257 |                     return;
258 |                 }
259 | 
260 |                 for (var i = 0, len = suggestions.length; i < len; i++) {
261 |                     var suggestionTemplate = document.querySelector('#suggestion-template').content;
262 |                     suggestionTemplate.querySelector('.known').innerHTML = tagFieldEl.value;
263 |                     suggestionTemplate.querySelector('.guess').innerHTML = suggestions[i].slice(tagFieldEl.value.length);
264 | 
265 |                     if ( i.toString() == "0" ) { suggestionTemplate.querySelector('.instruction').innerHTML = "→ Tab"; } 
266 |                     else { suggestionTemplate.querySelector('.instruction').innerHTML = ""; }
267 | 
268 |                     var thisSuggestion = document.importNode(suggestionTemplate, true);
269 |                     document.querySelector('#suggestion-text').appendChild(thisSuggestion);
270 |                 }
271 | 
272 |                 suggestionTextEl.style.visibility = 'visible';
273 |             }
274 | 
275 |             function removeTag(index) {
276 |                 if ( index > -1 && 
277 |                     _tagValues && 
278 |                     _tagValues.length > index ) 
279 |                 { 
280 |                     _tagValues.splice(index, 1); 
281 |                 }
282 | 
283 |                 renderTags();
284 |             }
285 | 
286 |             function renderTags() {
287 |                 if ( _thisFieldIsSymbol ) { field.setValue(_tagValues[0]); } 
288 |                 else { field.setValue(_tagValues); }
289 | 
290 |                 while (tagListEl.firstChild) tagListEl.removeChild(tagListEl.firstChild);
291 | 
292 |                 _tagValues.filter(function (item, pos) { 
293 |                     return _tagValues.indexOf(item) == pos; 
294 |                 });
295 | 
296 |                 _tagValues.forEach(function (tag, index) {
297 |                     var tagTemplate = document.querySelector('#tag').content;
298 |                     tagTemplate.querySelector('.tag-item span.tag-label').textContent = tag;
299 | 
300 |                     var thisTag = document.importNode(tagTemplate, true);
301 |                     document.querySelector('#tag-list').appendChild(thisTag);
302 | 
303 |                     document.querySelector('#tag-list li:last-child button').onclick = function () { removeTag(index); }
304 |                 });
305 | 
306 |                 if ( !tagListEl.firstChild ) {
307 |                     document.querySelector('#tag-list').appendChild(  document.importNode( document.querySelector('#alert-text').content , true ) )
308 |                 }
309 |             }
310 |         }
311 | 
312 |         window.contentfulExtension.init(tagExtension);
313 |     </script>
314 | </body>
315 | 
316 | </html>
317 | 


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