Move Fields Example pages and assets

assets/src/example/index.js

@@ -0,0 +1,39 @@
+import { initExample } from './register-custom-type'
+
+/**
+ * Settings page: Change context on select change
+ */
+window.addEventListener('load', () => {
+
+  const select = document.getElementById('tf-context-select')
+
+  select.addEventListener('change', () => {
+
+    const url = new URL(location.href);
+    const params = new URLSearchParams(url.search)
+
+    params.set('context', select.value)
+
+    location.replace(location.protocol + '//' + location.host + location.pathname + '?' + params.toString())
+  })
+
+  /**
+   * Example for custom field type registration
+   */
+  if( document.getElementById('tf-example-custom-types') ) initExample()
+
+  /**
+   * Specific to dynamic value list page - Handle list selection
+   */
+  const trigger = document.getElementsByClassName('tf-dynamic-value-trigger-js')
+  const content = document.getElementsByClassName('tf-dynamic-value-content-js')
+
+  if( trigger.length === 0 ) return;
+
+  for (let i = 0; i < trigger.length; i++) {
+    trigger[i].addEventListener('click', () => {
+      jQuery('.tf-dynamic-value-content-js').attr('style', 'display: none')
+      content[i].setAttribute('style', '')
+    })
+  }
+})

assets/src/example/index.scss

