Use Webpack Encore to manage assets

Author: javiereguiluz

.gitignore

@@ -1,5 +1,6 @@
 /app/config/parameters.yml
 /build/
+/node_modules/
 /phpunit.xml
 /.php_cs
 /var/*
@@ -16,3 +17,5 @@
 !var/SymfonyRequirements.php
 /vendor/
 /web/bundles/
+/web/build/fonts/glyphicons-*
+/web/build/images/glyphicons-*

app/Resources/assets/js/admin.js

@@ -0,0 +1,65 @@
+require('eonasdan-bootstrap-datetimepicker');
+
+require('imports-loader?define=>false!typeahead.js/dist/typeahead.jquery.min.js');
+const Bloodhound = require('imports-loader?define=>false!typeahead.js/dist/bloodhound.js');
+window.Bloodhound = Bloodhound;
+require('../scss/bootstrap-tagsinput.scss');
+require('bootstrap-tagsinput');
+
+$(function() {
+    // Datetime picker initialization.
+    // See http://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
+    // http://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',
+            typeahead: {
+                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/Resources/assets/js/app.js

@@ -0,0 +1,7 @@
+// loads the Bootstrap jQuery plugins
+require('bootstrap-sass/assets/javascripts/bootstrap/dropdown.js');
+require('bootstrap-sass/assets/javascripts/bootstrap/modal.js');
+require('bootstrap-sass/assets/javascripts/bootstrap/transition.js');
+
+// loads the code syntax highlighting library
+require('./highlight.js');

app/Resources/assets/js/highlight.js

@@ -0,0 +1,9 @@
+var hljs = require('highlight.js/lib/highlight.js');
+
+hljs.configure({
+    languages: ['twig', 'php']
+});
+
+hljs.initHighlightingOnLoad();
+
+module.exports = hljs;

app/Resources/assets/js/login.js

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

app/Resources/assets/scss/admin.scss

@@ -0,0 +1,25 @@
+@import "~bootswatch/flatly/variables";
+@import "~eonasdan-bootstrap-datetimepicker/src/sass/bootstrap-datetimepicker-build.scss";
+
+/* Page: 'Backend post index'
+   ------------------------------------------------------------------------- */
+body#admin_post_index .item-actions {
+  white-space: nowrap
+}
+
+body#admin_post_index .item-actions a.btn + a.btn {
+  margin-left: 4px
+}
+
+/* Page: 'Backend post show'
+   ------------------------------------------------------------------------- */
+body#admin_post_show .post-tags .label-default {
+  background-color: #e9ecec;
+  color: #6D8283;
+  font-size: 16px;
+  margin-right: 10px;
+  padding: .4em 1em .5em;
+}
+body#admin_post_show .post-tags .label-default i {
+  color: #95A6A7;
+}