https://dso.de/WebParts/News-Listing/ui.js

1window.addEventListener('load', function() {
2
3    getListItemsByListName(
4        'DSO-News',
5        renderNewsList,
6        '$select=*&$orderby=ArticleStartDate desc');
7
8
9    function retrievePublishingImageHtml(itemUrl, callerObj) {
10
11        $.ajax({
12            url: itemUrl,
13            method: 'GET',
14            headers: {
15                Accept: 'application/json; odata=verbose'
16            },
17            success: function(data, request) {
18                console.log(data);
19                var imageHtml = (data.d.PublishingRollupImage.indexOf('?') != -1) ? data.d.PublishingRollupImage.split('?')[0] + '?RenditionID=4">' : data.d.PublishingRollupImage;
20                imageHtml = '<div class="content-preview">' + imageHtml + '</div>';
21                callerObj.append(imageHtml);
22            },
23            error: function() {
24                return
25            }
26        });
27    }
28
29    function renderNewsList(data) {
30
31        newsList = $('#listing-news');
32
33        // console.log(data);
34        data.forEach(function(item, index) {
35
36            var path = $.trim(item.Title),
37                $listItem = $('<li></li>'),
38                $listItemDescription = $listItem.append('<div class="description"></div>'),
39                html = '';
40
41            html += '<span class="meta">' + formattedDate(item.ArticleStartDate) + ' / ' + item.Location + ' / News</span>';
42            html += '<h3 class="title"><a href="' + item.PathToTemplate + encodeURI(path) + '/' + item.ID + '">' + item.Title + '</a>';
43            if (item.Untertitel != null) {
44                html += '<span class="subtitle">' + item.Untertitel + '</span>';
45            }
46
47            html += '</h3><span class="abstract">' + item.dso_Teaser + '</span ></div>'
48
49            $listItemDescription.append(html);
50
51            retrievePublishingImageHtml(item.FieldValuesAsHtml.__deferred.uri, $listItem);
52
53            if (item.dso_Region != null) {
54                $listItem.attr('class', returnRegionLabel(item.dso_Region.WssId, $listItem));
55            }
56
57            newsList.append($listItem);
58
59        });
60
61
62
63        // Add Header
64        $('#news-listing h4#news-list-header').text(data.length + ' News')
65
66        // Create filter menu based on entries
67        var newsFilterList = $('#news-filter-list'),
68            regions = ['Bundesweit', 'Baden-Württemberg', 'Bayern', 'Mitte', 'Nord', 'Nord-Ost', 'Nordrhein-Westfalen', 'Ost'];
69
70        regions.forEach(function(item, index) {
71            var filterItemsLength = $('li[data-region="' + item + '"]', newsList).length;
72            var li = '<li><a class="xnews-filter active-' + filterItemsLength + '" data-region="' + item + '">' + item + ' (' + filterItemsLength + ')</a></li>';
73            newsFilterList.append(li);
74        });
75
76
77        // Define filter behaviour
78        $('.xnews-filter').not('.active-0').on('click', function(event) {
79
80            var region = $(this).data('region');
81
82            // apply listing filter
83            applyListingFilter(region);
84
85
86        });
87
88        // filter list if url parameter region is there (and valid)
89        var regionUrlParam = getUrlParameter('region');
90        if (regions.includes(regionUrlParam)) {
91            applyListingFilter(regionUrlParam);
92        }
93
94    }
95    var today = new Date();
96    //getListItemsByListName('Veranstaltungen', renderEventList, '$filter=ArticleStartDate ge datetime\'' + today.toISOString() + '\'&$orderby=ArticleStartDate asc&$top=4');
97
98    function renderEventList(data) {
99        console.log(data);
100        data.forEach(function(item) {
101            var path = $.trim(item.Title),
102                $listItem = $('<li></li>'),
103                $listItemDescription = $listItem.append('<div class="description"></div>'),
104                html = '';
105
106            html += '<span class="meta">' + formattedDate(item.ArticleStartDate) + ' / ' + item.Location + ' / Veranstaltung</span>';
107            html += '<h3 class="title"><a href="' + item.PathToTemplate + encodeURI(path) + '/' + item.ID + '">' + item.Title + '</a>';
108            if (item.Untertitel != null) {
109                html += '<span class="subtitle">' + item.Untertitel + '</span>';
110            }
111
112            html += '</h3><span class="abstract">' + item.dso_Teaser + '</span ></div>'
113
114            $listItemDescription.append(html);
115
116            retrievePublishingImageHtml(item.FieldValuesAsHtml.__deferred.uri, $listItem);
117            returnRegionLabel(item.dso_Region.WssId, $listItem);
118            $listItem.attr('class', item.dso_Region.WssId)
119
120            $('#listing-events').append($listItem);
121        });
122    }
123
124    function applyListingFilter(filter) {
125
126        if (filter == '*') {
127            $('li', newsList).show();
128            $('#news-listing h4#news-list-header').text(data.length + ' News')
129        } else {
130            $('li', newsList).hide();
131            $('li[data-region="' + filter + '"').show();
132            $('#news-listing h4#news-list-header').text($('li[data-region="' + filter + '"').length + ' News')
133        }
134
135        $('#news-filter-list').removeAttr('style');
136
137    }
138
139    function returnRegionLabel(id, callerObj) {
140        switch (id) {
141            case 1:
142                region = "nord";
143                regionLabel = "Nord";
144                break;
145            case 2:
146                region = "nordrhein-westfalen";
147                regionLabel = "Nordrhein-Westfalen";
148                break;
149            case 3:
150                region = "baden-wuerttemberg";
151                regionLabel = "Baden-Württemberg";
152                break;
153            case 23:
154                region = "nord-ost";
155                regionLabel = "Nord-Ost";
156                break;
157            case 50:
158                region = "bayern";
159                regionLabel = "Bayern";
160                break;
161            case 52:
162                region = "mitte";
163                regionLabel = "Mitte";
164                break;
165            case 150:
166                region = "ost";
167                regionLabel = "Ost";
168                break;
169            case 225:
170                region = "bundesweit";
171                regionLabel = "Bundesweit";
172                break;
173            default:
174                region = "bundesweit";
175                regionLabel = "Bundesweit";
176        }
177        $(callerObj).attr('data-region', regionLabel)
178        return region
179
180    }
181
182    function getUrlParameter(paramName) {
183        var searchString = window.location.search.substring(1),
184            i, val, params = searchString.split("&");
185
186        for (i = 0; i < params.length; i++) {
187            val = params[i].split("=");
188            if (val[0] == paramName) {
189                return val[1];
190            }
191        }
192        return null;
193    }
194
195});