@@ -0,0 +1,84 @@
+.tangible-field-example-settings {
+
+  pre {
+    background: #22272e;
+  }
+
+ .tangible-plugin-settings-tab { 
+    max-width: 100%; 
+  }
+
+  .tangible-settings-row { 
+    padding: 10px 0px; 
+  }
+
+  .tf-example-container { 
+    display: flex; 
+  }
+
+  .tf-example-field > ul,
+  .tf-dynamic-value-content-js ul { 
+    list-style: circle; 
+    padding: 10px;
+
+    ul {
+      list-style: square; 
+      padding: 5px;
+      padding-left: 40px;
+    }
+  }
+
+  .tf-example-list { 
+    width: 20%; 
+    padding-top: 20px; 
+  }
+
+  .tf-example-field { 
+    width: 80%; 
+  }
+
+  .tf-context-select-container {
+    padding: 20px 0px;
+  }
+
+  .tf-dynamic-value-content-js {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
+
+  .tf-dynamic-value-description {
+    padding-bottom: 10px;
+  }
+
+  .tf-dynamic-value-list {
+    display: flex;
+  }
+
+  .tf-dynamic-value-list-sidebar {
+    width: 33%;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .tf-dynamic-value-list-content {
+    display: flex; 
+    flex-direction: column;
+  }
+
+  .tf-dynamic-value-trigger-js {
+    cursor: pointer;
+  }
+
+  .tangible-settings-code-preview {
+    display: flex;
+    gap: 20px;
+    flex-wrap: nowrap;
+
+    & > pre {
+      flex: 1;
+    }
+  }
+}
+
+

assets/src/example/register-custom-type.jsx

@@ -0,0 +1,66 @@
+import {
+  useState,
+  useEffect,
+  createRoot
+} from 'react'
+
+const initExample = () => {
+
+  const container = document.getElementById('tf-example-custom-types')
+  const value = container.getAttribute('data-value')
+
+  const MyCustomField = props => {
+
+    const { initJSON } = tangibleFields.utils
+    const [value, setValue] = useState( initJSON(props.value ?? {}) )
+
+    useEffect(() => {
+      if( props.onChange ) props.onChange(value)
+    }, [value])
+
+    return(
+      <div className="tf-custom-type" style={{ display: 'flex' }}>
+        <input type="hidden" name={ props.name ?? '' } value={ JSON.stringify(value) } />
+        <div>
+          <strong>Character attributes:</strong>
+          <hr /> 
+          { tangibleFields.render({
+            label     : 'First name',
+            type      :'text',
+            value     : value.firstName ?? '',
+            onChange  : firstName => setValue({ ...value, firstName: firstName }),
+          }) }
+          { tangibleFields.render({
+            label     : 'Last name',
+            type      :'text',
+            value     : value.lastName,
+            onChange  : lastName => setValue({ ...value, lastName: lastName }),
+          }) }
+          <hr />
+          { tangibleFields.render({
+            label     : 'Avatar',
+            type      : 'file',
+            maxUpload : 1,
+            wp_media  : false,
+            value     : value.avatar ?? '',
+            onChange  : avatar => setValue({ ...value, avatar: avatar }),
+            mimeTypes : [ 'image' ]
+          }) }
+        </div>
+      </div>
+    )
+  }
+
+  tangibleFields.types.add('custom-type', MyCustomField)
+
+  createRoot(container)
+    .render(
+      tangibleFields.render({
+      'type'  :'custom-type',
+      'name'  :'custom-field-example',
+      'value' : value
+      }
+    ))
+}
+
+export { initExample }

assets/vendor/github-dark-dimmed.css

@@ -0,0 +1,117 @@
+pre code.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 1em
+}
+code.hljs {
+  padding: 3px 5px
+}
+/*!
+  Theme: GitHub Dark Dimmed
+  Description: Dark dimmed theme as seen on github.com
+  Author: github.com
+  Maintainer: @Hirse
+  Updated: 2021-05-15
+
+  Colors taken from GitHub's CSS
+*/
+.hljs {
+  color: #adbac7;
+  background: #22272e
+}
+.hljs-doctag,
+.hljs-keyword,
+.hljs-meta .hljs-keyword,
+.hljs-template-tag,
+.hljs-template-variable,
+.hljs-type,
+.hljs-variable.language_ {
+  /* prettylights-syntax-keyword */
+  color: #f47067
+}
+.hljs-title,
+.hljs-title.class_,
+.hljs-title.class_.inherited__,
+.hljs-title.function_ {
+  /* prettylights-syntax-entity */
+  color: #dcbdfb
+}
+.hljs-attr,
+.hljs-attribute,
+.hljs-literal,
+.hljs-meta,
+.hljs-number,
+.hljs-operator,
+.hljs-variable,
+.hljs-selector-attr,
+.hljs-selector-class,
+.hljs-selector-id {
+  /* prettylights-syntax-constant */
+  color: #6cb6ff
+}
+.hljs-regexp,
+.hljs-string,
+.hljs-meta .hljs-string {
+  /* prettylights-syntax-string */
+  color: #96d0ff
+}
+.hljs-built_in,
+.hljs-symbol {
+  /* prettylights-syntax-variable */
+  color: #f69d50
+}
+.hljs-comment,
+.hljs-code,
+.hljs-formula {
+  /* prettylights-syntax-comment */
+  color: #768390
+}
+.hljs-name,
+.hljs-quote,
+.hljs-selector-tag,
+.hljs-selector-pseudo {
+  /* prettylights-syntax-entity-tag */
+  color: #8ddb8c
+}
+.hljs-subst {
+  /* prettylights-syntax-storage-modifier-import */
+  color: #adbac7
+}
+.hljs-section {
+  /* prettylights-syntax-markup-heading */
+  color: #316dca;
+  font-weight: bold
+}
+.hljs-bullet {
+  /* prettylights-syntax-markup-list */
+  color: #eac55f
+}
+.hljs-emphasis {
+  /* prettylights-syntax-markup-italic */
+  color: #adbac7;
+  font-style: italic
+}
+.hljs-strong {
+  /* prettylights-syntax-markup-bold */
+  color: #adbac7;
+  font-weight: bold
+}
+.hljs-addition {
+  /* prettylights-syntax-markup-inserted */
+  color: #b4f1b4;
+  background-color: #1b4721
+}
+.hljs-deletion {
+  /* prettylights-syntax-markup-deleted */
+  color: #ffd8d3;
+  background-color: #78191b
+}
+.hljs-char.escape_,
+.hljs-link,
+.hljs-params,
+.hljs-property,
+.hljs-punctuation,
+.hljs-tag {
+  /* purposely ignored */
+
+}