https://www.still.co.uk/typo3conf/ext/stillnews/Resources/Public/JavaScript/modules/vue.news.js?1790758003

1(function(app) {
2
3    app.registerVueInstance({
4        el: document.querySelector('.news-overview--json'),
5
6        // übergreifende daten hier einfügen
7        data() {
8            return {
9                newsJson: window.newsJson,
10                filter: {
11                    category: '',
12                    industry: '',
13                    kindOfNews: '',
14                },
15            };
16        },
17
18        mounted() {
19            for (const pair of window.location.hash.slice(1).split('&')) {
20                const pairKey = pair.split('=')[0]
21                const pairValue = pair.split('=')[1]
22
23                if (Object.keys(this.filter).some(key => key === pairKey)) {
24                    this.filter[pairKey] = pairValue
25                }
26            }
27        },
28
29        methods: {
30            resetFilterHash () {
31                let rootURL = window.location.href.split('#')[0];
32                history.pushState(null, null, rootURL);
33            },
34
35            updateFilterHash() {
36                const hashParts = [];
37
38                if (this.filter.category !== '') {
39                    hashParts.push('category=' + this.filter.category);
40                }
41                if (this.filter.industry !== '') {
42                    hashParts.push('industry=' + this.filter.industry);
43                }
44                if (this.filter.kindOfNews !== '') {
45                    hashParts.push('type=' + this.filter.kindOfNews);
46                }
47
48                if (hashParts.length > 0) {
49                    const newHash = "#" + hashParts.join('&');
50                    // Nur aktualisieren, wenn sich der Hash wirklich ändert
51                    if (window.location.hash !== newHash) {
52                        history.pushState(null, null, newHash);
53                    }
54                } else {
55                    // Nur zurücksetzen, wenn ein Hash vorhanden war
56                    if (window.location.hash) {
57                        this.resetFilterHash();
58                    }
59                }
60            },
61
62            createFilterPredicate(filter) {
63                if (_.every(filter, value => value === '')) return () => true
64
65                let kindOfNewsText = '';
66
67                if (filter.kindOfNews !== '' && this.newsJson.filterFields.kindOfNews && this.newsJson.filterFields.kindOfNews[filter.kindOfNews]) {
68                    kindOfNewsText = this.newsJson.filterFields.kindOfNews[filter.kindOfNews].title;
69                }
70
71                const someCategoryMatches = (newsItem) =>
72                    newsItem.categories.some(category => category === parseInt(filter.category, 10))
73
74                const someIndustryMatches = (newsItem) =>
75                    newsItem.industries.some(industry => industry === parseInt(filter.industry, 10))
76
77                const someKindOfNewsMatches = (newsItem) =>
78                    newsItem.kindOfNews && newsItem.kindOfNews === kindOfNewsText;
79
80
81                const propertyChecks = []
82
83                if (filter.category !== '') {
84                    propertyChecks.push(someCategoryMatches);
85                }
86                if (filter.industry !== '') {
87                    propertyChecks.push(someIndustryMatches)
88                }
89
90                // Nur filtern, wenn wir einen gültigen Text (z.B. "News") gefunden haben
91                if (kindOfNewsText !== '') {
92                    propertyChecks.push(someKindOfNewsMatches);
93                }
94
95                function overEvery( iteratees ) {
96                    return function() {
97                        var args = arguments;
98                        return _.every(iteratees, function( iteratee ) {
99                            return iteratee.apply(this, args);
100                        });
101                    };
102                }
103
104                return overEvery(propertyChecks)
105            }
106        },
107
108        computed: {
109            filteredNews() {
110                const filterPredicate = this.createFilterPredicate(this.filter)
111                return this.newsJson.news.filter(filterPredicate)
112            }
113        },
114
115        watch: {
116            'filter.category' () {
117                this.updateFilterHash();
118            },
119            'filter.industry' () {
120                this.updateFilterHash();
121            },
122            'filter.kindOfNews' () {
123                this.updateFilterHash();
124            }
125        }
126    });
127
128}

128)(window.stillApp);