Implemented a generic modal builder (with a PHP Action and a switchable JS…

Implemented a generic modal builder (with a PHP Action and a switchable JS Class). Ported icons and editor builder to use this new modal builder. Implemented initial Sidebar Controller.

src/Jity/HomepageBundle/Controller/EditorController.php

@@ -42,6 +42,42 @@ class EditorController extends Controller
         ));
     }
 
+    /**
+     * modalAction 
+     * 
+     * @param mixed $name 
+     * @param array $buttons 
+     * @param mixed $label 
+     * @param mixed $body 
+     * @param mixed $enableJS 
+     * @access public
+     * @return void
+     */
+    public function modalAction($name, $buttons = array(), $label = null, $body = null, $enableJS = false)
+    {
+        $reqBtn = array(
+            'id'    => '',
+            'class' => '',
+            'icon'  => '',
+            'value' => ''
+        );
+
+        $validBtns = array();
+
+        // Fill every button in a valid and required struct
+        foreach ($buttons as $button) {
+            $validBtns[] = array_merge($reqBtn, $button);
+        }
+
+        return $this->render('JityHomepageBundle:Editor:modal.html.twig', array(
+            'name'     => $name,
+            'enableJS' => $enableJS,
+            'buttons'  => $validBtns,
+            'label'    => $label,
+            'body'     => $body,
+        ));
+    }
+
     /**
      * iconsAction 
      * 

src/Jity/HomepageBundle/Controller/SidebarController.php

+<?php
+
+namespace Jity\HomepageBundle\Controller;
+
+use Symfony\Component\HttpFoundation\Request;
+use Symfony\Bundle\FrameworkBundle\Controller\Controller;
+
+use Jity\HomepageBundle\Entity\Sidebar;
+use Jity\HomepageBundle\Entity\Section;
+use Jity\HomepageBundle\Form\SidebarType;
+
+/**
+ * Sidebar controller.
+ *
+ */
+class SidebarController extends Controller
+{
+    /**
+     * Lists all Sidebar entities.
+     *
+     */
+    public function indexAction()
+    {
+        $em = $this->getDoctrine()->getManager();
+
+        $entities = $em->getRepository('JityHomepageBundle:Sidebar')->findAll();
+
+        return $this->render('JityHomepageBundle:Sidebar:index.html.twig', array(
+            'entities' => $entities,
+        ));
+    }
+
+    /**
+     * Finds and displays a Sidebar entity.
+     *
+     */
+    public function showAction($id)
+    {
+        $em = $this->getDoctrine()->getManager();
+
+        $entity = $em->getRepository('JityHomepageBundle:Sidebar')->find($id);
+
+        if (!$entity) {
+            throw $this->createNotFoundException('Unable to find Sidebar entity.');
+        }
+
+        $deleteForm = $this->createDeleteForm($id);
+
+        return $this->render('JityHomepageBundle:Sidebar:show.html.twig', array(
+            'entity'      => $entity,
+            'delete_form' => $deleteForm->createView(),
+        ));
+    }
+
+    /**
+     * Displays a form to create a new Sidebar entity.
+     *
+     */
+    public function newAction()
+    {
+        $entity = new Sidebar();
+
+        // -----------------------------------
+
+        $section1 = new Section();
+        $section1
+            ->setTitle('Folgen')
+            ->setContent('Dies ist Test-Inhalt. Im Moment hat dies hier noch keinen Effekt.')
+        ;
+        $entity->addSection($section1);
+
+        $section2 = new Section();
+        $section2
+            ->setTitle('Sektion 51')
+            ->setContent('Auch diese Sektion ist ein Dummy. Die Entwicklung ist noch im Gange.')
+        ;
+        $entity->addSection($section2);
+
+        // -----------------------------------
+
+        $form   = $this->createForm(new SidebarType(), $entity);
+
+        return $this->render('JityHomepageBundle:Sidebar:new.html.twig', array(
+            'entity' => $entity,
+            'form'   => $form->createView(),
+        ));
+    }
+
+    /**
+     * Creates a new Sidebar entity.
+     *
+     */
+    public function createAction(Request $request)
+    {
+        $entity  = new Sidebar();
+        $form = $this->createForm(new SidebarType(), $entity);
+        $form->bind($request);
+
+        if ($form->isValid()) {
+            $em = $this->getDoctrine()->getManager();
+            $em->persist($entity);
+            $em->flush();
+
+            return $this->redirect($this->generateUrl('author_sidebar_show', array('id' => $entity->getId())));
+        }
+
+        return $this->render('JityHomepageBundle:Sidebar:new.html.twig', array(
+            'entity' => $entity,
+            'form'   => $form->createView(),
+        ));
+    }
+
+    /**
+     * Displays a form to edit an existing Sidebar entity.
+     *
+     */
+    public function editAction($id)
+    {
+        $em = $this->getDoctrine()->getManager();
+
+        $entity = $em->getRepository('JityHomepageBundle:Sidebar')->find($id);
+
+        if (!$entity) {
+            throw $this->createNotFoundException('Unable to find Sidebar entity.');
+        }
+
+        $editForm = $this->createForm(new SidebarType(), $entity);
+        $deleteForm = $this->createDeleteForm($id);
+
+        return $this->render('JityHomepageBundle:Sidebar:edit.html.twig', array(
+            'entity'      => $entity,
+            'edit_form'   => $editForm->createView(),
+            'delete_form' => $deleteForm->createView(),
+        ));
+    }
+
+    /**
+     * Edits an existing Sidebar entity.
+     *
+     */
+    public function updateAction(Request $request, $id)
+    {
+        $em = $this->getDoctrine()->getManager();
+
+        $entity = $em->getRepository('JityHomepageBundle:Sidebar')->find($id);
+
+        if (!$entity) {
+            throw $this->createNotFoundException('Unable to find Sidebar entity.');
+        }
+
+        $deleteForm = $this->createDeleteForm($id);
+        $editForm = $this->createForm(new SidebarType(), $entity);
+        $editForm->bind($request);
+
+        if ($editForm->isValid()) {
+            $em->persist($entity);
+            $em->flush();
+
+            return $this->redirect($this->generateUrl('author_sidebar_edit', array('id' => $id)));
+        }
+
+        return $this->render('JityHomepageBundle:Sidebar:edit.html.twig', array(
+            'entity'      => $entity,
+            'edit_form'   => $editForm->createView(),
+            'delete_form' => $deleteForm->createView(),
+        ));
+    }
+
+    /**
+     * Deletes a Sidebar entity.
+     *
+     */
+    public function deleteAction(Request $request, $id)
+    {
+        $form = $this->createDeleteForm($id);
+        $form->bind($request);
+
+        if ($form->isValid()) {
+            $em = $this->getDoctrine()->getManager();
+            $entity = $em->getRepository('JityHomepageBundle:Sidebar')->find($id);
+
+            if (!$entity) {
+                throw $this->createNotFoundException('Unable to find Sidebar entity.');
+            }
+
+            $em->remove($entity);
+            $em->flush();
+        }
+
+        return $this->redirect($this->generateUrl('author_sidebar'));
+    }
+
+    private function createDeleteForm($id)
+    {
+        return $this->createFormBuilder(array('id' => $id))
+            ->add('id', 'hidden')
+            ->getForm()
+        ;
+    }
+}

