show_article.html.twig 15.8 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
{% set page = article %}

{% extends 'JityHomepageBundle:Default:layout_page.html.twig' %}

{% block layout_content %}

<div class="blog-article">

    <div class="">

        <div class="pull-left">

            <div class="blog-date">
                <div class="blog-date-day">{{ article.createdAt|date('d') }}</div>
                {{ article.createdAt|date('M Y') }}
            </div>

            <div class="blog-navigation">
19
                <div id="blog-navigation-top" class="blog-navigation-element" title="Zum Seiten Anfang">
20 21
                    <img src="{{ asset('bundles/jityhomepage/img/glyphicons_218_circle_arrow_top.png') }}" alt="" title="Zum Seiten Anfang">
                </div>
22 23 24 25 26
                <div id="blog-navigation-headlines" class="blog-navigation-element" title="Zum nächsten Abschnitt">
                    <img src="{{ asset('bundles/jityhomepage/img/glyphicons_222_share.png') }}" alt="" title="Zum nächsten Abschnitt">
                </div>
                <div id="blog-navigation-comments" class="blog-navigation-element" title="Zu den Kommentaren">
                    <img src="{{ asset('bundles/jityhomepage/img/glyphicons_309_comments.png') }}" alt="" title="Zu den Kommentaren">
27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46
                </div>
            </div>

        </div>

        <div class="blog-article-wrapper">

            <div class="blog-article-headline">
                {{ article.title }}
            </div>

            <div class="">
                {% render 'JityHomepageBundle:Editor:format' with {'text': article.content } %}
            </div>

            <div class="blog-article-comments">

                <a name="comments"></a>

                <div class="blog-article-comments-headline">
47
                    <img src="{{ asset('bundles/jityhomepage/img/glyphicons_309_comments.png') }}" alt="" class="pull-left headline-icon">
48 49 50 51 52 53 54 55 56
                    Kommentare
                </div>

                <div class="row">

                {% if article.comments %}
                {% for comment in article.comments %}
                    <div class="blog-article-comments-section-wrapper">

57 58
                        {% set editGranted = false %}

59
                        {% if app.user %}
60 61 62 63 64 65 66 67 68 69 70 71
                            {% if is_granted('ROLE_AUTHOR') %}
                                {% set editGranted = true %}
                            {% endif %}

                            {% if comment.author and editGranted == false %}
                                {% if comment.author.email == app.user.email %}
                                    {% set editGranted = true %}
                                {% endif %}
                            {% endif %}
                        {% endif %}

                        {% if true == editGranted %}
72 73 74 75 76 77 78 79 80 81

                            <div class="controllpanel">
                                <a class="btn btn-primary btn-edit" title="Bearbeiten" href="#">
                                    <i class="icon-white icon-pencil"></i>
                                </a>
                                <a class="btn btn-danger btn-remove" title="Entfernen" href="#">
                                    <i class="icon-white icon-remove"></i>
                                </a>
                            </div>
                            <div class="push"></div>
82

83 84 85
                            {% render 'JityHomepageBundle:Blog:deleteCommentForm' with {id: comment.id, renderForm: true, action: path('article_comment_delete', {id: comment.id}) }  %}

                        {% endif %}
86

87
                        <div class="blog-article-comments-section">
88
                            <a name="comment-{{ comment.id }}"></a>
89 90 91
                            <h4>
                            {% if comment.author %}
                                {{ comment.author.firstName ~ " " ~ comment.author.lastName }}
92 93 94 95 96 97 98 99
                            {% elseif comment.authorName is not empty %}
                                
                                {{ comment.authorName }}

                                {% if comment.authorTwitterNickname is not empty %}
                                <small>(<i class="icon-white icon-user"></i> <a href="http://twitter.com/{{ comment.authorTwitterNickname }}">{{ comment.authorTwitterNickname }}</a>)</small>
                                {% endif %}

100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119
                            {% else %}
                                Anonymous
                            {% endif %}
                            sagt ..
                            </h4>
                            <span>
                                <p class="blog-article-comment-content">
                                    <img src="{{ asset('bundles/jityhomepage/img/open_quote.png') }}" alt="" class="pull-left image">
                                    {{ comment.content }}
                                </p>
                                <p class="comment-dates">
                                    <small>
                                        <i class="icon-pencil icon-white"></i> Am {{ comment.createdAt|date }} geschrieben.
                                        {% if comment.createdAt != comment.updatedAt %}
                                        &mdash; <i class="icon-wrench icon-white"></i> Am {{ comment.updatedAt|date }} bearbeitet.
                                        {% endif %}
                                    </small>
                                </p>
                            </span>

