1
0
mirror of https://github.com/Mayccoll/Gogh.git synced 2023-08-10 21:12:46 +03:00

Website Filter by Bg Color

This commit is contained in:
Mayccoll 2020-12-19 19:18:16 -05:00
parent 7f795cd7b0
commit 5ae0690564
5 changed files with 287 additions and 95 deletions

2
css/main.min.css vendored

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -52,6 +52,7 @@
<h2>
Color Scheme for Gnome Terminal, Pantheon Terminal, Tilix, and XFCE4 Terminal
</h2>
<p>
Color Schemes For Ubuntu, Linux Mint, Elementary OS and all distributions that use Gnome Terminal, Pantheon Terminal, Tilix, or XFCE4 Terminal; initially inspired by Elementary OS Luna. Also works on iTerm for macOS.
</p>
@ -107,29 +108,50 @@
<div class="row">
<div class="col-md-12">
<div class="filters">
<button class="btn"
v-bind:class="{ active: filter === 'all' }"
v-on:click="setFilter('all')">
<button class="btn js-btn--filter"
:class="{ active: filter === 'all' }"
@click="setFilter('all'); resetMenuSelected()">
All
</button>
<button class="btn"
v-bind:class="{ active: filter === 'light' }"
v-on:click="setFilter('light')">
<button class="btn js-btn--filter"
:class="{ active: filter === 'light' }"
@click="setFilter('light'); resetMenuSelected()">
Light Themes
</button>
<button class="btn"
v-bind:class="{ active: filter === 'dark' }"
v-on:click="setFilter('dark')">
<button class="btn js-btn--filter"
:class="{ active: filter === 'dark' }"
@click="setFilter('dark'); resetMenuSelected()">
Dark Themes
</button>
<button class="btn js-btn--filter-bg"
:class="{ active: selected === 'background' }"
@click="getBackgrounds()">
by Background
</button>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="filter-background js-filter-background" style="display: none;">
<template v-for="item in themeBackgrounds">
<button class="btn btn--filter-bg"
:class="{ active: filter === item.toLowerCase() }"
:style="'background-color:' + item"
@click="setFilter(item)">
<span>{{ item.toLowerCase() }}</span>
</button>
</template>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<template v-for="theme in themes">
<div class="col-md-6 col-lg-6 col-xl-4" v-show="filter === theme.category || filter === 'all'">
<div class="col-md-6 col-lg-6 col-xl-4" v-show="filter === theme.category || filter === 'all' || filter === 'background' || filter === theme.background.toLowerCase()">
<div class="terminal">
<div class=bar>
<div class="bar__title">
@ -240,7 +262,9 @@
<a target=_blank href="https://clipboardjs.com/"> Clipboardjs </a> put it all together :
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.slim.min.js" integrity="sha512-/DXTXr6nQodMUiq+IUJYCt2PPOUjrHJ9wFrqpJ3XkgPNOZVfMok7cRw6CSxyCQxXn6ozlESsSh1/sMCTF1rL/g==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chroma-js/2.1.0/chroma.min.js" integrity="sha512-yocoLferfPbcwpCMr8v/B0AB4SWpJlouBwgE0D3ZHaiP1nuu5djZclFEIj9znuqghaZ3tdCMRrreLoM8km+jIQ==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.22.0/components/prism-core.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.22.0/plugins/autoloader/prism-autoloader.min.js"></script>

View File

