Flexbox filter V2 from array

Developer
Size
3,825 Kb
Views
6,072

How do I make an flexbox filter v2 from array?

This is the next version of the flexbox filtering idea. The content of the html is only built once, then the function filters from the DOM (as opposed to rebuilding every time a change occurs). This is useful if you are loading large content in each box, such as audio (what I plan to use it for) and video.. What is a flexbox filter v2 from array? How do you make a flexbox filter v2 from array? This script and codes were developed by Nathan Gregg on 25 December 2022, Sunday.

Flexbox filter V2 from array Previews

Flexbox filter V2 from array - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Flexbox filter V2 from array</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="page-container">
<div class="filter-container"> <div class="checkbox-container"> <input type="checkbox" name="style" value="select-all" id="select-all" /> <label for="select-all">select all tags</label><hr> <input type="checkbox" name="style" value="sweet" id="sweet" /> <label for="sweet">sweet</label> <input type="checkbox" name="style" value="noisy" id="noisy" /> <label for="noisy">noisy</label> <input type="checkbox" name="style" value="no-beat" id="no-beat"/> <label for="no-beat">no beat</label> <input type="checkbox" name="style" value="texture" id="texture"/> <label for="texture">texture</label> <input type="checkbox" name="style" value="guitar-riffs" id="guitar-riffs"/> <label for="guitar-riffs">guitar riffs</label> <input type="checkbox" name="style" value="rhythmic" id="rhythmic"/> <label for="rhythmic">rhythmic</label> <input type="checkbox" name="style" value="no-rhythm" id="no-rhythm"/> <label for="no-rhythm">no rhythm</label> <input type="checkbox" name="style" value="vocals" id="vocals"/> <label for="vocals">vocals</label> <input type="checkbox" name="style" value="no-vocals" id="no-vocals"/> <label for="no-vocals">no vocals</label> <input type="checkbox" name="style" value="quiet" id="quiet"/> <label for="quiet">quiet</label> <input type="checkbox" name="style" value="instrumental" id="instrumental"/> <label for="instrumental">instrumental</label> </div>
</div>
<div class="container"> <ul class="track-container"></ul>
</div>
</div>
<!--
<li id="[i]" class="track"> <span class="taglist"></span> <p> <span class="track-name"></span> <span class="artist-name"></span> </p> <p class="tags"> <span id="matched[i]"></span><br> <span id="not_matched[i]"></span> </p>
</div>';
--> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/mustache.js/0.8.1/mustache.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Flexbox filter V2 from array - Script Codes CSS Codes

*{ font-family: 'Mallanna', sans-serif; paading: 0; margin 0;
}
hr{ width: 80%; background-color: lightgrey; border: 0 none; color: #999999; height: 1px;
}
.page-container{ width: 90%; margin: 0 auto;
}
.filter-container{ float: left; width: 15%; display: flex; flex-flow: column nowrap;
}
.checkbox-container{ display: flex; flex-flow: column nowrap;
}
input[type="text"] { width: 80%; margin-bottom: 10px;
}
input[type="checkbox"] { display: none;
}
input[type="checkbox"]:not(:checked) + label:hover { box-shadow: 0px 1px 3px;
}
input[type="checkbox"] + label:active,
input[type="checkbox"]:checked + label { box-shadow: 0px 0px 3px inset; background: lightgrey;
}
label { margin: 3px; background-color: #fff; width: 100%; text-align: center; border: 1px solid grey; border-radius: 5px; color: grey; cursor: pointer;
}
.container{ float: right; width: 80%; display: flex; flex-flow: column-reverse nowrap;
}
.track{ width: 100%; margin: 5px; padding: 15px; border: 1px solid grey; border-radius: 5px;
}
.p-right{ float: right;
}
.p-left{ float: left;
}
span.track-name{ font-size: 28px; color: gray;
}
span.artist-name{ font-size: 18px; color: lightgray;
}
p.tags{ color: grey;
}
span.matched{ font-size: 20px;
}
span.not_matched{ color: lightgrey; text-decoration: line-through;
}
.hidden{ display: none;
}
ul{ display: flex; flex-direction: column-reverse;
}
li{ list-style: none
}
.taglist{ display:none;
}
p.tags{ color: grey;
}
span.matched{ font-size: 20px;
}
span.not_matched{ color: lightgrey; text-decoration: line-through;
}

