https://kulturportal.de/media/scripts/blog_list.js

1var BlogList = function (config) {
2    var self = this;
3    self.container = config.container_selector;
4    self.template = config.template;
5    self.link_root = config.link_root;
6    self.document_root = config.document_root;
7    self.image_toolkit_url = config.image_toolkit_url;
8    self.sort = config.sort;
9    self.items = [];
10    self.offset = config.offset;
11    self.id_group = config.id_group;
12    self.article_groups = config.article_groups;
13
14    for (var prop in config.params) {
15        self[prop] = config.params[prop];
16    }
17
18    self.locked = false;
19    self.no_results_text = config.no_results_text;
20    self.onLoaded = typeof config.onLoaded === 'function' ?
21            config.onLoaded : function () {};
22    $(document).on('registerwinopen', function () {
23        self.lock();
24    });
25    $(document).on('registerwinclose', function () {
26        self.unlock();
27    });
28    self.log('Instantiated');
29};
30
31BlogList.prototype.handle = function () {
32    var self = this;
33    self.all_loaded = false;
34    self.in_progress = false;
35
36    $(document).ready(function () {
37
38        $(window).scroll(function () {
39            if ($(window).scrollTop() + $(window).height() > ($(document).height() / 2) &&
40                    !self.all_loaded && !self.in_progress && !self.isLocked()) {
41                self.loadArticles();
42            }
43        });
44
45        self.checkDocHeight();
46
47        if (self.keyword) {
48            $('#blog-search-keyword').val(self.keyword);
49            if ($('#blog-clear-filters-button').is(':hidden'))
50                $('#clear-filters-button').fadeIn(400);
51            self.scrollToResults();
52        }
53
54        if (self.section) {
55            $('#blog-search-section').val(self.section);
56            if ($('#blog-clear-filters-button').is(':hidden'))
57                $('#clear-filters-button').fadeIn(400);
58            self.scrollToResults();
59        }
60
61        if (self.tag) {
62            $('#blog-search-tag').val(self.tag);
63            if ($('#blog-clear-filters-button').is(':hidden'))
64                $('#clear-filters-button').fadeIn(400);
65            self.scrollToResults();
66        }
67
68        $('#blog-search-keyword, #blog-search-section, #blog-search-tag').change(function (e) {
69            var $input = $(this);
70            if (!$input.attr('name'))
71                return false;
72            self.all_loaded = false;
73            var has_filter = false;
74            var query_string = '?';
75            var val = null;
76
77            $.each(['section', 'keyword', 'tag'], function (i, filter) {
78                if ($input.attr('name') === filter) {
79                    if ($input.val() !== 'null') {
80                        val = $input.val();
81                    }
82                    self[filter] = val;
83                }
84                if (self[filter]) {
85                    query_string += (query_string === '?' ? '' : '&') + filter + '=' + self[filter];
86                }
87                if (query_string !== '?')
88                    has_filter = true;
89            });
90
91            History.pushState({}, ml('page_title_blog'), query_string);
92            self.resetOffset();
93            var $button = $('#blog-clear-filters-button');
94            if (has_filter) {
95                $button.fadeIn(400);
96            } else {
97                $button.fadeOut(400);
98            }
99
100            self.loadArticles(null, true, true);
101            $(this).blur();
102        });
103
104        var handleClearButton = function () {
105            var $button = $('#blog-clear-input-button');
106            var $filters_button = $('#blog-clear-filters-button');
107            if ($('#blog-search-keyword').val()) {
108                $button.fadeIn(400);
109                $filters_button.fadeIn(400);
110            } else {
111                $button.fadeOut(400);
112                $filters_button.fadeOut(400);
113            }
114        };
115
116        handleClearButton();
117
118        $('#blog-search-keyword')
119                .on('change', handleClearButton)
120                .on('keyup', handleClearButton);
121
122        $('#blog-clear-input-button').on('click', function () {
123            $(this).siblings('input').val('').change();
124        });
125
126        $('#blog-clear-filters-button').on('click', function () {
127            self.section = null;
128            self.tag = null;
129            self.keyword = null;
130            self.all_loaded = false;

131            History.pushState({}, ml('page_title_blog'), "?");
132            $('#blog-search-keyword').val(null);
133            $('#blog-search-section').val(null);
134            $('#blog-search-tag').val(null);
135            $('#blog-clear-input-button').fadeOut(400);
136            self.resetOffset();
137            $(this).fadeOut(400);
138            self.loadArticles(null, true, true);
139        });
140
141        $('form#add-new-page').submit(function (e) {
142            var $this = $(this);
143            var val = $this.find('select').val();
144            var title = $this.find('input[name="title"]').val();
145
146            e.preventDefault();
147            if (!val || val === "null") {
148                $this.find('#message_page').show();
149            } else {
150                $this.find('#message_page').hide();
151                $.ajax({
152                    url: ENV.link_root + '/blog_page.json',
153                    type: 'post',
154                    data: {
155                        id_page: val,
156                        title: title
157                    },
158                    success: function (new_page_url) {
159                        window.location.href = new_page_url;
160                    }
161                });
162            }
163        });
164    });
165};
166
167BlogList.prototype.scrollToResults = function () {
168    var self = this;
169    $('html,body').animate({
170        scrollTop: $(self.container).offset().top - 150
171    }, 600);
172};
173
174BlogList.prototype.loadArticles = function (callback, is_search, is_init) {
175    var self = this;
176    self.in_progress = true;
177    CbUx.showLoader();
178
179    $.get(self.link_root + '/blog_articles.json', {
180        offset: self.getCurrentOffset(),
181        sort: self.sort,
182        section: self.section,
183        keyword: self.keyword,
184        tag: self.tag
185    }, function (articles) {
186        if (is_search) {
187            self.clear();
188        }
189        if (articles.length > 0) {
190            self.render(articles);
191            if (typeof callback === 'function') {
192                callback();
193            }
194        } else {
195            self.all_loaded = true;
196            if (is_init) {
197                self.handleNoResults();
198            }
199        }
200        if (is_search) {
201            self.scrollToResults();
202        }
203        self.onLoaded();
204        CbUx.hideLoader();
205        self.in_progress = false;
206    });
207};
208
209BlogList.prototype.checkDocHeight = function () {
210    var self = this;
211    if ($(document).height() <= $(window).height()) {
212        self.loadArticles(self.checkDocHeight);
213    }
214};
215
216BlogList.prototype.render = function (items) {
217    var self = this;
218    self.handleRender(items);
219};
220
221BlogList.prototype.handleRender = function (items) {
222    var self = this;
223    var rendered = 0;
224
225    $.each(items, function (i, item) {
226        if (item.Thumb) {
227            item.picUrl = self.image_toolkit_url + 'file=' + item.Thumb.Uri.replace(/\.(\w+)$/, '_t1.$1');
228        } else {
229            item.picUrl = item.Medias.length > 0 ?
230                    self.image_toolkit_url + 'file=' + item.Medias[0].FilesystemPath +
231                    item.Medias[0].FilesystemFile.replace(/\.(\w+)$/, '_t1.$1')
232                    : self.document_root + '/media/images/img-blog-default.jpg';
233        }
234
235        item.CopyrightText = item.Medias.length > 0 && (item.Medias[0].Copyright || item.Medias[0].Originator) ?
236                ' title="' + self.removeDoubleWhitespace(
237                        '&copy; ' + item.Medias[0].Copyright + ' ' + item.Medias[0].Originator
238                        ) + '"' : '';
239
240
241        var $item = $(self.returnTileMarkup(item));
242        var $img = $item.find('img');
243        $img.css({
244            opacity: 0
245        });
246
247        var image = new Image();
248        image.onload = image.onerror = function () {
249            $img.animate({
250                opacity: 1
251            }, 800, function () {
252                $img.show();
253            });
254        };
255        image.src = item.picUrl;
256
257        $(self.container).append($item);
258        rendered++;
259    });
260
261    self.log('Rendered ' + rendered + ' items');
262    self.setOffset(rendered);
263};
264
265BlogList.prototype.returnTileMarkup = function (item) {
266    var self = this;
267
268    return Mustache.render(self.template, item);
269};
270
271BlogList.prototype.abbrev = function (text, length, omission, cutInWord) {
272    cutInWord = cutInWord || false;
273    if (text.length <= length)
274        return text;
275    var result = text.substr(0, length);
276
277    var trailingWhitespaceRe = /\s+$/;
278    if (result.match(trailingWhitespaceRe) || cutInWord) {
279        result = result.replace(trailingWhitespaceRe, '');
280    } else {
281        // we may have cut in the middle of a word: restore rest of word
282        // TODO: actually this may lead to longer strings then the given
283        // length
284        var leading = text.substr(length).match(/^[^\s-]*/);
285        if (leading)
286            result += leading;
287    }
288
289    // remove trailing commas
290    return result.replace(/[,]+$/, '') + (omission || ' ...');
291};
292
293BlogList.prototype.removeTags = function (str) {
294    return str.replace(/(<([^>]+)>)/ig, " ");
295};
296
297BlogList.prototype.getUri = function (CbMdbTmedia) {
298    var uri;
299    // check if path ends with '/'
300    if ('/' === CbMdbTmedia.FilesystemPath.substr(-1)) {
301        uri = CbMdbTmedia.FilesystemPath + CbMdbTmedia.FilesystemFile;
302    } else {
303        uri = CbMdbTmedia.FilesystemPath + '/' + CbMdbTmedia.FilesystemFile;
304    }
305    return uri;
306};
307
308BlogList.prototype.sprintf = function (format, items) {
309    return format.replace(/%/gi, function () {
310        return items.shift();
311    });
312};
313
314BlogList.prototype.log = function (msg) {
315    console.log('[Tile List] ' + msg);
316};
317
318BlogList.prototype.getIdGroup = function () {
319    return this.id_group;
320};
321
322BlogList.prototype.getArticleGroups = function () {
323    return this.article_groups;
324};
325
326BlogList.prototype.getCurrentOffset = function () {
327    return this.offset;
328};
329
330BlogList.prototype.setOffset = function (val) {
331    this.offset = this.offset + val;
332};
333
334BlogList.prototype.resetOffset = function () {
335    this.offset = 0;
336};
337
338BlogList.prototype.nl2br = function (str, is_xhtml) {
339    var breakTag = (is_xhtml || typeof is_xhtml === 'undefined') ? '<br />' : '<br>';
340    return (str + '').replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, '$1' + breakTag + '$2');
341};
342
343BlogList.prototype.clear = function () {
344    var self = this;
345    $(self.container).empty();
346    self.items = [];
347    self.log('List cleared.');
348};
349
350BlogList.prototype.removeDoubleWhitespace = function (str) {
351    return str.replace(/\s\s+/g, ' ');
352};
353
354BlogList.prototype.lock = function () {
355    this.locked = true;
356};
357
358BlogList.prototype.unlock = function () {
359    this.locked = false;

360};
361
362BlogList.prototype.isLocked = function () {
363    return this.locked;
364};
365
366BlogList.prototype.handleNoResults = function () {
367    var self = this;
368    $(self.container).append(
369            $(document.createElement('p'))
370            .addClass('blog-list-no-results')
371            .html(self.no_results_text).text()
372            );
373};