src/Jity/HomepageBundle/DataFixtures/ORM/LoadDevData.php

@@ -70,11 +70,11 @@ Hat Ihnen diese Seite gefallen? Teilen Sie sie doch mit Ihren
 Freunden und Bekannten über Googles Soziales Netzwerk oder über Facebook.
 </p>
 <p>
-    <a href="https://plus.google.com/share?url={{ url(app.request.attributes.get("_route"))|url_encode }}&hl=de" class="btn btn-danger">
+    <a href="https://plus.google.com/share?url={{ app.request.uri|url_encode }}&hl=de" class="btn btn-danger">
         <img src="{{ asset("bundles/jityhomepage/img/glyphicons_386_google_plus.png") }}" />
         Google+
     </a>
-    <a href="http://www.facebook.com/sharer.php?u={{ url(app.request.attributes.get("_route"))|url_encode }}&t=Hermann+Mayer" class="btn btn-primary">
+    <a href="http://www.facebook.com/sharer.php?u={{ app.request.uri|url_encode }}&t=Hermann+Mayer" class="btn btn-primary">
         <img src="{{ asset("bundles/jityhomepage/img/glyphicons_390_facebook.png") }}" />
         Facebook
     </a>

src/Jity/HomepageBundle/Form/SectionType.php

+<?php
+
+namespace Jity\HomepageBundle\Form;
+
+use Symfony\Component\Form\AbstractType;
+use Symfony\Component\Form\FormBuilderInterface;
+use Symfony\Component\OptionsResolver\OptionsResolverInterface;
+
+class SectionType extends AbstractType
+{
+    public function buildForm(FormBuilderInterface $builder, array $options)
+    {
+        $builder
+            ->add('title', null, array(
+                'label' => 'Titel'
+            ))
+            ->add('content', null, array(
+                'attr' => array(
+                    'rows' => '6',
+                    'class' => 'span4',
+                    'data-target' => '#editor_modal',
+                    'data-toggle' => 'modal'
+                ),
+                'label' => 'Inhalt'
+            ))
+            ->add('group', 'entity', array(
+                'class'=>'Jity\HomepageBundle\Entity\Group',
+                'property' => 'name',
+                'label' => 'Sichtbar für Gruppe'
+            ))
+        ;
+    }
+
+    public function setDefaultOptions(OptionsResolverInterface $resolver)
+    {
+        $resolver->setDefaults(array(
+            'data_class' => 'Jity\HomepageBundle\Entity\Section'
+        ));
+    }
+
+    public function getName()
+    {
+        return 'jity_homepagebundle_sectiontype';
+    }
+}

