initial commit & readme

Author: HenriVesala

.gitignore

@@ -0,0 +1 @@
+/nbproject/private/

Controller/DialogController.php

@@ -0,0 +1,19 @@
+<?php
+
+namespace Xi\Bundle\DialogBundle\Controller;
+
+use Symfony\Bundle\FrameworkBundle\Controller\Controller;
+
+/**
+ * Dialog contains common dialog functionality
+ * 
+ */
+class DialogController extends Controller
+{
+    
+    public function deleteAction()
+    {
+        return $this->render('XiDialogBundle:Dialog:delete.html.twig');
+    }
+   
+}

DependencyInjection/Configuration.php

@@ -0,0 +1,29 @@
+<?php
+
+namespace Xi\Bundle\DialogBundle\DependencyInjection;
+
+use Symfony\Component\Config\Definition\Builder\TreeBuilder;
+use Symfony\Component\Config\Definition\ConfigurationInterface;
+
+/**
+ * This is the class that validates and merges configuration from your app/config files
+ *
+ * To learn more see {@link http://symfony.com/doc/current/cookbook/bundles/extension.html#cookbook-bundles-extension-config-class}
+ */
+class Configuration implements ConfigurationInterface
+{
+    /**
+     * {@inheritDoc}
+     */
+    public function getConfigTreeBuilder()
+    {
+        $treeBuilder = new TreeBuilder();
+        $rootNode = $treeBuilder->root('xi_dialog');
+
+        // Here you should define the parameters that are allowed to
+        // configure your bundle. See the documentation linked above for
+        // more information on that topic.
+
+        return $treeBuilder;
+    }
+}

DependencyInjection/XiDialogExtension.php

@@ -0,0 +1,28 @@
+<?php
+
+namespace Xi\Bundle\DialogBundle\DependencyInjection;
+
+use Symfony\Component\DependencyInjection\ContainerBuilder;
+use Symfony\Component\Config\FileLocator;
+use Symfony\Component\HttpKernel\DependencyInjection\Extension;
+use Symfony\Component\DependencyInjection\Loader;
+
+/**
+ * This is the class that loads and manages your bundle configuration
+ *
+ * To learn more see {@link http://symfony.com/doc/current/cookbook/bundles/extension.html}
+ */
+class XiDialogExtension extends Extension
+{
+    /**
+     * {@inheritDoc}
+     */
+    public function load(array $configs, ContainerBuilder $container)
+    {
+        $configuration = new Configuration();
+        $config = $this->processConfiguration($configuration, $configs);
+
+        $loader = new Loader\YamlFileLoader($container, new FileLocator(__DIR__.'/../Resources/config'));
+        $loader->load('services.yml');
+    }
+}

README.md

@@ -0,0 +1,57 @@
+# Dialog functionality for Symfony2
+
+DialogBundle provides basic jQueryUI dialog with internal ajax functionality. It has dependency on xi-bundle-ajax that
+provides ajax interface and error handling. Dialogbundle dialogs can gracefully handle backend errors thanks to xi-bundle-ajax.
+
+
+
+
+## Dependencies
+
+xi-bundle-ajax
+* https://github.com/xi-project/xi-bundle-ajax
+
+
+
+## Dialog
+
+Dialog is basic jQueryUI dialog with internal ajax functionality. On opening it displays loading animation, sends ajax request to your backend
+and displays content in dialog after receiving response. Script will load its content according to your element href attribute.
+
+All jQueryUI dialog options are available and also there are also following parameters that you can use:
+
+refreshDialogOnOpening:
+    Should dialog content be refreshed if you open it again after you have closed it. (boolean) Default: false
+
+headerAttribute:
+    what attribute should be used as header for your dialog. (string) Default: 'title'
+
+
+The following example is written in Coffeescript.
+
+```coffeescript
+
+new App.Dialog('.dialog', {
+    width: 600, 
+    position: [null, 100]
+    headerAttribute: 'header'
+    refreshDialogOnOpening: false
+}, optionalYourOwnLoaderClass, optionalYourOwnErrorizerClass)
+
+```
+
+## Confirmdialog
+
+Confirmdialog is a simple ajax dialog for accepting changes that user has made.
+Confirmdialog is rendered by Twig extension that accept two arguments: url to target and (array) options.
+Options are rendered as attributes of element that launches confirmation dialog.
+If you want to set header for your dialog in default configuration please set `header` as one of the options.
+`header` also sets elements title if `title` option is not set.
+`linkText` is optional, the value is shown like this: <a href="#">linkText</a>
+Confirm button copies it's href attribure from the element that launches the dialog, and executes the default behaviour when clicked.
+
+```twig
+
+{{ sba_confirmdialog_render('url_to_what_shoud_be_deleted), {'header': 'header_of_yours', 'linkText': 'text_for_link' 'some_attribute': 'some_attribute_of_yours'}}
+
+```

