├── .eslintignore
├── .npmignore
├── .gitignore
├── src
    ├── index.js
    ├── lib
    │   ├── util.js
    │   └── mount.js
    └── components
    │   ├── forms
    │       ├── index.js
    │       ├── Locale.vue
    │       ├── Type.vue
    │       ├── PlainText.vue
    │       └── Redactor.vue
    │   ├── Editor.vue
    │   ├── ContentBlocks.vue
    │   └── ContentBlock.vue
├── CONTRIBUTING.md
├── .babelrc
├── .eslintrc
├── .travis.yml
├── webpack.base.js
├── webpack.dist.js
├── CHANGELOG.md
├── LICENSE.md
├── package.json
└── README.md


/.eslintignore:
--------------------------------------------------------------------------------
1 | lib
2 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | .idea
2 | example
3 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | dist
2 | node_modules
3 | npm-debug.log
4 | yarn.lock
5 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | export { default as mount } from './lib/mount';
2 | 


--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | # Contributing
2 | 
3 | Since this is an internal project, we don't accept pull requests at this time.
4 | 


--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": [
3 |       "es2015"
4 |   ],
5 |   "plugins": [
6 |       "transform-object-rest-spread"
7 |   ]
8 | }
9 | 


--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 |     "extends": "spatie/vue",
3 |     "env": {
4 |         "browser": true,
5 |         "node": true
6 |     }
7 | }
8 | 


--------------------------------------------------------------------------------
/src/lib/util.js:
--------------------------------------------------------------------------------
1 | export function box(v) {
2 |     return {
3 |         map: f => box(f(v)),
4 |         fold: f => (f === undefined) ? v : f(v),
5 |     };
6 | }


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
 1 | language: node_js
 2 | 
 3 | node_js:
 4 |   - stable
 5 | 
 6 | install:
 7 |   - npm install -g yarn
 8 |   - yarn install
 9 | 
10 | script:
11 |  - npm test
12 | 


--------------------------------------------------------------------------------
/src/components/forms/index.js:
--------------------------------------------------------------------------------
1 | export { default as Locale } from './Locale';
2 | export { default as BlenderMedia } from '@spatie/blender-media';
3 | export { default as PlainText } from './PlainText';
4 | export { default as Redactor } from './Redactor';
5 | export { default as Type } from './Type';
6 | 


--------------------------------------------------------------------------------
/src/components/forms/Locale.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <fieldset>
 3 |         <legend>
 4 |             <div class="legend_lang">{{ locale }}</div>
 5 |         </legend>
 6 |         <slot></slot>
 7 |     </fieldset>
 8 | </template>
 9 | 
10 | <script>
11 | export default  {
12 | 
13 |     props: {
14 |         locale: {
15 |             type: String,
16 |             required: true,
17 |         },
18 |     },
19 | };
20 | </script>
21 | 


--------------------------------------------------------------------------------
/webpack.base.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |     module: {
 3 |         loaders: [
 4 |             {
 5 |                 test: /\.vue$/,
 6 |                 loaders: ['vue'],
 7 |             },
 8 |             {
 9 |                 test: /\.js/,
10 |                 loaders: ['babel'],
11 |                 exclude: ['node_modules'],
12 |             },
13 |         ],
14 |     },
15 |     resolve: {
16 |         extensions: ['.js', '.vue'],
17 |     },
18 | };
19 | 


--------------------------------------------------------------------------------
/src/lib/mount.js:
--------------------------------------------------------------------------------
 1 | import ContentBlocks from '../components/ContentBlocks';
 2 | import { isString } from 'lodash';
 3 | import { props, queryAll } from 'spatie-dom';
 4 | import Vue from 'vue';
 5 | 
 6 | export default function mount(el) {
 7 |     if (isString(el)) {
 8 |         return queryAll(el).map(el => mount(el));
 9 |     }
10 | 
11 |     return new Vue({
12 |         el,
13 |         render(createElement) {
14 |             return createElement(ContentBlocks, { props: props(el) });
15 |         },
16 |     });
17 | }
18 | 


--------------------------------------------------------------------------------
/src/components/forms/Type.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div>
 3 |         <select
 4 |             :value="value" 
 5 |             @change="$emit('input', $event.target.value)"
 6 |         >
 7 |             <option
 8 |                 v-for="(label, value) in options"
 9 |                 :value="value"