src/Jity/HomepageBundle/Form/SidebarType.php

+<?php
+
+namespace Jity\HomepageBundle\Form;
+
+use Symfony\Component\Form\AbstractType;
+use Symfony\Component\Form\FormBuilderInterface;
+use Symfony\Component\OptionsResolver\OptionsResolverInterface;
+
+use Jity\HomepageBundle\Form\SectionType;
+
+/**
+ * SidebarType 
+ * 
+ * @uses AbstractType
+ * @version $id$
+ * @author Hermann Mayer <hermann.mayer92@gmail.com> 
+ */
+class SidebarType extends AbstractType
+{
+    /**
+     * buildForm 
+     * 
+     * @param FormBuilderInterface $builder 
+     * @param array $options 
+     * @access public
+     * @return void
+     */
+    public function buildForm(FormBuilderInterface $builder, array $options)
+    {
+        $builder
+            ->add('name')
+            ->add('sections', 'collection', array(
+                'type' => new SectionType(),
+                'label' => 'Verbundene Sektionen',
+                'label_attr' => array(
+                    'class' => 'form_embedded_label'
+                )
+            ))
+        ;
+    }
+
+    /**
+     * setDefaultOptions 
+     * 
+     * @param OptionsResolverInterface $resolver 
+     * @access public
+     * @return void
+     */
+    public function setDefaultOptions(OptionsResolverInterface $resolver)
+    {
+        $resolver->setDefaults(array(
+            'data_class' => 'Jity\HomepageBundle\Entity\Sidebar'
+        ));
+    }
+
+    /**
+     * getName 
+     * 
+     * @access public
+     * @return void
+     */
+    public function getName()
+    {
+        return 'jity_homepagebundle_sidebartype';
+    }
+}
+

src/Jity/HomepageBundle/Resources/config/routing.yml

@@ -18,6 +18,10 @@ JityHomepageBundle_author_category:
     resource: "@JityHomepageBundle/Resources/config/routing/category.yml"
     prefix:   /author/category
 
+JityHomepageBundle_author_sidebar:
+    resource: "@JityHomepageBundle/Resources/config/routing/sidebar.yml"
+    prefix:   /author/sidebar
+
 JityHomepageBundle_user:
     resource: "@JityHomepageBundle/Resources/config/routing/user.yml"
     prefix:   /user

src/Jity/HomepageBundle/Resources/config/routing/sidebar.yml

+author_sidebar:
+    pattern:  /
+    defaults: { _controller: "JityHomepageBundle:Sidebar:index" }
+
+author_sidebar_show:
+    pattern:  /{id}/show
+    defaults: { _controller: "JityHomepageBundle:Sidebar:show" }
+
+author_sidebar_new:
+    pattern:  /new
+    defaults: { _controller: "JityHomepageBundle:Sidebar:new" }
+
+author_sidebar_create:
+    pattern:  /create
+    defaults: { _controller: "JityHomepageBundle:Sidebar:create" }
+    requirements: { _method: post }
+
+author_sidebar_edit:
+    pattern:  /{id}/edit
+    defaults: { _controller: "JityHomepageBundle:Sidebar:edit" }
+
+author_sidebar_update:
+    pattern:  /{id}/update
+    defaults: { _controller: "JityHomepageBundle:Sidebar:update" }
+    requirements: { _method: post }
+
+author_sidebar_delete:
+    pattern:  /{id}/delete
+    defaults: { _controller: "JityHomepageBundle:Sidebar:delete" }
+    requirements: { _method: post }

