Introduced Elfinder Form Type

helios-ag · Aug 24, 2014 · ec6a9ea · ec6a9ea
1 parent 4d381b1
commit ec6a9ea
Show file tree

Hide file tree

Showing 9 changed files with 233 additions and 5 deletions.
diff --git a/Controller/ElFinderController.php b/Controller/ElFinderController.php
@@ -47,10 +47,10 @@ private function selectEditor($parameters, $instance)
             case 'ckeditor':
                 $result['template'] = 'FMElfinderBundle:Elfinder'.$prefix.':ckeditor.html.twig';
                 $result['params'] = array(
-                        'locale' => $locale,
-                        'fullscreen' => $fullscreen,
-                        'includeAssets' => $includeAssets,
-                        'instance' => $instance
+                    'locale' => $locale,
+                    'fullscreen' => $fullscreen,
+                    'includeAssets' => $includeAssets,
+                    'instance' => $instance
                 );
                 return $result;
             case 'tinymce':
@@ -70,6 +70,15 @@ private function selectEditor($parameters, $instance)
                     'instance' => $instance
                 );
                 return $result;
+            case 'form':
+                $result['template'] = 'FMElfinderBundle:Elfinder'.$prefix.':elfinder_type.html.twig';
+                $result['params'] = array(
+                    'locale' => $locale,
+                    'fullscreen' => $fullscreen,
+                    'includeAssets' => $includeAssets,
+                    'instance' => $instance
+                );
+                return $result;
             default:
                 $result['template'] = 'FMElfinderBundle:Elfinder'.$prefix.':simple.html.twig';
                 $result['params'] = array(

diff --git a/DependencyInjection/Compiler/TwigFormPass.php b/DependencyInjection/Compiler/TwigFormPass.php
@@ -0,0 +1,25 @@
+<?php
+
+namespace FM\ElfinderBundle\DependencyInjection\Compiler;
+
+use Symfony\Component\DependencyInjection\ContainerBuilder;
+use Symfony\Component\DependencyInjection\Compiler\CompilerPassInterface;
+
+/**
+ * Class TwigFormPass
+ * @package FM\ElfinderBundle\DependencyInjection\Compiler
+ */
+class TwigFormPass implements CompilerPassInterface
+{
+    public function process(ContainerBuilder $container)
+    {
+        if (!$container->hasParameter('twig.form.resources')) {
+            return;
+        }
+
+        $container->setParameter('twig.form.resources', array_merge(
+            array('FMElfinderBundle:Form:elfinder_widget.html.twig'),
+            $container->getParameter('twig.form.resources')
+        ));
+    }
+}
diff --git a/DependencyInjection/FMElfinderExtension.php b/DependencyInjection/FMElfinderExtension.php
@@ -25,6 +25,7 @@ public function load(array $configs, ContainerBuilder $container)
 
         $loader = new Loader\XmlFileLoader($container, new FileLocator(__DIR__.'/../Resources/config'));
         $loader->load('elfinder.xml');
+        $loader->load('form.xml');
         $container->setParameter('fm_elfinder', $config);
         $container->setAlias('fm_elfinder.configurator', $config['configuration_provider']);
     }

diff --git a/FMElfinderBundle.php b/FMElfinderBundle.php
@@ -2,8 +2,20 @@
 
 namespace FM\ElfinderBundle;
 
+use FM\ElfinderBundle\DependencyInjection\Compiler\TwigFormPass;
+use Symfony\Component\DependencyInjection\ContainerBuilder;
 use Symfony\Component\HttpKernel\Bundle\Bundle;
 
+/**
+ * Class FMElfinderBundle
+ * @package FM\ElfinderBundle
+ */
 class FMElfinderBundle extends Bundle
 {
+    public function build(ContainerBuilder $container)
+    {
+        parent::build($container);
+
+        $container->addCompilerPass(new TwigFormPass());
+    }
 }
