NovaTrumbowyg v1

.gitignore

@@ -0,0 +1,11 @@
+/dist
+/.idea
+/vendor
+/node_modules
+package-lock.json
+composer.phar
+composer.lock
+phpunit.xml
+.phpunit.result.cache
+.DS_Store
+Thumbs.db

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018 Alfonso Bribiesca
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,30 @@
+# Nova Trumbowyg editor field
+Laravel Nova Trumbowyg Editor field.
+
+## Installation
+
+Just install the package in to a Laravel app that uses Nova via composer:
+
+```
+composer require alfonsobries/nova-trumbowyg
+```
+
+
+## Simple Usage:
+```php
+NovaTrumbowyg::make('Field Name')
+```
+
+## Advanced Usage:
+You can pass any existing Trumbowyg option. Consult the [Trumbowyg documentation](https://alex-d.github.io/Trumbowyg/documentation/#basic-options) to view the list of all the available options.
+
+```php
+NovaFroalaEditor::make('Description')
+    ->options(['btns' => [['bold', 'italic'], ['link']]])
+```
+
+## Screenshot
+![Froala editor](./docs/sh1.png)
+
+## License
+The MIT License (MIT). Please see [License File](LICENSE) for more information.

composer.json

@@ -0,0 +1,30 @@
+{
+    "name": "alfonsobries/nova-trumbowyg",
+    "description": "A Laravel Trumbowyg Nova field.",
+    "keywords": [
+        "laravel",
+        "nova",
+        "trumbowyg"
+    ],
+    "license": "MIT",
+    "require": {
+        "php": ">=7.1.0"
+    },
+    "autoload": {
+        "psr-4": {
+            "Alfonsobries\\NovaTrumbowyg\\": "src/"
+        }
+    },
+    "extra": {
+        "laravel": {
+            "providers": [
+                "Alfonsobries\\NovaTrumbowyg\\FieldServiceProvider"
+            ]
+        }
+    },
+    "config": {
+        "sort-packages": true
+    },
+    "minimum-stability": "dev",
+    "prefer-stable": true
+}

mix-manifest.json

@@ -0,0 +1,5 @@
+{
+    "/dist/js/field.js": "/dist/js/field.js",
+    "/dist/css/field.css": "/dist/css/field.css",
+    "/dist/img/icons.svg": "/dist/img/icons.svg"
+}

package.json

@@ -0,0 +1,21 @@
+{
+    "private": true,
+    "scripts": {
+        "dev": "npm run development",
+        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
+        "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
+        "watch-poll": "npm run watch -- --watch-poll",
+        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
+        "prod": "npm run production",
+        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
+    },
+    "devDependencies": {
+        "cross-env": "^5.0.0",
+        "laravel-mix": "^1.0",
+        "laravel-nova": "^1.0"
+    },
+    "dependencies": {
+        "vue": "^2.5.0",
+        "vue-trumbowyg": "^3.4.0"
+    }
+}

resources/js/components/DetailField.vue

@@ -0,0 +1,19 @@
+<template>
+    <panel-item :field="field">
+        <template slot="value">
+            <excerpt>
+            	<div v-html="field.value" />
+            </excerpt>
+        </template>
+    </panel-item>
+</template>
+
+<script>
+import Excerpt from './Excerpt.vue'
+
+export default {
+		components: { Excerpt },
+
+    props: ['resource', 'resourceName', 'resourceId', 'field'],
+}
+</script>

resources/js/components/Excerpt.vue

@@ -0,0 +1,33 @@
+<template>
+    <div>
+        <slot v-if="expanded" />
+
+        <a
+            @click="toggle"
+            class="cursor-pointer dim inline-block text-primary font-bold"
+            :class="{ 'mt-6': expanded }"
+            aria-role="button"
+        >
+            {{ showHideLabel }}
+        </a>
+    </div>
+</template>
+
+<script>
+export default {
+    
+    data: () => ({ expanded: false }),
+
+    methods: {
+        toggle() {
+            this.expanded = !this.expanded
+        },
+    },
+
+    computed: {
+        showHideLabel() {
+            return !this.expanded ? 'Show Content' : 'Hide Content'
+        },
+    },
+}
+</script>

resources/js/components/FormField.vue

@@ -0,0 +1,71 @@
+<template>
+    <default-field :field="field">
+        <template slot="field">
+            <trumbowyg
+                v-model="value"
+                :id="field.name"
+                :placeholder="field.name"
+                :config="config"
+                class="w-full form-control form-input form-input-bordered"
+            />
+
+            <p v-if="hasError" class="my-2 text-danger">
+                {{ firstError }}
+            </p>
+        </template>
+    </default-field>
+</template>
+
+<script>
+import { FormField, HandlesValidationErrors } from 'laravel-nova'
+
+// Import this component
+import Trumbowyg from 'vue-trumbowyg';
+
+// Import editor css
+import 'trumbowyg/dist/ui/trumbowyg.css';
+
+export default {
+    components: {
+      Trumbowyg
+    },
+
+    mixins: [FormField, HandlesValidationErrors],
+
+    props: ['resourceName', 'resourceId', 'field'],
+
+    computed: {
+      config() {
+        return {
+          ...this.field.options,
+          ...{
+            svgPath: '/nova-api/styles/nova-trumbowyg-icons'
+          } 
+        }
+      }   
+    },
+
+    methods: {
+        /*
+         * Set the initial, internal value for the field.
+         */
+        setInitialValue() {
+          this.value = this.field.value || ''
+        },
+
+        /**
+         * Fill the given FormData object with the field's internal value.
+         */
+        fill(formData) {
+          formData.append(this.field.attribute, this.value || '')
+        },
+
+        /**
+         * Update the field's internal value.
+         */
+        handleChange(value) {
+          this.value = value
+        }
+    }
+}
+</script>

resources/js/components/IndexField.vue

@@ -0,0 +1,23 @@
+<template>
+    <span>{{ cleanValue }}</span>
+</template>
+
+<script>
+export default {
+    props: ['resourceName', 'field'],
+
+    computed: {
+    	cleanValue () {
+    		return this._stripHTML(this.field.value)
+    	},
+    },
+
+    methods: {
+    	_stripHTML (html) {
+    		var tmp = document.createElement("DIV");
+   			tmp.innerHTML = html;
+   			return tmp.textContent || tmp.innerText || "";
+    	}
+    }
+}
+</script>

resources/js/field.js

@@ -0,0 +1,5 @@
+Nova.booting((Vue, router) => {
+    Vue.component('index-nova-trumbowyg', require('./components/IndexField'));
+    Vue.component('detail-nova-trumbowyg', require('./components/DetailField'));
+    Vue.component('form-nova-trumbowyg', require('./components/FormField'));
+})

resources/sass/field.scss

@@ -0,0 +1 @@
+// Nova Tool CSS

src/FieldServiceProvider.php

@@ -0,0 +1,34 @@
+<?php
+
+namespace Alfonsobries\NovaTrumbowyg;
+
+use Laravel\Nova\Nova;
+use Laravel\Nova\Events\ServingNova;
+use Illuminate\Support\ServiceProvider;
+
+class FieldServiceProvider extends ServiceProvider
+{
+    /**
+     * Bootstrap any application services.
+     *
+     * @return void
+     */
+    public function boot()
+    {
+        Nova::serving(function (ServingNova $event) {
+            Nova::script('nova-trumbowyg', __DIR__.'/../dist/js/field.js');
+            Nova::style('nova-trumbowyg-icons', __DIR__.'/../fonts/vendor/trumbowyg/dist/ui/icons.svg');
+            Nova::style('nova-trumbowyg', __DIR__.'/../dist/css/field.css');
+        });
+    }
+
+    /**
+     * Register any application services.
+     *
+     * @return void
+     */
+    public function register()
+    {
+        //
+    }
+}

src/NovaTrumbowyg.php

@@ -0,0 +1,48 @@
+<?php
+
+namespace Alfonsobries\NovaTrumbowyg;
+
+use Laravel\Nova\Fields\Field;
+
+class NovaTrumbowyg extends Field
+{
+    /**
+     * The field's component.
+     *
+     * @var string
+     */
+    public $component = 'nova-trumbowyg';
+
+    public function __construct(string $name, ?string $attribute = null, ?mixed $resolveCallback = null)
+    {
+        parent::__construct($name, $attribute, $resolveCallback);
+
+        $this->withMeta([
+            'options' => [
+                'btns' => [
+                    ['bold', 'italic'],
+                    ['unorderedList', 'orderedList'],
+                    ['justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull'],
+                    ['link', 'insertImage'],
+                ],
+            ]
+        ]);
+    }
+
+    /**
+     * Allow to pass any existing Trumbowyg option to the editor.
+     * Consult the Trumbowyg documentation [https://alex-d.github.io/Trumbowyg/documentation/#basic-options]
+     * to view the list of all the available options.
+     *
+     * @param  array  $options
+     * @return self
+     */
+    public function options(array $options)
+    {
+        $currentOptions = $this->meta['options'];
+
+        return $this->withMeta([
+            'options' => array_merge($currentOptions, $options)
+        ]);
+    }
+}

webpack.mix.js

@@ -0,0 +1,18 @@
+let webpack = require('webpack')
+let mix = require('laravel-mix')
+
+mix.js('resources/js/field.js', 'dist/js')
+   	.sass('resources/sass/field.scss', 'dist/css')
+   	.copy('node_modules/trumbowyg/dist/ui/icons.svg', 'dist/img')
+    .webpackConfig({
+        resolve: {
+            symlinks: false
+        },
+        plugins: [
+			    // Jquery loader plugin.
+			    new webpack.ProvidePlugin({
+			      $: "jquery",
+			      jQuery: "jquery"
+			    })
+			  ]
+    })