Skip to content

Commit e7685f5

Browse files
VolmargVolmarg
authored
Merge pull request #11 from Volmarg/feature/upload_widget_more_detail_on_images
Feature/upload widget more detail on images
2 parents 75f44dd + 3c36fb1 commit e7685f5

File tree

11 files changed

+162
-14
lines changed

11 files changed

+162
-14
lines changed

‎public/assets/app.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎public/assets/app.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎public/assets_/static-scripts/upload-widget.js‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
/**
2+
* this should NOT contain any main logic of system
3+
* only some smaller function passed for example in json configs etc.
4+
*/
5+
6+
var uploadWidget = {
7+
8+
/**
9+
* Selecting option corresponding to the category on which im at atm.
10+
* raw js while jquerry works within webpack scripts only
11+
*/
12+
selectCurrentModuleAndUploadDirOptionForQuickUpload: function () {
13+
14+
let moduleSelect = document.querySelector("select#upload_form_upload_module_dir");
15+
let directorySelect = document.querySelector("select#upload_form_subdirectory");
16+
17+
let moduleSelectOptions = document.querySelectorAll("select#upload_form_upload_module_dir option");
18+
let directorySelectOptions = document.querySelectorAll("select#upload_form_subdirectory option");
19+
20+
let getAttrs = JSON.parse(TWIG_GET_ATTRS);
21+
let directoryPath = unescape(getAttrs.encoded_subdirectory_path)
22+
let route = TWIG_ROUTE;
23+
24+
let moduleToSelect = '';
25+
26+
// swap module
27+
if ( route === 'modules_my_files' ) {
28+
moduleToSelect = 'files';
29+
} else if( route === 'modules_my_images' ){
30+
moduleToSelect = 'images';
31+
}
32+
33+
moduleSelect.setAttribute("value", moduleToSelect);
34+
moduleSelectOptions.forEach(function (option, index) {
35+
if (option.getAttribute("value") == moduleToSelect) {
36+
option.setAttribute("selected", "true");
37+
}
38+
});
39+
40+
//swap dir
41+
let allOptgroups = directorySelect.querySelectorAll("optgroup");
42+
allOptgroups.forEach(function (optgroup, index) {
43+
optgroup.setAttribute('class', 'd-none');
44+
});
45+
46+
let optgroupForModule = directorySelect.querySelectorAll("optgroup[label^='" + moduleToSelect + "']")[0];
47+
let options = optgroupForModule.childNodes;
48+
49+
optgroupForModule.setAttribute('class', '');
50+
51+
if( null === directoryPath ){ // main dir
52+
// do nothing - main is always selected first
53+
return;
54+
}
55+
56+
directorySelect.setAttribute("value", directoryPath);
57+
options.forEach(function (option, index) {
58+
option.setAttribute('class','');
59+
if (option.getAttribute("value") == directoryPath) {
60+
option.setAttribute("selected", "true");
61+
}
62+
});
63+
64+
}
65+
66+
}

‎src/Controller/Files/FileUploadController.php‎

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -87,23 +87,31 @@ public function __construct(FileUploader $fileUploader, FilesHandler $filesHandl
8787
*/
8888
public function displayUploadPage(Request $request) {
8989
$this->sendData($request);
90-
return $this->renderTemplate(false);
90+
91+
if (!$request->isXmlHttpRequest()) {
92+
return $this->renderTemplate(false);
93+
}
94+
95+
return $this->renderTemplate(true);
9196
}
9297

9398
/**
9499
* @Route("/upload/send", name="upload_send")
95100
* @param Request $request
96-
* @return JsonResponse
101+
* @return Response
97102
* @throws \Exception
98103
*/
99104
public function sendData(Request $request){
100105
$this->handleFileUpload($request);
101106

102-
$data = [
103-
'template' => $this->renderTemplate(true)->getContent()
104-
];
107+
$referer_url = $request->server->get('HTTP_REFERER');
108+
$upload_page_url = $this->generateUrl('upload');
109+
110+
if( $referer_url === $upload_page_url || empty($referer_url) ) {
111+
return $this->renderTemplate(false);
112+
}
105113

106-
return new JsonResponse($data);
114+
return $this->redirect($referer_url);
107115
}
108116

109117
/**

‎src/assets/scripts/lightgallery/index.js‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ export default (function () {
2323
transferButton : '#lightgallery_transfer_button',
2424
downloadButton : '#lg-download',
2525
fileTransferButton : '#lightgallery_transfer_button',
26-
tagsManageButton : '#lightgallery_manage_tags_button',
26+
tagsManageButton : '#lightgallery_manage_tags_button'
2727
},
2828
classes: {
2929
upperToolbar : '.lg-toolbar',
@@ -34,6 +34,7 @@ export default (function () {
3434
imagePreviewWrapper : '.lg-inner',
3535
currentViewedFilename : '.lg-sub-html',
3636
galleryMainWrapper : '.lg',
37+
textHolderCaption : '.caption-text-holder'
3738
}
3839
},
3940
messages: {
@@ -177,8 +178,10 @@ export default (function () {
177178
let images = $("[src^='" + filePath + "']");
178179

179180
$(images).attr('src', newFilePath);
181+
$(images).attr('alt', newFileName);
180182
$(links).attr('href', newFilePath);
181183

184+
_this.handleGalleryCaptionOnFileRename(_this.vars.currentFileName, newFileName);
182185
_this.vars.currentFileName = $(_this.selectors.classes.currentViewedFilename).text();
183186
}
184187

@@ -347,6 +350,11 @@ export default (function () {
347350
this.initGallery();
348351
$(htmlGallery).find('[href^="' + filePath + '"]').remove();
349352
},
353+
handleGalleryCaptionOnFileRename: function(currFilename, newFilename){
354+
let textHolder = $(this.selectors.classes.textHolderCaption + "[data-filename^='" + currFilename + "']");
355+
textHolder.text(newFilename);
356+
textHolder.attr('data-alt', newFilename);
357+
},
350358
handleGalleryEvents: function (){
351359
let _this = this;
352360
let lightboxGallery = $(this.selectors.ids.lightboxGallery);

‎src/scss/ui/lightgallery.scss‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,4 +16,27 @@
1616
.lg #lightgallery_save_button:hover {
1717
transition: 200ms;
1818
color: white;
19+
}
20+
21+
/* Text under image */
22+
#aniimated-thumbnials .caption-wrapper {
23+
display: inline-block;
24+
height: 200px;
25+
width: 100%;
26+
position: absolute;
27+
left: 0px;
28+
}
29+
30+
#aniimated-thumbnials img {
31+
margin-bottom: 38px;
32+
}
33+
34+
#aniimated-thumbnials .caption-text-holder {
35+
position: absolute;
36+
bottom: -110px;
37+
left: 0;
38+
right: 0;
39+
height: 40px;
40+
width: 100%;
41+
text-align: center;
1942
}

