add new demo symfony files

app/assets/js/admin.js

@@ -0,0 +1,64 @@
+import '../scss/admin.scss';
+import 'eonasdan-bootstrap-datetimepicker';
+import 'typeahead.js';
+import Bloodhound from "bloodhound-js";
+import 'bootstrap-tagsinput';
+
+$(function() {
+    // Datetime picker initialization.
+    // See https://eonasdan.github.io/bootstrap-datetimepicker/
+    $('[data-toggle="datetimepicker"]').datetimepicker({
+        icons: {
+            time: 'fa fa-clock-o',
+            date: 'fa fa-calendar',
+            up: 'fa fa-chevron-up',
+            down: 'fa fa-chevron-down',
+            previous: 'fa fa-chevron-left',
+            next: 'fa fa-chevron-right',
+            today: 'fa fa-check-circle-o',
+            clear: 'fa fa-trash',
+            close: 'fa fa-remove'
+        }
+    });
+
+    // Bootstrap-tagsinput initialization
+    // https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/
+    var $input = $('input[data-toggle="tagsinput"]');
+    if ($input.length) {
+        var source = new Bloodhound({
+            local: $input.data('tags'),
+            queryTokenizer: Bloodhound.tokenizers.whitespace,
+            datumTokenizer: Bloodhound.tokenizers.whitespace
+        });
+        source.initialize();
+
+        $input.tagsinput({
+            trimValue: true,
+            focusClass: 'focus',
+            typeaheadjs: {
+                name: 'tags',
+                source: source.ttAdapter()
+            }
+        });
+    }
+});
+
+// Handling the modal confirmation message.
+$(document).on('submit', 'form[data-confirmation]', function (event) {
+    var $form = $(this),
+        $confirm = $('#confirmationModal');
+
+    if ($confirm.data('result') !== 'yes') {
+        //cancel submit event
+        event.preventDefault();
+
+        $confirm
+            .off('click', '#btnYes')
+            .on('click', '#btnYes', function () {
+                $confirm.data('result', 'yes');
+                $form.find('input[type="submit"]').attr('disabled', 'disabled');
+                $form.submit();
+            })
+            .modal('show');
+    }
+});

app/assets/js/app.js

@@ -0,0 +1,15 @@
+import '../scss/app.scss';
+
+// loads the Bootstrap jQuery plugins
+import 'bootstrap-sass/assets/javascripts/bootstrap/transition.js';
+import 'bootstrap-sass/assets/javascripts/bootstrap/alert.js';
+import 'bootstrap-sass/assets/javascripts/bootstrap/collapse.js';
+import 'bootstrap-sass/assets/javascripts/bootstrap/dropdown.js';
+import 'bootstrap-sass/assets/javascripts/bootstrap/modal.js';
+import 'jquery'
+
+// loads the code syntax highlighting library
+import './highlight.js';
+
+// Creates links to the Symfony documentation
+import './doclinks.js';

app/assets/js/doclinks.js

@@ -0,0 +1,58 @@
+'use strict';
+
+// Wraps some elements in anchor tags referencing to the Symfony documentation
+$(function() {
+    var $modal = $('#sourceCodeModal');
+    var $controllerCode = $modal.find('code.php');
+    var $templateCode = $modal.find('code.twig');
+
+    function anchor(url, content) {
+        return '<a class="doclink" target="_blank" href="' + url + '">' + content + '</a>';
+    };
+
+    // Wraps links to the Symfony documentation
+    $modal.find('.hljs-comment').each(function() {
+        $(this).html($(this).html().replace(/https:\/\/symfony.com\/doc\/[\w/.#-]+/g, function(url) {
+            return anchor(url, url);
+        }));
+    });
+
+    // Wraps Symfony's annotations
+    var annotations = {
+        '@Cache': 'https://symfony.com/doc/current/bundles/SensioFrameworkExtraBundle/annotations/cache.html',
+        '@IsGranted': 'https://symfony.com/doc/current/bundles/SensioFrameworkExtraBundle/annotations/security.html#isgranted',
+        '@ParamConverter': 'https://symfony.com/doc/current/bundles/SensioFrameworkExtraBundle/annotations/converters.html',
+        '@Route': 'https://symfony.com/doc/current/routing.html#creating-routes-as-annotations',
+        '@Security': 'https://symfony.com/doc/current/bundles/SensioFrameworkExtraBundle/annotations/security.html#security'
+    };
+
+    $controllerCode.find('.hljs-doctag').each(function() {
+        var annotation = $(this).text();
+
+        if (annotations[annotation]) {
+            $(this).html(anchor(annotations[annotation], annotation));
+        }
+    });
+
+    // Wraps Twig's tags
+    $templateCode.find('.hljs-template-tag > .hljs-name').each(function() {
+        var tag = $(this).text();
+
+        if ('else' === tag || tag.match(/^end/)) {
+            return;
+        }
+
+        var url = 'https://twig.symfony.com/doc/3.x/tags/' + tag + '.html#' + tag;
+
+        $(this).html(anchor(url, tag));
+    });
+
+    // Wraps Twig's functions
+    $templateCode.find('.hljs-template-variable > .hljs-name').each(function() {
+        var func = $(this).text();
+
+        var url = 'https://twig.symfony.com/doc/3.x/functions/' + func + '.html#' + func;
+
+        $(this).html(anchor(url, func));
+    });
+});

