From f82c9312ae90898d727e5da58de42008df05db60 Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Tue, 2 Mar 2021 19:41:05 +0100
Subject: custom field placeholder names on image lists

---
 Readme.md                                       |  2 ++
 examples/index.js                               |  7 ++++++-
 themes/okadmin/templates/partials/inputs.liquid | 24 ++++++++++++------------
 3 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/Readme.md b/Readme.md
index 8fa5a0d..b316f83 100644
--- a/Readme.md
+++ b/Readme.md
@@ -71,6 +71,7 @@ Valid datatypes include:
 - media-list
 - captioned-image-list
 - double-captioned-image-list
+- triple-captioned-image-list
 - meta
 
 ### Notes
@@ -78,6 +79,7 @@ Valid datatypes include:
 - ALL records should have a title. this is used to generate the ID.
 - add an `alias` attribute to retitle fields in the admin view
 - foreign keys: list `key` attribute pointing at the other table
+- gallery/image-list can have caption or caption1/caption2/caption3 on the spec
 
 ### Dashboard resources
 
diff --git a/examples/index.js b/examples/index.js
index a2a1a18..3b189ac 100644
--- a/examples/index.js
+++ b/examples/index.js
@@ -73,7 +73,12 @@ var app = okcms
         id: { type: "string", hidden: true },
         title: { type: "string" },
         image: { type: "image" },
-        images: { type: "triple-captioned-image-list" },
+        images: {
+          type: "triple-captioned-image-list",
+          caption1: "Alpha",
+          caption2: "Beta",
+          caption3: "Gamma",
+        },
       },
       filez: {
         id: { type: "string", hidden: true },
diff --git a/themes/okadmin/templates/partials/inputs.liquid b/themes/okadmin/templates/partials/inputs.liquid
index 46d0091..890af08 100644
--- a/themes/okadmin/templates/partials/inputs.liquid
+++ b/themes/okadmin/templates/partials/inputs.liquid
@@ -317,7 +317,7 @@
             <input class="uri" type="hidden" name="{{name}}[][uri]" value="">
             <input type="hidden" name="{{name}}[][width]" class="image-width" hidden>
             <input type="hidden" name="{{name}}[][height]" class="image-height" hidden>
-            <textarea class="caption" name="{{name}}[][caption]"></textarea>
+            <textarea class="caption" name="{{name}}[][caption]" placeholder="{{ spec.caption or "Caption" }}"></textarea>
             <img>
             <button class="remove">x</button>
           </li>
@@ -329,7 +329,7 @@
               <input type="hidden" name="{{name}}[{{forloop.index0}}][uri]" value="{{image.uri}}">
               <input type="hidden" name="{{name}}[{{forloop.index0}}][width]" value="{{image.width}}" class="image-width">
               <input type="hidden" name="{{name}}[{{forloop.index0}}][height]" value="{{image.height}}" class="image-height">
-              <textarea class="caption" name="{{name}}[{{forloop.index0}}][caption]">{{image.caption | escape}}</textarea>
+              <textarea class="caption" name="{{name}}[{{forloop.index0}}][caption]" placeholder="{{ spec.caption or "Caption" }}">{{image.caption | escape}}</textarea>
               <img src="{{image.uri}}" alt="{{image.caption | strip_html}}">
               <button class="remove">x</button>
             </li>
@@ -353,8 +353,8 @@
             <input class="uri" type="hidden" name="{{name}}[][uri]" value="">
             <input type="hidden" name="{{name}}[][width]" class="image-width">
             <input type="hidden" name="{{name}}[][height]" class="image-height">
-            <input class="caption" name="{{name}}[][label]" placeholder="Name">
-            <input class="caption" name="{{name}}[][caption]" placeholder="Email">
+            <input class="caption" name="{{name}}[][label]" placeholder="{{ spec.caption1 or "Label" }}">
+            <input class="caption" name="{{name}}[][caption]" placeholder="{{ spec.caption2 or "Caption" }}">
           </li>
         </script>
 
@@ -366,8 +366,8 @@
               <input type="hidden" name="{{name}}[{{forloop.index0}}][uri]" value="{{image.uri}}">
               <input type="hidden" name="{{name}}[{{forloop.index0}}][width]" value="{{image.width}}" class="image-width">
               <input type="hidden" name="{{name}}[{{forloop.index0}}][height]" value="{{image.height}}" class="image-height">
-              <input class="caption" name="{{name}}[{{forloop.index0}}][label]" value="{{image.label | escape}}" placeholder="Name">
-              <input class="caption" name="{{name}}[{{forloop.index0}}][caption]" value="{{image.caption | escape}}"  placeholder="Email">
+              <input class="caption" name="{{name}}[{{forloop.index0}}][label]" value="{{image.label | escape}}" placeholder="{{ spec.caption1 or "Label" }}">
+              <input class="caption" name="{{name}}[{{forloop.index0}}][caption]" value="{{image.caption | escape}}" placeholder="{{ spec.caption2 or "Caption" }}">
             </li>
           {% endfor %}
         </ol>
@@ -389,9 +389,9 @@
             <input class="uri" type="hidden" name="{{name}}[][uri]" value="">
             <input type="hidden" name="{{name}}[][width]" class="image-width">
             <input type="hidden" name="{{name}}[][height]" class="image-height">
-            <input class="caption" name="{{name}}[][label]" placeholder="Label">
-            <input class="caption" name="{{name}}[][caption]" placeholder="Caption">
-            <input class="caption" name="{{name}}[][code]" placeholder="Code">
+            <input class="caption" name="{{name}}[][label]" placeholder="{{ spec.caption1 or "Label" }}">
+            <input class="caption" name="{{name}}[][caption]" placeholder="{{ spec.caption2 or "Caption" }}">
+            <input class="caption" name="{{name}}[][code]" placeholder="{{ spec.caption3 or "Code" }}">
           </li>
         </script>
 
@@ -403,9 +403,9 @@
               <input type="hidden" name="{{name}}[{{forloop.index0}}][uri]" value="{{image.uri}}">
               <input type="hidden" name="{{name}}[{{forloop.index0}}][width]" value="{{image.width}}" class="image-width">
               <input type="hidden" name="{{name}}[{{forloop.index0}}][height]" value="{{image.height}}" class="image-height">
-              <input class="caption" name="{{name}}[{{forloop.index0}}][label]" value="{{image.label | escape}}" placeholder="Label">
-              <input class="caption" name="{{name}}[{{forloop.index0}}][caption]" value="{{image.caption | escape}}"  placeholder="Caption">
-              <input class="caption" name="{{name}}[{{forloop.index0}}][code]" value="{{image.code | escape}}"  placeholder="Code">
+              <input class="caption" name="{{name}}[{{forloop.index0}}][label]" value="{{image.label | escape}}" placeholder="{{ spec.caption1 or "Label" }}">
+              <input class="caption" name="{{name}}[{{forloop.index0}}][caption]" value="{{image.caption | escape}}" placeholder="{{ spec.caption2 or "Caption" }}">
+              <input class="caption" name="{{name}}[{{forloop.index0}}][code]" value="{{image.code | escape}}" placeholder="{{ spec.caption3 or "Code" }}">
             </li>
           {% endfor %}
         </ol>
-- 
cgit v1.2.3-70-g09d2