templates/homepage/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  2. {% block title %}Homepage{% endblock %}
  3. {% block stylesheets %}
  4.     {{ parent() }}
  5.     <style>
  6.         #fb-root {
  7.             text-align: center;
  8.         }
  10.         .fb-form-wrapper {
  11.             display: none;
  12.         }
  13.     </style>
  14. {% endblock %}
  15. {% block body %}
  16.     <div class="login-wrapper">
  17.         <div id="fb-root">
  18.             <div class="fb-login-button" data-width="" data-scope="manage_pages, pages_show_list" data-size="large"
  19.                  data-button-type="continue_with" data-auto-logout-link="true" data-use-continue-as="true"></div>
  20.         </div>
  21.     </div>
  22.     <div class="fb-form-wrapper">
  23.         <h4>Choose page</h4>
  24.         <form id="fb-form" action="{{ path("choose_fb_page") }}" method="post">
  25.             <input type="hidden" name="at">
  26.             <input type="hidden" name="uid">
  27.             <select name="page"></select>
  28.         <button type="submit">Save</button>
  29.         </form>
  30.     </div>
  31. {% endblock %}
  32. {% block javascripts %}
  33.     {{ parent() }}
  34.     <script>
  35.         $(document).ready(function () {
  36.             window.fbAsyncInit = function () {
  37.                 FB.init({
  38.                     appId: {{ fb.app_id }},
  39.                     cookie: true,
  40.                     xfbml: true,
  41.                     version: 'v3.3'
  42.                 });
  43.                 FB.AppEvents.logPageView();
  44.                 FB.getLoginStatus(function (response) {
  45.                     statusChangeCallback(response);
  46.                 });
  48.                 function checkLoginState() {
  49.                     FB.getLoginStatus(function (response) {
  50.                         statusChangeCallback(response);
  51.                     });
  52.                 }
  53.             };
  54.             (function (d, s, id) {
  55.                 var js, fjs = d.getElementsByTagName(s)[0];
  56.                 if (d.getElementById(id)) {
  57.                     return;
  58.                 }
  59.                 js = d.createElement(s);
  60.                 js.id = id;
  61.                 js.src = "https://connect.facebook.net/en_US/sdk.js";
  62.                 fjs.parentNode.insertBefore(js, fjs);
  63.             }(document, 'script', 'facebook-jssdk'));
  64.         });
  66.         function statusChangeCallback(response) {
  67.             if (response.status === 'connected') {
  68.                 $('#fb-form input[name="at"]').val(response.authResponse.accessToken);
  69.                 $('#fb-form input[name="uid"]').val(response.authResponse.userID);
  70.                 $('.fb-form-wrapper').show();
  71.                 FB.api(
  72.                     "/" + response.authResponse.userID + "/accounts",
  73.                     function (response) {
  74.                         if (response && !response.error) {
  75.                             html = "";
  76.                             $('#fb-form select[name="page"]').html(html);
  77.                             $.each(response.data, function (index, value) {
  78.                                 html += "<option value=" + value.id + ">" + value.name + "</option>";
  79.                             });
  80.                             $('#fb-form select[name="page"]').html(html);
  81.                         }
  82.                     }
  83.                 );
  84.             }
  85.         }
  86.     </script>
  87. {% endblock %}