Skip to content

Commit

Permalink
working on a widget
Browse files Browse the repository at this point in the history
  • Loading branch information
@mutantsan
mutantsan committed Jun 26, 2024
1 parent 4cc69bc commit 80f37be
Show file tree
Hide file tree
Showing 4 changed files with 168 additions and 23 deletions.
30 changes: 29 additions & 1 deletion ckanext/file_upload_widget/assets/css/styles.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

50 changes: 47 additions & 3 deletions ckanext/file_upload_widget/assets/js/file-upload-widget.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,22 +2,66 @@ ckan.module("file-upload-widget", function ($, _) {
"use strict";

return {
options: {
fileInput: '.file-upload-widget input[type="file"]',
fileInputButton: '.file-upload-widget .file-input-button',
const: {
fileInputButton: '.btn-file-input',
urlInputButton: '.btn-url-input',
mediaInputButton: '.btn-media-input',
//
mainWindowBlock: '.fuw-main-window',
urlInputBlock: '.fuw-url-input',
mediaInputBlock: '.fuw-media-input',
cancelBtn: '.fuw-cancel-btn',
},
initialize: function () {
$.proxyAll(this, /_/);

console.log('file-upload-widget initialized');

this.initBtn = this.el.find(".fuw-init-btn");
this.fileInputBtn = this.el.find(this.const.fileInputButton);
this.urlInputBtn = this.el.find(this.const.urlInputButton);
this.mediaInputBtn = this.el.find(this.const.mediaInputButton);

this.mainWindow = this.el.find(this.const.mainWindowBlock);
this.urlWindow = this.el.find(this.const.urlInputBlock);
this.mediaWindow = this.el.find(this.const.mediaInputBlock);

this.cancelBtn = this.el.find(this.const.cancelBtn);

// Bind events
this.initBtn.on('click', this._onTriggerModal);
this.fileInputBtn.on('click', this._onFileInputTriggered);
this.urlInputBtn.on('click', this._onUrlInputTriggered);
this.mediaInputBtn.on('click', this._onMediaInputTriggered);
this.cancelBtn.on('click', this._onCancelAction);
},
_onTriggerModal: function (e) {
console.log('trigger modal');
},
_onFileInputTriggered: function (e) {
console.log('file input triggered');
},
_onUrlInputTriggered: function (e) {
console.log('url input triggered');

this.urlWindow.toggle();
this.mainWindow.toggle();
this.cancelBtn.toggle();
},
_onMediaInputTriggered: function (e) {
console.log('media input triggered');

this.mediaWindow.toggle();
this.mainWindow.toggle();
this.cancelBtn.toggle();
},
_onCancelAction: function (e) {
console.log('cancel action');

this.urlWindow.hide();
this.mediaWindow.hide();
this.mainWindow.toggle();
this.cancelBtn.toggle();
}
};
});
77 changes: 58 additions & 19 deletions ckanext/file_upload_widget/templates/scheming/form_snippets/files_upload_widget.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,30 +23,69 @@
}}
{%- endif -%}
</div>
</div>

<div class="modal fade" tabindex="-1" id="uploadWidget-{{ field.field_name }}" >
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="d-flex justify-content-center align-items-center text-center">
<div class="fuw-dropzone">
<div class="fuw-dropzone__content">
<div class="fuw-dropzone__drop">
<i class="fas fa-cloud-upload-alt"></i>
<span>{{ _("Drag and drop files here") }}</span>
<div class="modal fade" tabindex="-1" id="uploadWidget-{{ field.field_name }}" >
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="btn btn-black fuw-cancel-btn" style="display: none;">{{ _("Cancel") }}</button>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<!-- MAIN WINDOW -->
<div class="fuw-main-window">
<div class="fuw-dropzone">
<div class="fuw-dropzone__content">
<div class="fuw-dropzone__drop">
<i class="fas fa-cloud-upload-alt"></i>
<span>{{ _("Drag and drop files here") }}</span>
</div>
<div class="fuw-dropzone__alternative">
<p class="fuw-or">{{ _("OR") }}</p>
<button type="button" class="btn btn-primary btn-file-input">{{ _("Browse files") }}</button>
<button type="button" class="btn btn-primary btn-url-input">{{ _("URL") }}</button>
<button type="button" class="btn btn-primary btn-media-input">{{ _("Media gallery") }}</button>
</div>
</div>
<div class="fuw-dropzone__alternative">
<p>{{ _("OR") }}</p>
<button type="button" class="btn btn-primary">{{ _("Browse files") }}</button>
<button type="button" class="btn btn-primary">{{ _("URL") }}</button>
<button type="button" class="btn btn-primary">{{ _("Media gallery") }}</button>
</div>
</div>

<!-- URL INPUT WINDOW -->
<div class="fuw-url-input" style="display: none;">
<input type="text" aria-label="Enter URL to import a file" placeholder="Enter URL to import a file" class="form-control">
<button type="button" class="btn btn-primary float-end mt-3">{{ _("Import") }}</button>
</div>

<!-- MEDIA GALLERY WINDOW -->
<div class="fuw-media-input" style="display: none;">
<div class="search-input">
<input aria-label="Search files..." id="fuw-media-input--search" type="text" class="form-control input-lg" value="" autocomplete="off" placeholder="Search files...">

<span class="input-group-btn">
<i class="fa fa-search"></i>
</span>
</div>

<div class="fuw-media-input--files">
<div class="fuw-media-input--file">
<img src="https://via.placeholder.com/150" alt="Placeholder image">
<button type="button" class="btn btn-primary">{{ _("Select") }}</button>
</div>
<div class="fuw-media-input--file">
<img src="https://via.placeholder.com/150" alt="Placeholder image">
<button type="button" class="btn btn-primary">{{ _("Select") }}</button>
</div>
<div class="fuw-media-input--file">
<img src="https://via.placeholder.com/150" alt="Placeholder image">
<button type="button" class="btn btn-primary">{{ _("Select") }}</button>
</div>
<div class="fuw-media-input--file">
<img src="https://via.placeholder.com/150" alt="Placeholder image">
<button type="button" class="btn btn-primary">{{ _("Select") }}</button>
</div>
</div>
</div>

</div>
</div>
</div>
Expand Down
34 changes: 34 additions & 0 deletions ckanext/file_upload_widget/theme/styles.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,42 @@
@import "mixins";

.file-upload-widget {
.fuw-main-window {
display: flex;
justify-content: center;
align-items: center;
text-align: center;

.fuw-or {
margin: 1rem 0;
}
}

.fuw-media-input {
.search-input {
margin-bottom: 1rem;
position: relative;

.input-group-btn {
position: absolute;
right: 10px;
top: 10px;
}
}
}

.fuw-cancel-btn {
position: absolute;
top: 5px;
}

.hidden {
display: none;
}

.modal {
.modal-body {
min-height: 145px;
}
}
}

0 comments on commit 80f37be

Please sign in to comment.