Changeset ef7466e in tailbone


Ignore:
Timestamp:
03/04/19 18:12:37 (12 months ago)
Author:
Lance Edgar <ledgar@…>
Branches:
master
Children:
3789e4b
Parents:
006a709
Message:

Add mobile support for basic "feedback" dialog

Location:
tailbone
Files:
4 edited

Legend:

Unmodified
Added
Removed
  • tailbone/static/js/tailbone.mobile.js

    r006a709 ref7466e  
    2121    // header toolbar button to change between pages.  here's how we do that.
    2222    // note however that we do this *always* even when not technically needed
    23     var link = $('[data-role="header"] a');
     23    var link = $('[data-role="header"] a:first');
    2424    var newlink = ui.toPage.find('.replacement-header a');
    2525    link.text(newlink.text());
     
    2727    link.removeClass('ui-icon-home ui-icon-user');
    2828    link.addClass(newlink.attr('class'));
     29});
     30
     31
     32$(document).on('click', '#feedback-button', function() {
     33
     34    // prepare and display 'feedback' popup dialog
     35    var popup = $('.ui-page-active #feedback-popup');
     36    popup.find('.referrer .field').html(location.href);
     37    popup.find('.referrer input').val(location.href);
     38    popup.find('.user_name input').val('');
     39    popup.find('.message textarea').val('');
     40    popup.data('feedback-sent', false);
     41    popup.popup('open');
     42});
     43
     44
     45$(document).on('click', '#feedback-popup .submit', function() {
     46
     47    // send message when 'feedback' submit button pressed
     48    var popup = $('.ui-page-active #feedback-popup');
     49    var form = popup.find('form');
     50    $.post(form.attr('action'), form.serializeArray(), function(data) {
     51        if (data.ok) {
     52
     53            // mark "feedback sent" flag, for popupafterclose
     54            popup.data('feedback-sent', true);
     55            popup.popup('close');
     56        }
     57    });
     58
     59});
     60
     61
     62$(document).on('click', '#feedback-form-buttons .cancel', function() {
     63
     64    // close 'feedback' popup when user clicks Cancel
     65    var popup = $('.ui-page-active #feedback-popup');
     66    popup.popup('close');
     67});
     68
     69
     70$(document).on('popupafterclose', '#feedback-popup', function() {
     71
     72    // thank the user for their feedback, after msg is sent
     73    if ($(this).data('feedback-sent')) {
     74        var popup = $('.ui-page-active #feedback-thanks');
     75        popup.popup('open');
     76    }
    2977});
    3078
  • tailbone/templates/mobile/base.mako

    r006a709 ref7466e  
    5353    ${self.mobile_header()}
    5454
    55     <div data-role="page" data-url="${self.page_url()}"${' data-rel="dialog"' if dialog else ''|n}>
     55    <div data-role="page" data-url="${self.page_url()}">
    5656
    5757      ${self.mobile_usermenu()}
     
    8787    ${self.mobile_header_link()}
    8888    <h1>${base_meta.global_title()}</h1>
     89    ${self.mobile_header_feedback()}
    8990  </div>
    9091</%def>
     
    9394  <% classes = 'ui-btn-left ui-btn ui-btn-inline ui-mini ui-corner-all ui-btn-icon-left ' %>
    9495  % if request.user:
    95       ${h.link_to(request.user.get_short_name(), '#usermenu', class_=classes + 'ui-icon-user' + (' root-user' if request.is_root else ''))}
     96      ${h.link_to(request.user.get_short_name(), '#usermenu', data_role='button', data_icon='user',
     97          class_=' root-user' if request.is_root else '')}
    9698  % elif request.matched_route.name in ('mobile.login', 'mobile.about'):
    97       ${h.link_to("Home", url('mobile.home'), class_=classes + 'ui-icon-home')}
     99      ${h.link_to("Home", url('mobile.home'), data_role='button', data_icon='home')}
    98100  % else:
    99       ${h.link_to("Login", url('mobile.login'), class_=classes + 'ui-icon-user')}
     101      ${h.link_to("Login", url('mobile.login'), data_role='button', data_icon='user')}
    100102  % endif
     103</%def>
     104
     105<%def name="mobile_header_feedback()">
     106  ${h.link_to("Feedback", '#', id='feedback-button', data_role='button', data_icon='recycle')}
    101107</%def>
    102108
     
    138144    ${self.body()}
    139145
     146    <div data-role="popup" data-overlay-theme="b" id="feedback-popup" class="ui-content">
     147      <a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
     148      ${self.mobile_feedback_form()}
     149    </div>
     150
     151    <div data-role="popup" data-overlay-theme="b" id="feedback-thanks" class="ui-content">
     152      Thank you for your feedback.
     153    </div>
     154
    140155    <div class="replacement-header">
    141156      ${self.mobile_header_link()}
     
    150165  </div>
    151166</%def>
     167
     168<%def name="mobile_feedback_form()">
     169  ${h.form(url('mobile.feedback'))}
     170  ${h.csrf_token(request)}
     171  ${h.hidden('user', value=request.user.uuid if request.user else None)}
     172
     173  <p>
     174    Questions, suggestions, comments, complaints, etc. <span class="red">regarding this website</span>
     175    are welcome and may be submitted below.
     176  </p>
     177
     178  <div class="field-wrapper referrer">
     179    <label for="referrer">Referring URL</label>
     180    <div class="field"></div>
     181    ${h.hidden('referrer')}
     182  </div>
     183
     184  % if request.user:
     185      ${h.hidden('user_name', value=six.text_type(request.user))}
     186  % else:
     187      <div class="field-wrapper user_name">
     188        <label for="user_name">Your Name</label>
     189        <div class="field">
     190          ${h.text('user_name')}
     191        </div>
     192      </div>
     193  % endif
     194
     195  <div class="field-wrapper message">
     196    <label for="message">Message</label>
     197    <div class="field">
     198      ${h.textarea('message', cols=45, rows=15)}
     199    </div>
     200  </div>
     201
     202  <div class="buttons" id="feedback-form-buttons">
     203    <button type="button" data-inline="true" class="submit" data-theme="b">Send Note</button>
     204    <button type="button" data-inline="true" class="cancel">Cancel</button>
     205  </div>
     206
     207  ${h.end_form()}
     208</%def>
  • tailbone/views/auth.py

    r006a709 ref7466e  
    126126            'referrer': referrer,
    127127            'image_url': image_url,
    128             'dialog': mobile,
    129128        }
    130129
  • tailbone/views/common.py

    r006a709 ref7466e  
    33#
    44#  Rattail -- Retail Software Framework
    5 #  Copyright © 2010-2018 Lance Edgar
     5#  Copyright © 2010-2019 Lance Edgar
    66#
    77#  This file is part of Rattail.
     
    145145    def feedback(self):
    146146        """
    147         Generic view to present/handle the user feedback form.
     147        Generic view to handle the user feedback form.
    148148        """
    149149        form = forms.Form(schema=Feedback(), request=self.request)
     
    157157        return {'error': "Form did not validate!"}
    158158
     159    def mobile_feedback(self):
     160        """
     161        Generic view to handle the user feedback form on mobile.
     162        """
     163        return self.feedback()
     164
    159165    def consume_batch_id(self):
    160166        """
     
    215221        config.add_route('feedback', '/feedback', request_method='POST')
    216222        config.add_view(cls, attr='feedback', route_name='feedback', renderer='json')
     223        config.add_route('mobile.feedback', '/mobile/feedback', request_method='POST')
     224        config.add_view(cls, attr='mobile_feedback', route_name='mobile.feedback', renderer='json')
    217225
    218226        # consume batch ID
Note: See TracChangeset for help on using the changeset viewer.