google-nomulus/java/google/registry/ui/soy/Forms.soy

// Copyright 2017 The Nomulus Authors. All Rights Reserved.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//     http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

{namespace registry.soy.forms}


/**
 * Input field.
 */
{template .inputField}
  {@param name: ?}  /** Input field name. */
  {@param? item: ?}  /** This will be used to set default value with $item[$name]. */
  {@param? label: ?}  /** Input field label. */
  {@param? placeholder: ?}  /** Placeholder text. */
  <label for="{$name}">
    {if isNonnull($label)}
      {$label}
    {else}
      {$name}
    {/if}
  </label>
  <input id="{$name}"
         name="{$name}"
         {if isNonnull($item) and isNonnull($item[$name])}
           value="{$item[$name]}"
         {/if}
         {if isNonnull($placeholder)}
           placeholder="{$placeholder}"
         {/if}>
{/template}


/**
 * Input field in a table row.
 */
{template .inputFieldRow}
  {@param name: ?}  /** Input field name. */
  {@param? item: ?}  /** This will be used to set default value with $item[$name]. */
  {@param? itemPrefix: ?}
  {@param? namePrefix: ?}
  {@param? label: ?}  /** Input field label. */
  {@param? description: ?}  /** Input field description. */
  {@param? placeholder: ?}  /** Placeholder text. */
  {@param? readonly: ?}
  <tr class="{css('kd-settings-pane-section')}">
    <td>
      <label for="{if isNonnull($namePrefix)}{$namePrefix + $name}{else}{$name}{/if}"
             class="{css('setting-label')}">
        {if isNonnull($label)}
          {$label}
        {else}
          {$name}
        {/if}
      </label>
      {if isNonnull($description)}
        <span class="{css('description')}">{$description}</span>
      {/if}
    </td>
    <td class="{css('setting')}">
      <input id="{if isNonnull($namePrefix)}{$namePrefix + $name}{else}{$name}{/if}"
             name="{if isNonnull($namePrefix)}{$namePrefix + $name}{else}{$name}{/if}"
             {if isNonnull($item)}
               {if isNonnull($itemPrefix) and isNonnull($item[$itemPrefix + $name])}
                 value="{$item[$itemPrefix + $name]['keyValue'] ?: $item[$itemPrefix + $name]}"
               {elseif isNonnull($item[$name])}
                 value="{$item[$name]['keyValue'] ?: $item[$name]}"
               {/if}
             {/if}
             {if isNonnull($placeholder) and not $readonly}
               placeholder="{$placeholder}"
             {/if}
             {if $readonly}
               readonly
             {/if}>
    </td>
  </tr>
{/template}


/* XXX: Should move other impls in this file to use this. */
/** Input field label. */
{template .inputFieldLabel}
  {@param label: string}
  {@param? forId: string}
  {@param? description: string}
  <label {if isNonnull($forId)}for="{$forId}"{/if} class="{css('setting-label')}">
    {$label}
  </label>
  {if isNonnull($description)}
    <span class="{css('description')}">{$description}</span>
  {/if}
{/template}


/** Input field value. */
{template .inputFieldValue}
  {@param name: string}
  {@param? readonly: bool}
  {@param? value: ?}
  {@param? namePrefix: string}
  {@param? placeholder: string}
  {@param? clazz: string}
  {let $forId: isNonnull($namePrefix) ? $namePrefix + $name : $name /}
  <input name="{$forId}"
         id="{$forId}"
         value="{if isNonnull($value)}{$value['keyValue'] ?: $value}{/if}"
         {if isNonnull($clazz)}class="{$clazz}"{/if}
         {if isNonnull($placeholder) and not $readonly}
         placeholder="{$placeholder}"
         {/if}
         {if $readonly}readonly{/if}>
{/template}


/** Input field in a table row. */
{template .inputFieldRowWithValue}
  {@param label: string}
  {@param name: string}
  {@param? readonly: bool}
  {@param? namePrefix: string}
  {@param? value: ?}
  {@param? description: string}
  {@param? placeholder: string}
  {@param? clazz: string}
  {let $forId: isNonnull($namePrefix) ? $namePrefix + $name : $name /}
  <tr class="{css('kd-settings-pane-section')}">
    <td>
      {call .inputFieldLabel data="all"}
        {param forId: $forId /}
      {/call}
    </td>
    <td class="{css('setting')}">
      {call .inputFieldValue data="all" /}
    </td>
  </tr>
{/template}