‎templates/base.html.twig‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,8 @@
7777

7878
{% block twigToJavascript %}
7979
<script>
80-
var TWIG_GET_ATTRS = '{{ getAttrs | json_encode | raw }}'
80+
var TWIG_GET_ATTRS = '{{ getAttrs | json_encode | raw }}';
81+
var TWIG_ROUTE = '{{ app.request.attributes.get('_route') }}'
8182
</script>
8283
{% endblock %}
8384

‎templates/core/galleries/lightgallery.html.twig‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,17 +18,22 @@
1818
>
1919
<div id="aniimated-thumbnials" class="grid-item">
2020
{% for image in images %}
21-
<a href="/{{ image[KEY_FILE_FULL_PATH] }}">
21+
<a href="/{{ image[KEY_FILE_FULL_PATH] }}" style="position:relative; width:200px;">
2222
{#
2323
this is the only case when the leading "/" in twig tpl must be added
2424
because to display images from upload dir it needs to have "/"
2525
#}
2626
<img src="/{{ image[KEY_FILE_FULL_PATH] }}" alt="{{ image[KEY_FILE_NAME] }}" style="height:200px;"/>
27+
28+
<div class="caption-wrapper"></div>
29+
<span class="caption-text-holder image_{{ loop.index0 }}" data-filename="{{ image[KEY_FILE_NAME] }}">
30+
{{ image[KEY_FILE_NAME] }}
31+
</span>
2732
</a>
2833
{% endfor %}
2934
</div>
30-
</div>
3135

36+
</div>
3237
</div>
3338
</div>
3439
</div>

‎templates/core/upload/upload-page.html.twig‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@
3030
{% endif %}
3131

3232
<div class="col-md-6 file-upload-form justify-content-center align-self-center">
33-
{{ form_start(form, {'attr': {'class': 'flex-column', 'data-form-target':"Upload"}}) }}
33+
{{ form_start(form, {'attr': {'class': 'flex-column', 'data-form-target':"Upload", "action" : path('upload_send') }}) }}
3434

3535
{{ form_widget(form[KEY_UPLOAD_MODULE_DIR], {'attr': {'class': 'form-control upload-type listFilterer'}}) }}
3636

@@ -46,7 +46,7 @@
4646
{{ form_widget(form.subdirectory) }}
4747
</section>
4848

49-
<section class="button-submit col-md-3">
49+
<section class="button-submit col-md-4">
5050
{{ form_widget(form.submit) }}
5151
</section>
5252

‎templates/modules/my-files/my-files.html.twig‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,25 @@
4242
</div>
4343

4444
</div>
45+
46+
<script src="/assets_/static-scripts/upload-widget.js"></script>
47+
{% include 'page-elements/components/widgets/plus-icon.twig' with {
48+
'widgetName': "upload-files-widget",
49+
'settings':{
50+
"type": 'template',
51+
"url": '/upload/',
52+
'callFunctions': '
53+
ui.upload.init();
54+
ui.forms.init();
55+
uploadWidget.selectCurrentModuleAndUploadDirOptionForQuickUpload();
56+
57+
let mainContentInModal = document.querySelector(".bootbox-body main.main-content");
58+
mainContentInModal.style = "min-height:auto; padding: 10px;";
59+
',
60+
'subtype':'form'
61+
}
62+
} %}
63+
4564
</div>
4665
</main>
4766

0 commit comments

Comments
 (0)