Adding UI admin templates for forms in foundation 6
authorSteve Sutton <steve@gaslightmedia.com>
Fri, 14 Jun 2019 19:18:41 +0000 (15:18 -0400)
committerSteve Sutton <steve@gaslightmedia.com>
Fri, 14 Jun 2019 19:18:41 +0000 (15:18 -0400)
These can be used if the admin plugin has foundation 6 setup.

views/admin/ui/deleteDialog.html [new file with mode: 0644]
views/admin/ui/f6-checkbox.html [new file with mode: 0644]
views/admin/ui/f6-editor.html [new file with mode: 0644]
views/admin/ui/f6-image.html [new file with mode: 0644]
views/admin/ui/f6-select.html [new file with mode: 0644]
views/admin/ui/f6-text.html [new file with mode: 0644]

diff --git a/views/admin/ui/deleteDialog.html b/views/admin/ui/deleteDialog.html
new file mode 100644 (file)
index 0000000..e3ea787
--- /dev/null
@@ -0,0 +1,49 @@
+{* Delete Dialog *}
+{* Set these variables to use the Dialog in your project *}
+{* $itemName   = Name of item *}
+{* $deleteUrl  = Url to delete item *}
+<a id="deleteButton" class="button button-secondary glm-button glm-right">Delete this {$itemName}</a>
+
+<div id="deleteDialog" class="glm-dialog-box" title="Delete {$itemName}">
+    <center>
+        <p><a id="deleteCancel" class="button button-primary">Cancel</a></p>
+        <p><input id="deleteSubmit" type="submit" value="Delete this {$itemName}"></p>
+    </center>
+    <div class="glm-item-container">
+        <p><center><span class="glm-error">WARNING:</span></center></p>
+        <p>
+            <span class="glm-warning">Clicking the "Delete this {$itemName}" button above will
+            delete all of the data and images associated with this event.
+            </span>
+        </p>
+        <p>
+            <span class="glm-error">
+                Once deleted, this information will no longer be available and cannot be retrieved!
+                If you are unsure that you want to completely remove this data, consider changing the status
+                of this event to "Archived" instead.
+            </span>
+        </p>
+    </div>
+</div>
+
+<script>
+    jQuery(function($){
+
+        // Delete Event dialog
+        $("#deleteDialog").dialog({
+            autoOpen: false,
+            minWidth: 400,
+            dialogClass: "glm-dialog-no-close"
+        });
+        $('#deleteButton').click( function() {
+            $('#deleteDialog').dialog('open');
+        });
+        $('#deleteCancel').click( function() {
+            $("#deleteDialog").dialog("close");
+        });
+        $('#deleteSubmit').click( function() {
+            window.location.replace('{$deleteUrl}');
+        });
+
+    });
+</script>
diff --git a/views/admin/ui/f6-checkbox.html b/views/admin/ui/f6-checkbox.html
new file mode 100644 (file)
index 0000000..fa79fba
--- /dev/null
@@ -0,0 +1,13 @@
+{* Foundation 6 Checkbox *}
+{* setup $data *}
+{* setup $field *}
+{* setup $fieldLabel *}
+<div class="grid-x grid-margin-x">
+    <div class="cell small-12 medium-3">
+        <label for="{$field}" class="text-right middle{if $data.fieldRequired.$field} glm-required{/if}">{$fieldLabel}</label>
+    </div>
+    <div class="cell small-12 medium-9">
+        <input type="checkbox" id="{$field}" name="{$field}"{if $data.fieldData.$field.value} checked{/if}> Yes
+        {if $data.fieldFail.$field}<span class="form-error is-visible">{$data.fieldFail.$field}</span>{/if}
+    </div>
+</div>
diff --git a/views/admin/ui/f6-editor.html b/views/admin/ui/f6-editor.html
new file mode 100644 (file)
index 0000000..f1a09b6
--- /dev/null
@@ -0,0 +1,28 @@
+{* Foundation 6 Editor *}
+{* setup $data *}
+{* setup $field *}
+{* setup $fieldLabel *}
+<div class="grid-x grid-margin-x">
+    <div class="cell small-12 medium-3">
+        <label for="{$field}" class="text-right middle{if $data.fieldRequired.$field} glm-required{/if}">{$fieldLabel}</label>
+    </div>
+    <div class="cell small-12 medium-9">
+        {if isset($data) && $data.fieldData.$field}
+            {assign var="textAreaContent" value=$data.fieldData.$field}
+        {else}
+            {$textAreaContent = ''}
+        {/if}
+        {wp_editor(
+            $textAreaContent,
+            {$field},
+            json_decode('{
+                "media_buttons": true,
+                "quicktags": false,
+                "textarea_name": {$field},
+                "editor_height": 250
+            }', true)
+        )}
+        <br>
+        {if $data.fieldFail.$field}<span class="form-error is-visible">{$data.fieldFail.$field}</span>{/if}
+    </div>
+</div>
diff --git a/views/admin/ui/f6-image.html b/views/admin/ui/f6-image.html
new file mode 100644 (file)
index 0000000..b7b28fa
--- /dev/null
@@ -0,0 +1,31 @@
+{* Foundation 6 Image *}
+{* setup $data *}
+{* setup $field *}
+{* setup $fieldLabel *}
+<div class="grid-x grid-margin-x">
+    <div class="cell small-12 medium-3">
+        <label for="{$field}" class="text-right middle{if $data.fieldRequired.$field} glm-required{/if}">{$fieldLabel}:</label>
+    </div>
+    <div class="cell small-12 medium-9">
+        <div {if $data.fieldFail.$field}class="glm-form-bad-input" data-tabid="glm-member-info-images"{/if}>
+            {if $data.fieldData.$field}
+                <div class="glm-row">
+                    <div class="glm-small-12 glm-medium-6">
+                        <div class="glm-galleryImage" data-id="{$field}">
+                            <img src="{$glmPluginMediaUrl}/images/small/{$data.fieldData.$field}">
+                        </div>
+                    </div>
+                    <div class="glm-small-11 glm-medium-6 glm-right">
+                        <br>
+                        <input type="checkbox" name="{$field}_delete"> Delete {$fieldLabel}<br>
+                        <span>{$data.fieldData.$field}</span>
+                        <br>
+                    </div>
+                </div>
+            {/if}
+            <div class="glm-center"><b>New {$fieldLabel}</b> <input type="file" name="{$field}_new"></div>
+            <div id="glm-galleryImageLarger_image" class="glm-imageDialog"><img src="{$glmPluginMediaUrl}/images/large/{$data.fieldData.$field}"></div>
+            {if $data.fieldFail.$field}<p>{$data.fieldFail.$field}</p>{/if}
+        </div>
+    </div>
+</div>
diff --git a/views/admin/ui/f6-select.html b/views/admin/ui/f6-select.html
new file mode 100644 (file)
index 0000000..288e233
--- /dev/null
@@ -0,0 +1,18 @@
+{* Foundation 6 Select *}
+{* setup $data *}
+{* setup $field *}
+{* setup $fieldLabel *}
+<div class="grid-x grid-margin-x">
+    <div class="cell small-12 medium-3">
+        <label for="{$field}" class="text-right middle{if $data.fieldRequired.$field} glm-required{/if}">{$fieldLabel}</label>
+    </div>
+    <div class="cell small-12 medium-9">
+        <select id="{$field}" name="{$field}" required>
+            <option value=""></option>
+            {foreach from=$data.fieldData.$field.list item=v}
+                <option value="{$v.value}"{if isset($v.default) && $v.default} selected="selected"{/if}>{$v.name}</option>
+            {/foreach}
+        </select>
+        {if $data.fieldFail.$field}<span class="form-error is-visible">{$data.fieldFail.$field}</span>{/if}
+    </div>
+</div>
diff --git a/views/admin/ui/f6-text.html b/views/admin/ui/f6-text.html
new file mode 100644 (file)
index 0000000..94fe5c9
--- /dev/null
@@ -0,0 +1,13 @@
+{* Foundation 6 Text *}
+{* setup $data *}
+{* setup $field *}
+{* setup $fieldLabel *}
+<div class="grid-x grid-margin-x">
+    <div class="cell small-12 medium-3">
+        <label for="{$field}" class="text-right middle{if $data.fieldRequired.$field} glm-required{/if}">{$fieldLabel}</label>
+    </div>
+    <div class="cell small-12 medium-9">
+        <input type="text" id="{$field}" name="{$field}" value="{$data.fieldData.$field|escape}" {if $data.fieldRequired.$field}required{/if} />
+        {if $data.fieldFail.$field}<span class="form-error is-visible">{$data.fieldFail.$field}</span>{/if}
+    </div>
+</div>