Flexbox filter V2 from array - Script Codes JS Codes

var tracklist = [ { "id": "1", "track": "Bird Songs", "artist": "Nathan", "tags": ["sweet", "quiet", "no-beat", "instrumental"], "runtime": "2:30", "waveform_url": "", }, { "id": "2", "track": "Violet End", "artist": "Nathan", "tags": ["texture", "abstract", "no-beat", "instrumental"], "runtime": "1:35", "waveform_url": "", }, { "id": "3", "track": "Coffee Malts", "artist": "Cousin", "tags": ["guitar-riffs", "drums", "no-vocals", "band"], "runtime": "1:35", "waveform_url": "", }, { "id": "4", "track": "Someone Is Waiting For You", "artist": "Dan Amos", "tags": ["vocals", "noisy", "distorted", "song"], "runtime": "1:35", "waveform_url": "", }
];
$(document).ready(function() {
// Declare VARIABLES
var checkbox_array = [], boxes = "";
// FUNCTION compares the two arrays checkboxes vs tags
Array.prototype.diff = function(taglist) { var tags_matched = [], tags_not_matched = []; this.sort(); taglist.sort(); for(var i = 0; i < this.length; i += 1) { if(taglist.indexOf( this[i] ) > -1){ tags_matched.push(" " + this[i]); }else{ tags_not_matched.push(" " + this[i]); } } return [tags_matched, tags_not_matched];
};
// FUNCTION to make track boxes and insert track
function makeBox() { for ( var i = 0; i < tracklist.length; i++ ) { var box = '<li id="' + tracklist[i].id + '" class="track">' + '<span class="taglist">' + tracklist[i].tags + '</span>' + '<p><span class="track-name">' + tracklist[i].track + '</span>' + '<span class="artist-name"> by ' + tracklist[i].artist + '</span></p>' + '<p class="tags"><span id="matched' + tracklist[i].id + '" class="matched"></span>' + '<span id="not_matched' + tracklist[i].id + '" class="not_matched"></span></p>' + '</li>'; $('ul.track-container').append(box); }
}
makeBox();
// FUNCTION to get arrays and order boxes
function orderBoxes() { $("span.taglist").each(function(i){ var id = i + 1; var taglist = $(this).text().split(","); var matches = checkbox_array.diff(taglist); var matched = matches[0]; $('#matched' + id).html(matched); var not_matched = matches[1]; $('#not_matched' + id).html(not_matched); var ordernumb = matches[0].length; $(this).parent().css({'order' : ordernumb}); });
}
// FUNCTION to execute whenever a checkbox changes
$('input:checkbox').change(function() { checkbox_array = []; $('input:checkbox:checked').each(function() { checkbox_array.push($(this).val()); // push matches to new array }); orderBoxes();
});
// SELECT ALL CHECKBOXES
$('#select-all').click(function(event) { if(this.checked) { // Iterate each checkbox $(':checkbox').each(function() { this.checked = true; }); } if(!this.checked) { // Iterate each checkbox $(':checkbox').each(function() { this.checked = false; }); }
});
});
Flexbox filter V2 from array - Script Codes
Flexbox filter V2 from array - Script Codes
Home Page Home
Developer Nathan Gregg
Username nathansonic
Uploaded December 25, 2022
Rating 3
Size 3,825 Kb
Views 6,072
Do you need developer help for Flexbox filter V2 from array?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Nathan Gregg (nathansonic) Script Codes
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!