Systemtest_tk/script/blog.js

/**
 * /script/blog.js
 * @version 1.2
 * @desc Script file for the blog tab
 * @author Fándly Gergő Zoltán (gergo@systemtest.tk, systemtest.tk)
 * @copy 2018 Fándly Gergő Zoltán
 * License:
    Systemtest.tk website's.
    Copyright (C) 2018  Fándly Gergő Zoltán

    This program is free software: you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with this program.  If not, see <https://www.gnu.org/licenses/>.
 **/

function expandPost(caller){
    var el=$(caller).prev("div.fadeout");
    
    //expand to full height
    var curHeight=$(el).height();
    var targetHeight=$(el).css("height", "auto").height();
    $(el).height(curHeight).animate({
        height: targetHeight
    });
    
    //remove fadeout class
    $(el).removeClass("fadeout");
    
    //no need for button now
    $(caller).slideUp(function(){
        $(this).remove();
    });
}

var postOffset=0;
function loadMorePosts(){
    $.ajax({
        url: "./subs/loader.php",
        data: {"load":"blog", "backend":true, "posts_offset":postOffset, "posts_limit":15},
        success: function(response){
            var posts=(response instanceof Object)?response:JSON.parse(response);
            $.each(posts, function(i, val){
                var post=(val instanceof Object)?val:JSON.parse(val);
                
                var el=$("<div class=\"post\" style=\"width: 95%\"></div>");
                var cont="<a href=\"/blog/"+post.id+"\"><h2>"+post.title+"</h2></a>";
                cont+="<p style=\"text-align: right; font-size: 0.8em\">"+post.date+"<br>by: "+post.owner+"</p>";
                
                cont+="<p>Tags: ";
                var tags=post.tags.split(";");
                $.each(tags, function(i, val){
                    cont+="<a href=\"/blog/tag:"+val+"\" style=\"margin-right: 1em\">"+val+"</a>";
                });
                cont+="</p>";
                
                cont+="<hr class=\"separator\">";
                
                var fade=$("<div class=\"fadeout grey ql-snow\" style=\"height: 15em\"></div");
                var quill=$("<div style=\"text-align: initial; height: fit-content\" class=\"ql-editor\"></div>");
                loadQuill(quill, post.content);
                quill.appendTo(fade);
                
                el.html(cont);
                fade.appendTo(el);
                
                var button=$("<button type=\"button\" onclick=\"expandPost(this)\">"+$("#langReadMore").text()+"</button>");
                button.appendTo(el);
                
                el.hide().appendTo("#posts").slideDown();
                $("<br><br>").hide().appendTo("#posts").slideDown();
            });
        }
    });
    postOffset+=15;
}

var tagPostOffset=0;
function loadTagPosts(tag){
    $.ajax({
        url: "./subs/loader.php",
        data: {"load":"blog", "backend":true, "posts_tag":tag, "posts_tag_offset":postOffset, "posts_tag_limit":15},
        success: function(response){
            var posts=(response instanceof Object)?response:JSON.parse(response);
            $.each(posts, function(i, val){
                var post=(val instanceof Object)?val:JSON.parse(val);
                
                var el=$("<div class=\"post\" style=\"width: 95%\"></div>");
                var cont="<a href=\"/blog/"+post.id+"\"><h2>"+post.title+"</h2></a>";
                cont+="<p style=\"text-align: right; font-size: 0.8em\">"+post.date+"<br>by: "+post.owner+"</p>";
                
                cont+="<hr class=\"separator\">";
                
                var fade=$("<div class=\"fadeout grey ql-snow\" style=\"height: 15em\"></div");
                var quill=$("<div style=\"text-align: initial; height: fit-content\" class=\"ql-editor\"></div>");
                loadQuill(quill, post.content);
                quill.appendTo(fade);
                
                el.html(cont);
                fade.appendTo(el);
                
                var button=$("<button type=\"button\" onclick=\"expandPost(this)\">"+$("#langReadMore").text()+"</button>");
                button.appendTo(el);
                
                el.hide().appendTo("#posts").slideDown();
                $("<br><br>").hide().appendTo("#posts").slideDown();
            });
        }
    });
    tagPostOffset+=15;
}

function loadPost(id){
    $.ajax({
        url: "./subs/loader.php",
        data: {"load":"blog", "backend":true, "post":id},
        success: function(response){
            var post=(response instanceof Object)?response:JSON.parse(response);
            var el=$("<div></div>");
            var cont="<a href=\"/blog/"+post.id+"\"><h2>"+post.title+"</h2></a>";
            cont+="<p style=\"text-align: right; font-size: 0.8em\">"+post.date+"<br>by: "+post.owner+"</p>";
            
            cont+="<p>Tags: ";
            var tags=post.tags.split(";");
            $.each(tags, function(i, val){
                cont+="<a href=\"/blog/tag:"+val+"\" style=\"margin-right: 1em\">"+val+"</a>";
            });
            cont+="</p>";
            
            cont+="<hr class=\"separator\">";
            
            var container=$("<div class=\"ql-snow\"></div");
            var quill=$("<div style=\"text-align: initial\" class=\"ql-editor\"></div>");
            loadQuill(quill, post.content);
            quill.appendTo(container);
            
            el.html(cont);
            container.appendTo(el);
            
            document.title=post.title+" :: "+document.title;
            el.hide().appendTo("#post").slideDown();
        }
    });
}