@ -1,4 +1,4 @@
/* global $, Vue, axios */
/* global $, Vue, axios, chroma, vm */
/* eslint no-undef: "error", semi: 2 */
/**
@ -17,7 +17,10 @@ new ClipboardJS('.btn-copy');
function lightOrDark (color) {
// Variables for red, green, blue values
var r, g, b, hsp;
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
@ -42,6 +45,72 @@ function lightOrDark(color) {
}
}
/**
*
* ······· Color Functions
*
*/
function colorDistance (color1, color2) {
// This is actually the square of the distance but
// this doesn't matter for sorting.
var result = 0;
for (var i = 0; i < color1.length; i++)
result += (color1[i] - color2[i]) * (color1[i] - color2[i]);
return result;
}
function sortColors (colors) {
// Calculate distance between each color
var distances = [];
for (var i = 0; i < colors.length; i++) {
distances[i] = [];
for (var j = 0; j < i; j++)
distances.push([
colors[i],
colors[j],
colorDistance(colors[i], colors[j]),
]);
}
distances.sort(function (a, b) {
return a[2] - b[2];
});
// Put each color into separate cluster initially
var colorToCluster = {};
for (var y = 0; y < colors.length; y++)
colorToCluster[colors[y]] = [colors[y]];
// Merge clusters, starting with lowest distances
var lastCluster;
for (var e = 0; e < distances.length; e++) {
var color1 = distances[e][0];
var color2 = distances[e][1];
var cluster1 = colorToCluster[color1];
var cluster2 = colorToCluster[color2];
if (!cluster1 || !cluster2 || cluster1 == cluster2)
continue;
// Make sure color1 is at the end of its cluster and
// color2 at the beginning.
if (color1 !== cluster1[cluster1.length - 1])
cluster1.reverse();
if (color2 !== cluster2[0])
cluster2.reverse();
// Merge cluster2 into cluster1
cluster1.push.apply(cluster1, cluster2);
delete colorToCluster[color1];
delete colorToCluster[color2];
colorToCluster[cluster1[0]] = cluster1;
colorToCluster[cluster1[cluster1.length - 1]] = cluster1;
lastCluster = cluster1;
}
// By now all colors should be in one cluster
return lastCluster;
}
/**
*
* ······· Vue App
@ -54,24 +123,63 @@ const $app = {
data () {
return {
themes: [],
filter: 'all'
filter: 'all',
themeBackgrounds: null,
selected: null
};
},
created () {
axios.get($getUrl)
.then((response) => {
axios.get($getUrl).then((response) => {
this.themes = response.data.themes;
this.themes.forEach((v) => {
v.category = lightOrDark(v.background);
});
});
},
methods: {
setFilter: function (f) {
setFilter (f) {
this.filter = '';
setTimeout(() => { this.filter = f; }, 50);
setTimeout(() => {
this.filter = f;
}, 100);
},
setBackground () {
this.filter = 'background';
},
getBackgrounds () {
const $bgs = this.themes.map(e => e.background);
const $bgsLowerCase = $bgs.map((ele) => ele.toLowerCase());
const $bgsUnique = [...new Set($bgsLowerCase)];
const $bgsRGB = $bgsUnique.map((ele) => chroma(ele).rgb());
const $bgsSort = sortColors($bgsRGB);
const $bgsHEX = $bgsSort.map(ele => chroma(ele).hex());
this.themeBackgrounds = $bgsHEX;
this.selected = 'background';
this.filter = 'background';
},
resetMenuSelected () {
this.selected = '';
}
}
};
Vue.createApp($app).mount('#js-vue-app');
/**
*
* ······· Menu
*
*/
$('.js-btn--filter-bg').on('click', function () {
$('.js-filter-background').slideToggle();
});
$('.js-btn--filter').on('click', function () {
$('.js-filter-background').slideUp(400);
});

View File

@ -138,33 +138,13 @@
}
/**
*
* ······· Main Content
* ······· Filters
*
*/
.gogh-terminal {
@include m360 {}
@include m450 {}
@include m576 {}
@include m650 {}
@include m768 {}
@include m900 {}
@include m992 {}
@include m1200 {}
@include m1400 {
margin : 0 auto;
max-width: 96%;
}
@include m1800 {
max-width: 84%;
}
@include m2200 {
max-width: 74%;
}
.filters {
display : flex;
justify-content: center;
margin : 0 0 60px;
margin : 0 0 40px;
.btn {
position: relative;
@ -219,6 +199,86 @@
}
}
}
/**
*
* ······· Filters Bg
*
*/
.filter-background {
margin: 0 0 70px;
.btn--filter-bg {
position : relative;
padding : 0;
width : 5%;
height : 40px;
border : none;
cursor : pointer;
transition: all 0.3s ease, border-radius 0.9s ease;
span {
position : absolute;
bottom : -12px;
display : none;
padding : 1px 3px;
width : 100%;
border-radius : 1px;
background : #0d1926;
color : #ffffff;
text-align : center;
text-transform: none;
font-size : 0.6rem;
transition : all 0.3s ease;
}
&:hover {
z-index : 20;
height : 40px;
border : 1px solid #414141;
border-radius: 1px;
transform : scale(1.6);
span {
display: block;
}
}
}
.btn--filter-bg.active {
z-index : 10;
border : 1px solid #414141;
border-radius: 1px;
transform : scale(1.6);
span {
display: block;
}
}
}
/**
*
* ······· Main Content
*
*/
.gogh-terminal {
@include m360 {}
@include m450 {}
@include m576 {}
@include m650 {}
@include m768 {}
@include m900 {}
@include m992 {}
@include m1200 {}
@include m1400 {
margin : 0 auto;
max-width: 96%;
}
@include m1800 {
max-width: 84%;
}
@include m2200 {
max-width: 74%;
}
}
/**
*