alexislefebvre/AsyncTweetsBundle

View on GitHub
src/Resources/views/layout.html.twig

Summary

Maintainability
Test Coverage
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        
        <title>{% block title %}Base{% endblock %} - AsyncTweets</title>
        
        <meta name="viewport" content="width=device-width, initial-scale=1">
        
        <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootswatch/3.3.2/cerulean/bootstrap.min.css" />
        <style>
            main.container > div.tweets > div.media:not(:first-child) {
                border-top: thin solid Grey;
                padding-top: 0.5em;
            }
            div.navbar-inverse {
                margin-bottom: 0;
            }
            .pagination {margin:10px 0;}
            /* don't use "white-space: pre-wrap;" on the <p> image container */
            div.tweets div.media > blockquote > p:first-child {
                white-space: pre-wrap;
            }
            div.tweets blockquote.media-body img {
                max-width: 20em;
                max-height: 15em;
            }
        </style>
    </head>
    
    <body{% block body_attrs %}{% endblock %}>
        {% block body %}
            <main class="container">
                {% block content_title %}{% endblock %}
                
                {% for flashMessage in app.session.flashbag.get('message') %}
                    <div class="alert alert-success">
                        {{ flashMessage|raw }}
                        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
                    </div>
                {% endfor %}
                
                {% block content %}Empty block.{% endblock %}
            </main>
            
            <!-- Footer -->
            <div class="navbar navbar-inverse" role="navigation">
              <div class="container">
                  <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
                      <span class="icon-bar"></span>
                      <span class="icon-bar"></span>
                      <span class="icon-bar"></span>
                    </button>
                    <a href="{{ path('asynctweets_homepage') }}"
                      class="navbar-brand">AsyncTweets</a>
                  </div>

                  <div class="navbar-collapse collapse navbar-responsive-collapse">
                    <ul class="nav navbar-nav">
                      <li>
                        <a href="http://bootswatch.com/cerulean/">Cerulean theme</a>
                      </li>
                      <li>
                        <a href="http://getbootstrap.com/">Bootstrap</a>
                      </li>
                    </ul>

                    <ul class="nav navbar-nav navbar-right">
                      <li>
                        <a href="https://github.com/alexislefebvre/AsyncTweetsBundle">
                          <span class="glyphicon glyphicon-question-sign"></span>
                          About
                        </a>
                      </li>
                    </ul>
                  </div>
                </div>
            </div>
        {% endblock %}
        
        <script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
        <script>window.jQuery && document.write('<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"><\/script>')</script>
        <script>
            var glyphicon_link = '<span class="glyphicon glyphicon-new-window"></span>';
            
            /* Add glyphicon to external links */
            function externalLinks(parent) {
                /* http://trevordavis.net/blog/use-jquery-to-open-all-external-links-in-a-new-window/#comment-406848859 */
                $(parent + " a[href^='http']:not([href*='" + window.location.host + "'])")
                    .attr('target','_blank')
                    .append('&nbsp;', glyphicon_link)
                ;
            }
            
            $(document).ready(function() {
                /* keys */
                $(document).bind('keyup', function(event) {
                    /* 37 = left, 39 = right */
                    if ([37,39].indexOf(event.which) !== -1) {
                        var text = ((event.which == 37) ? 'Previous' : 'Next');
                        
                        var el = $('div.navigation:first > div > ul.pagination > li > a:contains("' + text + '")');
                        
                        if (el.length != 0) {
                            // http://www.w3schools.com/jsref/met_html_click.asp
                            el.get(0).click();
                        }
                        
                        return false;
                    }
                });
                
                externalLinks('body');
                
                /* http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements/1207393#1207393 */
                $('main.container').on(
                    'click',
                    'div.navigation > div > ul.pagination > li > a',
                    function(event) {
                        $.ajax({
                            url: $(this).attr('href'),
                            success: function( data ) {
                                var $data = $("<div>").html(data);
                                
                                $('main.container').html(
                                    $data
                                        .find('main.container')
                                        .html()
                                );
                                
                                externalLinks('main.container div.tweets');
                                
                                /* http://stackoverflow.com/questions/3338642/updating-address-bar-with-new-url-without-hash-or-reloading-the-page/3340186#3340186 */
                                window.history.pushState(
                                    data,
                                    $data.find('title').text(),
                                    this.url
                                );
                                
                                /* update the <title> */
                                $('title').text($data.find('title').text());
                                
                                /* Scroll to the top of tweets */
                                $('html, body').animate({
                                    scrollTop: $('main.container > div.tweets')
                                        .last().offset().top
                                }, 250);
                            }
                        });
                        
                        event.preventDefault();
                        
                        return false;
                    }
                );
                
                $('main.container').on(
                    'click',
                    '#tweets-delete',
                    function() {
                        return window.confirm('Delete old tweets?');
                    }
                );
            });
        </script>
    </body>
</html>