Added footer, print to header, checkboxes beside spells
This commit is contained in:
Joe Wroten
parent
6e8c5cd9c2
commit
f8d7611d3d
9 changed files with 153 additions and 63 deletions
|
|
@ -2,6 +2,10 @@ body {
|
|||
background: #fafafa;
|
||||
}
|
||||
|
||||
.mdl-mini-footer {
|
||||
padding: .5em 1em 2.75em 1em
|
||||
}
|
||||
|
||||
.do-nothing {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
|
@ -17,6 +21,15 @@ body {
|
|||
background: url('wand.svg') no-repeat top center;
|
||||
}
|
||||
|
||||
.mdl-layout__header .mdl-button .mdl-badge[data-badge] {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.mdl-layout__header .mdl-button .mdl-badge[data-badge]::after {
|
||||
left: -1em;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
.mdl-navigation .mdl-textfield__label i {
|
||||
vertical-align: top;
|
||||
font-size: 1.25em;
|
||||
|
|
|
|||
36
dist/app.js
vendored
36
dist/app.js
vendored
|
|
@ -217,8 +217,9 @@ const spellDetails = name => {
|
|||
/**
|
||||
* Event Bindings
|
||||
*/
|
||||
$('body')
|
||||
// Listen for header sorts
|
||||
$('body').on('click', '[data-action-sort]', e => {
|
||||
.on('click', '[data-action-sort]', e => {
|
||||
let name = $(e.currentTarget).attr('data-action-sort');
|
||||
let rev = store.tableSort.current === name && !store.tableSort.rev;
|
||||
store.tableSort.current = name;
|
||||
|
|
@ -227,10 +228,9 @@ $('body').on('click', '[data-action-sort]', e => {
|
|||
localStorage.setItem('tableSortRev', rev);
|
||||
view.spell_list.update({ data: sortSpells(store.spells) });
|
||||
view.table_sort.update(store.tableSort);
|
||||
});
|
||||
|
||||
})
|
||||
// Listen for checkbox changes to filter spells
|
||||
$('body').on('change', '[data-action-classtoggle]', e => {
|
||||
.on('change', '[data-action-classtoggle]', e => {
|
||||
let name = $(e.currentTarget).attr('data-action-classtoggle');
|
||||
let add = $(e.currentTarget).prop('checked');
|
||||
let index = store.classes.current.indexOf(name);
|
||||
|
|
@ -242,10 +242,9 @@ $('body').on('change', '[data-action-classtoggle]', e => {
|
|||
localStorage.setItem('classes', store.classes.current);
|
||||
view.spell_list.update({ data: applyFilters() });
|
||||
view.table_sort.update({ current: store.tableSort.current });
|
||||
});
|
||||
|
||||
})
|
||||
// Listen to search to filter by
|
||||
$('body').on('change keyup cut paste', '[data-action-search]', e => {
|
||||
.on('change keyup cut paste', '[data-action-search]', e => {
|
||||
setTimeout(() => {
|
||||
// Delay for value to change
|
||||
store.search = $(e.currentTarget).val();
|
||||
|
|
@ -257,17 +256,28 @@ $('body').on('change keyup cut paste', '[data-action-search]', e => {
|
|||
view.spell_list.update({ data: applyFilters() });
|
||||
view.table_sort.update(store.tableSort);
|
||||
}, 0);
|
||||
});
|
||||
|
||||
})
|
||||
// Listen for click on spells to open details
|
||||
$('body').on('click', '[data-action-details]', e => {
|
||||
.on('click', '[data-action-details]', e => {
|
||||
let name = $(e.currentTarget).attr('data-action-details');
|
||||
window.location.hash = name;
|
||||
spellDetails(name);
|
||||
});
|
||||
|
||||
})
|
||||
// Stop propogation if dontprop clicked
|
||||
.on('click', '.dontprop', e => {
|
||||
e.stopPropagation();
|
||||
})
|
||||
// Toggle All
|
||||
.on('change', 'label[for=table-header] input[type=checkbox]', e => {
|
||||
$(e.target).closest('form').find('[name=selected]').each(function () {
|
||||
this.checked = e.target.checked;
|
||||
if (this.checked) $(this).closest('label').addClass('is-checked');else $(this).closest('label').removeClass('is-checked');
|
||||
});
|
||||
}).on('change', 'input[name=selected][type=checkbox]', e => {
|
||||
console.log($('form[data-selected]').serialize());
|
||||
})
|
||||
// Article Scroll with User
|
||||
$('.mdl-layout__content').on('scroll', debounce(() => {
|
||||
.on('scroll', '.mdl-layout__content', debounce(() => {
|
||||
let distance = $('.mdl-layout__content')[0].scrollTop;
|
||||
$('[data-template=spell-details]').css('margin-top', distance);
|
||||
}, 10));
|
||||
|
|
|
|||
63
dist/view.js
vendored
63
dist/view.js
vendored
|
|
@ -254,7 +254,6 @@ function search_field() {
|
|||
input0.setAttribute("class", "mdl-textfield__input");
|
||||
input0.setAttribute("data-action-search", "");
|
||||
input0.setAttribute("type", "text");
|
||||
input0.setAttribute("name", "sample");
|
||||
input0.id = "fixed-header-drawer-exp";
|
||||
|
||||
// Update functions
|
||||
|
|
@ -647,31 +646,44 @@ function spell_list_if0_for0() {
|
|||
// Create elements
|
||||
var tr0 = document.createElement('tr');
|
||||
var td1 = document.createElement('td');
|
||||
var strong2 = document.createElement('strong');
|
||||
var text3 = document.createTextNode('');
|
||||
var label2 = document.createElement('label');
|
||||
var input3 = document.createElement('input');
|
||||
var td4 = document.createElement('td');
|
||||
var text5 = document.createTextNode('');
|
||||
var td6 = document.createElement('td');
|
||||
var text7 = document.createTextNode('');
|
||||
var strong5 = document.createElement('strong');
|
||||
var text6 = document.createTextNode('');
|
||||
var td7 = document.createElement('td');
|
||||
var text8 = document.createTextNode('');
|
||||
var td9 = document.createElement('td');
|
||||
var text10 = document.createTextNode('');
|
||||
|
||||
// Construct dom
|
||||
strong2.appendChild(text3);
|
||||
td1.appendChild(strong2);
|
||||
td1.setAttribute("class", "spell-name mdl-data-table__cell--non-numeric");
|
||||
td4.appendChild(text5);
|
||||
td4.setAttribute("class", "spell-school mdl-data-table__cell--non-numeric");
|
||||
td6.appendChild(text7);
|
||||
td6.setAttribute("class", "spell-level");
|
||||
input3.setAttribute("type", "checkbox");
|
||||
input3.setAttribute("name", "selected");
|
||||
input3.setAttribute("class", "mdl-checkbox__input dontprop");
|
||||
label2.appendChild(input3);
|
||||
label2.setAttribute("class", "mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect mdl-data-table__select dontprop");
|
||||
td1.appendChild(label2);
|
||||
strong5.appendChild(text6);
|
||||
td4.appendChild(strong5);
|
||||
td4.setAttribute("class", "spell-name mdl-data-table__cell--non-numeric");
|
||||
td7.appendChild(text8);
|
||||
td7.setAttribute("class", "spell-school mdl-data-table__cell--non-numeric");
|
||||
td9.appendChild(text10);
|
||||
td9.setAttribute("class", "spell-level");
|
||||
tr0.appendChild(td1);
|
||||
tr0.appendChild(td4);
|
||||
tr0.appendChild(td6);
|
||||
tr0.appendChild(td7);
|
||||
tr0.appendChild(td9);
|
||||
|
||||
// Update functions
|
||||
this.__update__ = {
|
||||
name: function (name) {
|
||||
input3.value = name;;
|
||||
},
|
||||
spell: function (spell) {
|
||||
text3.textContent = spell.name;
|
||||
text5.textContent = spell.school;
|
||||
text7.textContent = spell.prettyLevel;
|
||||
text6.textContent = spell.name;
|
||||
text8.textContent = spell.school;
|
||||
text10.textContent = spell.prettyLevel;
|
||||
tr0.setAttribute("data-action-details", spell.name);;
|
||||
}
|
||||
};
|
||||
|
|
@ -683,6 +695,9 @@ spell_list_if0_for0.prototype = Object.create(Monkberry.prototype);
|
|||
spell_list_if0_for0.prototype.constructor = spell_list_if0_for0;
|
||||
spell_list_if0_for0.pool = [];
|
||||
spell_list_if0_for0.prototype.update = function (__data__) {
|
||||
if (__data__.name !== undefined) {
|
||||
this.__update__.name(__data__.name);
|
||||
}
|
||||
if (__data__.spell !== undefined && __data__.__index__ !== undefined) {
|
||||
this.__update__.spell(__data__.spell);
|
||||
}
|
||||
|
|
@ -800,9 +815,21 @@ function table_sort() {
|
|||
var _this = this;
|
||||
|
||||
// Create elements
|
||||
var th0 = document.createElement('th');
|
||||
var label1 = document.createElement('label');
|
||||
var input2 = document.createElement('input');
|
||||
var for0 = document.createComment('for');
|
||||
var children0 = new Monkberry.Map();
|
||||
|
||||
// Construct dom
|
||||
input2.setAttribute("type", "checkbox");
|
||||
input2.id = "table-header";
|
||||
input2.setAttribute("class", "mdl-checkbox__input");
|
||||
label1.appendChild(input2);
|
||||
label1.setAttribute("class", "mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect mdl-data-table__select");
|
||||
label1.setAttribute("for", "table-header");
|
||||
th0.appendChild(label1);
|
||||
|
||||
// Update functions
|
||||
this.__update__ = {
|
||||
data: function (data) {
|
||||
|
|
@ -819,7 +846,7 @@ function table_sort() {
|
|||
};
|
||||
|
||||
// Set root nodes
|
||||
this.nodes = [for0];
|
||||
this.nodes = [th0, for0];
|
||||
}
|
||||
table_sort.prototype = Object.create(Monkberry.prototype);
|
||||
table_sort.prototype.constructor = table_sort;
|
||||
|
|
|
|||
2
dist/view.js.map
vendored
2
dist/view.js.map
vendored
|
|
@ -1 +1 @@
|
|||
{"version":3,"sources":["class-list.monk","search-field.monk","spell-details.monk","spell-list.monk","table-sort.monk"],"names":[],"mappings":"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","file":"view.js"}
|
||||
{"version":3,"sources":["class-list.monk","search-field.monk","spell-details.monk","spell-list.monk","table-sort.monk"],"names":[],"mappings":"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","file":"view.js"}
|
||||
52
index.html
52
index.html
|
|
@ -14,20 +14,12 @@
|
|||
<header class="mdl-layout__header">
|
||||
<div class="mdl-layout__header-row">
|
||||
<div class="mdl-layout-spacer"></div>
|
||||
<nav class="mdl-navigation">
|
||||
<a class="mdl-navigation__link" href="https://dark12222000.github.io/lootsplit/">
|
||||
<i class="material-icons">local_atm</i>
|
||||
Loot Split
|
||||
</a>
|
||||
<a class="mdl-navigation__link" href="http://paulvmoreau.github.io/BeltFedNPCs/">
|
||||
<i class="material-icons">people</i>
|
||||
NPC Generator
|
||||
</a>
|
||||
<a class="mdl-navigation__link mdl-color-text--teal-100" href="https://github.com/sharpshark28/my_spells">
|
||||
<i class="material-icons">code</i>
|
||||
Fork Me On Github
|
||||
</a>
|
||||
</nav>
|
||||
<button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-color-text--white">
|
||||
<span class="mdl-badge" data-badge="4">
|
||||
<i class="material-icons">print</i>
|
||||
Print
|
||||
</span>
|
||||
</button>
|
||||
<div data-action-details="" role="button" tabindex="0"><i class="material-icons">keyboard_arrow_left</i></div>
|
||||
</div>
|
||||
</header>
|
||||
|
|
@ -40,7 +32,7 @@
|
|||
<form>
|
||||
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
|
||||
<div data-template="search-field"></div>
|
||||
<label class="mdl-textfield__label" for="sample3">
|
||||
<label class="mdl-textfield__label">
|
||||
<i class="material-icons">search</i>
|
||||
Search
|
||||
</label>
|
||||
|
|
@ -53,7 +45,7 @@
|
|||
</aside>
|
||||
<main class="mdl-layout__content">
|
||||
<div class="page-content">
|
||||
<div class="mdl-grid">
|
||||
<form class="mdl-grid" id="selected-spells" data-selected>
|
||||
<table id="spell-list-container" class="mdl-cell mdl-cell--12-col mdl-cell--6-col-desktop mdl-data-table mdl-shadow--2dp">
|
||||
<thead>
|
||||
<tr data-template="table-sort"></tr>
|
||||
|
|
@ -61,10 +53,36 @@
|
|||
<tbody data-template="spell-list"></tbody>
|
||||
</table>
|
||||
<article data-template="spell-details" class="mdl-cell mdl-cell--12-col mdl-cell--6-col-desktop mdl-color-text--grey-600"></article>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer class="mdl-mini-footer">
|
||||
<div class="mdl-mini-footer__left-section">
|
||||
<div class="mdl-logo">My Spells</div>
|
||||
<ul class="mdl-mini-footer__link-list">
|
||||
<li>
|
||||
<a class="mdl-navigation__link mdl-color-text--teal-100" href="https://github.com/sharpshark28/my_spells">
|
||||
<i class="material-icons">code</i>
|
||||
Fork Me On Github
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="mdl-navigation__link" href="https://dark12222000.github.io/lootsplit/">
|
||||
<i class="material-icons">local_atm</i>
|
||||
Loot Split
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="mdl-navigation__link" href="http://paulvmoreau.github.io/BeltFedNPCs/">
|
||||
<i class="material-icons">people</i>
|
||||
NPC Generator
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<div id="toast" class="mdl-js-snackbar mdl-snackbar">
|
||||
<div class="mdl-snackbar__text"></div>
|
||||
<button class="mdl-snackbar__action" type="button"></button>
|
||||
|
|
|
|||
38
src/app.js
38
src/app.js
|
|
@ -228,8 +228,9 @@ const spellDetails = name => {
|
|||
/**
|
||||
* Event Bindings
|
||||
*/
|
||||
$('body')
|
||||
// Listen for header sorts
|
||||
$('body').on('click', '[data-action-sort]', e => {
|
||||
.on('click', '[data-action-sort]', e => {
|
||||
let name = $(e.currentTarget).attr('data-action-sort');
|
||||
let rev = store.tableSort.current === name && !store.tableSort.rev;
|
||||
store.tableSort.current = name;
|
||||
|
|
@ -238,10 +239,9 @@ $('body').on('click', '[data-action-sort]', e => {
|
|||
localStorage.setItem('tableSortRev', rev);
|
||||
view.spell_list.update({data: sortSpells(store.spells)});
|
||||
view.table_sort.update(store.tableSort);
|
||||
});
|
||||
|
||||
})
|
||||
// Listen for checkbox changes to filter spells
|
||||
$('body').on('change', '[data-action-classtoggle]', e => {
|
||||
.on('change', '[data-action-classtoggle]', e => {
|
||||
let name = $(e.currentTarget).attr('data-action-classtoggle');
|
||||
let add = $(e.currentTarget).prop('checked');
|
||||
let index = store.classes.current.indexOf(name);
|
||||
|
|
@ -253,10 +253,9 @@ $('body').on('change', '[data-action-classtoggle]', e => {
|
|||
localStorage.setItem('classes', store.classes.current);
|
||||
view.spell_list.update({data: applyFilters()});
|
||||
view.table_sort.update({current: store.tableSort.current});
|
||||
});
|
||||
|
||||
})
|
||||
// Listen to search to filter by
|
||||
$('body').on('change keyup cut paste', '[data-action-search]', e => {
|
||||
.on('change keyup cut paste', '[data-action-search]', e => {
|
||||
setTimeout(() => { // Delay for value to change
|
||||
store.search = $(e.currentTarget).val();
|
||||
store.tableSort.current = store.search.length || store.classes.current.length ? 'ranking' : null;
|
||||
|
|
@ -267,17 +266,30 @@ $('body').on('change keyup cut paste', '[data-action-search]', e => {
|
|||
view.spell_list.update({data: applyFilters()});
|
||||
view.table_sort.update(store.tableSort);
|
||||
}, 0);
|
||||
});
|
||||
|
||||
})
|
||||
// Listen for click on spells to open details
|
||||
$('body').on('click', '[data-action-details]', e => {
|
||||
.on('click', '[data-action-details]', e => {
|
||||
let name = $(e.currentTarget).attr('data-action-details');
|
||||
window.location.hash = name;
|
||||
spellDetails(name);
|
||||
});
|
||||
|
||||
})
|
||||
// Stop propogation if dontprop clicked
|
||||
.on('click', '.dontprop', e => {
|
||||
e.stopPropagation();
|
||||
})
|
||||
// Toggle All
|
||||
.on('change', 'label[for=table-header] input[type=checkbox]', e => {
|
||||
$(e.target).closest('form').find('[name=selected]').each(function() {
|
||||
this.checked = e.target.checked;
|
||||
if(this.checked) $(this).closest('label').addClass('is-checked');
|
||||
else $(this).closest('label').removeClass('is-checked');
|
||||
});
|
||||
})
|
||||
.on('change', 'input[name=selected][type=checkbox]', e => {
|
||||
console.log($('form[data-selected]').serialize());
|
||||
})
|
||||
// Article Scroll with User
|
||||
$('.mdl-layout__content').on('scroll', debounce(() => {
|
||||
.on('scroll', '.mdl-layout__content', debounce(() => {
|
||||
let distance = $('.mdl-layout__content')[0].scrollTop;
|
||||
$('[data-template=spell-details]').css('margin-top', distance);
|
||||
}, 10));
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
<input value="{{ data }}" class="mdl-textfield__input" data-action-search type="text" name="sample" id="fixed-header-drawer-exp" />
|
||||
<input value="{{ data }}" class="mdl-textfield__input" data-action-search type="text" id="fixed-header-drawer-exp" />
|
||||
|
|
|
|||
|
|
@ -1,6 +1,11 @@
|
|||
{% if data.length %}
|
||||
{% for spell of data %}
|
||||
<tr data-action-details="{{ spell.name }}">
|
||||
<td>
|
||||
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect mdl-data-table__select dontprop">
|
||||
<input type="checkbox" name="selected" value="{{ name }}" class="mdl-checkbox__input dontprop" />
|
||||
</label>
|
||||
</td>
|
||||
<td class="spell-name mdl-data-table__cell--non-numeric">
|
||||
<strong>
|
||||
{{ spell.name }}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,8 @@
|
|||
<th>
|
||||
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect mdl-data-table__select" for="table-header">
|
||||
<input type="checkbox" id="table-header" class="mdl-checkbox__input" />
|
||||
</label>
|
||||
</th>
|
||||
{% for name of data %}
|
||||
<th data-action-sort="{{ name }}" class="mdl-data-table__cell--non-numeric {{ current === 'ranking' ? 'mdl-color-text--grey-200 do-nothing' : '' }}">
|
||||
<i class="material-icons mdl-list__item-icon">
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue