Skip to content

Commit

Permalink
Refactored dpr value + implemented global settings
Browse files Browse the repository at this point in the history
  • Loading branch information
@Ornhoj
Ornhoj committed Jun 17, 2019
1 parent 815a33e commit 0aa12f1
Show file tree
Hide file tree
Showing 4 changed files with 78 additions and 31 deletions.
36 changes: 26 additions & 10 deletions dist/sky-crop.esm.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,8 +77,9 @@ var script = {
default: 100,
},
dpr: {
type: [String, Number],
default: 'default',
type: Number,
default: 0,
validator: function (value) { return value >= 0; },
},
alt: String,
options: {
Expand All @@ -102,12 +103,12 @@ var script = {
rootClasses: function rootClasses() {
return [
'sky-crop',
("sky-crop--" + (this.mode)) ];
("sky-crop--" + (this.settings.mode)) ];
},
imageClasses: function imageClasses() {
return [
'sky-crop__image',
("sky-crop__image--" + (this.mode)) ];
("sky-crop__image--" + (this.settings.mode)) ];
},
imageAlterations: function imageAlterations() {
var this$1 = this;
Expand Down Expand Up @@ -149,8 +150,8 @@ var script = {
this.cropArray.push(this.umbraco(
this.src,
container,
this.mode,
this.round
this.settings.mode,
this.settings.round
));
} else if (count === 5) {
console.info('[SkyCrop]: Container element does not have any dimensions, src:', this.src);
Expand Down Expand Up @@ -255,9 +256,7 @@ var script = {
return !!webpBrowsers.find(function (browser) { return (userAgent.indexOf(browser) > -1) && (userAgent.indexOf('Edge') === -1); });
},
crop: function crop(source, target, mode, rounding) {
var dpr = this.dpr === 'default'
? window.devicePixelRatio
: this.dpr;
var dpr = this.settings.dpr || window.devicePixelRatio;

var cacheRound = function (value) { return Math.ceil((value * dpr) / rounding) * rounding; };

Expand Down Expand Up @@ -384,6 +383,11 @@ var __vue_staticRenderFns__ = [];

var defaults = {
registerComponents: true,
cropSettings: {
dpr: 0,
mode: 'width',
round: 100,
},
};

function install(Vue, options) {
Expand All @@ -393,9 +397,21 @@ function install(Vue, options) {

var ref = Object.assign({}, defaults, options);
var registerComponents = ref.registerComponents;
var cropSettings = ref.cropSettings;

if (registerComponents) {
Vue.component(SkyCrop.name, SkyCrop);
// Vue.component(SkyCrop.name, SkyCrop);
Vue.component(SkyCrop.name, Object.assign({}, SkyCrop), {
computed: {
settings: function settings() {
return Object.assign.apply({}, cropSettings, {
dpr: this.dpr,
mode: this.mode,
round: this.round,
})
},
}
});
}
}

Expand Down
36 changes: 26 additions & 10 deletions dist/sky-crop.ssr.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,8 +83,9 @@ var script = {
default: 100,
},
dpr: {
type: [String, Number],
default: 'default',
type: Number,
default: 0,
validator: function (value) { return value >= 0; },
},
alt: String,
options: {
Expand All @@ -108,12 +109,12 @@ var script = {
rootClasses: function rootClasses() {
return [
'sky-crop',
("sky-crop--" + (this.mode)) ];
("sky-crop--" + (this.settings.mode)) ];
},
imageClasses: function imageClasses() {
return [
'sky-crop__image',
("sky-crop__image--" + (this.mode)) ];
("sky-crop__image--" + (this.settings.mode)) ];
},
imageAlterations: function imageAlterations() {
var this$1 = this;
Expand Down Expand Up @@ -155,8 +156,8 @@ var script = {
this.cropArray.push(this.umbraco(
this.src,
container,
this.mode,
this.round
this.settings.mode,
this.settings.round
));
} else if (count === 5) {
console.info('[SkyCrop]: Container element does not have any dimensions, src:', this.src);
Expand Down Expand Up @@ -261,9 +262,7 @@ var script = {
return !!webpBrowsers.find(function (browser) { return (userAgent.indexOf(browser) > -1) && (userAgent.indexOf('Edge') === -1); });
},
crop: function crop(source, target, mode, rounding) {
var dpr = this.dpr === 'default'
? window.devicePixelRatio
: this.dpr;
var dpr = this.settings.dpr || window.devicePixelRatio;

var cacheRound = function (value) { return Math.ceil((value * dpr) / rounding) * rounding; };

Expand Down Expand Up @@ -390,6 +389,11 @@ var __vue_staticRenderFns__ = [];

var defaults = {
registerComponents: true,
cropSettings: {
dpr: 0,
mode: 'width',
round: 100,
},
};

function install(Vue, options) {
Expand All @@ -399,9 +403,21 @@ function install(Vue, options) {

var ref = Object.assign({}, defaults, options);
var registerComponents = ref.registerComponents;
var cropSettings = ref.cropSettings;

if (registerComponents) {
Vue.component(SkyCrop.name, SkyCrop);
// Vue.component(SkyCrop.name, SkyCrop);
Vue.component(SkyCrop.name, Object.assign({}, SkyCrop), {
computed: {
settings: function settings() {
return Object.assign.apply({}, cropSettings, {
dpr: this.dpr,
mode: this.mode,
round: this.round,
})
},
}
});
}
}

Expand Down
17 changes: 8 additions & 9 deletions src/SkyCrop.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,9 @@ export default {
default: 100,
},
dpr: {
type: [String, Number],
default: 'default',
type: Number,
default: 0,
validator: value => value >= 0,
},
alt: String,
options: {
Expand All @@ -48,13 +49,13 @@ export default {
rootClasses() {
return [
'sky-crop',
`sky-crop--${this.mode}`,
`sky-crop--${this.settings.mode}`,
];
},
imageClasses() {
return [
'sky-crop__image',
`sky-crop__image--${this.mode}`,
`sky-crop__image--${this.settings.mode}`,
];
},
imageAlterations() {
Expand Down Expand Up @@ -92,8 +93,8 @@ export default {
this.cropArray.push(this.umbraco(
this.src,
container,
this.mode,
this.round
this.settings.mode,
this.settings.round
));
} else if (count === 5) {
console.info('[SkyCrop]: Container element does not have any dimensions, src:', this.src);
Expand Down Expand Up @@ -195,9 +196,7 @@ export default {
return !!webpBrowsers.find(browser => (userAgent.indexOf(browser) > -1) && (userAgent.indexOf('Edge') === -1));
},
crop(source, target, mode, rounding) {
const dpr = this.dpr === 'default'
? window.devicePixelRatio
: this.dpr;
const dpr = this.settings.dpr || window.devicePixelRatio;

const cacheRound = value => Math.ceil((value * dpr) / rounding) * rounding;

Expand Down
20 changes: 18 additions & 2 deletions src/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,11 @@ import SkyCrop from './SkyCrop.vue';

const defaults = {
registerComponents: true,
cropSettings: {
dpr: 0,
mode: 'width',
round: 100,
},
};

export { SkyCrop };
Expand All @@ -11,9 +16,20 @@ export default function install(Vue, options) {
return;
}

const { registerComponents } = Object.assign({}, defaults, options);
const { registerComponents, cropSettings } = Object.assign({}, defaults, options);

if (registerComponents) {
Vue.component(SkyCrop.name, SkyCrop);
// Vue.component(SkyCrop.name, SkyCrop);
Vue.component(SkyCrop.name, Object.assign({}, SkyCrop), {
computed: {
settings() {
return Object.assign.apply({}, cropSettings, {
dpr: this.dpr,
mode: this.mode,
round: this.round,
})
},
}
});
}
};

0 comments on commit 0aa12f1

Please sign in to comment.