10 |             >
11 |                 {{ label }}
12 |             </option>
13 |         </select>
14 |     </div>
15 | </template>
16 | 
17 | <script>
18 | export default {
19 | 
20 |     props: ['value', 'options'],
21 | };
22 | </script>


--------------------------------------------------------------------------------
/webpack.dist.js:
--------------------------------------------------------------------------------
 1 | const path = require('path');
 2 | const config = Object.assign({}, require('./webpack.base'));
 3 | 
 4 | config.context = __dirname;
 5 | 
 6 | config.entry = './src/index.js';
 7 | 
 8 | config.output = {
 9 |     path: path.resolve(__dirname, 'dist'),
10 |     filename: 'index.js',
11 |     library: 'blender-content-blocks',
12 |     libraryTarget: 'umd',
13 | };
14 | 
15 | config.externals = {
16 |     'vue': 'vue',
17 |     'lodash': 'lodash',
18 |     'spatie-dom': 'spatie-dom',
19 |     '@spatie/blender-media': '@spatie/blender-media',
20 | };
21 | 
22 | module.exports = config;
23 | 


--------------------------------------------------------------------------------
/src/components/forms/PlainText.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="form__group">
 3 |         <label>
 4 |             {{ label }}
 5 |         </label>
 6 |         <input
 7 |             type="text"
 8 |             :value="value"
 9 |             @input="$emit('input', $event.target.value)"
10 |         >
11 |     </div>
12 | </template>
13 | 
14 | <script>
15 | export default {
16 | 
17 |     props: {
18 |         value: {
19 |             type: String,
20 |             required: true,
21 |         },
22 |         label: {
23 |             type: String,
24 |             required: true,
25 |         },
26 |     },
27 | };
28 | </script>
29 | 


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
 1 | # Changelog
 2 | 
 3 | All Notable changes to `blender-content-blocks` will be documented in this file.
 4 | 
 5 | ## 2.0.2 - 2017-09-19
 6 | - Changed: English labels
 7 | 
 8 | ## 2.0.1 - 2017-09-19
 9 | - Updated: compatibility with Redactor II 2.10
10 | 
11 | ## 1.1.1 - 2017-08-22
12 | - Fixed: Button clicks weren't always prevented
13 | 
14 | ## 1.1.0 - 2017-05-21
15 | - Added: Allow custom types, translated attributes and media collections via `data`
16 | - Fixed: Removed broken hash links
17 | 
18 | ## 1.0.5 - 2017-03-28
19 | - Fixed: Look for `types` in `data` in the content block component
20 | 
21 | ## 1.0.4 - 2017-03-28
22 | - Fixed: Change `blender-media` dependency to `@spatie/blender-media`
23 | 
24 | ## 1.0.3 - 2017-03-28
25 | - Added: Look for `types` in `data` in the editor mixin
26 | 
27 | ## 1.0.0 - 2017-01-10
28 | - First release
29 | 


--------------------------------------------------------------------------------
/src/components/forms/Redactor.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="form__group">
 3 |         <label>
 4 |             {{ label }}
 5 |         </label>
 6 |         <textarea
 7 |             :value="value"
 8 |             ref="textarea"
 9 |         ></textarea>
10 |     </div>
11 | </template>
12 | 
13 | <script>
14 | export default {
15 | 
16 |     props: {
17 |         value: {
18 |             type: String,
19 |             required: true,
20 |         },
21 |         label: {
22 |             type: String,
23 |             required: true,
24 |         },
25 |         settings: {
26 |             type: Object,
27 |             default: () => ({}),
28 |         },
29 |     },
30 | 
31 |     mounted() {
32 |         const settings = { ...this.settings };
33 | 
34 |         const $textarea = $(this.$refs.textarea);
35 |         const emitInput = () => this.$emit('input', $textarea.val());
36 | 
37 |         $textarea.redactor(settings);
38 | 
39 |         $textarea.on('change.callback.redactor', () => {
40 |             emitInput();
41 |         });
42 |     },
43 | };
44 | </script>
45 | 


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
 1 | # The MIT License (MIT)
 2 | 
 3 | Copyright (c) Spatie bvba <info@spatie.be>
 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