diff --git a/Form/Type/ElFinderType.php b/Form/Type/ElFinderType.php
@@ -0,0 +1,70 @@
+<?php
+
+namespace FM\ElfinderBundle\Form\Type;
+
+use Symfony\Component\Form\AbstractType;
+use Symfony\Component\Form\FormView;
+use Symfony\Component\Form\FormInterface;
+use Symfony\Component\Form\FormBuilderInterface;
+use Symfony\Component\OptionsResolver\OptionsResolverInterface;
+
+/**
+ * Class ElFinderType
+ * @package FM\ElfinderBundle\Form\Type
+ */
+class ElFinderType extends AbstractType
+{
+
+    /**
+     * @inheritdoc
+     */
+    public function buildForm(FormBuilderInterface $builder, array $options)
+    {
+        $builder->setAttribute('enable', $options['enable']);
+
+        if($builder->getAttribute('enable'))
+            $builder->setAttribute('instance', $options['instance']);
+    }
+
+    /**
+     * @inheritdoc
+     */
+    public function buildView(FormView $view, FormInterface $form, array $options)
+    {
+        $view->vars['enable'] = $form->getConfig()->getAttribute('enable');
+
+        if($form->getConfig()->getAttribute('enable')) {
+            $view->vars['instance'] = $form->getConfig()->getAttribute('instance');
+        }
+    }
+
+    /**
+     * @inheritdoc
+     */
+    public function setDefaultOptions(OptionsResolverInterface $resolver)
+    {
+        $resolver
+            ->setDefaults(array(
+                'enable' => true,
+                'instance' => ''
+            ))
+            ->addAllowedTypes(array(
+                'enable' => 'bool',
+                'instance' => array('string', 'null')
+            ));
+    }
+    /**
+     * @inheritdoc
+     */
+    public function getParent()
+    {
+        return 'text';
+    }
+    /**
+     * @inheritdoc
+     */
+    public function getName()
+    {
+        return 'elfinder';
+    }
+}
diff --git a/README.md b/README.md
@@ -31,6 +31,7 @@ Recommended bundles to use with:
 - [Basic configuration](#basic-configuration)
     - [Add configuration options to your config.yml](#add-configuration-options-to-your-configyml)
 - [Configuring symfony service as a volumeDriver](#configuring-symfony-service-as-a-volumedriver)
+- [ElFinder form type](#elfinder-form-type)
 - [Using ElFinder with CKEditorBundle](#using-elfinder-with-ckeditorbundle)
     - [Step 1: Installation:](#step-1-installation-1)
     - [Step 2: Configure CKEditor setting via settings.yml or through form builder:](#step-2-configure-ckeditor-setting-via-settingsyml-or-through-form-builder)
@@ -144,7 +145,7 @@ fm_elfinder:
     instances:
         default:
             locale: %locale% # defaults to current request locale
-            editor: ckeditor # other choices are tinymce or simple
+            editor: ckeditor # other choices are tinymce or simple, and form
             showhidden: false # defaults to false
             fullscreen: true # defaults true, applies to simple and ckeditor editors
             include_assets: true # disable if you want to handle loading of the javascript and css assets yourself
@@ -193,6 +194,48 @@ This means that if you add the service definition:
 <service id="elfinder.driver.filesystem" class="FM\ElFinderPHP\Driver\ElFinderVolumeLocalFileSystem" />
 ```
 
+## Elfinder Form Type
+
+Since version 2.1 of the bundle, bundle come with custom form type, that is simple <input type="text"/> , that provide
+elfinder callback (opens Elfinder window), configuration for this form type is simple
+First, define instance with editor setted to "form":
+```
+fm_elfinder:
+    instances:
+        form:
+            locale: %locale% # defaults to current request locale
+            editor: form # other choices are tinymce or simple, and form
+            showhidden: false # defaults to false
+            fullscreen: true # defaults true, applies to simple and ckeditor editors
+            include_assets: true # disable if you want to handle loading of the javascript and css assets yourself
+            compression: false # enable if you configured the uglifycss and uglifyjs2 assetic filters and want compression
+            connector:
+                debug: false # defaults to false
+                roots:       # at least one root must be defined
+                    uploads:
+                        driver: LocalFileSystem
+                        path: uploads
+                        upload_allow: ['image/png', 'image/jpg', 'image/jpeg']
+                        upload_deny: ['all']
+                        upload_max_size: 2M
+```
+
+On second step, add to your form builder (or form class), elfinder type, and pass instance and enable parameters:
+
+```php
+$form = $this->createFormBuilder()
+    ->add('elfinder','elfinder', array('instance'=>'form', 'enable'=>true))
+    ->getForm();
+```
+
+Render form with twig as usual:
+```jinja
+<form action="" method="post" {{ form_enctype(form) }}>
+        {{ form_widget(form) }}
+        <input type="submit" />
+    </form>
+```
+
 ## Using ElFinder with [CKEditorBundle](https://github.com/trsteel88/TrsteelCkeditorBundle)
 
 Mostly filebrowsers used with WYSIWYG editors to upload images and other files. The example above will show how to
@@ -347,6 +390,8 @@ Manual integration guide can be found [here](/INTEGRATION_GUIDE.md)
 More tests, gridfs support, complex user intergration(?)
 
 ##Changelog
+### 2.1
+* New Elfinder form type, provides basic <input type="text"/> field with Elfinder callback
 
 ### 2.0
 * Multiple instances of elfinder configuration (allows multiple editors in one project, with different elfinder configurations)

diff --git a/Resources/config/form.xml b/Resources/config/form.xml
@@ -0,0 +1,15 @@
+<?xml version="1.0" ?>
+
+<container xmlns="http://symfony.com/schema/dic/services"
+           xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+           xsi:schemaLocation="http://symfony.com/schema/dic/services http://symfony.com/schema/dic/services/services-1.0.xsd"
+        >
+    <parameters>
+        <parameter key="elfinder.form.type.class">FM\ElfinderBundle\Form\Type\ElFinderType</parameter>
+    </parameters>
+    <services>
+        <service id="fm_elfinder.form.type" class="%elfinder.form.type.class%">
+            <tag name="form.type" alias="elfinder" />
+        </service>
+    </services>
+</container>
diff --git a/Resources/views/Elfinder/elfinder_type.html.twig b/Resources/views/Elfinder/elfinder_type.html.twig
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+<head>
+    {% if includeAssets %}
+        {% include "FMElfinderBundle:Elfinder:helper/assets_css.html.twig" %}
+    {% endif %}
+</head>
+<body>
+{% if includeAssets %}
+    {% include "FMElfinderBundle:Elfinder:helper/assets_js.html.twig" %}
+{% endif %}
+<script type="text/javascript" charset="utf-8">
+    $().ready(function() {
+        var $f = $('.elfinder').elfinder({
+            url : '{{path('ef_connect', { 'instance': instance } )}}',
+            lang : '{{locale}}',
+            getFileCallback: function(file) {
+                window.opener.setValue(file.path);
+                window.close();
+            }
+        });
+
+
+    {% if fullscreen %}
+    var $window = $(window);
+    $window.resize(function(){
+        var $win_height = $window.height();
+        if( $f.height() != $win_height ){
+            $f.height($win_height).resize();
+        }
+    });
+    {% endif %}
+    });
+</script>
+<div class="elfinder"></div>
+</body>
+</html>
diff --git a/Resources/views/Form/elfinder_widget.html.twig b/Resources/views/Form/elfinder_widget.html.twig
@@ -0,0 +1,14 @@
+{% block elfinder_widget %}
+    <input type="text" {{ block('widget_attributes') }} {% if value is not empty %}value="{{ value }}" {% endif %} data-type="elfinder-input-field" />
+    {{instance}}
+    {% if enable and instance is defined %}
+        <script type="text/javascript" charset="utf-8">
+            $('[data-type="elfinder-input-field"]').on("click",function() {
+                var childWin = window.open("{{path('elfinder', {'instance': instance })}}", "popupWindow", "height=450, width=900");
+            });
+            function setValue(value) {
+                $('[data-type="elfinder-input-field"]').val(value);
+            }
+        </script>
+    {% endif %}
+{% endblock %}