/**
 * Form input row for a table.
 */
{template .textareaFieldRow}
  {@param name: ?}  /** Input field name. */
  {@param? item: ?}  /** This will be used to set default value with $item[$name]. */
  {@param? itemPrefix: ?}
  {@param? namePrefix: ?}
  {@param? label: ?}  /** Input field label. */
  {@param? readonly: ?}
  <tr>
    <td>
      <label for="{if isNonnull($namePrefix)}{$namePrefix + $name}{else}{$name}{/if}">
        {if isNonnull($label)}
          {$label}
        {else}
          {$name}
        {/if}
      </label>
    </td>
    <td>
      <textarea id="{$name}"
                name="{if isNonnull($namePrefix)}{$namePrefix + $name}{else}{$name}{/if}"
                {if $readonly}
                  readonly
                {/if}
                >{if isNonnull($item)}
                   {if isNonnull($itemPrefix) and isNonnull($item[$itemPrefix + $name])}
                     {$item[$itemPrefix + $name]}
                   {elseif isNonnull($item[$name])}
                     {$item[$name]}
                   {/if}
                 {/if}</textarea>
    </td>
  </tr>
{/template}


/**
 * Form input row for a table.
 */
{template .textareaFieldRowWithValue}
  {@param name: ?}  /** Input field name. */
  {@param value: ?}
  {@param? namePrefix: ?}
  {@param? label: ?}  /** Input field label. */
  {@param? readonly: ?}
  <tr>
    <td>
      <label for="{if isNonnull($namePrefix)}{$namePrefix + $name}{else}{$name}{/if}">
        {if isNonnull($label)}
          {$label}
        {else}
          {$name}
        {/if}
      </label>
    </td>
    <td>
      <textarea id="{$name}"
                name="{if isNonnull($namePrefix)}{$namePrefix + $name}{else}{$name}{/if}"
                {if $readonly}
                  readonly
                {/if}
                >{if isNonnull($value) and isNonnull($value['keyValue'])}
                   {$value['keyValue']}
                 {/if}</textarea>
    </td>
  </tr>
{/template}


/**
 * Select control.
 */
{template .selectRow}
  {@param name: ?}  /** Input field name. */
  {@param options: ?}  /** Items listed in the selector. */
  {@param selected: ?}  /** Name of the selected option. */
  {@param? namePrefix: ?}
  {@param? label: ?}  /** Input field label. */
  {@param? readonly: ?}
  {let $forId: isNonnull($namePrefix) ? $namePrefix + $name : $name /}
  <tr>
    <td>
      <label for="{$forId}">
        {if isNonnull($label)}
          {$label}
        {else}
          {$name}
        {/if}
      </label>
    </td>
    <td>
      <select id="{$name}"
              name="{$name}"
              class="{css('kd-button')} {css('reg-select')}"
              {if $readonly}disabled{/if}>
        {for $option in $options}
          <option value="{$option}" {if $selected == $option}selected{/if}>
            {$option}
          </option>
        {/for}
      </select>
    </td>
  </tr>
{/template}


{template .inputRadioWithValue}
  {@param name: ?}
  {@param values: ?}
  {@param? checkedValue: ?}  /** the default checked value. */
<tr>
  <td colspan="2">
    {for $value in $values}
    <input type="radio"
           name="{$name}"
           value="{$value}"
           {if $checkedValue == $value}checked{/if}>
    {/for}
  </td>
</tr>
{/template}


/** Checkbox with label. */
{template .inputCheckboxRow}
  {@param name: string}
  {@param? checked: bool}
  {@param? label: string}
  {@param? description: string}
  <tr>
    <td>
      {call .inputFieldLabel data="all"}
        {param label: $label ? $label : $name /}
        {param forId: $name /}
      {/call}
    </td>
    <td>
      <input id="{$name}"
             type="checkbox"
             name="{$name}"
             value="{$name}"
             {if isNonnull($checked) and $checked}checked{/if}>
    </td>
  </tr>
{/template}


/** Drop-down select button widget. */
{template .menuButton}
  {@param id: string} /** ID for button. */
  {@param selected: string} /** Selected item. */
  {@param items: list<string>} /** Selectable items. */
  <div id="{$id}" class="{css('kd-button')} {css('kd-menubutton')} {css('kd-select')}">
    <span class="{css('label')}">
      {$selected}
    </span>
    <span class="{css('kd-disclosureindicator')}"></span>
    <ul class="{css('kd-menulist')}">
      {for $item in $items}
        <li class="{css('kd-menulistitem')}
                   {if $item == $selected}
                     {sp}{css('selected')}
                   {/if}">
          {$item}
      {/for}
    </ul>
  </div>
{/template}