Resources/coffee/dialog.coffee

@@ -0,0 +1,112 @@
+#
+# Usage example: new App.Dialog('.dialog', {width: 500})
+# Now every element that has class "dialog" will launch a new dialog.
+# You must also set href and title to elements to get dialog work properly
+#
+# dialog
+class App.Dialog
+    # element to be bound with, jquery ui dialog options, loader class
+    constructor: (@element, options, @loader, @errorizers) ->
+
+        settings = {
+            headerAttribute: 'title'
+            refreshDialogOnOpening: false
+        }
+        $.extend(settings, options);
+
+        basedialog = $('<div></div>')
+        if !loader
+            loader = new App.AjaxLoader.Default()
+
+        if !errorizers  or !errorizers.length
+            @errorizers = [new App.FatalErrorizer.Default]
+        else
+            @errorizers.push(new App.FatalErrorizer.Default)
+
+        self = @
+        $(@element).live('click', (event) ->
+            dialog = basedialog.clone()
+            loader.start()
+
+            settings.title = self.getHeader($(this), settings)
+            settings.close = () =>
+                self.onClose(dialog, settings, this)
+
+            if $(this).data('dialog-binded')
+                self.reopenDialog($('#'+$(this).data('dialog-binded')))
+                loader.stop()
+            else
+                $(dialog).load(self.getUri($(this)), (response, status, xhr) =>
+                    loader.stop()
+                    if !self.checkForErrors(response, status, xhr, dialog)
+                        self.loadComplete(dialog, this)
+                        self.bindDialogToElement(dialog, this)
+
+                ).dialog(settings)
+            return false
+        )
+
+    checkForErrors: (response, status, xhr, dialog) =>
+        if status == "error"
+            this.displayErrors($(dialog),  {'error':{'xhr': xhr}})
+        else if response == '' or (typeof(response) == 'string' and response.search(/Fatal error:/i) != -1) # you really don't want to get empty string as response
+            this.displayErrors($(dialog), response) #errorizer should know what empty or fatal error response means
+        else
+            return false
+
+        return true
+
+    # Calls errorizers to show errors
+    displayErrors: ($element, response) =>
+        for errorizer in @errorizers
+            if errorizer.errorize $element, response
+                return true
+
+    loadComplete: (dialog, element) ->
+
+    onClose: (dialog, settings, element) ->
+        if(settings.refreshDialogOnOpening) #remove old dialogs if we want to load new content
+            $(dialog).remove()
+            if $(element).data('dialog-binded')
+                $(element).removeData('dialog-binded')
+
+    getUri: (element) ->
+        $(element).attr('href')
+
+    getHeader: (element, settings) ->
+        $(element).attr(settings.headerAttribute)
+
+    bindDialogToElement: (dialog, element) ->
+        uniqId = 'dialog-'+ new Date().getTime()
+        $(element).data('dialog-binded', uniqId)
+        $(dialog).attr('id', uniqId)
+
+    reopenDialog: (dialogContent) ->
+        dialogContent.closest('.ui-dialog').show()
+
+
+#
+# Usage example: new App.ConfirmDialog('.confirm-dialog', { width: 300, modal: true})
+# You must also set href, data-href and title to elements to get dialog work properly
+#
+# - data-href should point to your service that provides confirmation message
+# - href should point to place where data is really being deleted
+# - title is used as dialog header
+#
+# dialog
+class App.ConfirmDialog extends App.Dialog
+
+    # uses data-href so user can remove objects if if javascript is not being used
+    getUri: (element) ->
+        $(element).data('href')
+
+    loadComplete: (dialog, element) -> 
+        $confirmBtn = $('[data-id|="confirm-delete"] > [data-id|="confirm"]')
+        $confirmBtn.attr('href', $(element).attr('href'))
+
+        $('[data-id|="confirm-delete"] > [data-id|="cancel"]').live('click', =>
+            $(dialog).dialog('close')
+            return false
+        )
+
+

