Skip to content

Commit

Permalink
[Media] Add file selector.
Browse files Browse the repository at this point in the history
  • Loading branch information
NoUseFreak committed Nov 13, 2015
1 parent 7305eb0 commit d752416
Show file tree
Hide file tree
Showing 8 changed files with 91 additions and 73 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@
@import "@{bootstrap_path}/labels.less";
@import "@{bootstrap_path}/alerts.less";
@import "@{bootstrap_path}/pagination.less";
@import "@{bootstrap_path}/panels.less";
@import "@{bootstrap_path}/responsive-embed.less";
@import "@{bootstrap_path}/close.less";

Expand Down
8 changes: 3 additions & 5 deletions src/Clastic/MediaBundle/Form/Type/FileBrowserType.php
Original file line number Diff line number Diff line change
Expand Up @@ -26,11 +26,9 @@ public function configureOptions(OptionsResolver $resolver)
{
parent::configureOptions($resolver);

$resolver->setDefaults(array(
'attr' => array(
'class' => 'media-browser',
),
));
$resolver->setDefaults([
'attr' => ['class' => 'media-browser'],
]);
}

/**
Expand Down
10 changes: 5 additions & 5 deletions src/Clastic/MediaBundle/Form/Type/FileFormType.php
Original file line number Diff line number Diff line change
Expand Up @@ -24,11 +24,11 @@ class FileFormType extends AbstractType
public function buildForm(FormBuilderInterface $builder, array $options)
{
$builder
->add('file', 'file')
->add('save', 'submit', array(
'label' => 'Save',
'attr' => array('class' => 'btn btn-success'),
));
->add('file', 'file')
->add('save', 'submit', [
'label' => 'Save',
'attr' => ['class' => 'btn btn-success'],
]);
}

/**
Expand Down
9 changes: 7 additions & 2 deletions src/Clastic/MediaBundle/Resources/config/services.xml
Original file line number Diff line number Diff line change
@@ -1,13 +1,14 @@
<?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">
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="clastic.media.module.class">Clastic\MediaBundle\Module\MediaModule</parameter>
<parameter key="clastic.media.file_listener.class">Clastic\MediaBundle\EventListener\FileListener</parameter>
<parameter key="clastic.media.type.file_browser.class">Clastic\MediaBundle\Form\Type\FileBrowserType</parameter>
<parameter key="clastic.media.type.file_form.class">Clastic\MediaBundle\Form\Type\FileFormType</parameter>
</parameters>

<services>
Expand All @@ -26,5 +27,9 @@
<argument type="service" id="elfinder.driver.rootDriver"/>
<argument type="service" id="event_dispatcher"/>
</service>

<service id="clastic.media.type.file_browser" class="%clastic.media.type.file_browser.class%">
<tag name="form.type" alias="file_browser"/>
</service>
</services>
</container>
53 changes: 51 additions & 2 deletions src/Clastic/MediaBundle/Resources/public/scripts/form.wysiwyg.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,54 @@
(function() {
'use strict';

(function($) {
$('textarea.wysiwyg').on('ckeditor-config', function(el, config) {
config.filebrowserBrowseUrl = '/admin/elfinder/default';
});
})();

$('.file_browser_container').each(function() {
var $container = $(this);
var $el = $container.find('input');
var $finder = $container.find('.finder');
var $img = $container.find('img.preview');
var $imgCaption = $container.find('.caption');

var sync = function() {
var val = $el.val();
$img.attr('src', val);
if (!$img.attr('src')) {
$img.hide();
} else {
$img.show();
}
$imgCaption.html(val);
};
var setValue = function(val) {
$el.val(val);
sync();
};

sync();

$container
.on('click', 'button.select', function() {
if ($finder.hasClass('elfinder')) {
$finder.elfinder('open');
} else {
$finder
.elfinder({
url : '/admin/efconnect',
getFileCallback: function(file) {
setValue('/'+file.path);
sync();
$finder.elfinder('close');
}
})
.elfinder($el.attr('id'));
}
})
.on('click', 'button.unselect', function() {
setValue('');
sync();
})
});
})(jQuery);
49 changes: 7 additions & 42 deletions src/Clastic/MediaBundle/Resources/public/styles/style.less
Original file line number Diff line number Diff line change
@@ -1,45 +1,10 @@
.media-browser {
position: relative;
.add {
position: absolute;
right: 0;
z-index: 999;
a {
float: right;
padding: 5px 10px;
font-size: 20px;
}
.form {
display: none;
width: 100%;
background-color: #fff;
padding: 10px;
}
.file_browser_container {
.preview-container {
height: 250px;
width: 200px;
}

.row > div {
min-height: 400px;
padding: 20px;
}

.files li {
float: left;
width: 100px;
list-style: none;
margin: 10px;
padding: 10px;
&:hover {
background-color: #eee;
}
.icon {
text-align: center;
font-size: 50px;
}
.name {
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
img {
max-height: 200px;
max-width: 200px;
}
}
29 changes: 13 additions & 16 deletions src/Clastic/MediaBundle/Resources/views/Form/fields.html.twig
Original file line number Diff line number Diff line change
Expand Up @@ -4,29 +4,26 @@

{% block file_browser_widget -%}
<div class="file_browser_container">
<div class="panel panel-default">
<div class="panel-body">
<div class="preview-container">
<img src="" class="preview center-block img-responsive" alt="Preview"><br>

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#fileBrowser">Select</button>

<div class="modal fade" id="fileBrowser" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="myModalLabel">Choose file</h4>
</div>
<div class="modal-body">
{% include "ClasticMediaBundle:Form:file_browser.html.twig" %}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">{{ 'form.media.modal.close'|trans }}</button>
<button type="button" class="btn btn-primary">{{ 'form.media.modal.save'|trans }}</button>
</div>
<div class="caption"></div>
</div>

<div class="finder"></div>
</div>
<div class="panel-footer">
<button type="button" class="select btn btn-primary">Select</button>
<button type="button" class="unselect btn btn-danger">X</button>
</div>
</div>

<div class="hidden">
{{ block('form_widget_simple') }}
</div>
</div>

{% include "FMElfinderBundle:Elfinder:helper/assets_css.html.twig" with {'prefix': '/assets', 'theme': 'smoothness'} %}
{%- endblock file_browser_widget %}
5 changes: 4 additions & 1 deletion src/Clastic/MediaBundle/clastic.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
module.exports = function() {
'use strict';
return [];
return [
new global.Clastic.GulpScript('web/assets/jquery-ui/jquery-ui.min.js', 'vendor', {weight: 10}),
new global.Clastic.GulpScript('web/assets/elfinder/js/elfinder.min.js', 'vendor', {weight: 11})
];
};

0 comments on commit d752416

Please sign in to comment.