app/assets/js/highlight.js

@@ -0,0 +1,8 @@
+import hljs from 'highlight.js/lib/highlight';
+import php from 'highlight.js/lib/languages/php';
+import twig from 'highlight.js/lib/languages/twig';
+
+hljs.registerLanguage('php', php);
+hljs.registerLanguage('twig', twig);
+
+hljs.initHighlightingOnLoad();

app/assets/js/jquery.instantSearch.js

@@ -0,0 +1,106 @@
+/**
+ * jQuery plugin for an instant searching.
+ *
+ * @author Oleg Voronkovich <oleg-voronkovich@yandex.ru>
+ * @author Yonel Ceruto <yonelceruto@gmail.com>
+ */
+(function ($) {
+    'use strict';
+
+    String.prototype.render = function (parameters) {
+        return this.replace(/({{ (\w+) }})/g, function (match, pattern, name) {
+            return parameters[name];
+        })
+    };
+
+    // INSTANTS SEARCH PUBLIC CLASS DEFINITION
+    // =======================================
+
+    var InstantSearch = function (element, options) {
+        this.$input = $(element);
+        this.$form = this.$input.closest('form');
+        this.$preview = $('<ul class="search-preview list-group">').appendTo(this.$form);
+        this.options = $.extend({}, InstantSearch.DEFAULTS, this.$input.data(), options);
+
+        this.$input.keyup(this.debounce());
+    };
+
+    InstantSearch.DEFAULTS = {
+        minQueryLength: 2,
+        limit: 10,
+        delay: 500,
+        noResultsMessage: 'No results found',
+        itemTemplate: '\
+                <article class="post">\
+                    <h2><a href="{{ url }}">{{ title }}</a></h2>\
+                    <p class="post-metadata">\
+                       <span class="metadata"><i class="fa fa-calendar"></i> {{ date }}</span>\
+                       <span class="metadata"><i class="fa fa-user"></i> {{ author }}</span>\
+                    </p>\
+                    <p>{{ summary }}</p>\
+                </article>'
+    };
+
+    InstantSearch.prototype.debounce = function () {
+        var delay = this.options.delay;
+        var search = this.search;
+        var timer = null;
+        var self = this;
+
+        return function () {
+            clearTimeout(timer);
+            timer = setTimeout(function () {
+                search.apply(self);
+            }, delay);
+        };
+    };
+
+    InstantSearch.prototype.search = function () {
+        var query = $.trim(this.$input.val()).replace(/\s{2,}/g, ' ');
+        if (query.length < this.options.minQueryLength) {
+            this.$preview.empty();
+            return;
+        }
+
+        var self = this;
+        var data = this.$form.serializeArray();
+        data['l'] = this.limit;
+
+        $.getJSON(this.$form.attr('action'), data, function (items) {
+            self.show(items);
+        });
+    };
+
+    InstantSearch.prototype.show = function (items) {
+        var $preview = this.$preview;
+        var itemTemplate = this.options.itemTemplate;
+
+        if (0 === items.length) {
+            $preview.html(this.options.noResultsMessage);
+        } else {
+            $preview.empty();
+            $.each(items, function (index, item) {
+                $preview.append(itemTemplate.render(item));
+            });
+        }
+    };
+
+    // INSTANTS SEARCH PLUGIN DEFINITION
+    // =================================
+
+    function Plugin(option) {
+        return this.each(function () {
+            var $this = $(this);
+            var instance = $this.data('instantSearch');
+            var options = typeof option === 'object' && option;
+
+            if (!instance) $this.data('instantSearch', (instance = new InstantSearch(this, options)));
+
+            if (option === 'search') instance.search();
+        })
+    }
+
+    $.fn.instantSearch = Plugin;
+    $.fn.instantSearch.Constructor = InstantSearch;
+
+})(window.jQuery);

app/assets/js/login.js

@@ -0,0 +1,11 @@
+$(function() {
+    var usernameEl = $('#username');
+    var passwordEl = $('#password');
+
+    // in a real application, the user/password should never be hardcoded
+    // but for the demo application it's very convenient to do so
+    if (!usernameEl.val() || 'jane_admin' === usernameEl.val()) {
+        usernameEl.val('jane_admin');
+        passwordEl.val('kitten');
+    }
+});

app/assets/js/search.js

@@ -0,0 +1,9 @@
+import './jquery.instantSearch.js';
+
+$(function() {
+    $('.search-field')
+        .instantSearch({
+            delay: 100,
+        })
+        .keyup();
+});