120
                            <form action="{{ path('article_comment_update', {id: comment.id}) }}#new-comment" method="post" style="display: none">
121

122 123 124 125 126
                                {% if form_edit is not defined %}
                                    {% render 'JityHomepageBundle:Blog:createCommentForm' with {renderFormTag: false, comment: comment} %}
                                {% else %}
                                    {% render 'JityHomepageBundle:Blog:createCommentForm' with {renderFormTag: false, form: form_edit} %}
                                {% endif %}
127

128 129 130 131 132 133
                                <div class="form-actions">
                                    <button type="submit" class="btn btn-primary">
                                        <i class="icon-pencil icon-white"></i>
                                        Speichern
                                    </button>
                                </div>
134

135
                            </form>
136 137 138 139 140 141 142 143

                        </div>
                    </div>
                {% endfor %}
                {% endif %}

                    <div class="blog-article-comments-new-section">

144 145 146 147 148 149 150 151 152 153
                        {% set anonymous = true %}
                        {% set anonymousParam = 1 %}

                        {% if app.user %}
                            {% if is_granted('ROLE_USER') %}
                                {% set anonymous = false %}
                                {% set anonymousParam = 0 %}
                            {% endif %}
                        {% endif %}

154 155
                        <a name="new-comment"></a>

156
                        <form action="{{ path('article_comment_create', {id: article.id, anonymous: anonymousParam}) }}#new-comment" method="post">
157 158 159

                            <legend class="h2">Neuen Kommentar verfassen</legend>

160
                            {% if not is_granted('ROLE_USER') %}
161 162 163 164
                            <p>
                                Um einen neuen Kommentar verfassen zu können füllen
                                Sie das folgende Formular mit Ihren Daten aus.
                            </p>
165
                            {% endif %}
166

167 168 169 170 171
                            {% if form_new is not defined %}
                                {% render 'JityHomepageBundle:Blog:createCommentForm' with {renderFormTag: false, anonymous: anonymous} %}
                            {% else %}
                                {% render 'JityHomepageBundle:Blog:createCommentForm' with {renderFormTag: false, anonymous: anonymous, form: form_new} %}
                            {% endif %}
172

173 174 175 176 177 178
                            <div class="form-actions">
                                <button type="submit" class="btn btn-primary">
                                    <i class="icon-pencil icon-white"></i>
                                    Schreiben
                                </button>
                            </div>
179

180 181 182
                            {% if not is_granted('ROLE_USER') %}
                            
                                <legend class="h2">Einloggen um einen Kommentar zu verfassen</legend>
183

184 185 186 187 188
                                <p>
                                    Alternativ können Sie sich mittels externer Dienste
                                    oder mit Ihrem Account von dieser Seite einloggen.
                                    Dieser Schritt erspart Ihnen das angeben ihrer Daten.
                                </p>
189

190 191
                                <div class="center">
                                    {% render 'JityHomepageBundle:Security:renderLoginLinks' with {destination: path('article', {slug: article.slug}) ~ "#new-comment" } %}
192
                                </div>
193

194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228
                            {% endif %}

                        </form>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{% render 'JityHomepageBundle:Editor:build' %}

{% render 'JityHomepageBundle:Editor:modal' with {
    'name': 'confirm',
    'label': '',
    'enableJS': true,
    'buttons': [
        {
            'id': 1,
        },
        {
            'id': 2,
        },
    ],
    'body': '',
} %}

