Skip to content

Commit

Permalink
Merge branch 'master' of github.com:aalok-sathe/ipa-isotope
Browse files Browse the repository at this point in the history
  • Loading branch information
@aalok-sathe
axolotl authored and aalok-sathe committed May 27, 2020
2 parents 9de3a79 + 58df753 commit 502a844
Show file tree
Hide file tree
Showing 2 changed files with 90 additions and 90 deletions.
86 changes: 43 additions & 43 deletions ipatope.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,26 +3,26 @@

// init Isotope
var $grid = $('.grid').isotope({
itemSelector: '.phoneme-item',
// layoutMode: 'fitRows',

layoutMode: 'packery',
packery: {
gutter: 2
},
stamp: '.stamp',

getSortData: {
name: '[name]',
symbol: '.symbol',
number: '.number parseInt',
sonority: '.sonority parseFloat',
category: '[data-category]',
weight: function(itemElem) {
var weight = $(itemElem).find('.weight').text();
return parseFloat(weight.replace(/[\(\)]/g, ''));
}
itemSelector: '.phoneme-item',
// layoutMode: 'fitRows',

layoutMode: 'packery',
packery: {
gutter: 2
},
stamp: '.stamp',

getSortData: {
name: '[name]',
symbol: '.symbol',
number: '.number parseInt',
sonority: '.sonority parseFloat',
category: '[data-category]',
weight: function(itemElem) {
var weight = $(itemElem).find('.weight').text();
return parseFloat(weight.replace(/[\(\)]/g, ''));
}
}
});

// filter functions
Expand Down Expand Up @@ -74,37 +74,37 @@ $('.filters').on('click', '.button', function(event) {

// change is-checked class on buttons
$('.button-group').each(function(i, buttonGroup) {
var $buttonGroup = $(buttonGroup);
$buttonGroup.on('click', '.button', function(event) {
$buttonGroup.find('.is-checked').removeClass('is-checked');
var $button = $(event.currentTarget);
$button.addClass('is-checked');
});
var $buttonGroup = $(buttonGroup);
$buttonGroup.on('click', '.button', function(event) {
$buttonGroup.find('.is-checked').removeClass('is-checked');
var $button = $(event.currentTarget);
$button.addClass('is-checked');
});
});

// bind sort button click
$('.sorters').on('click', '.button', function() {
var sortByValue = $(this).attr('data-sort-by');
$grid.isotope({
sortBy: sortByValue
});
var sortByValue = $(this).attr('data-sort-by');
$grid.isotope({
sortBy: sortByValue
});
});


$('.ui-group').packery({
itemSelector: '.ui-group-item',
gutter: 1,
percentPosition: true
itemSelector: '.ui-group-item',
gutter: 1,
percentPosition: true
})

// collection of Draggabillies
var draggies = [];
var isDrag = false;

// make all grid-items draggable
$grid.find('.phoneme-item').each( function( i, gridItem ) {
var draggie = new Draggabilly( gridItem );
draggies.push( draggie );
$grid.find('.phoneme-item').each(function(i, gridItem) {
var draggie = new Draggabilly(gridItem);
draggies.push(draggie);
// bind drag events to Packery
// $grid.packery( 'bindDraggabillyEvents', draggie );
});
Expand All @@ -119,16 +119,16 @@ let cartesian = (a, b, ...c) => b ? cartesian(f(a, b), ...c) : a;
// flatten object by concatting values, making sure to apply demorgans laws ','
function concatValues(obj) {

value = "";
for (var prop in obj) {
var parts = obj[prop].split(",");
var vals = value.split(",");
var newvals = cartesian(parts, vals);
value = "";
for (var prop in obj) {
var parts = obj[prop].split(",");
var vals = value.split(",");
var newvals = cartesian(parts, vals);

value = newvals.map(x => concatArr(x)).join(',');
}
value = newvals.map(x => concatArr(x)).join(',');
}

return value;
return value;
}

// flatten object by concatting values
Expand Down
94 changes: 47 additions & 47 deletions templates/phonemes.template.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,65 +3,65 @@
<html>

<body>
<h1>IPAtope</h1>

<h4>Filter</h4>

<div class="filters">

{% for group, filters in filtergroups.items() %}
<div class="ui-group">
<div class="ui-group-item button-group-label" style="float: left;"><label style="margin-left: 10px; margin-right: 10px;"> {{group}} </label></div>
<div class="button-group" data-filter-group="{{ group }}">
<button class="ui-group-item btn btn-sm button is-checked" data-filter="*">all</button>
{% for filter in filters %}
{% include "filter.template.html" with context %}
{% endfor %}
</div>
</div>
{% endfor %}
<h1>IPAtope</h1>

<h4>Filter</h4>

<div class="filters">

{% for group, filters in filtergroups.items() %}
<div class="ui-group">
<div class="ui-group-item button-group-label" style="float: left;"><label style="margin-left: 10px; margin-right: 10px;"> {{group}} </label></div>
<div class="button-group" data-filter-group="{{ group }}">
<button class="ui-group-item btn btn-sm button is-checked" data-filter="*">all</button>
{% for filter in filters %}
{% include "filter.template.html" with context %}
{% endfor %}
</div>
</div>
{% endfor %}

</div>

<h4>Sort</h4>

<div class="sorters">
<div class="ui-group">
<div class="ui-group-item button-group-label" style="float: left;"><label> sort by </label></div>
<div class="button-group" data-filter-group="{{ group }}">
<button class="ui-group-item btn btn-sm button is-checked" data-sort-by="original-order">original</button>
{% for sorter in sorters %}
{% include "sorter.template.html" with context %}
{% endfor %}
</div>
</div>
<h4>Sort</h4>

<div class="sorters">
<div class="ui-group">
<div class="ui-group-item button-group-label" style="float: left;"><label style="margin-left: 10px; margin-right: 10px;"> sort by </label></div>
<div class="button-group" data-filter-group="{{ group }}">
<button class="ui-group-item btn btn-sm button is-checked" data-sort-by="original-order">original</button>
{% for sorter in sorters %}
{% include "sorter.template.html" with context %}
{% endfor %}
</div>
</div>
</div>

<!-- <div id="sorts" class="button-group"> <button class="button is-checked" data-sort-by="original-order">original order</button>
<!-- <div id="sorts" class="button-group"> <button class="button is-checked" data-sort-by="original-order">original order</button>
<button class="button" data-sort-by="name">name</button>
<button class="button" data-sort-by="symbol">symbol</button>
<button class="button" data-sort-by="sonority">sonority</button>
<button class="button" data-sort-by="category">category</button>
</div> -->

<h4>Controls</h4>
<div class="ui-group">
<div class="controls" style="margin: 5px;">
<button class="ui-group-item btn btn-sm button" type="button" name="button" onclick="$grid.isotope('shuffle');">
shuffle
</button>
<button class="ui-group-item btn btn-sm button" type="button" name="button" onclick="$grid.isotope({sortBy: 'original-order', filter: '*'});">
clear all
</button>
</div>
<h4>Controls</h4>
<div class="ui-group">
<div class="controls" style="margin: 5px;">
<button class="ui-group-item btn btn-sm button" type="button" name="button" onclick="$grid.isotope('shuffle');">
shuffle
</button>
<button class="ui-group-item btn btn-sm button" type="button" name="button" onclick="$grid.isotope({sortBy: 'original-order', filter: '*'});">
clear all
</button>
</div>
<br>
</div>
<br>

<div class="grid">
{% for phoneme in phonemes %}
{% include "phoneme.template.html" with context %}
{% endfor %}
</div>
<div class="grid">
{% for phoneme in phonemes %}
{% include "phoneme.template.html" with context %}
{% endfor %}
</div>


</body>
Expand All @@ -81,4 +81,4 @@ <h4>Controls</h4>
<link href="ipatope.css" rel="stylesheet" type="text/css">
<script src="ipatope.js"></script>

</html>
</html>

0 comments on commit 502a844

Please sign in to comment.