Resources/config/routing.yml

@@ -0,0 +1,3 @@
+xi_dialog_delete:
+    pattern:   /dialog/delete
+    defaults: { _controller: XiDialogBundle:Dialog:delete }

Resources/config/services.yml

@@ -0,0 +1,6 @@
+services:            
+    confirmdialog.twig.extension:
+        class: Xi\Bundle\DialogBundle\Twig\Extensions\ConfirmDialog
+        arguments: ["@twig", "@router", "xi_dialog_delete", "XiDialogBundle:Dialog:confirm.html.twig", {class: 'confirm-dialog'}]
+        tags:
+            -  { name: twig.extension }

Resources/doc/README.md

@@ -0,0 +1,33 @@
+# DialogBundle
+
+Simple dialog inteface.
+
+Requires: XiAjaxBundle and Jquery to work.
+ 
+
+To use the dialog functionality you must setup your dialog and bind it to certain Jquery selector.
+
+examples:
+    new App.Dialog('.dialog', {width: 500})
+    new App.Dialog('.modal', {width: 500, modal: true})
+
+ 
+
+
+## Delete confirmation dialog twig extesion
+
+Creates delete button with confirmation functionality
+
+Setup:
+git
+To use the confirmation dialog functionality you must setup your dialog and bind it to certain Jquery selector ('.confirm-dialog' is a default value).
+
+For default behaviour add this to your JS:   new App.ConfirmDialog('.confirm-dialog', { width: 300, modal: true})
+
+To use delete confirmation dialog you just have to call following in your twig tempalte
+
+{{ xi_confirmdialog_render('TITLE', 'URL', OPTIONS}}
+
+TITLE can be any string. This string is your buttons tooltip and shows up as header in dialog box. 
+URL is an url string. This should point to action that handles the deletion. Ie:  url('xxx_youritemtobedeleted_delete', { 'id': tobedeleted.id }))
+OPTIONS are an array that contains key value pairs. There are injected to element to be created as attributes.

Resources/views/Dialog/confirm.html.twig

@@ -0,0 +1,11 @@
+{% block confirmDialogbutton %}
+{% spaceless %}
+        <a
+        {% block confirmDialogButtonAttributes %}
+            {% for  key, arg in arguments %}
+                {{ key }}="{{ arg }}" 
+            {% endfor %}                
+        {% endblock %}
+        >{{ arguments.linkText }}</a>
+{% endspaceless %}
+{% endblock %}

Resources/views/Dialog/delete.html.twig

@@ -0,0 +1,7 @@
+<div data-id="confirm-delete" class="confirm-delete-dialog">
+    <p>
+    {{'xi.confirmdialog.delete.are_you_sure'|trans}}
+    </p>
+    <button data-id="confirm" class="ajax-link">{{'xi.confirmdialog.delete.im_sure'|trans}}</button>
+    <button data-id="cancel">{{'xi.confirmdialog.delete.cancel'|trans}}</button>
+</div>