v3.0.1

...

Author: ctf0

README.md

@@ -9,21 +9,11 @@
     > - Menu Nested Set
     >   - https://github.com/gazsp/baum
 
-- Javascript
-    + [jQuery](https://jquery.com/) (cdn)
-    + [select2](https://select2.github.io/) (cdn)
-    + [tinymce](https://www.tinymce.com/) (cdn)
-    + [Vue](https://vuejs.org/)
-    + [vuedraggable](https://github.com/SortableJS/Vue.Draggable)
-    + [notification-component](https://github.com/ctf0/Notification-Component)
-
 ## Installation
 
 - `composer require ctf0/simple-menu`
 
-- add the service provider & facade to `config/app.php`
-
-    - all the package dependencies "serviceProvider & aliases" are registerd with the package.
+- (Laravel < 5.5) add the service provider & facade to `config/app.php`
 
 ```php
 'providers' => [
@@ -41,6 +31,14 @@
     - for simpleMenu [Wiki](https://github.com/ctf0/simple-menu/wiki/Publish)
     - also check the **Dependencies** packages for "configuration/options/migrations".
 
+- install JS dependencies
+
+```bash
+yarn add vue vuemit vuedraggable
+# or
+npm install vue vuemit vuedraggable
+```
+
 ## Config
 **config/simpleMenu.php**
 ```php

composer.json

@@ -21,7 +21,8 @@
         "gazsp/baum": "^1.1",
         "mcamara/laravel-localization": "^1.2",
         "spatie/laravel-permission": "^2.5",
-        "spatie/laravel-translatable": "^2.0"
+        "spatie/laravel-translatable": "^2.0",
+        "ctf0/package-changelog": "^1.0"
     },
     "autoload": {
         "psr-4": {
@@ -36,7 +37,8 @@
             "aliases": {
                 "SimpleMenu": "ctf0\\SimpleMenu\\Facade\\SimpleMenu"
             }
-        }
+        },
+        "changeLog": "logs"
     },
     "config": {
         "sort-packages": true

logs/v3.0.1.txt

@@ -0,0 +1,3 @@
+- update readme & wiki for better understanding
+- add notif component & styles
+- add changelog feature so now you can track what changes are made to the package

src/SimpleMenu.php

@@ -81,11 +81,10 @@ protected function createCaches()
      */
     protected static function create_LFD($dir)
     {
-        $file_name = substr(strrchr($dir, '/'), 1);
-        $dir_only  = str_replace($file_name, '', $dir);
+        $dir_name = dirname($dir);
 
-        if (!File::exists($dir_only)) {
-            return File::makeDirectory($dir_only, 0755, true);
+        if (!File::exists($dir_name)) {
+            return File::makeDirectory($dir_name, 0755, true);
         }
     }
 }

src/SimpleMenuServiceProvider.php

@@ -18,6 +18,7 @@ class SimpleMenuServiceProvider extends ServiceProvider
 {
     protected $packagesSP = [
         \Baum\Providers\BaumServiceProvider::class,
+        \ctf0\PackageChangeLog\PackageChangeLogServiceProvider::class,
     ];
 
     /**

src/resources/assets/js/bulma/notifs.vue

@@ -0,0 +1,211 @@
+<template>
+    <div>
+        <!-- single -->
+        <transition name="slide-fade" v-if="self_show">
+            <div :class="classObj(self_type)" class="item">
+
+                <button class="delete" @click="self_show = false"></button>
+                <div class="media">
+                    <div class="media-left" v-if="self_icon">
+                        <figure class="icon is-large">
+                            <i class="material-icons">{{ getIcon(self_type) }}</i>
+                        </figure>
+                    </div>
+                    <div class="media-content">
+                        <h4 class="title">
+                            <strong>{{ self_title }}</strong>
+                        </h4>
+                        <p class="subtitle">{{ self_body }}</p>
+                    </div>
+                </div>
+
+            </div>
+        </transition>
+
+        <!-- events -->
+        <template v-if="!self_title">
+            <span id="close_all" class="tag is-dark is-medium"
+                v-if="checkForGroup()" @click="closeAll()">
+                Close All
+                <button class="delete"></button>
+            </span>
+
+            <transition-group name="slide-fade" tag="ul">
+                <li v-for="(one,index) in notif_group" :key="index"
+                    class="item" :class="classObj(one.type)"
+                    v-if="IsVisible(index)">
+
+                    <button class="delete" @click="closeNotif(index)"></button>
+                    <div class="media">
+                        <div class="media-left" v-if="one.icon">
+                            <figure class="icon is-large">
+                                <i class="material-icons">{{ getIcon(one.type) }}</i>
+                            </figure>
+                        </div>
+                        <div class="media-content">
+                            <h4 class="title">
+                                <strong>{{ one.title }}</strong>
+                            </h4>
+                            <p class="subtitle">{{ one.body }}</p>
+                        </div>
+                    </div>
+
+                </li>
+            </transition-group>
+        </template>
+    </div>
+</template>
+
+<style scoped>
+    @import url(https://fonts.googleapis.com/icon?family=Material+Icons);
+
+    /*animation*/
+    .slide-fade-enter-active,
+    .slide-fade-leave-active {
+        transition: all 0.3s ease;
+    }
+    .slide-fade-enter,
+    .slide-fade-leave-to {
+        opacity: 0;
+        transform: translateX(10px);
+    }
+
+    /*notiifcation card*/
+    .item {
+        width: 330px;
+    }
+    .material-icons {
+        font-size: 3rem;
+    }
+    .media-left {
+        align-self: center;
+        position: relative;
+        margin-right: 1.25rem;
+    }
+
+    .has-shadow {
+        box-shadow: 0 2px 4px rgba(0,0,0,0.12), 0 0 6px rgba(0,0,0,0.04);
+    }
+    .notification {
+        padding: 1.25rem;
+        margin-bottom: 10px;
+    }
+
+    #close_all {
+        background-color: rgba(54, 54, 54, 0.9);
+        cursor: pointer;
+        position: fixed;
+        z-index: 1;
+        top: 1rem;
+        right: 1rem;
+    }
+    #close_all:hover{
+        background-color: rgb(54, 54, 54);
+    }
+</style>
+
+<script>
+export default {
+    props: {
+        title: '',
+        body: '',
+        icon: {
+            default: true
+        },
+        type: {default: 'info'},
+        duration: null
+    },
+
+    data() {
+        return {
+            notif_group: [],
+            self_title: this.title,
+            self_body: this.body,
+            self_type: this.type,
+            self_icon: Boolean(this.icon),
+            self_duration: this.duration,
+            self_show: false
+        }
+    },
+
+    created() {
+        this.checkProp()
+
+        EventHub.listen('showNotif', (data) => {
+            this.collectData(data)
+        })
+    },
+
+    methods: {
+        checkForGroup() {
+            return this.notif_group.length > 1 &&
+                    this.notif_group.filter((item) => item.show == true).length > 1
+        },
+        closeAll() {
+            this.notif_group.map((item) => {
+                item.show = false
+                item.duration = null
+            })
+        },
+        checkProp() {
+            if (this.self_title) {
+                this.self_show = true
+            }
+
+            if (this.self_duration !== undefined) {
+                setTimeout(() => {
+                    this.self_show = false
+                }, this.self_duration * 1000)
+            }
+        },
+        collectData(data) {
+            this.notif_group.push({
+                title: data.title,
+                body: data.body,
+                type: data.type,
+                icon: data.icon == null ? true : false,
+                duration: data.duration,
+                onClose: data.onClose,
+                show: true
+            })
+        },
+        IsVisible(index) {
+            let dur = this.notif_group[index].duration
+
+            if (dur !== undefined) {
+                setTimeout(() => {
+                    this.closeNotif(index)
+                }, dur * 1000)
+            }
+
+            return this.notif_group[index].show
+        },
+        closeNotif(index) {
+            this.notif_group[index].show = false
+
+            if (typeof this.notif_group[index].onClose != 'undefined' && typeof this.notif_group[index].onClose === 'function') {
+                this.notif_group[index].onClose()
+            }
+        },
+        classObj(type) {
+            return `notification has-shadow is-${type}`
+        },
+        getIcon(type) {
+            switch (type) {
+            case 'primary':
+                return 'track_changes'
+            case 'success':
+                return 'check_circle'
+            case 'info':
+                return 'live_help'
+            case 'warning':
+                return 'power_settings_new'
+            case 'danger':
+                return 'add_alert'
+            default:
+                return 'error'
+            }
+        }
+    }
+}
+</script>

src/resources/assets/js/comps.js

@@ -5,6 +5,9 @@ $.ajaxSetup({
     }
 })
 
+window.Vue = require('vue')
+
 Vue.component('PageComp', require('./' + process.env.MIX_SM_FRAMEWORK + '/page-comp.vue'))
 Vue.component('MenuComp', require('./' + process.env.MIX_SM_FRAMEWORK + '/menu-comp.vue'))
 Vue.component('IndexComp', require('./' + process.env.MIX_SM_FRAMEWORK + '/index-comp.vue'))
+Vue.component('MyNotification', require('./' + process.env.MIX_SM_FRAMEWORK + '/notifs.vue'))

src/resources/assets/sass/style.scss

@@ -1,3 +1,14 @@
+// notifications
+.notif-container {
+    padding: 0 0 4rem;
+    position: fixed;
+    top: 4rem;
+    right: 1rem;
+    bottom: 0;
+    z-index: 100;
+    overflow: scroll;
+}
+
 // select2
 .select2 {
     width: 100% !important;
@@ -14,12 +25,15 @@
     right: 0;
     z-index: 1;
     opacity: 0.3;
+
     &:hover {
         opacity: 1;
     }
+
     &:after {
         display: none !important;
     }
+
     select {
         padding: 0.40rem 0.5rem 0.5rem !important;
         font-weight: bold;
@@ -33,6 +47,7 @@
 .mce-path {
     display: none !important;
 }
+
 div.mce-edit-area {
     border-right-width: 1px !important;
 }
@@ -43,19 +58,24 @@ div.mce-edit-area {
     padding-left: 1em;
     margin-bottom: 0.5em !important;
 }
+
 .menu-list {
     line-height: inherit;
 }
+
 .dragArea {
     min-height: 25px;
     display: block;
 }
+
 .notification > .delete {
     top: 0.45em;
 }
+
 .ghost {
     opacity: 1;
 }
+
 .is-white {
     color: white;
 }