From bd97a04310b9e2d3c7b40015721be583188a03b2 Mon Sep 17 00:00:00 2001 From: Bibhas Date: Fri, 14 Aug 2020 16:05:24 +0530 Subject: [PATCH 01/13] added imgeewidget --- baseframe/forms/fields.py | 3 +++ baseframe/forms/widgets.py | 42 +++++++++++++++++++++++++++++++++++++- 2 files changed, 44 insertions(+), 1 deletion(-) diff --git a/baseframe/forms/fields.py b/baseframe/forms/fields.py index 7d0d6f9d..b6bd3097 100644 --- a/baseframe/forms/fields.py +++ b/baseframe/forms/fields.py @@ -28,6 +28,7 @@ from .widgets import ( CoordinatesInput, DateTimeInput, + ImgeeWidget, RadioMatrixInput, Select2Widget, SelectWidget, @@ -748,6 +749,8 @@ class ImgeeField(URLField): ) """ + widget = ImgeeWidget() + def __init__( self, label='', diff --git a/baseframe/forms/widgets.py b/baseframe/forms/widgets.py index c38a2dfa..93d5cb02 100644 --- a/baseframe/forms/widgets.py +++ b/baseframe/forms/widgets.py @@ -3,11 +3,13 @@ from __future__ import unicode_literals import six -from flask import Markup +from flask import Markup, current_app from wtforms.compat import text_type from wtforms.widgets import RadioInput, Select, html_params import wtforms +from furl import furl + from .. import b_ as _ __all__ = [ @@ -17,6 +19,7 @@ 'DateTimeInput', 'CoordinatesInput', 'RadioMatrixInput', + 'ImgeeWidget', 'InlineListWidget', 'RadioInput', 'SelectWidget', @@ -286,3 +289,40 @@ def __call__(self, field, **kwargs): ) html.append('' % self.html_tag) return Markup('\n'.join(html)) + + +class ImgeeWidget(wtforms.widgets.Input): + input_type = 'url' + + def __call__(self, field, **kwargs): + id_ = kwargs.pop('id', field.id) + kwargs.setdefault('type', self.input_type) + imgee_host = current_app.config.get('IMGEE_HOST') + if not imgee_host: + raise ValueError("No imgee server specified") + + upload_url = f'{imgee_host}/{field.profile}/new/popup' + + value = kwargs.pop('value', None) + if not value: + value = field._value() + if not value: + value = '' + elif isinstance(value, furl): + value = furl.url + + return Markup( + ' ' + % ( + self.html_params( + id=id_, + name=field.name, + placeholder=_("Image URL"), + value=value, + **kwargs + ), + self.html_params( + id='iframe_' + id_ + '_upload', input_id=id_, src=upload_url + ), + ) + ) From 4a776a4d20357bb5efbfd87ab17139b20370b786 Mon Sep 17 00:00:00 2001 From: Bibhas Date: Wed, 19 Aug 2020 12:21:48 +0530 Subject: [PATCH 02/13] updated imgee url --- baseframe/forms/widgets.py | 2 +- baseframe/templates/baseframe/bootstrap3/forms.html.jinja2 | 7 +++++++ 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/baseframe/forms/widgets.py b/baseframe/forms/widgets.py index 93d5cb02..27e3c172 100644 --- a/baseframe/forms/widgets.py +++ b/baseframe/forms/widgets.py @@ -301,7 +301,7 @@ def __call__(self, field, **kwargs): if not imgee_host: raise ValueError("No imgee server specified") - upload_url = f'{imgee_host}/{field.profile}/new/popup' + upload_url = f'{imgee_host}/{field.profile}/new/iframe' value = kwargs.pop('value', None) if not value: diff --git a/baseframe/templates/baseframe/bootstrap3/forms.html.jinja2 b/baseframe/templates/baseframe/bootstrap3/forms.html.jinja2 index 765a5248..6e1af71c 100644 --- a/baseframe/templates/baseframe/bootstrap3/forms.html.jinja2 +++ b/baseframe/templates/baseframe/bootstrap3/forms.html.jinja2 @@ -313,6 +313,13 @@ document.getElementById("{{ ref_id }}").submit(); } }) + {%- elif field.type == 'ImgeeField' %} + console.log('asd'); + window.addEventListener("message", function (event) { + console.log(event); + if (event.origin !== "%s") + return; + }); {%- elif field.type in ['UserSelectField', 'UserSelectMultiField'] %} {%- if config['LASTUSER_CLIENT_ID'] and current_auth.cookie and 'sessionid' in current_auth.cookie %} Baseframe.Forms.lastuserAutocomplete({ From b0f717e3c0258a54ba4748486dd50a8e58b0e8b1 Mon Sep 17 00:00:00 2001 From: Bibhas Date: Tue, 15 Sep 2020 02:11:18 +0530 Subject: [PATCH 03/13] showing uploaded image in an img --- baseframe/forms/widgets.py | 3 ++- baseframe/templates/baseframe/mui/forms.html.jinja2 | 8 ++++++++ 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/baseframe/forms/widgets.py b/baseframe/forms/widgets.py index 27e3c172..1b3b8244 100644 --- a/baseframe/forms/widgets.py +++ b/baseframe/forms/widgets.py @@ -312,8 +312,9 @@ def __call__(self, field, **kwargs): value = furl.url return Markup( - ' ' + ' ' % ( + self.html_params(id='img_' + id_, src=value, width='200', **kwargs), self.html_params( id=id_, name=field.name, diff --git a/baseframe/templates/baseframe/mui/forms.html.jinja2 b/baseframe/templates/baseframe/mui/forms.html.jinja2 index 9de4ee7c..03348fa4 100644 --- a/baseframe/templates/baseframe/mui/forms.html.jinja2 +++ b/baseframe/templates/baseframe/mui/forms.html.jinja2 @@ -356,6 +356,14 @@ document.getElementById("{{ ref_id }}").submit(); } }) + {%- elif field.type == 'ImgeeField' %} + window.addEventListener("message", function (event) { + console.log(event); + if (event.origin !== "{{ config['IMGEE_HOST'] }}") + return; + $('#img_{{ field.id }}').attr('src', event.data.embed_url); + $('#{{ field.id }}').val(event.data.embed_url); + }); {%- elif field.type in ['UserSelectField', 'UserSelectMultiField'] %} {%- if config['LASTUSER_CLIENT_ID'] and current_auth.cookie and 'sessionid' in current_auth.cookie %} Baseframe.Forms.lastuserAutocomplete({ From 4d2588d4e51f173875d2943160cc872484e72640 Mon Sep 17 00:00:00 2001 From: Bibhas Date: Thu, 17 Sep 2020 16:19:36 +0530 Subject: [PATCH 04/13] hiding input field --- baseframe/forms/widgets.py | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/baseframe/forms/widgets.py b/baseframe/forms/widgets.py index 1b3b8244..8b1d75bf 100644 --- a/baseframe/forms/widgets.py +++ b/baseframe/forms/widgets.py @@ -292,7 +292,7 @@ def __call__(self, field, **kwargs): class ImgeeWidget(wtforms.widgets.Input): - input_type = 'url' + input_type = 'hidden' def __call__(self, field, **kwargs): id_ = kwargs.pop('id', field.id) From 8cfa6ef95a4d633fe5c358d3b6778943a9ebfa17 Mon Sep 17 00:00:00 2001 From: Vidya Ramakrishnan Date: Fri, 25 Sep 2020 23:23:12 +0530 Subject: [PATCH 05/13] Imgee upload UI changes --- baseframe/static/css/mui.css | 35 +++++++++++++++++++ .../static/sass/baseframe-material/_form.scss | 28 +++++++++++++++ .../sass/baseframe-material/_modal.scss | 11 ++++++ .../templates/baseframe/mui/forms.html.jinja2 | 29 ++++++++++++--- 4 files changed, 98 insertions(+), 5 deletions(-) diff --git a/baseframe/static/css/mui.css b/baseframe/static/css/mui.css index 3944ca7b..19955a1a 100644 --- a/baseframe/static/css/mui.css +++ b/baseframe/static/css/mui.css @@ -4318,6 +4318,30 @@ li p + ol { cursor: default; } +.imgee-url-holder { + display: inline-block; + vertical-align: bottom; + max-width: 200px; + margin-bottom: 8px; +} + +.imgee-button { + margin-bottom: 8px; +} + +.modal-fullscreen iframe.imgee-upload { + width: 100%; + height: 100vh; + border: 0; +} + +.popup .mui-container { + max-width: calc(100% - 32px); +} +.popup .mui-container .popup__imgee { + padding: 0; +} + .chip { padding: 0 5px 5px; border: 0; @@ -4562,6 +4586,12 @@ li p + ol { overflow: auto; min-height: 100%; } +.jquery-modal.blocker.current .modal-fullscreen { + width: 100%; + height: 100%; + padding: 0; + border-radius: 0; +} @media (min-width: 768px) { .jquery-modal.blocker.current { @@ -4574,6 +4604,11 @@ li p + ol { min-height: auto; border-radius: 8px; } + .jquery-modal.blocker.current .modal-fullscreen { + max-width: 90%; + padding: 16px; + height: auto; + } } .tab-container { display: flex; diff --git a/baseframe/static/sass/baseframe-material/_form.scss b/baseframe/static/sass/baseframe-material/_form.scss index a0aa9278..cbf3d79c 100644 --- a/baseframe/static/sass/baseframe-material/_form.scss +++ b/baseframe/static/sass/baseframe-material/_form.scss @@ -270,3 +270,31 @@ opacity: 0.5; cursor: default; } + +.imgee-url-holder { + display: inline-block; + vertical-align: bottom; + max-width: 200px; + margin-bottom: $mui-grid-padding/2; +} + +.imgee-button { + margin-bottom: $mui-grid-padding/2; +} + +.modal-fullscreen { + iframe.imgee-upload { + width: 100%; + height: 100vh; + border: 0; + } +} + +.popup { + .mui-container { + max-width: calc(100% - 32px); + .popup__imgee { + padding: 0; + } + } +} diff --git a/baseframe/static/sass/baseframe-material/_modal.scss b/baseframe/static/sass/baseframe-material/_modal.scss index 53258727..f1fdcba4 100644 --- a/baseframe/static/sass/baseframe-material/_modal.scss +++ b/baseframe/static/sass/baseframe-material/_modal.scss @@ -39,6 +39,12 @@ overflow: auto; min-height: 100%; } + .modal-fullscreen { + width: 100%; + height: 100%; + padding: 0; + border-radius: 0; + } } @media (min-width: 768px) { @@ -52,5 +58,10 @@ min-height: auto; border-radius: 8px; } + .modal-fullscreen { + max-width: 90%; + padding: $mui-grid-padding; + height: auto; + } } } diff --git a/baseframe/templates/baseframe/mui/forms.html.jinja2 b/baseframe/templates/baseframe/mui/forms.html.jinja2 index 03348fa4..5b7fa93d 100644 --- a/baseframe/templates/baseframe/mui/forms.html.jinja2 +++ b/baseframe/templates/baseframe/mui/forms.html.jinja2 @@ -79,6 +79,17 @@ {%- endif %} + {%- elif field.type == 'ImgeeField' %} + {{ field | render_field_options(class="field-" + field.id + " " + widget_css_class, tabindex=tabindex, autofocus=autofocus, rows=rows) }} + Select or Upload Image + {%- elif field.widget.input_type == 'password' and field.widget.html_tag not in ['ul', 'ol'] %}
{{ field | render_field_options(class="field-" + field.id + " " + widget_css_class, tabindex=tabindex, autofocus=autofocus, rows=rows)}} @@ -357,12 +368,20 @@ } }) {%- elif field.type == 'ImgeeField' %} + console.log('{{field.widget_type}}') window.addEventListener("message", function (event) { - console.log(event); - if (event.origin !== "{{ config['IMGEE_HOST'] }}") - return; - $('#img_{{ field.id }}').attr('src', event.data.embed_url); - $('#{{ field.id }}').val(event.data.embed_url); + if (event.origin === "{{ config['IMGEE_HOST'] }}") { + var message = JSON.parse(event.data); + console.log(message.embed_url); + if (message.context == 'imgee.upload') { + console.log('imgee upload') + $('#img_{{ field.id }}').attr('src', message.embed_url); + $('#{{ field.id }}').val(message.embed_url); + {%- if field.widget_type != 'modal' %} + $.modal.close(); + {%- endif %} + } + } }); {%- elif field.type in ['UserSelectField', 'UserSelectMultiField'] %} {%- if config['LASTUSER_CLIENT_ID'] and current_auth.cookie and 'sessionid' in current_auth.cookie %} From 19d3fab34e7e2310e210583d61b9d44899589109 Mon Sep 17 00:00:00 2001 From: Vidya Ramakrishnan Date: Fri, 25 Sep 2020 23:31:58 +0530 Subject: [PATCH 06/13] Update imgee widget --- baseframe/forms/widgets.py | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/baseframe/forms/widgets.py b/baseframe/forms/widgets.py index 8b1d75bf..8c67aa4d 100644 --- a/baseframe/forms/widgets.py +++ b/baseframe/forms/widgets.py @@ -301,7 +301,7 @@ def __call__(self, field, **kwargs): if not imgee_host: raise ValueError("No imgee server specified") - upload_url = f'{imgee_host}/{field.profile}/new/iframe' + upload_url = f'{imgee_host}/{field.profile}/popup' value = kwargs.pop('value', None) if not value: @@ -310,9 +310,18 @@ def __call__(self, field, **kwargs): value = '' elif isinstance(value, furl): value = furl.url + + field.iframe = Markup( + '' + % ( + self.html_params( + id='iframe_' + id_ + '_upload', input_id=id_, src=upload_url, + ), + ) + ) return Markup( - ' ' + ' ' % ( self.html_params(id='img_' + id_, src=value, width='200', **kwargs), self.html_params( @@ -322,8 +331,5 @@ def __call__(self, field, **kwargs): value=value, **kwargs ), - self.html_params( - id='iframe_' + id_ + '_upload', input_id=id_, src=upload_url - ), ) ) From 682632c9cf655ba634765115e0f6b02594c3f0c7 Mon Sep 17 00:00:00 2001 From: Vidya Ramakrishnan Date: Thu, 1 Oct 2020 17:50:58 +0530 Subject: [PATCH 07/13] Move the image upload button down --- baseframe/static/css/mui.css | 3 +-- baseframe/static/sass/baseframe-material/_form.scss | 3 +-- baseframe/templates/baseframe/mui/forms.html.jinja2 | 2 +- 3 files changed, 3 insertions(+), 5 deletions(-) diff --git a/baseframe/static/css/mui.css b/baseframe/static/css/mui.css index 19955a1a..843434f3 100644 --- a/baseframe/static/css/mui.css +++ b/baseframe/static/css/mui.css @@ -4319,8 +4319,7 @@ li p + ol { } .imgee-url-holder { - display: inline-block; - vertical-align: bottom; + display: block; max-width: 200px; margin-bottom: 8px; } diff --git a/baseframe/static/sass/baseframe-material/_form.scss b/baseframe/static/sass/baseframe-material/_form.scss index cbf3d79c..8df694ba 100644 --- a/baseframe/static/sass/baseframe-material/_form.scss +++ b/baseframe/static/sass/baseframe-material/_form.scss @@ -272,8 +272,7 @@ } .imgee-url-holder { - display: inline-block; - vertical-align: bottom; + display: block; max-width: 200px; margin-bottom: $mui-grid-padding/2; } diff --git a/baseframe/templates/baseframe/mui/forms.html.jinja2 b/baseframe/templates/baseframe/mui/forms.html.jinja2 index 5b7fa93d..7f7129a8 100644 --- a/baseframe/templates/baseframe/mui/forms.html.jinja2 +++ b/baseframe/templates/baseframe/mui/forms.html.jinja2 @@ -81,7 +81,7 @@
{%- elif field.type == 'ImgeeField' %} {{ field | render_field_options(class="field-" + field.id + " " + widget_css_class, tabindex=tabindex, autofocus=autofocus, rows=rows) }} - Select or Upload Image + {% trans %}Select or Upload Image{% endtrans %}