feat: adds basic filter, smart cropping and network optimization dash…

…board settings, fix #105, #104, #96

assets/css/style.scss

@@ -118,6 +118,31 @@
   .no-padding-right{
     padding-right:0px !important;
   }
+  #filters-list .list {
+    border: none;
+    background: none;
+    box-shadow: none;
+  }
+
+  #filters-list .list-item {
+    border: none;
+  }
+
+  #filters-list .exclusion-filter .tag.is-link strong {
+    white-space: initial;
+  }
+
+  #filters-list .exclusion-filter .tag.is-link i {
+    margin-right: 5px;
+  }
+
+  #filters-list .exclusion-filter .tag.is-link {
+    text-decoration: none;
+    width: 80%;
+    height: auto;
+    min-height: 2em;
+    justify-content: left;
+  }
 }
 
 //Fade animation.

assets/vue/components/compression.vue

@@ -0,0 +1,242 @@
+<template>
+    <div :class="{ 'saving--option' : this.$store.state.loading }">
+        <div class="field  columns">
+            <label class="label column has-text-grey-dark">
+                {{strings.enable_network_opt_title}}
+                <p class="is-italic has-text-weight-normal">
+                    {{strings.enable_network_opt_desc}}
+                </p>
+            </label>
+            <div class="column is-3">
+                <br/>
+                <toggle-button :class="'has-text-dark'"
+                               :disabled="this.$store.state.loading"
+                               v-model="networkStatus"
+                               :labels="{checked: strings.enabled, unchecked: strings.disabled}"
+                               :width="80"
+                               :height="25"
+                               color="#008ec2"></toggle-button>
+            </div>
+
+        </div>
+        <div class="field  columns">
+            <label class="label column has-text-grey-dark">
+                {{strings.quality_title}}
+                <p class="is-italic has-text-weight-normal">
+                    {{strings.quality_desc}}
+                </p>
+            </label>
+
+
+        </div>
+        <div class="field  columns">
+            <div class="column">
+                <vue-slider @change="() => { showSave=true;showSample=true }" v-bind="sliderOptions" v-model="new_data.quality"></vue-slider>
+            </div>
+        </div>
+        <div class="field  is-fullwidth columns ">
+            <div class="column is-left">
+                <button @click="saveChanges()" class="button is-success is-small "
+                        :class="this.$store.state.loading ? 'is-loading'  : '' " :disabled="!showSave">{{strings.save_changes}}
+                </button>
+                <a href="#" v-if="showSample" @click="newSample(false)" class="view-sample-image is-link">{{strings.view_sample_image}}
+                </a>
+            </div>
+        </div>
+        <div v-if="showComparison" class="sample-image">
+            <div v-if="loading_images" class="has-text-centered subtitle ">{{strings.sample_image_loading}}<span
+                    class="loader has-text-black-bis icon is-small"></span>
+            </div>
+            <div v-else-if="sample_images.id && sample_images.original_size > 0">
+                <div class="columns is-centered is-vcentered is-multiline is-mobile">
+                    <a @click="newSample(true)"
+                       class="button is-small is-pulled-right">
+                        <span class="icon dashicons dashicons-image-rotate"></span>
+                    </a>
+                    <div class="column visual-compare  is-half-fullhd is-half-desktop is-three-quarters-touch is-12-mobile  ">
+                        <div class="is-full progress-wrapper">
+                            <p class="subtitle is-size-6 compress-optimization-ratio-done has-text-centered"
+                               v-if="compressionRatio > 0">
+                                <strong>{{( 100 - compressionRatio )}}%</strong> smaller </p>
+                            <p class="subtitle  compress-optimization-ratio-nothing is-size-6 has-text-centered" v-else>
+                                {{all_strings.latest_images.same_size}}
+                            </p>
+                            <progress class="  progress is-large is-success "
+                                      :value="compressionRatio"
+                                      :max="100">
+                            </progress>
+                            <hr/>
+                        </div>
+                        <Image_diff class="is-fullwidth" value="50" :first_label="strings.image_1_label"
+                                    :second_label="strings.image_2_label">
+                            <img slot="first" :src="sample_images.optimized">
+                            <img slot="second" :src="sample_images.original">
+                        </Image_diff>
+                    </div>
+                </div>
+                <p class="title has-text-centered is-6">{{strings.quality_slider_desc}}</p>
+            </div>
+            <div v-else-if=" sample_images.id < 0">
+                <p class="title has-text-centered is-5 is-size-6-mobile">{{strings.no_images_found}}</p>
+            </div>
+        </div>
+
+    </div>
+</template>
+
+<script>
+
+
+    import VueSlider from 'vue-slider-component'
+
+    import Image_diff from "./image_diff.vue";
+
+    import 'vue-slider-component/theme/antd.css'
+    function qualityNumberToString(value) {
+        if (value === 90) {
+            return optimoleDashboardApp.strings.options_strings.high_q_title;
+        }
+        if (value === 75) {
+            return optimoleDashboardApp.strings.options_strings.medium_q_title;
+        }
+        if (value === 55) {
+            return optimoleDashboardApp.strings.options_strings.low_q_title;
+        }
+        return value;
+    }
+    function qualityStringToNumber(value) {
+
+        if( typeof value === 'number' ){
+            return value;
+        }
+        if (value === 'auto') {
+            return 90;
+        }
+        if (value === 'high_c') {
+            return 90;
+        }
+        if (value === 'medium_c') {
+            return 75;
+        }
+        if (value === 'low_c') {
+            return 55;
+        }
+        return 90;
+    }
+    export default {
+        name: "compression",
+        components: {VueSlider,Image_diff},
+        data() {
+            return {
+                strings: optimoleDashboardApp.strings.options_strings,
+                all_strings: optimoleDashboardApp.strings,
+                showSave: false,
+                showSample: false,
+                loading_images: false,
+                showComparison: false,
+                new_data: {
+                    quality: qualityStringToNumber( this.$store.state.site_settings.quality ),
+                    network_optimization:  this.$store.state.site_settings.network_optimization
+                },
+                sliderOptions: {
+                    processStyle: {
+                        backgroundColor: '#3273dc'
+                    },
+                    contained: true,
+                    dotStyle: {
+                        borderColor: '#3273dc'
+                    },
+                    min: 1,
+                    max: 100,
+                    tooltipFormatter: function (value) {
+                       return qualityNumberToString(value);
+                    },
+                    marks: function (value) {
+                        let style = {
+                            width: '12px',
+                            height: '12px',
+                            display: 'block',
+                            backgroundColor: '#3273dc',
+                            borderColor: '#3273dc',
+                            boxShadow: 'none',
+                            transform: 'translate(-4px, -4px)'
+                        };
+                        let text = qualityNumberToString(value);
+                        if( typeof text === 'number' ){
+                            return false;
+                        }
+                        return {
+                            label: text,
+                            style: style
+                        };
+                    }
+                }
+            }
+        },
+        mounted: function () {
+        },
+        methods: {
+            saveChanges: function () {
+                this.$store.dispatch('saveSettings', {
+                    settings: this.new_data
+                });
+            },
+            newSample: function( force ) {
+                if ( this.showComparison !== true ) {
+                    this.showComparison = true
+                }
+                this.updateSampleImage( this.new_data.quality, force  ? 'yes' : 'no' );
+                return false;
+            },
+            updateSampleImage: function (value, force = 'no') {
+                this.$store.dispatch('sampleRate', {
+                    quality: value,
+                    force: force,
+                    component: this,
+                }).then(
+                    (response) => {
+
+                        setTimeout(() => {
+                            this.showNotification = false;
+                        }, 1000)
+                    },
+                    (response) => {
+
+                    }
+                );
+            },
+        },
+        computed: {
+            site_settings() {
+                return this.$store.state.site_settings;
+            },
+
+            compressionRatio() {
+                return (parseFloat(this.sample_images.optimized_size / this.sample_images.original_size) * 100).toFixed(0);
+            },
+            sample_images() {
+                return this.$store.state.sample_rate;
+            },
+            networkStatus: {
+                set: function (value) {
+                    this.showSave=true;
+                    this.new_data.network_optimization = value ? 'enabled' : 'disabled';
+                },
+                get: function () {
+                    return !(this.site_settings.network_optimization === 'disabled');
+                }
+            }
+        }
+    }
+</script>
+
+<style scoped>
+    .sample-image{
+        margin-top:30px;
+    }
+    .view-sample-image{
+
+        line-height: 32px;
+        margin-left: 20px;
+    }
+</style>

assets/vue/components/exclusions.vue

@@ -0,0 +1,46 @@
+<template>
+    <div :class="{ 'saving--option' : this.$store.state.loading }">
+        <div class="columns is-desktop" id="filters-list">
+            <div class="column  ">
+                <filter-control :type="'optimize'"></filter-control>
+            </div>
+            <div class="column  " v-if="this.$store.state.site_settings.lazyload === 'enabled'">
+                <filter-control :type="'lazyload'"></filter-control>
+            </div>
+        </div>
+
+    </div>
+</template>
+
+<script>
+
+	import FilterControl from "./filter-control.vue";
+	export default {
+		name: "exclusions",
+		components: {FilterControl},
+		data() {
+			return {
+				strings: optimoleDashboardApp.strings.options_strings,
+				all_strings: optimoleDashboardApp.strings,
+                new_data: {}
+
+			}
+		},
+		mounted: function () {
+		},
+		methods: {
+
+		},
+		computed: {
+			site_settings() {
+				return this.$store.state.site_settings;
+			},
+
+
+		}
+	}
+</script>
+
+<style scoped>
+
+</style>