src/Jity/HomepageBundle/Resources/public/css/90_jity.css

@@ -117,7 +117,7 @@ footer {
 
 h1, h2, h3, h4, h5, h6 {
     font-family: 'Source Sans Pro', sans-serif;
-    font-weight: 600;
+    font-weight: 200;
 }
 
 .alert {
@@ -205,15 +205,20 @@ p {
   background-image: url("/bundles/jityhomepage/img/glyphicons-halflings-white.png") !important;
 }
 
-legend {
+legend, .form_embedded_label {
     color: #89827B;
     border-color: #B54718;
-    /* font-weight: bold; */
     font-family: 'Source Sans Pro', sans-serif;
     font-weight: 300;
     font-size: 26px;
 }
 
+.form_embedded_label {
+    border-bottom: 1px solid #B54718;
+    margin-bottom: 20px;
+    padding-bottom: 8px;
+}
+
 textarea, input[type="text"], input[type="password"], input[type="datetime"],
 input[type="datetime-local"], input[type="date"], input[type="month"],
 input[type="time"], input[type="week"], input[type="number"], input[type="email"],
@@ -351,3 +356,43 @@ hr {
     background-color: #2C2A28;
 }
 
+.sortable {
+    border-top: 2px solid #722C0F;
+    background-color: #181818;
+    border-radius: 6px 6px 6px 6px;
+    margin-top: 30px;
+    padding: 20px;
+    position: relative;
+}
+
+.sortable .dragbar {
+    cursor: pointer;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 15px;
+    height: 100%;
+    border-radius: 6px 0px 0px 6px;
+    background-color: #0F0F0F;
+    border-right: 1px solid #282624;
+}
+
+.sortable .controllpanel {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 100px;
+    height: 33px;
+    border-radius: 6px 6px 6px 6px;
+    padding: 5px;
+    padding-left: -5px;
+    background-color: #0F0F0F;
+
+    border-left: 1px solid #282624;
+    border-bottom: 1px solid #282624;
+}
+
+.sortable .controllpanel .btn {
+    margin-left: 5px;
+}
+

src/Jity/HomepageBundle/Resources/views/Author/index.html.twig

@@ -21,7 +21,7 @@
             Navigationen
         </a>   
 
-        <a href="{{ path('home') }}" class="btn btn-danger">
+        <a href="{{ path('author_sidebar') }}" class="btn btn-danger">
             <i class="icon-list icon-white"></i>
             Sidebars
         </a>

src/Jity/HomepageBundle/Resources/views/Editor/editor.html.twig

-<div class="modal hide fade" id="editor_modal" tabindex="-1" role="dialog" aria-labelledby="editor_label" aria-hidden="true">
-    <div class="modal-header">
-        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
-        <h3 id="editor_label">{{ title|raw }}</h3>
-    </div>
-    <div class="modal-body">
+{% render 'JityHomepageBundle:Editor:modal' with {
+    'name': 'editor',
+    'label': title|raw,
+    'enableJS': false,
+    'buttons': [
+        {
+            'id': 1,
+            'class': 'btn-primary',
+            'icon': 'icon-ok',
+            'value': 'Änderung speichern'
+        },
+    ],
+    'body': '
         <div id="editor"></div>
-    </div>
-    <div class="modal-footer">
-        <button class="btn btn-primary" onclick="$('#editor_modal').modal('hide');"><i class="icon-pencil icon-white"></i> Änderung speichern</button>
-    </div>
-</div>
+    ',
+} %}
 
 <script src="http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
 

src/Jity/HomepageBundle/Resources/views/Editor/icons.html.twig

-<div class="modal hide fade" id="icons_modal" tabindex="-1" role="dialog" aria-labelledby="icons_label" aria-hidden="true">
-    <div class="modal-header">
-        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
-        <h3 id="icons_label">Auswahl der Icons</h3>
-    </div>
-    <div class="modal-body">
-        <div id="icons">
+{% render 'JityHomepageBundle:Editor:modal' with {
+    'name': 'icons',
+    'label': 'Auswahl der Icons',
+    'enableJS': false,
+    'buttons': [
+        {
+            'id': 1,
+            'class': 'btn-primary',
+            'icon': 'icon-share-alt',
+            'value': 'Abbrechen'
+        },
+    ],
+    'body': '
 
         <ul class="the-icons clearfix">
             <li><i class="icon-white icon-glass"></i> icon-glass</li>
@@ -153,17 +159,11 @@
             <li><i class="icon-white icon-fullscreen"></i> icon-fullscreen</li>
         </ul>
 
-        </div>
-    </div>
-    <div class="modal-footer">
-        <button class="btn btn-primary" onclick="$('#icons_modal').modal('hide');"><i class="icon-pencil icon-white"></i> Auswahl speichern</button>
-    </div>
-</div>
+    ',
+} %}
 
 <script type="text/javascript">
-
     $(document).ready(function() {
-
         $('.the-icons li').click(function (){
 
             // Strip out the class name and write it to syncElement
@@ -174,6 +174,5 @@
             $('#icons_modal').modal('hide');
         });
     });
-
 </script>
 

src/Jity/HomepageBundle/Resources/views/Editor/modal.html.twig

+<!-- Modal -->
+<div class="modal hide fade" id="{{ name }}_modal" tabindex="-1" role="dialog" aria-labelledby="{{ name }}_label" aria-hidden="true">
+    <div class="modal-header">
+        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
+        <h3 id="{{ name }}_label">{{ label|raw }}</h3>
+    </div>
+    <div class="modal-body">
+        <div id="{{ name }}_body">{{ body|raw }}</div>
+    </div>
+    <div class="modal-footer">
+        {% for button in buttons %}
+            <button
+                class="btn {% if button.class %}{{ button.class }}{% endif %}"
+                id="{{ name }}_btn_{{ button.id }}"
+                onclick="$('#{{ name }}_modal').modal('hide');">
+                {% if button.icon %}<i class="icon-white {{ button.icon }}"></i>{% endif %} {{ button.value }}
+            </button>
+        {% endfor %}
+    </div>
+</div>
+
+{% if enableJS %}
+
+<!-- Modal Javascript Class -->
+<script>
+$(document).ready(function() {
+
+    // 
+    //  # Javascript class for our modal wrapper
+    //  # So you can use a more generic modal and
+    //  # change it dynamically on the fly.
+    // 
+    {{ name }}Modal = {
+
+        name: "{{ name }}",
+
+        setLabel: function(label) {
+            $('#' + this.name + '_label').html(label);
+            return this;
+        },
+
+        setBody: function(body) {
+            $('#' + this.name + '_body').html(body);
+            return this;
+        },
+
+        setButtons: function(buttons) {
+        
+            buttons.forEach(function (cur){
+
+                var el = $('#' + {{ name }}Modal.name + '_btn_' + cur.id);
+
+                if (cur.class) {
+                    el.attr('class', el.attr('class') + ' ' + cur.class);
+                }
+
+                if (cur.icon) {
+                    el.html('<i class="icon-white ' + cur.icon + '">');
+                }
+
+                if (cur.value) {
+                    el.html(el.html() + ' ' + cur.value);
+                }
+
+                el.click({cur: cur}, function (event){
+
+                    var cur = event.data.cur;
+
+                    if (cur.click) {
+
+                        if (cur.data) {
+                            cur.click(cur.data);
+                        } else {
+                            cur.click();
+                        }
+                    }
+
+                    return {{ name }}Modal.hide();
+                });
+            });
+        
+            return this;
+        },
+
+        show: function() {
+            $('#' + this.name + '_modal').modal('show');
+            return false;
+        },
+
+        hide: function() {
+            $('#' + this.name + '_modal').modal('hide');
+            return false;
+        },
+
+        getModal: function() {
+            return $('#' + this.name + '_modal');
+        }
+    };
+});
+</script>
+
+{% endif %}
+<!-- Modal End -->
+

src/Jity/HomepageBundle/Resources/views/Form/fields.html.twig

-{% block field_row %}
+{#
+    Standard Error Styling for a Row
+#}
+{% block form_errors %}
+
+    {% if errors|length > 0 %}
+
+        {% for error in errors %}