<script>
$(document).ready(function() {

    $('#blog-navigation-top').click(function (){
        app.scrollTo(0);
    });

229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245
    lastHeadline = $();

    $('#blog-navigation-headlines').click(function (){
        
        if (0 == lastHeadline.size()) {
            lastHeadline = '.blog-article-wrapper h1, '
                         + '.blog-article-wrapper h2, '
                         + '.blog-article-wrapper h3, '
                         + '.blog-article-wrapper h4, '
                         + '.blog-article-wrapper h5, '
                         + '.blog-article-wrapper h6';
        }

        var last     = app.scrollTo(lastHeadline);
        lastHeadline = last.not(':first');
    });

246 247 248 249
    $('#blog-navigation-comments').click(function (){
        app.scrollTo('a[name="comments"]');
    });

250
    article = {
251

252 253 254
        refreshNavigation: function (){

            // Fetch current values
255 256 257 258 259 260 261 262 263 264 265 266
            var position         = $(window).scrollTop();
            var positionBottom   = position + $(window).height();
            var navbarHeight     = $('.navbar').height();
            var helper           = $('.blog-article > div > .pull-left');
            var topHelper        = $('#blog-navigation-top');
            var commentsHelper   = $('#blog-navigation-comments');
            var page             = $('.blog-article');
            var pageTop          = page.offset().top;
            var maxTop           = pageTop + page.height() - helper.height() - 40; // 20 = Margins
            var comElement       = $('.blog-article-comments');
            var comElementTop    = comElement.offset().top;
            var comElementBottom = comElementTop + comElement.height();
267 268

            if ((position > navbarHeight) && (position < maxTop)) {
269

270
                // User cant see the top and isnt near to the bottom
271
                var curTop  = $('.wrapper .row:first').position().top - navbarHeight;
272 273 274 275 276 277 278 279 280 281 282

                // Reset Style in favor of getting clean left-value (resize)
                helper.attr('style', '');

                // Calculate ne position and apply
                var curLeft = helper.position().left;
                var style   = 'position: fixed; left: ' + curLeft + 'px; top: ' + curTop + 'px;';
                helper.attr('style', style);

                // Show Top-Trigger
                topHelper.slideDown();
283 284 285 286 287 288 289 290 291 292 293 294 295

                // Comments are visible or not
                if ((comElementBottom <= positionBottom) && (comElementTop >= position)) {

                    // We are at the outer scope, just hide comments helper
                    commentsHelper.slideUp();

                } else {

                    // We are at usefull position to display comments helper
                    commentsHelper.slideDown();           
                }

296
            } else {
297

298 299 300 301 302
                // User can see the top and is near to the bottom
                // Remove Style and Hide Top-Trigger
                topHelper.slideUp();
                helper.attr('style', '');
            }
303
        }
304 305 306
    }

    $(window).scroll(article.refreshNavigation);
307 308

    comments = {
309

310 311
        init: function() {

312 313
            article.refreshNavigation();

314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381
            $('textarea[data-target="#editor_modal"]').bind('focus', function(){

                // Mark syncElement with a unique id
                var uniqueId = (new Date).getTime();
                $(this).attr('data-unique-id', uniqueId);

                // Set query selector for the focused syncElement
                editor.setSyncElement('textarea[data-unique-id="' + uniqueId + '"]');
            });

            $('.blog-article-comments .controllpanel .btn-edit').click(function (e){

                // Dont do anything on link clicking
                e.preventDefault();

                var comment        = $(this).closest('.blog-article-comments-section-wrapper');
                var commentContent = comment.find('.blog-article-comment-content');
                var form           = comment.find('form:last');

                form.slideToggle();
                commentContent.slideToggle();
            });

            $('.blog-article-comments .controllpanel .btn-remove').click(function (e){

                // Dont do anything on link clicking
                e.preventDefault();

                // Configure and run the modal
                confirmModal
                    .setLabel('Bestätigung der Löschaktion')
                    .setBody('Möchten Sie diesen Kommentar wirklich löschen?')
                    .setButtons([
                        {
                            id: 1,
                            class: 'btn-danger',
                            icon: 'icon-share-alt',
                            value: 'Abbrechen'
                        },
                        {
                            id: 2,
                            class: 'btn-primary',
                            icon: 'icon-ok',
                            value: 'Löschen',
                            data: this,
                            click: function (data){

                                var data    = $(data);
                                var comment = data.closest('.blog-article-comments-section-wrapper');
                                var form    = comment.find('form:first');

                                console.log(form);

                                // Prepare form to work async
                                form.submit(function(e){

                                    console.log(this);

                                    // Dont do anything on link clicking
                                    e.preventDefault();

                                    $.post($(this).attr('action'), $(this).serialize(), function(res){
                                        console.log(res);
                                    });
                                });

                                // Just trigger the prepared form
                                form.trigger('submit');
382

383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403
                                comment.slideUp(function() {

                                    // At end of sliding remove element from dom
                                    comment.remove();
                                });
                            }
                        }
                    ])
                    .show()
                ;
            });
        }
    }

    comments.init();

});
</script>

{% endblock %}