Adding pop-up example.

deformdemo/__init__.py

@@ -470,6 +470,46 @@ class Schema(colander.Schema):

        return self.render_form(form)

    @view_config(renderer='templates/popup_example.pt', name="popup")
    @demonstrate('Popup and retail rendering')
    def popup(self):
        """Render a page (``popup_example.pt``) that contains
        a specially styled form (``modal.pt``).

        .. note ::

            Pop up form templates are NOT supplied with Deform core.
            They are in ddemonstrationckage for demostration purposes.

        popup_example.pt contains the page HTML template.

        Javascript: The JavaScript logic to show and hide the pop up is in ``poup_example.pt``.
        We need to automatically open the pop up on a validation error.

        Template registration: See ``deformdemo.main`` how we register a template path
        ``custom_widgets`` where the custom form template lies.
        See also :ref:`templates` in Deform documentation for more information.
        """

        class Schema(colander.Schema):

            title = "Pop up example title"

            # Override default form.pt for rendering <form>
            widget = deform.widget.FormWidget(template="modal.pt")

            name = colander.SchemaNode(
                colander.String(),
                description='Enter your name (required)')

        schema = Schema()
        form = deform.Form(schema, buttons=('submit',))

        # CSS is used in <button> opener and JS code
        form.formid = "my-pop-up"

        return self.render_form(form)

    @view_config(renderer='templates/form.pt', name='checkbox_with_label')
    @demonstrate('Checkbox Widget (with Label)')
    def checkbox_with_label(self):
@@ -2693,12 +2733,16 @@ def handle_error(self, field, error):
def main(global_config, **settings):
    # paster serve entry point
    settings['debug_templates'] = 'true'

    renderer = settings['deformdemo.renderer']
    session_factory = UnencryptedCookieSessionFactoryConfig('seekrit!')
    config = Configurator(settings=settings, session_factory=session_factory)
    config.include('pyramid_chameleon')
    renderer = config.maybe_dotted(renderer)
    deform.Form.set_default_renderer(renderer)

    #deform.Form.set_default_renderer(renderer)
    deform.renderer.configure_zpt_renderer(["deformdemo:custom_widgets"])

    config.add_static_view('static_deform', 'deform:static')
    config.add_static_view('static_demo', 'deformdemo:static')
    config.add_route('deformdemo', '*traverse')

deformdemo/custom_widgets/modal.pt

@@ -0,0 +1,82 @@
<div id="${field.formid}" class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">

    <!--- Render form as a modal-content part -->
    <div class="modal-content">
      <form
        method="${method}"
        enctype="multipart/form-data"
        accept-charset="utf-8"
        tal:define="
          style style|field.widget.style;
          css_class 'deform';
          item_template item_template|field.widget.item_template;
          autocomplete autocomplete|field.autocomplete;
          errormsg errormsg|field.errormsg;
          description description|field.description;
          buttons buttons|field.buttons;
          use_ajax use_ajax|field.use_ajax;
          formid formid|field.formid;
          action action|field.action or None;
          method method|field.method;"
        tal:attributes="
          autocomplete autocomplete;
          style style;
          class css_class;
          action action;"
      >

        <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">${field.title}</h4>
        </div>

        <fieldset class="modal-body deform-form-fieldset">

          <input type="hidden" name="_charset_"/>
          <input type="hidden" name="__formid__" value="${formid}"/>

          <div class="alert alert-danger" tal:condition="field.error">
            <div class="error-msg-lbl" i18n:translate=""
            >There was a problem with your submission
            </div>
            <div class="error-msg-detail" i18n:translate=""
            >Errors have been highlighted below
            </div>
            <p class="error-msg">${field.errormsg}</p>
          </div>

          <p class="section first" tal:condition="description">
            ${description}
          </p>

          <!--- Render all widgets within the form -->
          <div tal:repeat="child field"
                   tal:replace="structure child.render_template(item_template)"/>

        </fieldset>

        <div class="modal-footer">

          <div class="form-group deform-form-buttons">
            <tal:loop tal:repeat="button buttons">
              <button
                       tal:define="btn_disposition repeat.button.start and 'btn-primary' or 'btn-default';
                              btn_icon button.icon|None"
                       tal:attributes="disabled button.disabled if button.disabled else None"
                      id="${formid+button.name}"
                      name="${button.name}"
                      type="${button.type}"
                      class="btn ${button.css_class or btn_disposition}"
                      value="${button.value}">
                <i tal:condition="btn_icon" class="${btn_icon}"> </i>
                      ${button.title}
              </button>
            </tal:loop>
          </div>
        </div>

      </form><!-- /.modal-content -->
    </div>
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

deformdemo/templates/main.pt

@@ -50,6 +50,8 @@
            window.forceDateTimePolyfill = true;
        </script>

        <tal:slot metal:define-slot="head_end"></tal:slot>

    </head>

    <body id="public">
@@ -79,6 +81,8 @@

    </div>


    <tal:slot metal:define-slot="body_end"></tal:slot>
    </body>

    </html>

deformdemo/templates/popup_example.pt

@@ -0,0 +1,65 @@
<!DOCTYPE html>
<div metal:use-macro="view.macros['master']">

  <div metal:fill-slot="head_end">
    <style>
      #opener {
        margin: 20px;
      }
    </style>
  </div>

  <div metal:fill-slot="body_end">
    <!-- We we place our pop up code before closing </body> -->
    <script>
      "use strict";

      $(document).ready(function() {
        // Automatically show pop up if the form contains validation errors
        if($("#my-pop-up .error-msg-detail").length > 0) {
          $("#my-pop-up").modal("show");
        }
      });
    </script>
  </div>

  <div metal:fill-slot="main">

    <div class="panel panel-primary">
      <div class="panel-heading">
        <h3 class="panel-title">Demo: ${title}</h3>
      </div>

      <div id="opener">
        <button type="button" id="btn-show-pop-up" class="btn btn-primary btn-lg btn-block" data-toggle="modal" data-target="#my-pop-up">
          Open pop up form
        </button>
        </div>

      <!-- This will render modal.pt -->
      <form tal:replace="structure form"></form>

    </div>

    <div class="panel panel-info">
      <div class="panel-heading">
        <h3 class="panel-title">Captured submission</h3>
      </div>
      <div class="panel-body">
        <pre style="border: none; background-color: #FFF" class="highlight" id="captured" tal:content="structure captured"/>
      </div>
    </div>

    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title">Code <a href="${request.resource_url(request.root, 'allcode', query={'start':start, 'end':end}, anchor='line-%s' % start)}"><small>
        (click to show in context)</small></a>
        </h3>
      </div>
      <div class="panel-body highlight">
        <pre style="border: none; background-color: #FFF" tal:content="structure code"/>
      </div>
    </div>
  </div>
</div>