Built motion from commit (unavailable).|2.5.26

[motion2.git] / snippet / 3.0.0 / templates / online / index.tpl.html / index.tpl.html

diff --git a/snippet/3.0.0/templates/online/index.tpl.html/index.tpl.html b/snippet/3.0.0/templates/online/index.tpl.html/index.tpl.html
new file mode 100644 (file)
index 0000000..ba5140f
--- /dev/null
+++ b/snippet/3.0.0/templates/online/index.tpl.html/index.tpl.html
@@ -0,0 +1,188 @@
+<!-- CHAT CONTENT -->
+<md-content class="chat-online">
+  <form
+    name="vm.userForm"
+    layout="column"
+    ng-style="{'font-size': '{{settings.fontSize}}px'}"
+    novalidate
+  >
+    <div class="form-input-container">
+      <div ng-repeat="field in ::vm.fields | orderBy:'index'" layout="column">
+        <span>{{field.props.title + (field.config.required ? '*' : '')}}</span>
+
+        <span style="line-height: 14px; color: grey; padding: 5px 0px 5px 0px">
+          <div
+            ng-if="vm.checkHTML[$index]"
+            ng-bind-html="field.props.helpText"
+          ></div>
+          <div
+            ng-if="!vm.checkHTML[$index]"
+            ng-bind-html="field.props.helpText | embed:{linkTarget:'_blank'}"
+          ></div>
+        </span>
+
+        <!-- CHAT ERROR -->
+        <div
+          class="chat-error"
+          ng-repeat="error in vm.errors"
+          layout="row"
+          layout-margin
+        >
+          <i class="mdi mdi-alert mdi-24px mdi-light"></i>
+          <md-tooltip md-direction="top"
+            >{{error.message || 'Service temporarily unavailable.'}}</md-tooltip
+          >
+          <span class="chat-error-message"
+            >{{error.message || 'Service temporarily unavailable.'}}</span
+          >
+        </div>
+        <!-- CHAT ERROR -->
+
+        <md-input-container
+          md-no-float
+          ng-switch="field.type"
+          style="margin: 0px; padding: 0px 0px 10px 0px"
+        >
+          <!-- START label -->
+          <div ng-switch-when="label">
+            <md-content
+              flex
+              layout-padding
+              layout="row"
+              layout-align="center center"
+            >
+              <span>{{field.value}}</span>
+            </md-content>
+          </div>
+          <!-- END label -->
+
+          <!-- START textinput -->
+          <div ng-switch-when="input">
+            <input
+              name="{{field.props.title}}"
+              ng-model="vm.form[field.props.title]"
+              placeholder="{{field.config.placeholder}}"
+              type="{{field.config.type}}"
+              ng-required="field.config.required"
+            />
+          </div>
+          <!-- END textinput -->
+
+          <!-- START textarea -->
+          <div ng-switch-when="textarea">
+            <textarea
+              name="{{field.props.title}}"
+              ng-model="vm.form[field.props.title]"
+              placeholder="{{field.config.placeholder}}"
+              md-maxlength="150"
+              rows="3"
+              ng-required="field.config.required"
+            ></textarea>
+          </div>
+          <!-- END textarea -->
+
+          <!-- START select -->
+          <div ng-switch-when="chooseFromList">
+            <md-select
+              name="{{field.props.title}}"
+              ng-model="vm.form[field.props.title]"
+              placeholder="{{field.config.placeholder}}"
+              ng-required="field.config.required"
+            >
+              <md-option
+                ng-repeat="option in ::field.options"
+                ng-value="option.value"
+                >{{option.value}}</md-option
+              >
+            </md-select>
+          </div>
+          <!-- END select -->
+
+          <!-- START radio -->
+          <div ng-switch-when="multipleChoices">
+            <md-radio-group
+              md-no-ink
+              name="{{field.props.title}}"
+              ng-model="vm.form[field.props.title]"
+              ng-required="field.config.required"
+              layout="{{field.config.direction === 'vertical' ? 'row' : 'column'}}"
+            >
+              <md-radio-button
+                ng-repeat="option in ::field.options"
+                ng-value="option.value"
+                class="md-primary"
+                >{{option.value}}</md-radio-button
+              >
+            </md-radio-group>
+          </div>
+          <!-- END radio -->
+
+          <!-- START checkbox -->
+          <div
+            ng-switch-when="checkboxes"
+            layout="{{field.config.direction === 'vertical' ? 'row' : 'column'}}"
+          >
+            <md-checkbox
+              md-no-ink
+              aria-label="{{field.props.title}}"
+              ng-repeat="option in ::field.options"
+              ng-checked="vm.exists(field.props.title, option.value)"
+              ng-disabled="!vm.exists(field.props.title, option.value) && field.config.maxSelections === vm.form[field.props.title].length"
+              ng-required="vm.getSelected()"
+              ng-click="vm.toggle(field.props.title, option.value)"
+            >
+              {{option.value}}
+            </md-checkbox>
+          </div>
+          <!-- END checkbox -->
+
+          <!-- START agreement -->
+          <div
+            ng-switch-when="agreement"
+            layout="{{field.config.direction === 'vertical' ? 'row' : 'column'}}"
+          >
+            <md-checkbox
+              md-no-ink
+              ng-model="vm.form[field.props.title]"
+              aria-label="{{field.props.title}}"
+              ng-required="field.config.required"
+            >
+              {{field.options[0].value}}
+            </md-checkbox>
+          </div>
+          <!-- END agreement -->
+
+          <div
+            ng-messages="vm.userForm[field.props.title].$error"
+            ng-show="vm.userForm[field.props.title].$touched"
+            role="alert"
+          >
+            <div ng-message="required">
+              <span>Required Field</span>
+            </div>
+            <div ng-message="email">
+              <span>Wrong type field</span>
+            </div>
+          </div>
+        </md-input-container>
+      </div>
+    </div>
+    <md-button
+      title="{{settings.start_chat_button}}"
+      class="md-raised"
+      ng-click="vm.submit()"
+      ng-disabled="vm.userForm.$invalid  || vm.disableItem"
+      ng-style="{'background-color': '{{settings.color_button}}', 'color': '{{settings.textColor}}'}"
+    >
+      {{settings.start_chat_button}}
+    </md-button>
+  </form>
+
+  <md-content layout="row" layout-align="center end" class="white-label">
+    <span
+      ng-bind-html="(settings.custom && !settings.defaultWhiteLabel) ? settings.whiteLabel : 'Powered By XCALLY' | toTrusted"
+      ng-style="{'font-size': '{{settings.fontSize}}px'}"
+    ></span>
+  </md-content>
+</md-content>
+<!-- / CHAT CONTENT -->