diff options
Diffstat (limited to 'docs/build/Form-Fields')
| -rw-r--r-- | docs/build/Form-Fields/HTML-Inputs/index.html | 2083 |
1 files changed, 2083 insertions, 0 deletions
diff --git a/docs/build/Form-Fields/HTML-Inputs/index.html b/docs/build/Form-Fields/HTML-Inputs/index.html new file mode 100644 index 0000000..ed74b06 --- /dev/null +++ b/docs/build/Form-Fields/HTML-Inputs/index.html @@ -0,0 +1,2083 @@ + +<!DOCTYPE html> +<html lang="en" class="no-js"> + <head> + + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width,initial-scale=1"> + + + + + <link rel="shortcut icon" href="../../assets/images/favicon.png"> + + <meta name="generator" content="mkdocs-0.16.3, mkdocs-material-1.6.1"> + + + + <title>HTML Input Elements for Ponzu Editor Forms</title> + + + + <script src="../../assets/javascripts/modernizr-56ade86843.js"></script> + + + <link rel="stylesheet" href="../../assets/stylesheets/application-4d0d3f2fbf.css"> + + <link rel="stylesheet" href="../../assets/stylesheets/application-f78e5cb881.palette.css"> + + + + + + + + <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,700|Roboto+Mono"> + <style>body,input{font-family:"Roboto","Helvetica Neue",Helvetica,Arial,sans-serif}code,kbd,pre{font-family:"Roboto Mono","Courier New",Courier,monospace}</style> + + <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> + + + + </head> + + + + + <body data-md-color-primary="grey" data-md-color-accent="light-blue"> + + <svg class="md-svg"> + <defs> + + + <svg xmlns="http://www.w3.org/2000/svg" width="416" height="448" viewBox="0 0 416 448" id="github"><path fill="currentColor" d="M160 304q0 10-3.125 20.5t-10.75 19T128 352t-18.125-8.5-10.75-19T96 304t3.125-20.5 10.75-19T128 256t18.125 8.5 10.75 19T160 304zm160 0q0 10-3.125 20.5t-10.75 19T288 352t-18.125-8.5-10.75-19T256 304t3.125-20.5 10.75-19T288 256t18.125 8.5 10.75 19T320 304zm40 0q0-30-17.25-51T296 232q-10.25 0-48.75 5.25Q229.5 240 208 240t-39.25-2.75Q130.75 232 120 232q-29.5 0-46.75 21T56 304q0 22 8 38.375t20.25 25.75 30.5 15 35 7.375 37.25 1.75h42q20.5 0 37.25-1.75t35-7.375 30.5-15 20.25-25.75T360 304zm56-44q0 51.75-15.25 82.75-9.5 19.25-26.375 33.25t-35.25 21.5-42.5 11.875-42.875 5.5T212 416q-19.5 0-35.5-.75t-36.875-3.125-38.125-7.5-34.25-12.875T37 371.5t-21.5-28.75Q0 312 0 260q0-59.25 34-99-6.75-20.5-6.75-42.5 0-29 12.75-54.5 27 0 47.5 9.875t47.25 30.875Q171.5 96 212 96q37 0 70 8 26.25-20.5 46.75-30.25T376 64q12.75 25.5 12.75 54.5 0 21.75-6.75 42 34 40 34 99.5z"/></svg> + + </defs> + </svg> + <input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="drawer"> + <input class="md-toggle" data-md-toggle="search" type="checkbox" id="search"> + <label class="md-overlay" data-md-component="overlay" for="drawer"></label> + + <header class="md-header" data-md-component="header"> + <nav class="md-header-nav md-grid"> + <div class="md-flex"> + <div class="md-flex__cell md-flex__cell--shrink"> + + <a href="../.." title="Ponzu" class="md-logo md-header-nav__button"> + <img src="../../images/logo.png" width="24" height="24"> + </a> + + </div> + <div class="md-flex__cell md-flex__cell--shrink"> + <label class="md-icon md-icon--menu md-header-nav__button" for="drawer"></label> + </div> + <div class="md-flex__cell md-flex__cell--stretch"> + <span class="md-flex__ellipsis md-header-nav__title"> + + + + <span class="md-header-nav__parent"> + Form Fields + </span> + + + HTML Inputs + + </span> + </div> + <div class="md-flex__cell md-flex__cell--shrink"> + + <label class="md-icon md-icon--search md-header-nav__button" for="search"></label> + +<div class="md-search" data-md-component="search"> + <label class="md-search__overlay" for="search"></label> + <div class="md-search__inner"> + <form class="md-search__form" name="search"> + <input type="text" class="md-search__input" name="query" required placeholder="Search" accesskey="s" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="query"> + <label class="md-icon md-search__icon" for="search"></label> + <button type="reset" class="md-icon md-search__icon" data-md-component="reset">close</button> + </form> + <div class="md-search__output"> + <div class="md-search__scrollwrap" data-md-scrollfix> + <div class="md-search-result" data-md-component="result"> + <div class="md-search-result__meta" data-md-lang-result-none="No matching documents" data-md-lang-result-one="1 matching document" data-md-lang-result-other="# matching documents"> + Type to start searching + </div> + <ol class="md-search-result__list"></ol> + </div> + </div> + </div> + </div> +</div> + + </div> + <div class="md-flex__cell md-flex__cell--shrink"> + <div class="md-header-nav__source"> + + + + + + + + <a href="https://github.com/ponzu-cms/ponzu" title="Go to repository" class="md-source" data-md-source="github"> + + <div class="md-source__icon"> + <svg viewBox="0 0 24 24" width="24" height="24"> + <use xlink:href="#github" width="24" height="24"></use> + </svg> + </div> + + <div class="md-source__repository"> + ponzu-cms/ponzu + </div> + </a> + + + </div> + </div> + </div> + </nav> +</header> + + <div class="md-container"> + + + <main class="md-main"> + <div class="md-main__inner md-grid" data-md-component="container"> + + + <div class="md-sidebar md-sidebar--primary" data-md-component="navigation"> + <div class="md-sidebar__scrollwrap"> + <div class="md-sidebar__inner"> + <nav class="md-nav md-nav--primary" data-md-level="0"> + <label class="md-nav__title md-nav__title--site" for="drawer"> + + <i class="md-logo md-nav__button"> + <img src="../../images/logo.png"> + </i> + + Ponzu + </label> + + <div class="md-nav__source"> + + + + + + + <a href="https://github.com/ponzu-cms/ponzu" title="Go to repository" class="md-source" data-md-source="github"> + + <div class="md-source__icon"> + <svg viewBox="0 0 24 24" width="24" height="24"> + <use xlink:href="#github" width="24" height="24"></use> + </svg> + </div> + + <div class="md-source__repository"> + ponzu-cms/ponzu + </div> + </a> + + </div> + + <ul class="md-nav__list" data-md-scrollfix> + + + + + + + <li class="md-nav__item"> + <a href="../.." title="Home" class="md-nav__link"> + Home + </a> + </li> + + + + + + + + <li class="md-nav__item md-nav__item--nested"> + + <input class="md-toggle md-nav__toggle" data-md-toggle="nav-2" type="checkbox" id="nav-2"> + + <label class="md-nav__link" for="nav-2"> + CLI + </label> + <nav class="md-nav" data-md-component="collapsible" data-md-level="1"> + <label class="md-nav__title" for="nav-2"> + CLI + </label> + <ul class="md-nav__list" data-md-scrollfix> + + + + + + + + <li class="md-nav__item"> + <a href="../../CLI/General-Usage/" title="General Usage" class="md-nav__link"> + General Usage + </a> + </li> + + + + + + + + <li class="md-nav__item"> + <a href="../../CLI/Generating-References/" title="Generating References" class="md-nav__link"> + Generating References + </a> + </li> + + + </ul> + </nav> + </li> + + + + + + + + <li class="md-nav__item md-nav__item--nested"> + + <input class="md-toggle md-nav__toggle" data-md-toggle="nav-3" type="checkbox" id="nav-3"> + + <label class="md-nav__link" for="nav-3"> + Content + </label> + <nav class="md-nav" data-md-component="collapsible" data-md-level="1"> + <label class="md-nav__title" for="nav-3"> + Content + </label> + <ul class="md-nav__list" data-md-scrollfix> + + + + + + + + <li class="md-nav__item"> + <a href="../../Content/An-Overview/" title="An Overview" class="md-nav__link"> + An Overview + </a> + </li> + + + + + + + + <li class="md-nav__item"> + <a href="../../Content/Extending-Content/" title="Extending Content" class="md-nav__link"> + Extending Content + </a> + </li> + + + </ul> + </nav> + </li> + + + + + + + + + + <li class="md-nav__item md-nav__item--active md-nav__item--nested"> + + <input class="md-toggle md-nav__toggle" data-md-toggle="nav-4" type="checkbox" id="nav-4" checked> + + <label class="md-nav__link" for="nav-4"> + Form Fields + </label> + <nav class="md-nav" data-md-component="collapsible" data-md-level="1"> + <label class="md-nav__title" for="nav-4"> + Form Fields + </label> + <ul class="md-nav__list" data-md-scrollfix> + + + + + + + + + + <li class="md-nav__item md-nav__item--active"> + + <input class="md-toggle md-nav__toggle" data-md-toggle="toc" type="checkbox" id="toc"> + + + <label class="md-nav__link md-nav__link--active" for="toc"> + HTML Inputs + </label> + + <a href="./" title="HTML Inputs" class="md-nav__link md-nav__link--active"> + HTML Inputs + </a> + + +<nav class="md-nav md-nav--secondary"> + + + + <label class="md-nav__title" for="toc">Table of contents</label> + <ul class="md-nav__list" data-md-scrollfix> + + <li class="md-nav__item"> + <a href="#field-input-functions" title="Field Input Functions" class="md-nav__link"> + Field Input Functions + </a> + + <nav class="md-nav"> + <ul class="md-nav__list"> + + <li class="md-nav__item"> + <a href="#editorinput" title="editor.Input" class="md-nav__link"> + editor.Input + </a> + + <nav class="md-nav"> + <ul class="md-nav__list"> + + <li class="md-nav__item"> + <a href="#screenshot" title="Screenshot" class="md-nav__link"> + Screenshot + </a> + +</li> + + <li class="md-nav__item"> + <a href="#function-signature" title="Function Signature" class="md-nav__link"> + Function Signature + </a> + +</li> + + <li class="md-nav__item"> + <a href="#example" title="Example" class="md-nav__link"> + Example + </a> + +</li> + + </ul> + </nav> + +</li> + + <li class="md-nav__item"> + <a href="#editorinputrepeater" title="editor.InputRepeater" class="md-nav__link"> + editor.InputRepeater + </a> + + <nav class="md-nav"> + <ul class="md-nav__list"> + + <li class="md-nav__item"> + <a href="#screenshot_1" title="Screenshot" class="md-nav__link"> + Screenshot + </a> + +</li> + + <li class="md-nav__item"> + <a href="#function-signature_1" title="Function Signature" class="md-nav__link"> + Function Signature + </a> + +</li> + + <li class="md-nav__item"> + <a href="#example_1" title="Example" class="md-nav__link"> + Example + </a> + +</li> + + </ul> + </nav> + +</li> + + <li class="md-nav__item"> + <a href="#editorcheckbox" title="editor.Checkbox" class="md-nav__link"> + editor.Checkbox + </a> + + <nav class="md-nav"> + <ul class="md-nav__list"> + + <li class="md-nav__item"> + <a href="#screenshot_2" title="Screenshot" class="md-nav__link"> + Screenshot + </a> + +</li> + + <li class="md-nav__item"> + <a href="#function-signature_2" title="Function Signature" class="md-nav__link"> + Function Signature + </a> + +</li> + + <li class="md-nav__item"> + <a href="#example_2" title="Example" class="md-nav__link"> + Example + </a> + +</li> + + </ul> + </nav> + +</li> + + <li class="md-nav__item"> + <a href="#editorrichtext" title="editor.Richtext" class="md-nav__link"> + editor.Richtext + </a> + + <nav class="md-nav"> + <ul class="md-nav__list"> + + <li class="md-nav__item"> + <a href="#screenshot_3" title="Screenshot" class="md-nav__link"> + Screenshot + </a> + +</li> + + <li class="md-nav__item"> + <a href="#function-signature_3" title="Function Signature" class="md-nav__link"> + Function Signature + </a> + +</li> + + <li class="md-nav__item"> + <a href="#example_3" title="Example" class="md-nav__link"> + Example + </a> + +</li> + + </ul> + </nav> + +</li> + + <li class="md-nav__item"> + <a href="#editortags" title="editor.Tags" class="md-nav__link"> + editor.Tags + </a> + + <nav class="md-nav"> + <ul class="md-nav__list"> + + <li class="md-nav__item"> + <a href="#screenshot_4" title="Screenshot" class="md-nav__link"> + Screenshot + </a> + +</li> + + <li class="md-nav__item"> + <a href="#function-signature_4" title="Function Signature" class="md-nav__link"> + Function Signature + </a> + +</li> + + <li class="md-nav__item"> + <a href="#example_4" title="Example" class="md-nav__link"> + Example + </a> + +</li> + + </ul> + </nav> + +</li> + + <li class="md-nav__item"> + <a href="#editorfile" title="editor.File" class="md-nav__link"> + editor.File + </a> + + <nav class="md-nav"> + <ul class="md-nav__list"> + + <li class="md-nav__item"> + <a href="#screenshot_5" title="Screenshot" class="md-nav__link"> + Screenshot + </a> + +</li> + + <li class="md-nav__item"> + <a href="#function-signature_5" title="Function Signature" class="md-nav__link"> + Function Signature + </a> + +</li> + + <li class="md-nav__item"> + <a href="#example_5" title="Example" class="md-nav__link"> + Example + </a> + +</li> + + </ul> + </nav> + +</li> + + <li class="md-nav__item"> + <a href="#editorfilerepeater" title="editor.FileRepeater" class="md-nav__link"> + editor.FileRepeater + </a> + + <nav class="md-nav"> + <ul class="md-nav__list"> + + <li class="md-nav__item"> + <a href="#screenshot_6" title="Screenshot" class="md-nav__link"> + Screenshot + </a> + +</li> + + <li class="md-nav__item"> + <a href="#function-signature_6" title="Function Signature" class="md-nav__link"> + Function Signature + </a> + +</li> + + <li class="md-nav__item"> + <a href="#example_6" title="Example" class="md-nav__link"> + Example + </a> + +</li> + + </ul> + </nav> + +</li> + + <li class="md-nav__item"> + <a href="#editorselect" title="editor.Select" class="md-nav__link"> + editor.Select + </a> + + <nav class="md-nav"> + <ul class="md-nav__list"> + + <li class="md-nav__item"> + <a href="#screenshot_7" title="Screenshot" class="md-nav__link"> + Screenshot + </a> + +</li> + + <li class="md-nav__item"> + <a href="#function-signature_7" title="Function Signature" class="md-nav__link"> + Function Signature + </a> + +</li> + + <li class="md-nav__item"> + <a href="#example_7" title="Example" class="md-nav__link"> + Example + </a> + +</li> + + </ul> + </nav> + +</li> + + <li class="md-nav__item"> + <a href="#editorselectrepeater" title="editor.SelectRepeater" class="md-nav__link"> + editor.SelectRepeater + </a> + + <nav class="md-nav"> + <ul class="md-nav__list"> + + <li class="md-nav__item"> + <a href="#screenshot_8" title="Screenshot" class="md-nav__link"> + Screenshot + </a> + +</li> + + <li class="md-nav__item"> + <a href="#function-signature_8" title="Function Signature" class="md-nav__link"> + Function Signature + </a> + +</li> + + <li class="md-nav__item"> + <a href="#example_8" title="Example" class="md-nav__link"> + Example + </a> + +</li> + + </ul> + </nav> + +</li> + + <li class="md-nav__item"> + <a href="#editortextarea" title="editor.Textarea" class="md-nav__link"> + editor.Textarea + </a> + + <nav class="md-nav"> + <ul class="md-nav__list"> + + <li class="md-nav__item"> + <a href="#screenshot_9" title="Screenshot" class="md-nav__link"> + Screenshot + </a> + +</li> + + <li class="md-nav__item"> + <a href="#function-signature_9" title="Function Signature" class="md-nav__link"> + Function Signature + </a> + +</li> + + <li class="md-nav__item"> + <a href="#example_9" title="Example" class="md-nav__link"> + Example + </a> + +</li> + + </ul> + </nav> + +</li> + + </ul> + </nav> + +</li> + + <li class="md-nav__item"> + <a href="#data-references" title="Data References" class="md-nav__link"> + Data References + </a> + + <nav class="md-nav"> + <ul class="md-nav__list"> + + <li class="md-nav__item"> + <a href="#referenceselect" title="reference.Select" class="md-nav__link"> + reference.Select + </a> + + <nav class="md-nav"> + <ul class="md-nav__list"> + + <li class="md-nav__item"> + <a href="#screenshot_10" title="Screenshot" class="md-nav__link"> + Screenshot + </a> + +</li> + + <li class="md-nav__item"> + <a href="#function-signature_10" title="Function Signature" class="md-nav__link"> + Function Signature + </a> + +</li> + + <li class="md-nav__item"> + <a href="#example_10" title="Example" class="md-nav__link"> + Example + </a> + +</li> + + </ul> + </nav> + +</li> + + <li class="md-nav__item"> + <a href="#referenceselectrepeater" title="reference.SelectRepeater" class="md-nav__link"> + reference.SelectRepeater + </a> + + <nav class="md-nav"> + <ul class="md-nav__list"> + + <li class="md-nav__item"> + <a href="#screenshot_11" title="Screenshot" class="md-nav__link"> + Screenshot + </a> + +</li> + + <li class="md-nav__item"> + <a href="#function-signature_11" title="Function Signature" class="md-nav__link"> + Function Signature + </a> + +</li> + + <li class="md-nav__item"> + <a href="#example_11" title="Example" class="md-nav__link"> + Example + </a> + +</li> + + </ul> + </nav> + +</li> + + </ul> + </nav> + +</li> + + + + </ul> + +</nav> + + </li> + + + </ul> + </nav> + </li> + + + + + + + + <li class="md-nav__item md-nav__item--nested"> + + <input class="md-toggle md-nav__toggle" data-md-toggle="nav-5" type="checkbox" id="nav-5"> + + <label class="md-nav__link" for="nav-5"> + HTTP APIs + </label> + <nav class="md-nav" data-md-component="collapsible" data-md-level="1"> + <label class="md-nav__title" for="nav-5"> + HTTP APIs + </label> + <ul class="md-nav__list" data-md-scrollfix> + + + + + + + + <li class="md-nav__item"> + <a href="../../HTTP-APIs/Content/" title="Content" class="md-nav__link"> + Content + </a> + </li> + + + + + + + + <li class="md-nav__item"> + <a href="../../HTTP-APIs/File-Metadata/" title="File Metadata" class="md-nav__link"> + File Metadata + </a> + </li> + + + + + + + + <li class="md-nav__item"> + <a href="../../HTTP-APIs/Search/" title="Search" class="md-nav__link"> + Search + </a> + </li> + + + </ul> + </nav> + </li> + + + + + + + + <li class="md-nav__item md-nav__item--nested"> + + <input class="md-toggle md-nav__toggle" data-md-toggle="nav-6" type="checkbox" id="nav-6"> + + <label class="md-nav__link" for="nav-6"> + Interfaces + </label> + <nav class="md-nav" data-md-component="collapsible" data-md-level="1"> + <label class="md-nav__title" for="nav-6"> + Interfaces + </label> + <ul class="md-nav__list" data-md-scrollfix> + + + + + + + + <li class="md-nav__item"> + <a href="../../Interfaces/API/" title="API" class="md-nav__link"> + API + </a> + </li> + + + + + + + + <li class="md-nav__item"> + <a href="../../Interfaces/Editor/" title="Editor" class="md-nav__link"> + Editor + </a> + </li> + + + + + + + + <li class="md-nav__item"> + <a href="../../Interfaces/Format/" title="Format" class="md-nav__link"> + Format + </a> + </li> + + + + + + + + <li class="md-nav__item"> + <a href="../../Interfaces/Item/" title="Item" class="md-nav__link"> + Item + </a> + </li> + + + + + + + + <li class="md-nav__item"> + <a href="../../Interfaces/Search/" title="Search" class="md-nav__link"> + Search + </a> + </li> + + + </ul> + </nav> + </li> + + + + + + + + <li class="md-nav__item md-nav__item--nested"> + + <input class="md-toggle md-nav__toggle" data-md-toggle="nav-7" type="checkbox" id="nav-7"> + + <label class="md-nav__link" for="nav-7"> + Ponzu Addons + </label> + <nav class="md-nav" data-md-component="collapsible" data-md-level="1"> + <label class="md-nav__title" for="nav-7"> + Ponzu Addons + </label> + <ul class="md-nav__list" data-md-scrollfix> + + + + + + + + <li class="md-nav__item"> + <a href="../../Ponzu-Addons/Creating-Addons/" title="Creating Addons" class="md-nav__link"> + Creating Addons + </a> + </li> + + + + + + + + <li class="md-nav__item"> + <a href="../../Ponzu-Addons/Using-Addons/" title="Using Addons" class="md-nav__link"> + Using Addons + </a> + </li> + + + </ul> + </nav> + </li> + + + + + + + + <li class="md-nav__item md-nav__item--nested"> + + <input class="md-toggle md-nav__toggle" data-md-toggle="nav-8" type="checkbox" id="nav-8"> + + <label class="md-nav__link" for="nav-8"> + Quickstart + </label> + <nav class="md-nav" data-md-component="collapsible" data-md-level="1"> + <label class="md-nav__title" for="nav-8"> + Quickstart + </label> + <ul class="md-nav__list" data-md-scrollfix> + + + + + + + + <li class="md-nav__item"> + <a href="../../Quickstart/Overview/" title="Overview" class="md-nav__link"> + Overview + </a> + </li> + + + </ul> + </nav> + </li> + + + + + + + + <li class="md-nav__item md-nav__item--nested"> + + <input class="md-toggle md-nav__toggle" data-md-toggle="nav-9" type="checkbox" id="nav-9"> + + <label class="md-nav__link" for="nav-9"> + References + </label> + <nav class="md-nav" data-md-component="collapsible" data-md-level="1"> + <label class="md-nav__title" for="nav-9"> + References + </label> + <ul class="md-nav__list" data-md-scrollfix> + + + + + + + + <li class="md-nav__item"> + <a href="../../References/Overview/" title="Overview" class="md-nav__link"> + Overview + </a> + </li> + + + </ul> + </nav> + </li> + + + + + + + + <li class="md-nav__item md-nav__item--nested"> + + <input class="md-toggle md-nav__toggle" data-md-toggle="nav-10" type="checkbox" id="nav-10"> + + <label class="md-nav__link" for="nav-10"> + Running Backups + </label> + <nav class="md-nav" data-md-component="collapsible" data-md-level="1"> + <label class="md-nav__title" for="nav-10"> + Running Backups + </label> + <ul class="md-nav__list" data-md-scrollfix> + + + + + + + + <li class="md-nav__item"> + <a href="../../Running-Backups/Backups/" title="Backups" class="md-nav__link"> + Backups + </a> + </li> + + + </ul> + </nav> + </li> + + + + + + + + <li class="md-nav__item md-nav__item--nested"> + + <input class="md-toggle md-nav__toggle" data-md-toggle="nav-11" type="checkbox" id="nav-11"> + + <label class="md-nav__link" for="nav-11"> + System Configuration + </label> + <nav class="md-nav" data-md-component="collapsible" data-md-level="1"> + <label class="md-nav__title" for="nav-11"> + System Configuration + </label> + <ul class="md-nav__list" data-md-scrollfix> + + + + + + + + <li class="md-nav__item"> + <a href="../../System-Configuration/Settings/" title="Settings" class="md-nav__link"> + Settings + </a> + </li> + + + </ul> + </nav> + </li> + + + + + + + + <li class="md-nav__item md-nav__item--nested"> + + <input class="md-toggle md-nav__toggle" data-md-toggle="nav-12" type="checkbox" id="nav-12"> + + <label class="md-nav__link" for="nav-12"> + System Deployment + </label> + <nav class="md-nav" data-md-component="collapsible" data-md-level="1"> + <label class="md-nav__title" for="nav-12"> + System Deployment + </label> + <ul class="md-nav__list" data-md-scrollfix> + + + + + + + + <li class="md-nav__item"> + <a href="../../System-Deployment/Docker/" title="Docker" class="md-nav__link"> + Docker + </a> + </li> + + + + + + + + <li class="md-nav__item"> + <a href="../../System-Deployment/SysV-Style/" title="SysV Style" class="md-nav__link"> + SysV Style + </a> + </li> + + + </ul> + </nav> + </li> + + + </ul> +</nav> + </div> + </div> + </div> + + + <div class="md-sidebar md-sidebar--secondary" data-md-component="toc"> + <div class="md-sidebar__scrollwrap"> + <div class="md-sidebar__inner"> + +<nav class="md-nav md-nav--secondary"> + + + + <label class="md-nav__title" for="toc">Table of contents</label> + <ul class="md-nav__list" data-md-scrollfix> + + <li class="md-nav__item"> + <a href="#field-input-functions" title="Field Input Functions" class="md-nav__link"> + Field Input Functions + </a> + + <nav class="md-nav"> + <ul class="md-nav__list"> + + <li class="md-nav__item"> + <a href="#editorinput" title="editor.Input" class="md-nav__link"> + editor.Input + </a> + + <nav class="md-nav"> + <ul class="md-nav__list"> + + <li class="md-nav__item"> + <a href="#screenshot" title="Screenshot" class="md-nav__link"> + Screenshot + </a> + +</li> + + <li class="md-nav__item"> + <a href="#function-signature" title="Function Signature" class="md-nav__link"> + Function Signature + </a> + +</li> + + <li class="md-nav__item"> + <a href="#example" title="Example" class="md-nav__link"> + Example + </a> + +</li> + + </ul> + </nav> + +</li> + + <li class="md-nav__item"> + <a href="#editorinputrepeater" title="editor.InputRepeater" class="md-nav__link"> + editor.InputRepeater + </a> + + <nav class="md-nav"> + <ul class="md-nav__list"> + + <li class="md-nav__item"> + <a href="#screenshot_1" title="Screenshot" class="md-nav__link"> + Screenshot + </a> + +</li> + + <li class="md-nav__item"> + <a href="#function-signature_1" title="Function Signature" class="md-nav__link"> + Function Signature + </a> + +</li> + + <li class="md-nav__item"> + <a href="#example_1" title="Example" class="md-nav__link"> + Example + </a> + +</li> + + </ul> + </nav> + +</li> + + <li class="md-nav__item"> + <a href="#editorcheckbox" title="editor.Checkbox" class="md-nav__link"> + editor.Checkbox + </a> + + <nav class="md-nav"> + <ul class="md-nav__list"> + + <li class="md-nav__item"> + <a href="#screenshot_2" title="Screenshot" class="md-nav__link"> + Screenshot + </a> + +</li> + + <li class="md-nav__item"> + <a href="#function-signature_2" title="Function Signature" class="md-nav__link"> + Function Signature + </a> + +</li> + + <li class="md-nav__item"> + <a href="#example_2" title="Example" class="md-nav__link"> + Example + </a> + +</li> + + </ul> + </nav> + +</li> + + <li class="md-nav__item"> + <a href="#editorrichtext" title="editor.Richtext" class="md-nav__link"> + editor.Richtext + </a> + + <nav class="md-nav"> + <ul class="md-nav__list"> + + <li class="md-nav__item"> + <a href="#screenshot_3" title="Screenshot" class="md-nav__link"> + Screenshot + </a> + +</li> + + <li class="md-nav__item"> + <a href="#function-signature_3" title="Function Signature" class="md-nav__link"> + Function Signature + </a> + +</li> + + <li class="md-nav__item"> + <a href="#example_3" title="Example" class="md-nav__link"> + Example + </a> + +</li> + + </ul> + </nav> + +</li> + + <li class="md-nav__item"> + <a href="#editortags" title="editor.Tags" class="md-nav__link"> + editor.Tags + </a> + + <nav class="md-nav"> + <ul class="md-nav__list"> + + <li class="md-nav__item"> + <a href="#screenshot_4" title="Screenshot" class="md-nav__link"> + Screenshot + </a> + +</li> + + <li class="md-nav__item"> + <a href="#function-signature_4" title="Function Signature" class="md-nav__link"> + Function Signature + </a> + +</li> + + <li class="md-nav__item"> + <a href="#example_4" title="Example" class="md-nav__link"> + Example + </a> + +</li> + + </ul> + </nav> + +</li> + + <li class="md-nav__item"> + <a href="#editorfile" title="editor.File" class="md-nav__link"> + editor.File + </a> + + <nav class="md-nav"> + <ul class="md-nav__list"> + + <li class="md-nav__item"> + <a href="#screenshot_5" title="Screenshot" class="md-nav__link"> + Screenshot + </a> + +</li> + + <li class="md-nav__item"> + <a href="#function-signature_5" title="Function Signature" class="md-nav__link"> + Function Signature + </a> + +</li> + + <li class="md-nav__item"> + <a href="#example_5" title="Example" class="md-nav__link"> + Example + </a> + +</li> + + </ul> + </nav> + +</li> + + <li class="md-nav__item"> + <a href="#editorfilerepeater" title="editor.FileRepeater" class="md-nav__link"> + editor.FileRepeater + </a> + + <nav class="md-nav"> + <ul class="md-nav__list"> + + <li class="md-nav__item"> + <a href="#screenshot_6" title="Screenshot" class="md-nav__link"> + Screenshot + </a> + +</li> + + <li class="md-nav__item"> + <a href="#function-signature_6" title="Function Signature" class="md-nav__link"> + Function Signature + </a> + +</li> + + <li class="md-nav__item"> + <a href="#example_6" title="Example" class="md-nav__link"> + Example + </a> + +</li> + + </ul> + </nav> + +</li> + + <li class="md-nav__item"> + <a href="#editorselect" title="editor.Select" class="md-nav__link"> + editor.Select + </a> + + <nav class="md-nav"> + <ul class="md-nav__list"> + + <li class="md-nav__item"> + <a href="#screenshot_7" title="Screenshot" class="md-nav__link"> + Screenshot + </a> + +</li> + + <li class="md-nav__item"> + <a href="#function-signature_7" title="Function Signature" class="md-nav__link"> + Function Signature + </a> + +</li> + + <li class="md-nav__item"> + <a href="#example_7" title="Example" class="md-nav__link"> + Example + </a> + +</li> + + </ul> + </nav> + +</li> + + <li class="md-nav__item"> + <a href="#editorselectrepeater" title="editor.SelectRepeater" class="md-nav__link"> + editor.SelectRepeater + </a> + + <nav class="md-nav"> + <ul class="md-nav__list"> + + <li class="md-nav__item"> + <a href="#screenshot_8" title="Screenshot" class="md-nav__link"> + Screenshot + </a> + +</li> + + <li class="md-nav__item"> + <a href="#function-signature_8" title="Function Signature" class="md-nav__link"> + Function Signature + </a> + +</li> + + <li class="md-nav__item"> + <a href="#example_8" title="Example" class="md-nav__link"> + Example + </a> + +</li> + + </ul> + </nav> + +</li> + + <li class="md-nav__item"> + <a href="#editortextarea" title="editor.Textarea" class="md-nav__link"> + editor.Textarea + </a> + + <nav class="md-nav"> + <ul class="md-nav__list"> + + <li class="md-nav__item"> + <a href="#screenshot_9" title="Screenshot" class="md-nav__link"> + Screenshot + </a> + +</li> + + <li class="md-nav__item"> + <a href="#function-signature_9" title="Function Signature" class="md-nav__link"> + Function Signature + </a> + +</li> + + <li class="md-nav__item"> + <a href="#example_9" title="Example" class="md-nav__link"> + Example + </a> + +</li> + + </ul> + </nav> + +</li> + + </ul> + </nav> + +</li> + + <li class="md-nav__item"> + <a href="#data-references" title="Data References" class="md-nav__link"> + Data References + </a> + + <nav class="md-nav"> + <ul class="md-nav__list"> + + <li class="md-nav__item"> + <a href="#referenceselect" title="reference.Select" class="md-nav__link"> + reference.Select + </a> + + <nav class="md-nav"> + <ul class="md-nav__list"> + + <li class="md-nav__item"> + <a href="#screenshot_10" title="Screenshot" class="md-nav__link"> + Screenshot + </a> + +</li> + + <li class="md-nav__item"> + <a href="#function-signature_10" title="Function Signature" class="md-nav__link"> + Function Signature + </a> + +</li> + + <li class="md-nav__item"> + <a href="#example_10" title="Example" class="md-nav__link"> + Example + </a> + +</li> + + </ul> + </nav> + +</li> + + <li class="md-nav__item"> + <a href="#referenceselectrepeater" title="reference.SelectRepeater" class="md-nav__link"> + reference.SelectRepeater + </a> + + <nav class="md-nav"> + <ul class="md-nav__list"> + + <li class="md-nav__item"> + <a href="#screenshot_11" title="Screenshot" class="md-nav__link"> + Screenshot + </a> + +</li> + + <li class="md-nav__item"> + <a href="#function-signature_11" title="Function Signature" class="md-nav__link"> + Function Signature + </a> + +</li> + + <li class="md-nav__item"> + <a href="#example_11" title="Example" class="md-nav__link"> + Example + </a> + +</li> + + </ul> + </nav> + +</li> + + </ul> + </nav> + +</li> + + + + </ul> + +</nav> + </div> + </div> + </div> + + + <div class="md-content"> + <article class="md-content__inner md-typeset"> + + + + <h1>HTML Inputs</h1> + + <p>Ponzu provides a number of helpful HTML Inputs to create forms which CMS admins +use to manage content. The input functions are typically used inside a Content +type's <code>MarshalEditor()</code> func from within an <code>editor.Form()</code> - for example:</p> +<div class="codehilite"><pre><span></span><span class="c1">// MarshalEditor writes a buffer of html to edit a Post within the CMS</span> +<span class="c1">// and implements editor.Editable</span> +<span class="kd">func</span> <span class="p">(</span><span class="nx">p</span> <span class="o">*</span><span class="nx">Post</span><span class="p">)</span> <span class="nx">MarshalEditor</span><span class="p">()</span> <span class="p">([]</span><span class="kt">byte</span><span class="p">,</span> <span class="kt">error</span><span class="p">)</span> <span class="p">{</span> + <span class="nx">view</span><span class="p">,</span> <span class="nx">err</span> <span class="o">:=</span> <span class="nx">editor</span><span class="p">.</span><span class="nx">Form</span><span class="p">(</span><span class="nx">p</span><span class="p">,</span> + <span class="nx">editor</span><span class="p">.</span><span class="nx">Field</span><span class="p">{</span> <span class="c1">// <- editor.Fields contain input-like funcs</span> + <span class="nx">View</span><span class="p">:</span> <span class="nx">editor</span><span class="p">.</span><span class="nx">Input</span><span class="p">(</span><span class="s">"Title"</span><span class="p">,</span> <span class="nx">p</span><span class="p">,</span> <span class="kd">map</span><span class="p">[</span><span class="kt">string</span><span class="p">]</span><span class="kt">string</span><span class="p">{</span> <span class="c1">// <- makes a text input</span> + <span class="s">"label"</span><span class="p">:</span> <span class="s">"Title"</span><span class="p">,</span> + <span class="s">"type"</span><span class="p">:</span> <span class="s">"text"</span><span class="p">,</span> + <span class="s">"placeholder"</span><span class="p">:</span> <span class="s">"Enter the Title here"</span><span class="p">,</span> + <span class="p">}),</span> + <span class="p">},</span> + <span class="nx">editor</span><span class="p">.</span><span class="nx">Field</span><span class="p">{</span> + <span class="nx">View</span><span class="p">:</span> <span class="nx">editor</span><span class="p">.</span><span class="nx">Richtext</span><span class="p">(</span><span class="s">"Body"</span><span class="p">,</span> <span class="nx">p</span><span class="p">,</span> <span class="kd">map</span><span class="p">[</span><span class="kt">string</span><span class="p">]</span><span class="kt">string</span><span class="p">{</span> <span class="c1">// <- makes a WYSIWIG editor</span> + <span class="s">"label"</span><span class="p">:</span> <span class="s">"Body"</span><span class="p">,</span> + <span class="s">"placeholder"</span><span class="p">:</span> <span class="s">"Enter the Body here"</span><span class="p">,</span> + <span class="p">}),</span> + <span class="p">},</span> + <span class="nx">editor</span><span class="p">.</span><span class="nx">Field</span><span class="p">{</span> + <span class="nx">View</span><span class="p">:</span> <span class="nx">editor</span><span class="p">.</span><span class="nx">Input</span><span class="p">(</span><span class="s">"Author"</span><span class="p">,</span> <span class="nx">p</span><span class="p">,</span> <span class="kd">map</span><span class="p">[</span><span class="kt">string</span><span class="p">]</span><span class="kt">string</span><span class="p">{</span> + <span class="s">"label"</span><span class="p">:</span> <span class="s">"Author"</span><span class="p">,</span> + <span class="s">"type"</span><span class="p">:</span> <span class="s">"text"</span><span class="p">,</span> + <span class="s">"placeholder"</span><span class="p">:</span> <span class="s">"Enter the Author here"</span><span class="p">,</span> + <span class="p">}),</span> + <span class="p">},</span> + <span class="p">)</span> + + <span class="k">if</span> <span class="nx">err</span> <span class="o">!=</span> <span class="kc">nil</span> <span class="p">{</span> + <span class="k">return</span> <span class="kc">nil</span><span class="p">,</span> <span class="nx">fmt</span><span class="p">.</span><span class="nx">Errorf</span><span class="p">(</span><span class="s">"Failed to render Post editor view: %s"</span><span class="p">,</span> <span class="nx">err</span><span class="p">.</span><span class="nx">Error</span><span class="p">())</span> + <span class="p">}</span> + + <span class="k">return</span> <span class="nx">view</span><span class="p">,</span> <span class="kc">nil</span> +<span class="p">}</span> +</pre></div> + + +<hr /> +<h2 id="field-input-functions">Field Input Functions<a class="headerlink" href="#field-input-functions" title="Permanent link">¶</a></h2> +<p>There are many of these input-like HTML view funcs exported from Ponzu's +<code>management/editor</code> package. Below is a list of the built-in options:</p> +<h3 id="editorinput"><code>editor.Input</code><a class="headerlink" href="#editorinput" title="Permanent link">¶</a></h3> +<p>The <code>editor.Input</code> function produces a standard text input.</p> +<h5 id="screenshot">Screenshot<a class="headerlink" href="#screenshot" title="Permanent link">¶</a></h5> +<p><img alt="HTML Input" src="../../images/editor-input.png" /></p> +<h5 id="function-signature">Function Signature<a class="headerlink" href="#function-signature" title="Permanent link">¶</a></h5> +<div class="codehilite"><pre><span></span><span class="nx">Input</span><span class="p">(</span><span class="nx">fieldName</span> <span class="kt">string</span><span class="p">,</span> <span class="nx">p</span> <span class="kd">interface</span><span class="p">{},</span> <span class="nx">attrs</span><span class="p">,</span> <span class="nx">options</span> <span class="kd">map</span><span class="p">[</span><span class="kt">string</span><span class="p">]</span><span class="kt">string</span><span class="p">)</span> <span class="p">[]</span><span class="kt">byte</span> +</pre></div> + + +<h5 id="example">Example<a class="headerlink" href="#example" title="Permanent link">¶</a></h5> +<div class="codehilite"><pre><span></span><span class="o">...</span> +<span class="nx">editor</span><span class="p">.</span><span class="nx">Field</span><span class="p">{</span> + <span class="nx">View</span><span class="p">:</span> <span class="nx">editor</span><span class="p">.</span><span class="nx">Input</span><span class="p">(</span><span class="s">"Title"</span><span class="p">,</span> <span class="nx">s</span><span class="p">,</span> <span class="kd">map</span><span class="p">[</span><span class="kt">string</span><span class="p">]</span><span class="kt">string</span><span class="p">{</span> + <span class="s">"label"</span><span class="p">:</span> <span class="s">"Title"</span><span class="p">,</span> + <span class="s">"type"</span><span class="p">:</span> <span class="s">"text"</span><span class="p">,</span> + <span class="s">"placeholder"</span><span class="p">:</span> <span class="s">"Enter the Title here"</span><span class="p">,</span> + <span class="p">}),</span> +<span class="p">},</span> +<span class="o">...</span> +</pre></div> + + +<hr /> +<h3 id="editorinputrepeater"><code>editor.InputRepeater</code><a class="headerlink" href="#editorinputrepeater" title="Permanent link">¶</a></h3> +<p>The <code>editor.InputRepeater</code> function applies a controller UI to the <code>editor.Input</code> +view so any arbitrary number of inputs can be added for your field.</p> +<div class="admonition warning"> +<p class="admonition-title">Using Repeaters</p> +<p>When using the <code>editor.InputRepeater</code> make sure it's corresponding field is a <strong>slice <code>[]T</code></strong> +type. You will experience errors if it is not.</p> +</div> +<h5 id="screenshot_1">Screenshot<a class="headerlink" href="#screenshot_1" title="Permanent link">¶</a></h5> +<p><img alt="HTML Input" src="../../images/editor-input-repeater.png" /></p> +<h5 id="function-signature_1">Function Signature<a class="headerlink" href="#function-signature_1" title="Permanent link">¶</a></h5> +<div class="codehilite"><pre><span></span><span class="nx">InputRepeater</span><span class="p">(</span><span class="nx">fieldName</span> <span class="kt">string</span><span class="p">,</span> <span class="nx">p</span> <span class="kd">interface</span><span class="p">{},</span> <span class="nx">attrs</span><span class="p">,</span> <span class="nx">options</span> <span class="kd">map</span><span class="p">[</span><span class="kt">string</span><span class="p">]</span><span class="kt">string</span><span class="p">)</span> <span class="p">[]</span><span class="kt">byte</span> +</pre></div> + + +<h5 id="example_1">Example<a class="headerlink" href="#example_1" title="Permanent link">¶</a></h5> +<div class="codehilite"><pre><span></span><span class="o">...</span> +<span class="nx">editor</span><span class="p">.</span><span class="nx">Field</span><span class="p">{</span> + <span class="nx">View</span><span class="p">:</span> <span class="nx">editor</span><span class="p">.</span><span class="nx">InputRepeater</span><span class="p">(</span><span class="s">"Title"</span><span class="p">,</span> <span class="nx">s</span><span class="p">,</span> <span class="kd">map</span><span class="p">[</span><span class="kt">string</span><span class="p">]</span><span class="kt">string</span><span class="p">{</span> + <span class="s">"label"</span><span class="p">:</span> <span class="s">"Titles"</span><span class="p">,</span> + <span class="s">"type"</span><span class="p">:</span> <span class="s">"text"</span><span class="p">,</span> + <span class="s">"placeholder"</span><span class="p">:</span> <span class="s">"Enter the Title here"</span><span class="p">,</span> + <span class="p">}),</span> +<span class="p">},</span> +<span class="o">...</span> +</pre></div> + + +<hr /> +<h3 id="editorcheckbox"><code>editor.Checkbox</code><a class="headerlink" href="#editorcheckbox" title="Permanent link">¶</a></h3> +<p>The <code>editor.Checkbox</code> function returns any number of checkboxes in a collection, +defined by the value:name map of options.</p> +<h5 id="screenshot_2">Screenshot<a class="headerlink" href="#screenshot_2" title="Permanent link">¶</a></h5> +<p><img alt="HTML Checkbox" src="../../images/editor-checkbox.png" /></p> +<h5 id="function-signature_2">Function Signature<a class="headerlink" href="#function-signature_2" title="Permanent link">¶</a></h5> +<div class="codehilite"><pre><span></span><span class="nx">Checkbox</span><span class="p">(</span><span class="nx">fieldName</span> <span class="kt">string</span><span class="p">,</span> <span class="nx">p</span> <span class="kd">interface</span><span class="p">{},</span> <span class="nx">attrs</span><span class="p">,</span> <span class="nx">options</span> <span class="kd">map</span><span class="p">[</span><span class="kt">string</span><span class="p">]</span><span class="kt">string</span><span class="p">)</span> <span class="p">[]</span><span class="kt">byte</span> +</pre></div> + + +<h5 id="example_2">Example<a class="headerlink" href="#example_2" title="Permanent link">¶</a></h5> +<div class="codehilite"><pre><span></span><span class="o">...</span> +<span class="nx">editor</span><span class="p">.</span><span class="nx">Field</span><span class="p">{</span> + <span class="nx">View</span><span class="p">:</span> <span class="nx">editor</span><span class="p">.</span><span class="nx">Checkbox</span><span class="p">(</span><span class="s">"Options"</span><span class="p">,</span> <span class="nx">s</span><span class="p">,</span> <span class="kd">map</span><span class="p">[</span><span class="kt">string</span><span class="p">]</span><span class="kt">string</span><span class="p">{</span> + <span class="s">"label"</span><span class="p">:</span> <span class="s">"Options"</span><span class="p">,</span> + <span class="p">},</span> <span class="kd">map</span><span class="p">[</span><span class="kt">string</span><span class="p">]</span><span class="kt">string</span><span class="p">{</span> + <span class="c1">// "value": "Display Name",</span> + <span class="s">"1"</span><span class="p">:</span> <span class="s">"First"</span><span class="p">,</span> + <span class="s">"2"</span><span class="p">:</span> <span class="s">"Second"</span><span class="p">,</span> + <span class="s">"3"</span><span class="p">:</span> <span class="s">"Third"</span><span class="p">,</span> + <span class="p">}),</span> +<span class="p">},</span> +<span class="o">...</span> +</pre></div> + + +<hr /> +<h3 id="editorrichtext"><code>editor.Richtext</code><a class="headerlink" href="#editorrichtext" title="Permanent link">¶</a></h3> +<p>The <code>editor.Richetext</code> function displays an HTML5 rich text / WYSYWIG editor which +supports text formatting and styling, images, quotes, arbitrary HTML, and more. </p> +<p>The rich text editor is a modified version of <a href="http://summernote.org/">Summernote</a> +using a theme called <a href="https://github.com/Cerealkillerway/materialNote">MaterialNote</a></p> +<h5 id="screenshot_3">Screenshot<a class="headerlink" href="#screenshot_3" title="Permanent link">¶</a></h5> +<p><img alt="HTML Richtext Input" src="../../images/editor-richtext.png" /></p> +<h5 id="function-signature_3">Function Signature<a class="headerlink" href="#function-signature_3" title="Permanent link">¶</a></h5> +<div class="codehilite"><pre><span></span><span class="nx">Richtext</span><span class="p">(</span><span class="nx">fieldName</span> <span class="kt">string</span><span class="p">,</span> <span class="nx">p</span> <span class="kd">interface</span><span class="p">{},</span> <span class="nx">attrs</span> <span class="kd">map</span><span class="p">[</span><span class="kt">string</span><span class="p">]</span><span class="kt">string</span><span class="p">)</span> <span class="p">[]</span><span class="kt">byte</span> +</pre></div> + + +<h5 id="example_3">Example<a class="headerlink" href="#example_3" title="Permanent link">¶</a></h5> +<div class="codehilite"><pre><span></span><span class="o">...</span> +<span class="nx">editor</span><span class="p">.</span><span class="nx">Field</span><span class="p">{</span> + <span class="nx">View</span><span class="p">:</span> <span class="nx">editor</span><span class="p">.</span><span class="nx">Richtext</span><span class="p">(</span><span class="s">"Opinion"</span><span class="p">,</span> <span class="nx">s</span><span class="p">,</span> <span class="kd">map</span><span class="p">[</span><span class="kt">string</span><span class="p">]</span><span class="kt">string</span><span class="p">{</span> + <span class="s">"label"</span><span class="p">:</span> <span class="s">"Rich Text Editor"</span><span class="p">,</span> + <span class="s">"placeholder"</span><span class="p">:</span> <span class="s">"Enter the Opinion here"</span><span class="p">,</span> + <span class="p">}),</span> +<span class="p">},</span> +<span class="o">...</span> +</pre></div> + + +<hr /> +<h3 id="editortags"><code>editor.Tags</code><a class="headerlink" href="#editortags" title="Permanent link">¶</a></h3> +<p>The <code>editor.Tags</code> function returns a container input element for lists of arbitrary +bits of information.</p> +<h5 id="screenshot_4">Screenshot<a class="headerlink" href="#screenshot_4" title="Permanent link">¶</a></h5> +<p><img alt="HTML Tags Input" src="../../images/editor-tags.png" /></p> +<h5 id="function-signature_4">Function Signature<a class="headerlink" href="#function-signature_4" title="Permanent link">¶</a></h5> +<div class="codehilite"><pre><span></span><span class="nx">Tags</span><span class="p">(</span><span class="nx">fieldName</span> <span class="kt">string</span><span class="p">,</span> <span class="nx">p</span> <span class="kd">interface</span><span class="p">{},</span> <span class="nx">attrs</span> <span class="kd">map</span><span class="p">[</span><span class="kt">string</span><span class="p">]</span><span class="kt">string</span><span class="p">)</span> <span class="p">[]</span><span class="kt">byte</span> +</pre></div> + + +<h5 id="example_4">Example<a class="headerlink" href="#example_4" title="Permanent link">¶</a></h5> +<div class="codehilite"><pre><span></span><span class="o">...</span> +<span class="nx">editor</span><span class="p">.</span><span class="nx">Field</span><span class="p">{</span> + <span class="nx">View</span><span class="p">:</span> <span class="nx">editor</span><span class="p">.</span><span class="nx">Tags</span><span class="p">(</span><span class="s">"Category"</span><span class="p">,</span> <span class="nx">s</span><span class="p">,</span> <span class="kd">map</span><span class="p">[</span><span class="kt">string</span><span class="p">]</span><span class="kt">string</span><span class="p">{</span> + <span class="s">"label"</span><span class="p">:</span> <span class="s">"Tags"</span><span class="p">,</span> + <span class="s">"placeholder"</span><span class="p">:</span> <span class="s">"+Category"</span><span class="p">,</span> + <span class="p">}),</span> +<span class="p">},</span> +<span class="o">...</span> +</pre></div> + + +<hr /> +<h3 id="editorfile"><code>editor.File</code><a class="headerlink" href="#editorfile" title="Permanent link">¶</a></h3> +<p>The <code>editor.File</code> function returns an HTML file upload element, which saves files +into the <code>/uploads</code> directory, and can be viewed from the "Uploads" section in the +Admin dashboard. See also the <a href="../../HTTP-APIs/File-Metadata/">File Metadata API</a>.</p> +<div class="admonition warning"> +<p class="admonition-title">Field Type</p> +<p>When using the <code>editor.File</code> function, its corresponding field type must be +a <strong><code>string</code></strong>, as files will be stored as URL paths in the database. </p> +</div> +<h5 id="screenshot_5">Screenshot<a class="headerlink" href="#screenshot_5" title="Permanent link">¶</a></h5> +<p><img alt="HTML File Input" src="../../images/editor-file.png" /></p> +<h5 id="function-signature_5">Function Signature<a class="headerlink" href="#function-signature_5" title="Permanent link">¶</a></h5> +<div class="codehilite"><pre><span></span><span class="nx">File</span><span class="p">(</span><span class="nx">fieldName</span> <span class="kt">string</span><span class="p">,</span> <span class="nx">p</span> <span class="kd">interface</span><span class="p">{},</span> <span class="nx">attrs</span> <span class="kd">map</span><span class="p">[</span><span class="kt">string</span><span class="p">]</span><span class="kt">string</span><span class="p">)</span> <span class="p">[]</span><span class="kt">byte</span> +</pre></div> + + +<h5 id="example_5">Example<a class="headerlink" href="#example_5" title="Permanent link">¶</a></h5> +<div class="codehilite"><pre><span></span><span class="o">...</span> +<span class="nx">editor</span><span class="p">.</span><span class="nx">Field</span><span class="p">{</span> + <span class="nx">View</span><span class="p">:</span> <span class="nx">editor</span><span class="p">.</span><span class="nx">File</span><span class="p">(</span><span class="s">"Photo"</span><span class="p">,</span> <span class="nx">s</span><span class="p">,</span> <span class="kd">map</span><span class="p">[</span><span class="kt">string</span><span class="p">]</span><span class="kt">string</span><span class="p">{</span> + <span class="s">"label"</span><span class="p">:</span> <span class="s">"File Upload"</span><span class="p">,</span> + <span class="s">"placeholder"</span><span class="p">:</span> <span class="s">"Upload the Photo here"</span><span class="p">,</span> + <span class="p">}),</span> +<span class="p">},</span> +<span class="o">...</span> +</pre></div> + + +<hr /> +<h3 id="editorfilerepeater"><code>editor.FileRepeater</code><a class="headerlink" href="#editorfilerepeater" title="Permanent link">¶</a></h3> +<p>The <code>editor.FileRepeater</code> function applies a controller UI to the <code>editor.File</code> +view so any arbitrary number of uploads can be added for your field.</p> +<div class="admonition warning"> +<p class="admonition-title">Using Repeaters</p> +<p>When using the <code>editor.FileRepeater</code> make sure it's corresponding field is a <strong>slice <code>[]string</code></strong> +type. You will experience errors if it is not.</p> +</div> +<h5 id="screenshot_6">Screenshot<a class="headerlink" href="#screenshot_6" title="Permanent link">¶</a></h5> +<p><img alt="HTML File Input" src="../../images/editor-file-repeater.png" /></p> +<h5 id="function-signature_6">Function Signature<a class="headerlink" href="#function-signature_6" title="Permanent link">¶</a></h5> +<div class="codehilite"><pre><span></span><span class="nx">FileRepeater</span><span class="p">(</span><span class="nx">fieldName</span> <span class="kt">string</span><span class="p">,</span> <span class="nx">p</span> <span class="kd">interface</span><span class="p">{},</span> <span class="nx">attrs</span> <span class="kd">map</span><span class="p">[</span><span class="kt">string</span><span class="p">]</span><span class="kt">string</span><span class="p">)</span> <span class="p">[]</span><span class="kt">byte</span> +</pre></div> + + +<h5 id="example_6">Example<a class="headerlink" href="#example_6" title="Permanent link">¶</a></h5> +<div class="codehilite"><pre><span></span><span class="o">...</span> +<span class="nx">editor</span><span class="p">.</span><span class="nx">Field</span><span class="p">{</span> + <span class="nx">View</span><span class="p">:</span> <span class="nx">editor</span><span class="p">.</span><span class="nx">FileRepeater</span><span class="p">(</span><span class="s">"Photo"</span><span class="p">,</span> <span class="nx">s</span><span class="p">,</span> <span class="kd">map</span><span class="p">[</span><span class="kt">string</span><span class="p">]</span><span class="kt">string</span><span class="p">{</span> + <span class="s">"label"</span><span class="p">:</span> <span class="s">"File Upload Repeater"</span><span class="p">,</span> + <span class="s">"placeholder"</span><span class="p">:</span> <span class="s">"Upload the Photo here"</span><span class="p">,</span> + <span class="p">}),</span> +<span class="p">},</span> +<span class="o">...</span> +</pre></div> + + +<hr /> +<h3 id="editorselect"><code>editor.Select</code><a class="headerlink" href="#editorselect" title="Permanent link">¶</a></h3> +<p>The <code>editor.Select</code> function returns a single HTML select input with options +as defined in the <code>options map[string]string</code> parameter of the function call.</p> +<h5 id="screenshot_7">Screenshot<a class="headerlink" href="#screenshot_7" title="Permanent link">¶</a></h5> +<p><img alt="HTML Select Input" src="../../images/editor-select.png" /></p> +<h5 id="function-signature_7">Function Signature<a class="headerlink" href="#function-signature_7" title="Permanent link">¶</a></h5> +<div class="codehilite"><pre><span></span><span class="kd">func</span> <span class="nx">Select</span><span class="p">(</span><span class="nx">fieldName</span> <span class="kt">string</span><span class="p">,</span> <span class="nx">p</span> <span class="kd">interface</span><span class="p">{},</span> <span class="nx">attrs</span><span class="p">,</span> <span class="nx">options</span> <span class="kd">map</span><span class="p">[</span><span class="kt">string</span><span class="p">]</span><span class="kt">string</span><span class="p">)</span> <span class="p">[]</span><span class="kt">byte</span> +</pre></div> + + +<h5 id="example_7">Example<a class="headerlink" href="#example_7" title="Permanent link">¶</a></h5> +<div class="codehilite"><pre><span></span><span class="o">...</span> +<span class="nx">editor</span><span class="p">.</span><span class="nx">Field</span><span class="p">{</span> + <span class="nx">View</span><span class="p">:</span> <span class="nx">editor</span><span class="p">.</span><span class="nx">Select</span><span class="p">(</span><span class="s">"Rating"</span><span class="p">,</span> <span class="nx">s</span><span class="p">,</span> <span class="kd">map</span><span class="p">[</span><span class="kt">string</span><span class="p">]</span><span class="kt">string</span><span class="p">{</span> + <span class="s">"label"</span><span class="p">:</span> <span class="s">"Select Dropdown"</span><span class="p">,</span> + <span class="p">},</span> <span class="kd">map</span><span class="p">[</span><span class="kt">string</span><span class="p">]</span><span class="kt">string</span><span class="p">{</span> + <span class="c1">// "value": "Display Name",</span> + <span class="s">"G"</span><span class="p">:</span> <span class="s">"G"</span><span class="p">,</span> + <span class="s">"PG"</span><span class="p">:</span> <span class="s">"PG"</span><span class="p">,</span> + <span class="s">"PG-13"</span><span class="p">:</span> <span class="s">"PG-13"</span><span class="p">,</span> + <span class="s">"R"</span><span class="p">:</span> <span class="s">"R"</span><span class="p">,</span> + <span class="p">}),</span> +<span class="p">},</span> +<span class="o">...</span> +</pre></div> + + +<hr /> +<h3 id="editorselectrepeater"><code>editor.SelectRepeater</code><a class="headerlink" href="#editorselectrepeater" title="Permanent link">¶</a></h3> +<p>The <code>editor.SelectRepeater</code> function applies a controller UI to the <code>editor.Select</code> +view so any arbitrary number of dropdowns can be added for your field.</p> +<h5 id="screenshot_8">Screenshot<a class="headerlink" href="#screenshot_8" title="Permanent link">¶</a></h5> +<p><img alt="HTML Select Input" src="../../images/editor-select-repeater.png" /></p> +<h5 id="function-signature_8">Function Signature<a class="headerlink" href="#function-signature_8" title="Permanent link">¶</a></h5> +<div class="codehilite"><pre><span></span><span class="kd">func</span> <span class="nx">SelectRepeater</span><span class="p">(</span><span class="nx">fieldName</span> <span class="kt">string</span><span class="p">,</span> <span class="nx">p</span> <span class="kd">interface</span><span class="p">{},</span> <span class="nx">attrs</span><span class="p">,</span> <span class="nx">options</span> <span class="kd">map</span><span class="p">[</span><span class="kt">string</span><span class="p">]</span><span class="kt">string</span><span class="p">)</span> <span class="p">[]</span><span class="kt">byte</span> +</pre></div> + + +<h5 id="example_8">Example<a class="headerlink" href="#example_8" title="Permanent link">¶</a></h5> +<div class="codehilite"><pre><span></span><span class="o">...</span> +<span class="nx">editor</span><span class="p">.</span><span class="nx">Field</span><span class="p">{</span> + <span class="nx">View</span><span class="p">:</span> <span class="nx">editor</span><span class="p">.</span><span class="nx">SelectRepeater</span><span class="p">(</span><span class="s">"Rating"</span><span class="p">,</span> <span class="nx">s</span><span class="p">,</span> <span class="kd">map</span><span class="p">[</span><span class="kt">string</span><span class="p">]</span><span class="kt">string</span><span class="p">{</span> + <span class="s">"label"</span><span class="p">:</span> <span class="s">"Select Dropdown Repeater"</span><span class="p">,</span> + <span class="p">},</span> <span class="kd">map</span><span class="p">[</span><span class="kt">string</span><span class="p">]</span><span class="kt">string</span><span class="p">{</span> + <span class="c1">// "value": "Display Name",</span> + <span class="s">"G"</span><span class="p">:</span> <span class="s">"G"</span><span class="p">,</span> + <span class="s">"PG"</span><span class="p">:</span> <span class="s">"PG"</span><span class="p">,</span> + <span class="s">"PG-13"</span><span class="p">:</span> <span class="s">"PG-13"</span><span class="p">,</span> + <span class="s">"R"</span><span class="p">:</span> <span class="s">"R"</span><span class="p">,</span> + <span class="p">}),</span> +<span class="p">},</span> +<span class="o">...</span> +</pre></div> + + +<hr /> +<h3 id="editortextarea"><code>editor.Textarea</code><a class="headerlink" href="#editortextarea" title="Permanent link">¶</a></h3> +<p>The <code>editor.Textarea</code> function returns an HTML textarea input to add unstyled text +blocks. Newlines in the textarea are preserved.</p> +<h5 id="screenshot_9">Screenshot<a class="headerlink" href="#screenshot_9" title="Permanent link">¶</a></h5> +<p><img alt="HTML Textarea Input" src="../../images/editor-textarea.png" /></p> +<h5 id="function-signature_9">Function Signature<a class="headerlink" href="#function-signature_9" title="Permanent link">¶</a></h5> +<div class="codehilite"><pre><span></span><span class="nx">Textarea</span><span class="p">(</span><span class="nx">fieldName</span> <span class="kt">string</span><span class="p">,</span> <span class="nx">p</span> <span class="kd">interface</span><span class="p">{},</span> <span class="nx">attrs</span> <span class="kd">map</span><span class="p">[</span><span class="kt">string</span><span class="p">]</span><span class="kt">string</span><span class="p">)</span> <span class="p">[]</span><span class="kt">byte</span> +</pre></div> + + +<h5 id="example_9">Example<a class="headerlink" href="#example_9" title="Permanent link">¶</a></h5> +<div class="codehilite"><pre><span></span><span class="o">...</span> +<span class="nx">editor</span><span class="p">.</span><span class="nx">Field</span><span class="p">{</span> + <span class="nx">View</span><span class="p">:</span> <span class="nx">editor</span><span class="p">.</span><span class="nx">Textarea</span><span class="p">(</span><span class="s">"Readme"</span><span class="p">,</span> <span class="nx">s</span><span class="p">,</span> <span class="kd">map</span><span class="p">[</span><span class="kt">string</span><span class="p">]</span><span class="kt">string</span><span class="p">{</span> + <span class="s">"label"</span><span class="p">:</span> <span class="s">"Textarea"</span><span class="p">,</span> + <span class="s">"placeholder"</span><span class="p">:</span> <span class="s">"Enter the Readme here"</span><span class="p">,</span> + <span class="p">}),</span> +<span class="p">},</span> +<span class="o">...</span> +</pre></div> + + +<hr /> +<h2 id="data-references">Data References<a class="headerlink" href="#data-references" title="Permanent link">¶</a></h2> +<p>It is common to want to keep a reference from one Content type to another. To do +this in Ponzu, use the <a href="https://github.com/bosssauce/reference"><code>bosssauce/reference</code></a> +package. It comes pre-installed with Ponzu as an <a href="../../Ponzu-Addons/Using-Addons">"Addon"</a>.</p> +<h3 id="referenceselect"><code>reference.Select</code><a class="headerlink" href="#referenceselect" title="Permanent link">¶</a></h3> +<h5 id="screenshot_10">Screenshot<a class="headerlink" href="#screenshot_10" title="Permanent link">¶</a></h5> +<p><img alt="HTML Select Input" src="../../images/editor-select.png" /></p> +<h5 id="function-signature_10">Function Signature<a class="headerlink" href="#function-signature_10" title="Permanent link">¶</a></h5> +<div class="codehilite"><pre><span></span><span class="kd">func</span> <span class="nx">Select</span><span class="p">(</span><span class="nx">fieldName</span> <span class="kt">string</span><span class="p">,</span> <span class="nx">p</span> <span class="kd">interface</span><span class="p">{},</span> <span class="nx">attrs</span> <span class="kd">map</span><span class="p">[</span><span class="kt">string</span><span class="p">]</span><span class="kt">string</span><span class="p">,</span> <span class="nx">contentType</span><span class="p">,</span> <span class="nx">tmplString</span> <span class="kt">string</span><span class="p">)</span> <span class="p">[]</span><span class="kt">byte</span> +</pre></div> + + +<h5 id="example_10">Example<a class="headerlink" href="#example_10" title="Permanent link">¶</a></h5> +<div class="codehilite"><pre><span></span><span class="o">...</span> +<span class="nx">editor</span><span class="p">.</span><span class="nx">Field</span><span class="p">{</span> + <span class="nx">View</span><span class="p">:</span> <span class="nx">reference</span><span class="p">.</span><span class="nx">Select</span><span class="p">(</span><span class="s">"DirectedBy"</span><span class="p">,</span> <span class="nx">s</span><span class="p">,</span> <span class="kd">map</span><span class="p">[</span><span class="kt">string</span><span class="p">]</span><span class="kt">string</span><span class="p">{</span> + <span class="s">"label"</span><span class="p">:</span> <span class="s">"Select Dropdown"</span><span class="p">,</span> + <span class="p">},</span> <span class="s">"Director"</span><span class="p">,</span> <span class="s">`{{.last-name}}, {{.first_name}}`</span><span class="p">),</span> +<span class="p">},</span> +<span class="o">...</span> +</pre></div> + + +<hr /> +<h3 id="referenceselectrepeater"><code>reference.SelectRepeater</code><a class="headerlink" href="#referenceselectrepeater" title="Permanent link">¶</a></h3> +<h5 id="screenshot_11">Screenshot<a class="headerlink" href="#screenshot_11" title="Permanent link">¶</a></h5> +<p><img alt="HTML Select Input" src="../../images/editor-select-repeater.png" /></p> +<h5 id="function-signature_11">Function Signature<a class="headerlink" href="#function-signature_11" title="Permanent link">¶</a></h5> +<div class="codehilite"><pre><span></span><span class="kd">func</span> <span class="nx">SelectRepeater</span><span class="p">(</span><span class="nx">fieldName</span> <span class="kt">string</span><span class="p">,</span> <span class="nx">p</span> <span class="kd">interface</span><span class="p">{},</span> <span class="nx">attrs</span> <span class="kd">map</span><span class="p">[</span><span class="kt">string</span><span class="p">]</span><span class="kt">string</span><span class="p">,</span> <span class="nx">contentType</span><span class="p">,</span> <span class="nx">tmplString</span> <span class="kt">string</span><span class="p">)</span> <span class="p">[]</span><span class="kt">byte</span> +</pre></div> + + +<h5 id="example_11">Example<a class="headerlink" href="#example_11" title="Permanent link">¶</a></h5> +<div class="codehilite"><pre><span></span><span class="o">...</span> +<span class="nx">editor</span><span class="p">.</span><span class="nx">Field</span><span class="p">{</span> + <span class="nx">View</span><span class="p">:</span> <span class="nx">reference</span><span class="p">.</span><span class="nx">SelectRepeater</span><span class="p">(</span><span class="s">"PlacesFilmed"</span><span class="p">,</span> <span class="nx">s</span><span class="p">,</span> <span class="kd">map</span><span class="p">[</span><span class="kt">string</span><span class="p">]</span><span class="kt">string</span><span class="p">{</span> + <span class="s">"label"</span><span class="p">:</span> <span class="s">"Select Dropdown Repeater"</span><span class="p">,</span> + <span class="p">},</span> <span class="s">"Location"</span><span class="p">,</span> <span class="s">`{{.name}}, {{.region}}`</span><span class="p">),</span> +<span class="p">},</span> +<span class="o">...</span> +</pre></div> + + +<hr /> + + + + + + + + </article> + </div> + </div> + </main> + + +<footer class="md-footer"> + + <div class="md-footer-nav"> + <nav class="md-footer-nav__inner md-grid"> + + <a href="../../Content/Extending-Content/" title="Extending Content" class="md-flex md-footer-nav__link md-footer-nav__link--prev" rel="prev"> + <div class="md-flex__cell md-flex__cell--shrink"> + <i class="md-icon md-icon--arrow-back md-footer-nav__button"></i> + </div> + <div class="md-flex__cell md-flex__cell--stretch md-footer-nav__title"> + <span class="md-flex__ellipsis"> + <span class="md-footer-nav__direction"> + Previous + </span> + Extending Content + </span> + </div> + </a> + + + <a href="../../HTTP-APIs/Content/" title="Content" class="md-flex md-footer-nav__link md-footer-nav__link--next" rel="next"> + <div class="md-flex__cell md-flex__cell--stretch md-footer-nav__title"> + <span class="md-flex__ellipsis"> + <span class="md-footer-nav__direction"> + Next + </span> + Content + </span> + </div> + <div class="md-flex__cell md-flex__cell--shrink"> + <i class="md-icon md-icon--arrow-forward md-footer-nav__button"></i> + </div> + </a> + + </nav> + </div> + + <div class="md-footer-meta md-typeset"> + <div class="md-footer-meta__inner md-grid"> + <div class="md-footer-copyright"> + + powered by + <a href="http://www.mkdocs.org" title="MkDocs">MkDocs</a> + and + <a href="http://squidfunk.github.io/mkdocs-material/" title="Material for MkDocs"> + Material for MkDocs</a> + </div> + + + <div class="md-footer-social"> + + <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> + + <a href="https://github.com/ponzu-cms" class="md-footer-social__link fa fa-github"></a> + + <a href="https://twitter.com/ponzu_cms" class="md-footer-social__link fa fa-twitter"></a> + + </div> + + + </div> + </div> +</footer> + + </div> + + <script src="../../assets/javascripts/application-6b599127bc.js"></script> + <script>app.initialize({url:{base:"../.."}})</script> + + + + + <script>!function(e,t,a,n,o,c,i){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,c=t.createElement(a),i=t.getElementsByTagName(a)[0],c.async=1,c.src=n,i.parentNode.insertBefore(c,i)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-98609560-1","auto"),ga("set","anonymizeIp",!0),ga("send","pageview");var links=document.getElementsByTagName("a");Array.prototype.map.call(links,function(e){e.host!=document.location.host&&e.addEventListener("click",function(){var t=e.getAttribute("data-md-action")||"follow";ga("send","event","outbound",t,e.href)})});var query=document.forms.search.query;query.addEventListener("blur",function(){if(this.value){var e=document.location.pathname;ga("send","pageview",e+"?q="+this.value)}})</script> + + + </body> +</html>
\ No newline at end of file |