COM-19994: Refactoring of asynchronous blog posts loading (ezsystems#84)

ezecosystem · May 26, 2017 · b26a2e0 · b26a2e0
1 parent 8f8c840
commit b26a2e0
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 111 deletions.
diff --git a/app/Resources/views/full/blog.html.twig b/app/Resources/views/full/blog.html.twig
@@ -9,70 +9,22 @@
         </div>
 
         <div class="container">
-            {% include 'parts/content_list.html.twig' with {
-                'items': posts,
-                'viewType': 'line',
-                'extraParams': {
-                    'page': 1
-                }
-            } %}
-
+            <div class="blog-posts-container">
+                {% include 'parts/content_list.html.twig' with {
+                    'items': posts,
+                    'viewType': 'line',
+                    'extraParams': {
+                        'page': 1
+                    }
+                } %}
+            </div>
             <div class="row">
-                <div class="blog-load-more col-md-6 col-md-offset-3">
+                <div class="button-load-more col-md-6 col-md-offset-3">
                     {% if posts.totalCount > posts.searchHits|length %}
-                        <button onclick="loadBlogPosts()">Load more</button>
+                        <button class="load-more" data-url="/ezplatform/blog/load/page" data-page="2" data-target=".blog-posts-container">Load more</button>
                     {% endif %}
                 </div>
             </div>
         </div>
     </div>
-
-    <script>
-        {% autoescape 'js' %}
-            var page = 1,
-                loadMoreButton = $('.blog-load-more').html();
-
-            function loadBlogPosts() {
-                page += 1;
-
-                $('.blog-load-more').fadeOut('fast', function () {
-                    $(this).html('<div class="blog-load-progress"></div>')
-                        .fadeIn();
-                });
-
-                $.ajax({
-                    type: 'POST',
-                    url: '/ezplatform/blog/load/page/' + page,
-                    dataType: 'json',
-                    success: function (data) {
-                        $(data.html).hide().insertAfter(
-                            $('.blog-post-line').last()
-                        ).fadeIn('slow', function () {
-                            $('html body').animate({
-                                scrollTop: $('.blog-post-line.page-' + page)
-                                    .first()
-                                    .offset()
-                                    .top
-                            }, 500);
-
-                            if (false === data.showLoadMoreButton) {
-                                loadMoreButton = '';
-                            }
-
-                            $('.blog-load-more').fadeOut('fast', function () {
-                                $(this).html(loadMoreButton).fadeIn();
-                            });
-                        });
-                    },
-                    error: function () {
-                        $('.blog-load-more').fadeOut('fast', function () {
-                            $(this).html('Oh no, something went terribly wrong :-(')
-                                .addClass('blog-load-error')
-                                .fadeIn();
-                        });
-                    }
-                });
-            }
-        {% endautoescape %}
-    </script>
 {% endblock %}
diff --git a/app/config/routing.yml b/app/config/routing.yml
@@ -38,12 +38,12 @@ _multiFileUpload:
 _ezplatform_blog_ajax:
     path: /ezplatform/blog/load/page/{page}
     defaults: { _controller: app.controller.blog:showBlogPostsAction }
-    methods:  [POST]
+    methods:  [GET]
     requirements:
         "page": "\d+"
 _ezplatform_bundles_list_ajax:
     path: /ezplatform/bundles/load/page/{page}
     defaults: { _controller: app.controller.bundle:getBundlesListAction }
-    methods: [POST]
+    methods: [GET]
     requirements:
         "page": "\d+"
diff --git a/web/assets/css/blog.css b/web/assets/css/blog.css
@@ -109,52 +109,3 @@
     color: #f15a22;
     text-decoration: none;
 }
-
-.blog-load-more {
-    margin-top: 40px;
-}
-
-.blog-load-more button {
-    text-transform: uppercase;
-    font-family: 'Open Sans', sans-serif;
-    font-weight: 600;
-    border: 2px solid #b1b1b1;
-    border-radius: 23px;
-    font-size: 17px;
-    padding: 10px 0;
-    width: 100%;
-    white-space: normal;
-    color: #b1b1b1;
-    background: inherit;
-    outline: none;
-}
-
-.blog-load-more button:hover {
-    background: #b1b1b1;
-    color: #fff;
-}
-
-.blog-load-progress {
-    width: 48px;
-    height: 48px;
-    margin: auto;
-    background: url('/assets/images/loading.svg') no-repeat;
-    -webkit-transform-origin: 50% 50%;
-    transform-origin: 50% 50%;
-    -webkit-animation: loader_spin 1s linear infinite;
-    animation: loader_spin 1s linear infinite;
-}
-
-@keyframes loader_spin {
-    100% {
-        -webkit-transform: rotate(-360deg);
-        transform: rotate(-360deg);
-    }
-}
-
-.blog-load-error {
-    text-align: center;
-    font-size: 17px;
-    color: #c34111;
-    font-weight: 600;
-}
diff --git a/web/assets/js/app.js b/web/assets/js/app.js
@@ -27,7 +27,7 @@ $(document).ready(function(){
        $parent.append('<div class="button-load-more-progress"></div>').fadeIn();
 
         $.ajax({
-            type: 'POST',
+            type: 'GET',
             url: url + '/' + page,
             dataType: 'json',
             success: function(data) {