mirror of https://github.com/Mayccoll/Gogh.git
78 lines
3.0 KiB
JavaScript
78 lines
3.0 KiB
JavaScript
/* global $, Vue, axios */
|
|
/* eslint no-undef: "error", semi: 2 */
|
|
|
|
/**
|
|
* ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
|
|
* ······· Copy
|
|
* ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
|
|
*/
|
|
|
|
new ClipboardJS('.btn-copy');
|
|
|
|
/**
|
|
* ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
|
|
* ······· Functions
|
|
* ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
|
|
*/
|
|
|
|
function lightOrDark(color) {
|
|
// Variables for red, green, blue values
|
|
var r, g, b, hsp;
|
|
// Check the format of the color, HEX or RGB?
|
|
if (color.match(/^rgb/)) {
|
|
// If RGB --> store the red, green, blue values in separate variables
|
|
color = color.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)$/);
|
|
r = color[1];
|
|
g = color[2];
|
|
b = color[3];
|
|
} else {
|
|
// If hex --> Convert it to RGB: http://gist.github.com/983661
|
|
color = +('0x' + color.slice(1).replace(color.length < 5 && /./g, '$&$&'));
|
|
r = color >> 16;
|
|
g = color >> 8 & 255;
|
|
b = color & 255;
|
|
}
|
|
// HSP (Highly Sensitive Poo) equation from http://alienryderflex.com/hsp.html
|
|
hsp = Math.sqrt(0.299 * (r * r) + 0.587 * (g * g) + 0.114 * (b * b));
|
|
// Using the HSP value, determine whether the color is light or dark
|
|
if (hsp > 127.5) {
|
|
return 'light';
|
|
} else {
|
|
return 'dark';
|
|
}
|
|
}
|
|
|
|
/**
|
|
* ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
|
|
* ······· Vue App
|
|
* ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
|
|
*/
|
|
|
|
var $getUrl = 'https://raw.githubusercontent.com/Mayccoll/Gogh/master/data/themes.json';
|
|
|
|
const $app = {
|
|
data () {
|
|
return {
|
|
themes: [],
|
|
filter: 'all'
|
|
};
|
|
},
|
|
created () {
|
|
axios.get($getUrl)
|
|
.then((response) => {
|
|
this.themes = response.data.themes;
|
|
this.themes.forEach((v) => {
|
|
v.category = lightOrDark(v.background);
|
|
});
|
|
});
|
|
},
|
|
methods: {
|
|
setFilter: function (f) {
|
|
this.filter = '';
|
|
setTimeout(() => { this.filter = f; }, 50);
|
|
}
|
|
}
|
|
};
|
|
|
|
Vue.createApp($app).mount('#js-vue-app');
|