├── LICENSE
├── README.md
├── configuration.png
├── example.png
├── extension.json
└── index.html


/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2018 Lukas Oppermann
 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 Key Value Editor
 2 | > A form for adding key value pairs with an optional type dropdown to an object field.
 3 | 
 4 | ![Example of key value pairs with a dropdown][example]
 5 | 
 6 | ## Configuration
 7 | You can set the following per instance of the editor:
 8 | 
 9 | ![Configuration options][configuration]
10 | 
11 | #### Keys
12 | If left empty the key will be a normal input field. If a comma separated list is provided, a dropdown will be shown. You can specify the values as shown below.
13 | 
14 | ```bash
15 | # Using the same string for label and value of the dropdown
16 | facebook-id, google-id
17 | # Using a different label and value for the dropdown
18 | Facebook ID:facebook-id, Google ID:google-id
19 | ```
20 | 
21 | #### optionalParameter Dropdown
22 | Empty by default (no dropdown will be shown). If you add a list of comma separated values they will be turned into a dropdown and stored with the data. You can specify the values as shown above.
23 | 
24 | ## Data structure
25 | The data will be stored as an array with an object per item.
26 | 
27 | ```Javascript
28 | Array({
29 |   key: "someKey",
30 |   value: "yourValue",
31 |   optionalParameter: "Option A" || null
32 | }, {…})
33 | ```
34 | ## Installation
35 | As this plugin uses parameters, you will need to install it using the [contentful cli](https://github.com/contentful/contentful-cli) with the [extension command](https://github.com/contentful/contentful-cli/tree/master/docs/extension).
36 | 
37 | 1. Install the [contentful cli](https://github.com/contentful/contentful-cli) and [login](https://github.com/contentful/contentful-cli/tree/master/docs/login).
38 | 
39 | 2. [Download](https://github.com/lukasoppermann/contentful-key-value-editor/archive/master.zip) or clone this repo to you computer.
40 | 
41 | 3. In your terminal cd into the folder of this plugin and run the following commands
42 | 
43 | ```bash
44 | # cd into the folder of this extension
45 | cd your/folder/contentful-key-value-editor
46 | # If you did not login yet
47 | contentful login
48 | # Tell contentful to use your main space (alternatively use the --space-id flag in the folllowing commands)
49 | contentful space use
50 | # create an extension
51 | contentful extension create
52 | ```
53 | 
54 | ## Updating the extension
55 | If you want to install a new update of this extension, you need to download the latest version to your computer and run the following commands:
56 | 
57 | ```bash
58 | # cd into the folder of this extension
59 | cd your/folder/contentful-key-value-editor
60 | # update the extension
61 | contentful extension update
62 | ```
63 | 
64 | [example]: example.png
65 | [configuration]: configuration.png
66 | 


--------------------------------------------------------------------------------
/configuration.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lukasoppermann/contentful-key-value-editor/310abc7713917a870c34c1c0fbcbd693881766a7/configuration.png


--------------------------------------------------------------------------------
/example.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lukasoppermann/contentful-key-value-editor/310abc7713917a870c34c1c0fbcbd693881766a7/example.png


--------------------------------------------------------------------------------
/extension.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "id": "keyValueEditor",
 3 |   "name": "Key Value Editor",
 4 |   "srcdoc": "./index.html",
 5 |   "fieldTypes": ["Object"],
 6 |   "parameters": {
 7 |     "instance": [
 8 |       {
 9 |         "id": "keys",
10 |         "name": "Predefined values for key",
11 |         "description": "Leave empty for free input. A comma separated list will be turned into a dropdown. Use 'Label:value' to define a seperate label.",
12 |         "type": "Symbol",
13 |         "default": ""
14 |       },
15 |       {
16 |         "id": "optionalParameter",
17 |         "type": "Symbol",
18 |         "name": "Optional parameter",
19 |         "description": "Comma separated list of items for optional dropdown. Use 'Label:value' to define a seperate label.",
20 |         "default": ""
21 |      }
22 |     ]
23 |   }
24 | }
25 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 |   <head>
  4 |     <title>Key Value Editor Widget</title>
  5 |     <script src="https://unpkg.com/contentful-ui-extensions-sdk@3/dist/cf-extension-api.js"></script>
  6 |     <link rel="stylesheet" href="https://unpkg.com/contentful-ui-extensions-sdk@3/dist/cf-extension.css" />
  7 |     <style media="screen">
  8 |       body{
  9 |         margin: 0;
 10 |       }
 11 |       .item{
 12 |         width: 100%;
 13 |         display: flex;
 14 |       }
 15 |       .data--key{
 16 |         flex: 1;
 17 |       }
 18 |       .data--value{
 19 |         margin-left: 10px;
 20 |         flex: 3;
 21 |       }
 22 |       .data--optionalParameter {
 23 |         flex: 1;
 24 |       }
 25 |       .delete-button{
 26 |         border: none;
 27 |         background: transparent;
 28 |         padding: 0 20px;
 29 |         border-radius: 2px;
 30 |         color: rgba(0,0,0,.6);
 31 |         cursor: pointer;
 32 |         transition: all .35s ease;
 33 |       }
 34 |       .delete-button cf-icon{
 35 |         pointer-events: none;
 36 |       }
 37 |       .delete-button:hover{
 38 |         color: rgba(0,0,0,.8);
 39 |         background: rgba(0,0,0,.1);
 40 |       }
 41 |     </style>
 42 |   </head>
 43 |   <body>
 44 |     <!-- TEMPLATE -->
 45 |     <template id="select">
 46 |       <select class="cf-form-input">
 47 |       </select>
 48 |     </template>
 49 | 
 50 |     <template id="item">
 51 |       <div class="item cf-form-field">
 52 |         <input type="text" placeholder="Key" class="cf-form-input input data--key"/>
 53 |         <input type="text" placeholder="Value" class="cf-form-input input data--value"/>
 54 |         <div id="optionalParameter"></div>
 55 |         <button data-purpose="delete" class="delete-button">
 56 |           <cf-icon name="delete">
 57 |             <svg width="14" height="14" viewBox="-1 -1 16 16" xmlns="http://www.w3.org/2000/svg"><g fill="currentColor"><path d="M4.846 7l-3.77-3.77L0 2.155 2.154 0 3.23 1.077 7 4.847l3.77-3.77L11.845 0 14 2.154 12.923 3.23 9.153 7l3.77 3.77L14 11.845 11.846 14l-1.077-1.077L7 9.153l-3.77 3.77L2.155 14 0 11.846l1.077-1.077z"></path></g></svg>
 58 |           </cf-icon>
 59 |         </button>
 60 |       </div>
 61 |     </template>
 62 |     <!-- TEMPLATE -->
 63 |     <!-- WIDGET -->
 64 |     <div class="items">
 65 |     </div>
 66 |     <button class="cf-btn-secondary" data-purpose="add">Add Item</button>
 67 |     <!-- WIDGET -->
 68 |     <script type="text/javascript">
 69 |       // elements
 70 |       let items = document.querySelector('.items')
 71 |       // add items
 72 |       let createItem = (template, parameters, values) => {
 73 |         values = values || {
 74 |           key: '',
 75 |           value: '',
 76 |           optionalParameter: ''
 77 |         }
 78 |         // clone template
 79 |         let clone = document.importNode(template.content, true)
 80 |         // value input
 81 |         let valueInput = clone.querySelector(".data--value")
 82 |         valueInput.value = values.value
 83 |         // key input or select
 84 |         let keyInput = clone.querySelector(".data--key")
 85 |         if (parameters.keys.length === 0) {
 86 |           keyInput.value = values.key
 87 |         } else {
 88 |           keyInput.parentNode.replaceChild(createDropdown('key', parameters.keys, values.key), keyInput)
 89 |         }
 90 |         // add type Select
 91 |         let optionalParameterDropdown = createDropdown('optionalParameter', parameters.optionalParameter, values.optionalParameter)
 92 |         if (optionalParameterDropdown !== null) {
 93 |           let optionalParameter = clone.querySelector('#optionalParameter')
 94 |           optionalParameter.parentNode.replaceChild(optionalParameterDropdown, optionalParameter)
 95 |         }
 96 |         // return item
 97 |         return clone
 98 |       }
 99 | 
100 |       let createDropdown = (name, data, selectedValue) => {
101 |         // abort if no data
102 |         if (data.length === 0) {
103 |           return null
104 |         }
105 |         // add select option
106 |         // get select html
107 |         let template = document.querySelector('#select')
108 |         let selectFragment = document.importNode(template.content, true)
109 |         let select = selectFragment.querySelector('select')
110 |         // add content
111 |         select.classList.add(`data--${name}`)
112 |         let options = data.map(option => {
113 |           let selected = ""
114 |           if (option.value === selectedValue) {
115 |             selected = ` selected="selected"`
116 |           }
117 |           return `<option value="${option.value}"${selected}>${option.label}</option>`
118 |         })
119 |         options.unshift(`<option value="">-- Select --</option>`)
120 | 
121 |         select.innerHTML = options.join('')
122 | 
123 |         return select
124 |       }
125 | 
126 |       let addItem = (container, extension, parameters, values) => {
127 |         // get item template
128 |         let template = document.querySelector('#item')
129 |         // add item to items
130 |         container.appendChild(createItem(template, parameters, values))
131 |         // update height
132 |         extension.window.updateHeight()
133 |       }
134 | 
135 |       let removeItem = (item, extension) => {
136 |         if (!item.classList.contains("item")) {
137 |           item = item.closest(".item")
138 |         }
139 |         item.remove()
140 |         extension.window.updateHeight()
141 |       }
142 | 
143 |       // http://davidwalsh.name/javascript-debounce-function
144 |       let debounce = (func, wait) => {
145 |           var timeout;
146 |           return function () {
147 |               var context = this, args = arguments;
148 |               var later = function () {
149 |                   timeout = null;
150 |                   func.apply(context, args);
151 |               };
152 |               clearTimeout(timeout);
153 |               timeout = setTimeout(later, wait);
154 |               if (!timeout) func.apply(context, args);
155 |           };
156 |       }
157 |       let validateAndSave = (items, extension) => {
158 |         // get json
159 |         let json = Array.from(items.querySelectorAll('.item')).map(item => {
160 |           let optionalParameter = item.querySelector('.data--optionalParameter')
161 |           if (optionalParameter !== null) {
162 |             optionalParameter = optionalParameter.value || null
163 |           }
164 | 
165 |           return {
166 |             key: item.querySelector('.data--key').value || null,
167 |             value: item.querySelector('.data--value').value || null,
168 |             optionalParameter: optionalParameter
169 |           }
170 |         }).filter((item) => item.key !== '' && item.key !== null && item.value !== '' && item.value !== null)
171 |         extension.field.setValue(json)
172 |       }
173 | 
174 |       let debouncedValidateAndSave = (items, extension) => debounce(validateAndSave(items, extension), 150)
175 | 
176 |       let csvToArray = (csv) => {
177 |         return csv.split(",").filter((item) => item !== "").map(item => {
178 |           [label, value] = item.split(":")
179 |           return {
180 |             label: label.trim(),
181 |             value: (value || label).trim()
182 |           }
183 |         })
184 |       }
185 |       // extension
186 |       let initContentfulKeyValueEditor = extension => {
187 |         let parameters = {
188 |           keys: csvToArray(extension.parameters.instance.keys),
189 |           optionalParameter: csvToArray(extension.parameters.instance.optionalParameter)
190 |         }
191 |         // start autoresiser
192 |         extension.window.startAutoResizer();
193 |         // add initial item
194 |         let fields = extension.field.getValue() || []
195 |         fields.forEach( values => {
196 |           addItem(items, extension, parameters, values)
197 |         })
198 |         // add initial empty field to the end
199 |         addItem(items, extension, parameters)
200 |         // on keyup
201 |         items.addEventListener('keyup', () => {
202 |           debouncedValidateAndSave(items, extension)
203 |         }, true)
204 |         // on change
205 |         items.addEventListener('change', () => {
206 |           debouncedValidateAndSave(items, extension)
207 |         }, true)
208 |         // delete items on x click
209 |         items.addEventListener('click', (e) => {
210 |           if (e.target.getAttribute('data-purpose') === 'delete') {
211 |             removeItem(e.target, extension)
212 |             debouncedValidateAndSave(items, extension)
213 |             // add item if otherwise no item exists
214 |             if (items.querySelectorAll('.item').length === 0) {
215 |               addItem(items, extension, parameters)
216 |             }
217 |           }
218 |         })
219 |         // add item on add button click
220 |         document.querySelector('[data-purpose=add]').addEventListener('click', () => {
221 |           addItem(items, extension, parameters)
222 |         })
223 |       }
224 |       // init extension
225 |       (window.contentfulExtension || window.contentfulWidget).init(initContentfulKeyValueEditor)
226 |     </script>
227 | 
228 |   </body>
229 | </html>
230 | 


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