Skip to content

Commit aba242d

Browse files
selulselul
committed
feat: adds basic filter, smart cropping and network optimization dashboard settings, fix #105, #104, #96 
1 parent 2454404 commit aba242d

23 files changed

+3330
-3900
lines changed

‎assets/css/style.scss

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -118,6 +118,31 @@
118118
.no-padding-right{
119119
padding-right:0px !important;
120120
}
121+
#filters-list .list {
122+
border: none;
123+
background: none;
124+
box-shadow: none;
125+
}
126+
127+
#filters-list .list-item {
128+
border: none;
129+
}
130+
131+
#filters-list .exclusion-filter .tag.is-link strong {
132+
white-space: initial;
133+
}
134+
135+
#filters-list .exclusion-filter .tag.is-link i {
136+
margin-right: 5px;
137+
}
138+
139+
#filters-list .exclusion-filter .tag.is-link {
140+
text-decoration: none;
141+
width: 80%;
142+
height: auto;
143+
min-height: 2em;
144+
justify-content: left;
145+
}
121146
}
122147

123148
//Fade animation.

‎assets/js/bundle.min.js

100644100755
Lines changed: 10 additions & 5 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎assets/vue/components/compression.vue

Lines changed: 242 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,242 @@
1+
<template>
2+
<div :class="{ 'saving--option' : this.$store.state.loading }">
3+
<div class="field columns">
4+
<label class="label column has-text-grey-dark">
5+
{{strings.enable_network_opt_title}}
6+
<p class="is-italic has-text-weight-normal">
7+
{{strings.enable_network_opt_desc}}
8+
</p>
9+
</label>
10+
<div class="column is-3">
11+
<br/>
12+
<toggle-button :class="'has-text-dark'"
13+
:disabled="this.$store.state.loading"
14+
v-model="networkStatus"
15+
:labels="{checked: strings.enabled, unchecked: strings.disabled}"
16+
:width="80"
17+
:height="25"
18+
color="#008ec2"></toggle-button>
19+
</div>
20+
21+
</div>
22+
<div class="field columns">
23+
<label class="label column has-text-grey-dark">
24+
{{strings.quality_title}}
25+
<p class="is-italic has-text-weight-normal">
26+
{{strings.quality_desc}}
27+
</p>
28+
</label>
29+
30+
31+
</div>
32+
<div class="field columns">
33+
<div class="column">
34+
<vue-slider @change="() => { showSave=true;showSample=true }" v-bind="sliderOptions" v-model="new_data.quality"></vue-slider>
35+
</div>
36+
</div>
37+
<div class="field is-fullwidth columns ">
38+
<div class="column is-left">
39+
<button @click="saveChanges()" class="button is-success is-small "
40+
:class="this.$store.state.loading ? 'is-loading' : '' " :disabled="!showSave">{{strings.save_changes}}
41+
</button>
42+
<a href="#" v-if="showSample" @click="newSample(false)" class="view-sample-image is-link">{{strings.view_sample_image}}
43+
</a>
44+
</div>
45+
</div>
46+
<div v-if="showComparison" class="sample-image">
47+
<div v-if="loading_images" class="has-text-centered subtitle ">{{strings.sample_image_loading}}<span
48+
class="loader has-text-black-bis icon is-small"></span>
49+
</div>
50+
<div v-else-if="sample_images.id && sample_images.original_size > 0">
51+
<div class="columns is-centered is-vcentered is-multiline is-mobile">
52+
<a @click="newSample(true)"
53+
class="button is-small is-pulled-right">
54+
<span class="icon dashicons dashicons-image-rotate"></span>
55+
</a>
56+
<div class="column visual-compare is-half-fullhd is-half-desktop is-three-quarters-touch is-12-mobile ">
57+
<div class="is-full progress-wrapper">
58+
<p class="subtitle is-size-6 compress-optimization-ratio-done has-text-centered"
59+
v-if="compressionRatio > 0">
60+
<strong>{{( 100 - compressionRatio )}}%</strong> smaller </p>
61+
<p class="subtitle compress-optimization-ratio-nothing is-size-6 has-text-centered" v-else>
62+
{{all_strings.latest_images.same_size}}
63+
</p>
64+
<progress class=" progress is-large is-success "
65+
:value="compressionRatio"
66+
:max="100">
67+
</progress>
68+
<hr/>
69+
</div>
70+
<Image_diff class="is-fullwidth" value="50" :first_label="strings.image_1_label"
71+
:second_label="strings.image_2_label">
72+
<img slot="first" :src="sample_images.optimized">
73+
<img slot="second" :src="sample_images.original">
74+
</Image_diff>
75+
</div>
76+
</div>
77+
<p class="title has-text-centered is-6">{{strings.quality_slider_desc}}</p>
78+
</div>
79+
<div v-else-if=" sample_images.id < 0">
80+
<p class="title has-text-centered is-5 is-size-6-mobile">{{strings.no_images_found}}</p>
81+
</div>
82+
</div>
83+
84+
</div>
85+
</template>
86+
87+
<script>
88+
89+
90+
import VueSlider from 'vue-slider-component'
91+
92+
import Image_diff from "./image_diff.vue";
93+
94+
import 'vue-slider-component/theme/antd.css'
95+
function qualityNumberToString(value) {
96+
if (value === 90) {
97+
return optimoleDashboardApp.strings.options_strings.high_q_title;
98+
}
99+
if (value === 75) {
100+
return optimoleDashboardApp.strings.options_strings.medium_q_title;
101+
}
102+
if (value === 55) {
103+
return optimoleDashboardApp.strings.options_strings.low_q_title;
104+
}
105+
return value;
106+
}
107+
function qualityStringToNumber(value) {
108+
109+
if( typeof value === 'number' ){
110+
return value;
111+
}
112+
if (value === 'auto') {
113+
return 90;
114+
}
115+
if (value === 'high_c') {
116+
return 90;
117+
}
118+
if (value === 'medium_c') {
119+
return 75;
120+
}
121+
if (value === 'low_c') {
122+
return 55;
123+
}
124+
return 90;
125+
}
126+
export default {
127+
name: "compression",
128+
components: {VueSlider,Image_diff},
129+
data() {
130+
return {
131+
strings: optimoleDashboardApp.strings.options_strings,
132+
all_strings: optimoleDashboardApp.strings,
133+
showSave: false,
134+
showSample: false,
135+
loading_images: false,
136+
showComparison: false,
137+
new_data: {
138+
quality: qualityStringToNumber( this.$store.state.site_settings.quality ),
139+
network_optimization: this.$store.state.site_settings.network_optimization
140+
},
141+
sliderOptions: {
142+
processStyle: {
143+
backgroundColor: '#3273dc'
144+
},
145+
contained: true,
146+
dotStyle: {
147+
borderColor: '#3273dc'
148+
},
149+
min: 1,
150+
max: 100,
151+
tooltipFormatter: function (value) {
152+
return qualityNumberToString(value);
153+
},
154+
marks: function (value) {
155+
let style = {
156+
width: '12px',
157+
height: '12px',
158+
display: 'block',
159+
backgroundColor: '#3273dc',
160+
borderColor: '#3273dc',
161+
boxShadow: 'none',
162+
transform: 'translate(-4px, -4px)'
163+
};
164+
let text = qualityNumberToString(value);
165+
if( typeof text === 'number' ){
166+
return false;
167+
}
168+
return {
169+
label: text,
170+
style: style
171+
};
172+
}
173+
}
174+
}
175+
},
176+
mounted: function () {
177+
},
178+
methods: {
179+
saveChanges: function () {
180+
this.$store.dispatch('saveSettings', {
181+
settings: this.new_data
182+
});
183+
},
184+
newSample: function( force ) {
185+
if ( this.showComparison !== true ) {
186+
this.showComparison = true
187+
}
188+
this.updateSampleImage( this.new_data.quality, force ? 'yes' : 'no' );
189+
return false;
190+
},
191+
updateSampleImage: function (value, force = 'no') {
192+
this.$store.dispatch('sampleRate', {
193+
quality: value,
194+
force: force,
195+
component: this,
196+
}).then(
197+
(response) => {
198+
199+
setTimeout(() => {
200+
this.showNotification = false;
201+
}, 1000)
202+
},
203+
(response) => {
204+
205+
}
206+
);
207+
},
208+
},
209+
computed: {
210+
site_settings() {
211+
return this.$store.state.site_settings;
212+
},
213+
214+
compressionRatio() {
215+
return (parseFloat(this.sample_images.optimized_size / this.sample_images.original_size) * 100).toFixed(0);
216+
},
217+
sample_images() {
218+
return this.$store.state.sample_rate;
219+
},
220+
networkStatus: {
221+
set: function (value) {
222+
this.showSave=true;
223+
this.new_data.network_optimization = value ? 'enabled' : 'disabled';
224+
},
225+
get: function () {
226+
return !(this.site_settings.network_optimization === 'disabled');
227+
}
228+
}
229+
}
230+
}
231+
</script>
232+
233+
<style scoped>
234+
.sample-image{
235+
margin-top:30px;
236+
}
237+
.view-sample-image{
238+
239+
line-height: 32px;
240+
margin-left: 20px;
241+
}
242+
</style>

‎assets/vue/components/exclusions.vue

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<template>
2+
<div :class="{ 'saving--option' : this.$store.state.loading }">
3+
<div class="columns is-desktop" id="filters-list">
4+
<div class="column ">
5+
<filter-control :type="'optimize'"></filter-control>
6+
</div>
7+
<div class="column " v-if="this.$store.state.site_settings.lazyload === 'enabled'">
8+
<filter-control :type="'lazyload'"></filter-control>
9+
</div>
10+
</div>
11+
12+
</div>
13+
</template>
14+
15+
<script>
16+
17+
import FilterControl from "./filter-control.vue";
18+
export default {
19+
name: "exclusions",
20+
components: {FilterControl},
21+
data() {
22+
return {
23+
strings: optimoleDashboardApp.strings.options_strings,
24+
all_strings: optimoleDashboardApp.strings,
25+
new_data: {}
26+
27+
}
28+
},
29+
mounted: function () {
30+
},
31+
methods: {
32+
33+
},
34+
computed: {
35+
site_settings() {
36+
return this.$store.state.site_settings;
37+
},
38+
39+
40+
}
41+
}
42+
</script>
43+
44+
<style scoped>
45+
46+
</style>

0 commit comments

Comments
 (0)