13 | > all 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
21 | > THE SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "@spatie/blender-content-blocks",
 3 |   "version": "2.0.2",
 4 |   "description": "Blender content blocks component",
 5 |   "main": "dist/index.js",
 6 |   "scripts": {
 7 |     "build": "rm -rf dist && NODE_ENV=production webpack --config webpack.dist.js",
 8 |     "lint": "eslint src --ext .js --ext .vue --fix; exit 0",
 9 |     "prepublish": "npm run test; npm run build",
10 |     "test": "exit 0"
11 |   },
12 |   "repository": {
13 |     "type": "git",
14 |     "url": "https://github.com/spatie-custom/blender-content-blocks.git"
15 |   },
16 |   "keywords": [
17 |     "spatie",
18 |     "blender",
19 |     "javascript",
20 |     "vue"
21 |   ],
22 |   "author": "Sebastian De Deyne",
23 |   "license": "MIT",
24 |   "bugs": {
25 |     "url": "https://github.com/spatie-custom/blender-content-blocks/issues"
26 |   },
27 |   "homepage": "https://github.com/spatie-custom/blender-content-blocks",
28 |   "dependencies": {
29 |     "axios": "^0.15.3",
30 |     "babel-core": "^6.18.2",
31 |     "dragula": "^3.7.1",
32 |     "dragula-constrain": "^1.0.0",
33 |     "dropzone": "^4.3.0",
34 |     "font-awesome-filetypes": "^1.0.1"
35 |   },
36 |   "peerDependencies": {
37 |     "lodash": "^4.0.0",
38 |     "spatie-dom": "^1.0.0",
39 |     "vue": "^2.0.0"
40 |   },
41 |   "devDependencies": {
42 |     "babel-loader": "^6.2.5",
43 |     "babel-plugin-transform-object-rest-spread": "^6.8.0",
44 |     "babel-preset-es2015": "^6.14.0",
45 |     "css-loader": "^0.25.0",
46 |     "eslint": "^3.0.0",
47 |     "eslint-config-spatie": "^1.2.5",
48 |     "eslint-plugin-html": "^1.5.3",
49 |     "eslint-plugin-vue": "^0.1.1",
50 |     "lodash": "^4.0.0",
51 |     "spatie-dom": "^1.0.0",
52 |     "vue": "^2.0.0",
53 |     "vue-loader": "^9.0.3",
54 |     "webpack": "2.1.0-beta.25"
55 |   }
56 | }
57 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Blender Media
 2 | 
 3 | [![Software License](https://img.shields.io/badge/license-MIT-brightgreen.svg?style=flat-square)](LICENSE.md)
 4 | [![Build Status](https://img.shields.io/travis/spatie-custom/blender-content-blocks.svg?style=flat-square)](https://travis-ci.org/spatie-custom/blender-content-blocks)
 5 | 
 6 | Content blocks component for [Blender](https://github.com/spatie-custom/blender), our CMS.
 7 | 
 8 | ## Support us
 9 | 
10 | Learn how to create a package like this one, by watching our premium video course:
11 | 
12 | [![Laravel Package training](https://spatie.be/github/package-training.jpg)](https://laravelpackage.training)
13 | 
14 | We invest a lot of resources into creating [best in class open source packages](https://spatie.be/open-source). You can support us by [buying one of our paid products](https://spatie.be/open-source/support-us).
15 | 
16 | We highly appreciate you sending us a postcard from your hometown, mentioning which of our package(s) you are using. You'll find our address on [our contact page](https://spatie.be/about-us). We publish all received postcards on [our virtual postcard wall](https://spatie.be/open-source/postcards).
17 | 
18 | ## Installation
19 | 
20 | The `blender-content-blocks` can be installed from npm.
21 | 
22 | ```bash
23 | yarn add @spatie/blender-content-blocks
24 | ```
25 | 
26 | `blender-content-blocks` also requires you to install `vue@'^2.0.0'`, `lodash@'^4.0.0'`, and `spatie-dom@'^1.0.0'`:
27 | 
28 | ```bash
29 | yarn add vue@'^2.0.0' lodash@'^4.0.0' spatie-dom@'^1.0.0'
30 | ```
31 | 
32 | ## Usage
33 | 
34 | The canonical way to use `blender-content-blocks`, is to mount it on a selector. The `mount` function will replace every element that matches a given selector with a `blender-content-blocks` component. The element should contain props just like you'd pass them with Vue.
35 | 
36 | ```js
37 | import { mount } from '@spatie/blender-content-blocks';
38 | 
39 | export default function init() {
40 |     mount('content-blocks');
41 | }
42 | ```
43 | 
44 | ```html
45 | <content-blocks
46 |     collection="default"
47 |     editor="default"
48 |     create-url="/create"
49 |     :model="{ name: 'MyModel', id: 1 }"
50 |     :input="[]"
51 |     :data="{
52 |         locales: ['nl', 'en'],
53 |         contentLocale: 'nl',
54 |         mediaModel: 'App\Models\ContentBlock',
55 |         mediaUploadUrl: '/upload'
56 |     }"
57 |     :debug="false"
58 | ></content-blocks>
59 | ```
60 | 
61 | ### Custom Fields
62 | 
63 | Custom fields can be defined by passing `types`, `translatableAttributes` or `mediaLibraryCollections` to `data`. Here are the default values as a quick reference:
64 | 
65 | ```js
66 | {
67 |     types: {
68 |         imageLeft: 'Afbeelding links',
69 |         imageRight: 'Afbeelding rechts',
70 |     },
71 |     translatableAttributes: {
72 |         name: 'text',
73 |         text: 'redactor',
74 |     },
75 |     mediaLibraryCollections: {
76 |         image: 'image',
77 |     },
78 | }
79 | ```
80 | 
81 | ## Contributing
82 | 
83 | Since this is an internal project, we don't accept pull requests at this time.
84 | 
85 | ## License
86 | 
87 | The MIT License (MIT). Please see [License File](LICENSE.md) for more information.
88 | 
89 | Example images provided by [Unsplash](https://unsplash.com).
90 | 


--------------------------------------------------------------------------------
/src/components/Editor.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="module__editor>">
  3 |         <div class="module__editor__column -stacked">
  4 |             <label>Type</label>
  5 |             <type
  6 |                 v-model="block.type"
  7 |                 :options="types"
  8 |             ></type>
  9 |             <locale
 10 |                 v-for="locale in locales"
 11 |                 :locale="locale"
 12 |             >
 13 |                 <div v-for="(type, field) in translatableAttributes">
 14 |                     <div
 15 |                         :is="getFieldType(type)"
 16 |                         :label="labels[field]"
 17 |                         :value="getTranslation(field, locale)"
 18 |                         @input="setTranslation(field, locale, $event)"
 19 |                     ></div>
 20 |                 </div>
 21 |             </locale>
 22 |             <div
 23 |                 v-for="(type, collection) in mediaLibraryCollections"
 24 |                 class="form__group"
 25 |             >
 26 |                 <label>{{ labels[collection] }}</label>
 27 |                 <blender-media
 28 |                     :type="type"
 29 |                     :collection="collection"
 30 |                     :uploadUrl="data.mediaUploadUrl"
 31 |                     :model="{ name: data.mediaModel, id: block.id }"
 32 |                     :value="block[collection]"
 33 |                     @input="block[collection] = $event"
 34 |                 ></blender-media>
 35 |             </div>
 36 |         </div>
 37 |     </div>
 38 | </template>
 39 | 
 40 | <script>
 41 | import { Locale, PlainText, BlenderMedia, Redactor, Type } from './forms';
 42 | 
 43 | export default {
 44 | 
 45 |     props: ['block', 'data'],
 46 | 
 47 |     components: {
 48 |         BlenderMedia,
 49 |         Locale,
 50 |         PlainText,
 51 |         Redactor,
 52 |         Type,
 53 |     },
 54 | 
 55 |     types: {
 56 |         imageLeft: 'Afbeelding links',
 57 |         imageRight: 'Afbeelding rechts',
 58 |     },
 59 | 
 60 |     translatableAttributes: {
 61 |         name: 'text',
 62 |         text: 'redactor',
 63 |     },
 64 | 
 65 |     mediaLibraryCollections: {
 66 |         image: 'image',
 67 |     },
 68 | 
 69 |     labels: {
 70 |         name: 'Titel',
 71 |         text: 'Tekst',
 72 |         image: 'Afbeelding',
 73 |     },
 74 | 
 75 |     computed: {
 76 |         types() {
 77 |             return this.data.types || this.$options.types;
 78 |         },
 79 | 
 80 |         translatableAttributes() {
 81 |             return this.data.translatableAttributes || this.$options.translatableAttributes;
 82 |         },
 83 | 
 84 |         mediaLibraryCollections() {
 85 |             return this.data.mediaLibraryCollections || this.$options.mediaLibraryCollections;
 86 |         },
 87 | 
 88 |         labels() {
 89 |             return { ...this.$options.labels, ...(this.data.labels || {}) };
 90 |         },
 91 | 
 92 |         locales() {
 93 |             return this.data.locales;
 94 |         },
 95 |     },
 96 | 
 97 |     created() {
 98 |         this.ensureTranslatableAttributesExist();
 99 |         this.ensureMediaLibraryCollectionsExist();
100 |     },
101 | 
102 |     methods: {
103 |         getFieldType(type) {
104 |             switch (type) {
105 |                 case 'redactor':
106 |                     return 'redactor';
107 |                 case 'text':
108 |                 default:
109 |                     return 'plain-text';
110 |             }
111 |         },
112 | 
113 |         getTranslation(key, locale) {
114 |             return this.block[key][locale];
115 |         },
116 | 
117 |         setTranslation(key, locale, value) {
118 |             this.$set(this.block[key], locale, value);
119 |         },
120 | 
121 |         ensureTranslatableAttributesExist() {
122 |             for (let attribute in this.translatableAttributes) {
123 |                 if (! this.block.hasOwnProperty(attribute)) {
124 |                     this.$set(this.block, attribute, this.createTranslatableBlueprint());
125 |                 }
126 |             }
127 |         },
128 | 
129 |         ensureMediaLibraryCollectionsExist() {
130 |             for (let collection in this.mediaLibraryCollections) {
131 |                 if (! this.block.hasOwnProperty(collection)) {
132 |                     this.block[collection] = [];
133 |                 }
134 |             }
135 |         },
136 | 
137 |         createTranslatableBlueprint() {
138 |             return this.locales.reduce(
139 |                 (acc, locale) => (acc[locale] = '', acc), {}
140 |             );
141 |         },
142 |     },
143 | };
144 | </script>
145 | 


--------------------------------------------------------------------------------
/src/components/ContentBlocks.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="module">
  3 |         <table ref="table" class="module__table">
  4 |             <tr
  5 |                 v-for="block in orderedBlocks"
  6 |                 is="content-block"
  7 |                 :block="block"
  8 |                 :data="data"
  9 |                 :is-open="isOpen(block)"
 10 |                 @open="open"
 11 |                 @close="close"
 12 |                 :data-block-id="block.id"
 13 |                 class="js-content-blocks-row module__row"
 14 |             ></tr>
 15 |         </table>
 16 |         <div class="module__actions">
 17 |             <button class="module__button" @click.prevent="createBlock">
 18 |                 Add block
 19 |             </button>
 20 |             <button class="module__button--debug"
 21 |                 v-if="debug"
 22 |                 href="#"
 23 |                 @click.prevent="sendExportToConsole"
 24 |             >
 25 |                 Debug
 26 |             </button>
 27 |         </div>
 28 |         <textarea
 29 |             :name="'content_blocks_' + collection"
 30 |             :value="exportable"
 31 |             style="display: none"
 32 |         ></textarea>
 33 |     </div>
 34 | </template>
 35 | 
 36 | <script>
 37 | import axios from 'axios';
 38 | import ContentBlock from './ContentBlock';
 39 | import { matches, queryAll } from 'spatie-dom';
 40 | import { find, sortBy } from 'lodash';
 41 | import { box } from '../lib/util';
 42 | import dragula from 'dragula';
 43 | import constrain from 'dragula-constrain';
 44 | 
 45 | export default {
 46 | 
 47 |     props: {
 48 |         collection: {
 49 |             required: true,
 50 |             type: String,
 51 |         },
 52 |         createUrl: {
 53 |             required: true,
 54 |             type: String,
 55 |         },
 56 |         model: {
 57 |             required: true,
 58 |             type: Object,
 59 |         },
 60 |         data: {
 61 |             required: true,
 62 |             type: Object,
 63 |         },
 64 |         input: {
 65 |             required: true,
 66 |             type: Array,
 67 |         },
 68 |         debug: {
 69 |             default: false,
 70 |             type: Boolean,
 71 |         },
 72 |     },
 73 | 
 74 |     data() {
 75 |         return {
 76 |             blocks: this.input,
 77 |             currentlyEditingBlock: null,
 78 |         };
 79 |     },
 80 | 
 81 |     components: {
 82 |         ContentBlock,
 83 |     },
 84 | 
 85 |     mounted() {
 86 |         this.sortable = dragula([this.$refs.table], {
 87 |             moves(element, container, handleElement) {
 88 |                 return matches(handleElement, '.js-handle');
 89 |             },
 90 |         });
 91 | 
 92 |         constrain(this.sortable);
 93 | 
 94 |         this.sortable.on('drop', function () {
 95 |             this.setOrder(this.getOrderFromDOM());
 96 |             this.sortable.cancel(true);
 97 |         }.bind(this));
 98 | 
 99 |         this.setOrder(this.getOrderFromDOM());
100 |     },
101 | 
102 |     beforeDestroy() {
103 |         this.sortable.destroy();
104 |     },
105 | 
106 |     computed: {
107 |         orderedBlocks() {
108 |             return sortBy(this.blocks, 'orderColumn');
109 |         },
110 | 
111 |         exportable() {
112 |             return box(this.blocks)
113 |                 .map(blocks => blocks.filter(b => b.markedForRemoval !== true))
114 |                 .map(blocks => sortBy(blocks, 'orderColumn'))
115 |                 .map(blocks => JSON.stringify(blocks))
116 |                 .fold();
117 |         },
118 |     },
119 | 
120 |     methods: {
121 |         isOpen({ id }) {
122 |             return this.currentlyEditingBlock === id;
123 |         },
124 | 
125 |         open({ id }) {
126 |             if (this.isOpen(id)) {
127 |                 return;
128 |             }
129 | 
130 |             this.currentlyEditingBlock = id;
131 |         },
132 | 
133 |         close({ id }) {
134 |             if (! this.isOpen({ id })) {
135 |                 return;
136 |             }
137 | 
138 |             this.currentlyEditingBlock = null;
139 |         },
140 | 
141 |         setOrder(order) {
142 |             order.forEach((id, order) => {
143 |                 find(this.blocks, { id }).orderColumn = order;
144 |             });
145 |         },
146 | 
147 |         getOrderFromDOM() {
148 |             return queryAll('.js-content-blocks-row', this.$el)
149 |                 .map(row => parseInt(row.dataset.blockId));
150 |         },
151 | 
152 |         createBlock() {
153 |             axios
154 |                 .post(this.createUrl, {
155 |                     model_name: this.model.name,
156 |                     model_id: this.model.id,
157 |                     collection_name: this.collection,
158 |                 })
159 |                 .then(({ data: block }) => this.blocks.push(block));
160 |         },
161 | 
162 |         sendExportToConsole() {
163 |             // eslint-disable-next-line no-console
164 |             console.log(window.__contentBlocks = JSON.parse(this.exportable));
165 |         },
166 |     },
167 | };
168 | </script>
169 | 


--------------------------------------------------------------------------------
/src/components/ContentBlock.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <tr v-if="isOpen" :id="domId">
  3 |         <td class="module__column--editor -active" colspan="4">
  4 |             <div class="module__column--editor__close">
  5 |                 <a
  6 |                     href="#"
  7 |                     @click.prevent="close"
  8 |                     class="module__column__icon"
  9 |                 >
 10 |                     <i class="fa fa-close"></i>
 11 |                 </a>
 12 |             </div>
 13 |             <h3>{{ name }}</h3>
 14 |             <editor
 15 |                 :block="block"
 16 |                 :data="data"
 17 |             ></editor>
 18 |         </td>
 19 |     </tr>
 20 |     <tr v-else :class="{ '-is-disabled': isMarkedForRemoval }" :id="domId">
 21 |         <td class="module__column--drag">
 22 |             <i
 23 |                 v-if="! isOpen && ! isMarkedForRemoval"
 24 |                 class="js-handle fa fa-arrows-v module__column--drag__icon"
 25 |             ></i>
 26 |         </td>
 27 |         <td class="module__column -stretch" @click="open">
 28 |             <a
 29 |                 v-if="! isMarkedForRemoval"
 30 |                 href="#"
 31 |                 @click.prevent="open"
 32 |                 class="js-open-content-block"
 33 |             >{{ name }}</a>
 34 |             <span v-else>
 35 |                 {{ name }}
 36 |             </span>
 37 |         </td>
 38 |         <td class="module__column -no-wrap">{{ type }}</td>
 39 |         <td  class="module__column--actions">
 40 |             <span v-if="! isOpen">
 41 |                 <a
 42 |                     v-if="isMarkedForRemoval"
 43 |                     href="#"
 44 |                     @click.prevent="restore"
 45 |                     class="module__column__icon -restore"
 46 |                 >
 47 |                     <i class="fa fa-undo"></i>
 48 |                 </a>
 49 |                 <a
 50 |                     v-else
 51 |                     href="#"
 52 |                     @click.prevent="markForRemoval"
 53 |                     class="module__column__icon -delete"
 54 |                 >
 55 |                     <i class="fa fa-trash"></i>
 56 |                 </a>
 57 |             </span>
 58 |         </td>
 59 |     </tr>
 60 | </template>
 61 | 
 62 | <script>
 63 | import { forEach, keys, pick } from 'lodash';
 64 | import Editor from './Editor';
 65 | import Vue from 'vue';
 66 | 
 67 | export default {
 68 | 
 69 |     props: {
 70 |         block: {
 71 |             required: true,
 72 |             type: Object,
 73 |         },
 74 |         data: {
 75 |             required: true,
 76 |             type: Object,
 77 |         },
 78 |         isOpen: {
 79 |             required: true,
 80 |             type: Boolean,
 81 |         },
 82 |     },
 83 | 
 84 |     components: {
 85 |         Editor,
 86 |     },
 87 | 
 88 |     created() {
 89 |         if (! this.editor.types) {
 90 |             throw new Error('Please provide a default set of types for the ' +
 91 |                 'content blocks editor instance.');
 92 |         }
 93 | 
 94 |         if (! this.editor.translatableAttributes) {
 95 |             throw new Error('Please provide a set of translatable attributes ' +
 96 |                 'for the content blocks editor instance.');
 97 |         }
 98 | 
 99 |         if (! this.editor.mediaLibraryCollections) {
100 |             throw new Error('Please provide a set of medialibrary collections ' +
101 |                 'for the content blocks editor instance.');
102 |         }
103 | 
104 |         this.ensureBlockHasValidType();
105 |     },
106 | 
107 |     computed: {
108 |         name() {
109 |             return this.block.name[this.data.contentLocale] || '[untitled]';
110 |         },
111 | 
112 |         type() {
113 |             return this.types[this.block.type];
114 |         },
115 | 
116 |         locales() {
117 |             return this.data.locales;
118 |         },
119 | 
120 |         isMarkedForRemoval() {
121 |             return this.block.markedForRemoval;
122 |         },
123 | 
124 |         editor() {
125 |             return Editor;
126 |         },
127 | 
128 |         types() {
129 |             return this.data.types || this.editor.types;
130 |         },
131 | 
132 |         domId() {
133 |             return 'content-blocks-' + this.block.collection + '-' + this.block.id;
134 |         },
135 |     },
136 | 
137 |     methods: {
138 |         open() {
139 |             this.$emit('open', { id: this.block.id });
140 |         },
141 | 
142 |         close() {
143 |             this.$emit('close', { id: this.block.id });
144 |         },
145 | 
146 |         markForRemoval() {
147 |             Vue.set(this.block, 'markedForRemoval', true);
148 |             this.close();
149 |         },
150 | 
151 |         restore() {
152 |             Vue.set(this.block, 'markedForRemoval', false);
153 |         },
154 | 
155 |         ensureBlockHasValidType() {
156 |             for (let type in this.types) {
157 |                 if (this.block.type === type) {
158 |                     return;
159 |                 }
160 |             }
161 | 
162 |             this.block.type = Object.keys(this.types)[0];
163 |         },
164 |     },
165 | };
166 | </script>
167 | 


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