Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

vueify start of showheader #5087

Merged
merged 23 commits into from
Sep 8, 2018
Merged
Changes from 8 commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions themes-default/slim/package.json
Original file line number Diff line number Diff line change
@@ -57,6 +57,7 @@
"gulp-changed": "3.2.0",
"gulp-imagemin": "4.1.0",
"imagemin-pngquant": "6.0.0",
"is-visible": "2.2.0",
"jquery": "3.3.1",
"lodash": "4.17.10",
"mini-css-extract-plugin": "0.4.2",
@@ -74,6 +75,7 @@
"vue-meta": "1.5.3",
"vue-native-websocket": "2.0.8",
"vue-router": "3.0.1",
"vue-scrollto": "2.11.0",
"vue-snotify": "3.2.1",
"vue-template-compiler": "2.5.17",
"vue-truncate-collapsed": "2.1.0",
125 changes: 85 additions & 40 deletions themes-default/slim/src/components/display-show.vue
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
<script>
import { isVisible } from 'is-visible';
import { scrollTo } from 'vue-scrollto';
import { mapState, mapGetters } from 'vuex';
import { api, apiRoute } from '../api';
import AppLink from './app-link.vue';
@@ -11,6 +13,20 @@ export default {
AppLink,
PlotInfo
},
props: {
/**
* Show id
*/
showId: {
type: Number
},
/**
* Show indexer
*/
showIndexer: {
type: String
}
},
metaInfo() {
if (!this.show || !this.show.title) {
return {
@@ -31,10 +47,10 @@ export default {
'getShowById'
]),
indexer() {
return this.$route.query.indexername;
return this.showIndexer || this.$route.query.indexername;
},
id() {
return this.$route.query.seriesid;
return this.showId || this.$route.query.seriesid;
},
show() {
const { indexer, id, getShowById, shows, $store } = this;
@@ -49,6 +65,12 @@ export default {
return defaults.show;
}
// Not detailed
if (!show.seasons) {
$store.dispatch('getShow', { id, indexer, detailed: true });
return getShowById({ indexer, id });
}
return show;
}
},
@@ -62,13 +84,18 @@ export default {
showHideRows
} = this;
$(window).on('resize', () => {
this.reflowLayout();
this.$watch('show', () => {
console.debug('Reloading layout');
this.$nextTick(() => this.reflowLayout());
});
window.addEventListener('load', () => {
this.reflowLayout();
['load', 'resize'].map(event => {
return window.addEventListener(event, () => {
this.reflowLayout();
});
});
window.addEventListener('load', () => {
$.ajaxEpSearch({
colorRow: true
});
@@ -78,17 +105,6 @@ export default {
$.ajaxEpRedownloadSubtitle();
});
$(document.body).on('change', '#seasonJump', event => {
const id = $('#seasonJump option:selected').val();
if (id && id !== 'jump') {
const season = $('#seasonJump option:selected').data('season');
$('html,body').animate({ scrollTop: $('[name="' + id.substring(1) + '"]').offset().top - 100 }, 'slow');
$('#collapseSeason-' + season).collapse('show');
location.hash = id;
}
$(event.currentTarget).val('jump');
});
$(document.body).on('click', '#changeStatus', () => {
const epArr = [];
const status = $('#statusSelect').val();
@@ -158,24 +174,28 @@ export default {
});
});
// Selects all visible episode checkboxes.
$(document.body).on('click', '.seriesCheck', () => {
$('.epCheck:visible').each((index, element) => {
element.checked = true;
});
$('.seasonCheck:visible').each((index, element) => {
element.checked = true;
});
// Selects all visible episode checkboxes
document.addEventListener('click', event => {
if (event.target && event.target.className.includes('clearAll')) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That class is incorrect, should be seriesCheck.

[...document.getElementsByClassName('epCheck')].filter(isVisible).forEach(element => {
element.checked = true;
});
[...document.getElementsByClassName('seasonCheck')].filter(isVisible).forEach(element => {
element.checked = true;
});
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You could use this instead of the two loops, but it's probably going to be replaced later..

[...document.querySelectorAll('.epCheck, .seasonCheck')].filter(isVisible).forEach(element => {
    element.checked = true;
});

}
});
// Clears all visible episode checkboxes and the season selectors
$(document.body).on('click', '.clearAll', () => {
$('.epCheck:visible').each((index, element) => {
element.checked = false;
});
$('.seasonCheck:visible').each((index, element) => {
element.checked = false;
});
document.addEventListener('click', event => {
OmgImAlexis marked this conversation as resolved.
Show resolved Hide resolved
if (event.target && event.target.className.includes('clearAll')) {
[...document.getElementsByClassName('epCheck')].filter(isVisible).forEach(element => {
element.checked = false;
});
[...document.getElementsByClassName('seasonCheck')].filter(isVisible).forEach(element => {
element.checked = false;
});
}
});
// Show/hide different types of rows when the checkboxes are changed
@@ -265,25 +285,20 @@ export default {
$.tablesorter.columnSelector.attachTo($('#showTable, #animeTable'), '#popover-target');
});
// Moved and rewritten this from displayShow. This changes the button when clicked for collapsing/expanding the
// Season to Show Episodes or Hide Episodes.
$('.collapse.toggle').on('hide.bs.collapse', function() {
// Changes the button when clicked for collapsing/expanding the season to show/hide episodes
document.addEventListener('hide.bs.collapse', function() {
const reg = /collapseSeason-(\d+)/g;
const result = reg.exec(this.id);
$('#showseason-' + result[1]).text('Show Episodes');
$('#season-' + result[1] + '-cols').addClass('shadow');
});
$('.collapse.toggle').on('show.bs.collapse', function() {
document.addEventListener('show.bs.collapse', function() {
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There's a good chance this is broken.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I suggest:

document.querySelectorAll('.collapse.toggle').forEach(element => {
    element.addEventListener('hide.bs.collapse', function() {
        // on hide
    });
    element.addEventListener('show.bs.collapse', function() {
        // on show
    });
));

And to test this you need to disable Show all seasons in General Config -> Interface.

const reg = /collapseSeason-(\d+)/g;
const result = reg.exec(this.id);
$('#showseason-' + result[1]).text('Hide Episodes');
$('#season-' + result[1] + '-cols').removeClass('shadow');
});
// Generate IMDB stars
$('.imdbstars').each((index, element) => {
$(element).html($('<span/>').width($(element).text() * 12));
});
attachImdbTooltip(); // eslint-disable-line no-undef
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tooltip is not working. It's possible you need to put this in reflowLayout().

// Get the season exceptions and the xem season mappings.
@@ -504,6 +519,36 @@ export default {
$('#' + seasonNo + '-cols').show();
}
});
},
jumpToSeason(event) {
const { id } = event.currentTarget;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That is incorrect, it uses #jumpToSeason which is the <select> id, not the target id.

// Don't jump until an option is selected
if (id && id !== 'jump') {
scrollTo(id, 600, {
container: 'body',
easing: 'ease-in',
offset: -100
});
// Update URL hash
location.hash = id;
// Reset jump
event.currentTarget.value = 'jump';
}
},
toggleSpecials() {
this.$store.dispatch('setConfig', {
layout: {
show: {
specials: !this.config.layout.show.specials
}
}
});
},
reverse(array) {
return array.slice().reverse();
}
}
};
3 changes: 3 additions & 0 deletions themes-default/slim/src/components/snatch-selection.vue
Original file line number Diff line number Diff line change
@@ -75,6 +75,9 @@ export default {
$('#summaryBackground').height(height);
$('#summaryBackground').offset({ top, left: 0 });
$('#summaryBackground').show();
},
reverse(array) {
return array.slice().reverse();
}
},
mounted() {
6 changes: 0 additions & 6 deletions themes-default/slim/views/partials/seasonEpisode.mako

This file was deleted.

171 changes: 74 additions & 97 deletions themes-default/slim/views/partials/showheader.mako

Large diffs are not rendered by default.

25 changes: 25 additions & 0 deletions themes-default/slim/yarn.lock
Original file line number Diff line number Diff line change
@@ -1388,6 +1388,10 @@ beeper@^1.0.0:
version "1.1.1"
resolved "https://registry.yarnpkg.com/beeper/-/beeper-1.1.1.tgz#e6d5ea8c5dad001304a70b22638447f69cb2f809"

bezier-easing@^2.0.3:
version "2.1.0"
resolved "https://registry.yarnpkg.com/bezier-easing/-/bezier-easing-2.1.0.tgz#c04dfe8b926d6ecaca1813d69ff179b7c2025d86"

big.js@^3.1.3:
version "3.2.0"
resolved "https://registry.yarnpkg.com/big.js/-/big.js-3.2.0.tgz#a5fc298b81b9e0dca2e458824784b65c52ba588e"
@@ -5127,6 +5131,13 @@ is-valid-glob@^0.3.0:
version "0.3.0"
resolved "https://registry.yarnpkg.com/is-valid-glob/-/is-valid-glob-0.3.0.tgz#d4b55c69f51886f9b65c70d6c2622d37e29f48fe"

is-visible@2.2.0:
version "2.2.0"
resolved "https://registry.yarnpkg.com/is-visible/-/is-visible-2.2.0.tgz#722b3acff3694a30074927e1156f58ae87db0e9c"
dependencies:
iselement "^1.1.3"
style-properties "^1.3.1"

is-whitespace-character@^1.0.0:
version "1.0.2"
resolved "https://registry.yarnpkg.com/is-whitespace-character/-/is-whitespace-character-1.0.2.tgz#ede53b4c6f6fb3874533751ec9280d01928d03ed"
@@ -5155,6 +5166,10 @@ isarray@1.0.0, isarray@^1.0.0, isarray@~1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"

iselement@^1.1.3:
version "1.1.4"
resolved "https://registry.yarnpkg.com/iselement/-/iselement-1.1.4.tgz#7e55b52a8ebca50a7e2e80e5b8d2840f32353146"

isexe@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
@@ -8212,6 +8227,10 @@ strip-outer@^1.0.0:
dependencies:
escape-string-regexp "^1.0.2"

style-properties@^1.3.1:
version "1.3.1"
resolved "https://registry.yarnpkg.com/style-properties/-/style-properties-1.3.1.tgz#7f8617421f2959157f08d09eecba8688a15854c5"

style-search@^0.1.0:
version "0.1.0"
resolved "https://registry.yarnpkg.com/style-search/-/style-search-0.1.0.tgz#7958c793e47e32e07d2b5cafe5c0bf8e12e77902"
@@ -9094,6 +9113,12 @@ vue-router@3.0.1:
version "3.0.1"
resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.0.1.tgz#d9b05ad9c7420ba0f626d6500d693e60092cc1e9"

vue-scrollto@2.11.0:
version "2.11.0"
resolved "https://registry.yarnpkg.com/vue-scrollto/-/vue-scrollto-2.11.0.tgz#0657f127faded60a71fbcc841f393279a49aed55"
dependencies:
bezier-easing "^2.0.3"

vue-snotify@3.2.1:
version "3.2.1"
resolved "https://registry.yarnpkg.com/vue-snotify/-/vue-snotify-3.2.1.tgz#1e093838b67ecb4141d6227b6b19175735f4e259"
79 changes: 75 additions & 4 deletions themes/dark/assets/js/vendors.js

Large diffs are not rendered by default.

6 changes: 0 additions & 6 deletions themes/dark/templates/partials/seasonEpisode.mako

This file was deleted.

171 changes: 74 additions & 97 deletions themes/dark/templates/partials/showheader.mako

Large diffs are not rendered by default.

79 changes: 75 additions & 4 deletions themes/light/assets/js/vendors.js

Large diffs are not rendered by default.

6 changes: 0 additions & 6 deletions themes/light/templates/partials/seasonEpisode.mako

This file was deleted.

171 changes: 74 additions & 97 deletions themes/light/templates/partials/showheader.mako

Large diffs are not rendered by default.