Pinecone

Dialog: Dialog With Input 

<div class="spacer"></div><button id="invoke-dialog" type="button" class="button button--borderless"><svg class="icon icon--save" aria-hidden="true" viewBox="0 0 20 20" focusable="false">
        <use href="/images/save.svg#save" />
    </svg>
    <span class="button__label">Save search</span></button>
<script defer>
    const dialogBtn = document.getElementById('invoke-dialog');
    if (dialogBtn) {
        new Pinecone.Dialog(dialogBtn, {
            title: "Save search",
            question: "Do you want to add these search results to your saved searches?",
            input: "label",
            inputLabel: "Saved Search Label",
            inputDescription: "Enter a label for these search results so you can identify them later.",
            confirm: "Yes, save",
            dismiss: "No, don&rsquo;t save"
        });
    }
</script>
 
{% if not standAlone %}<div class="spacer"></div>{% endif %}
{% render '@button--borderless', {label: buttonLabel, id: 'invoke-dialog', icon: buttonIcon, iconPosition: 'start', standAlone: true}, true %}
<script defer>
	const dialogBtn = document.getElementById( 'invoke-dialog' );
	if ( dialogBtn ) {
		new Pinecone.Dialog( dialogBtn, {
			title: "{{ dialogTitle | safe }}",
			question: "{{ dialogQuestion | safe }}",
			{% if dialogInput %}
			input: "{{ dialogInput }}",
			{% endif %}
			{% if dialogInputLabel %}
			inputLabel: "{{ dialogInputLabel | safe }}",
			{% endif %}
			{% if dialogInputDescription %}
			inputDescription: "{{ dialogInputDescription | safe }}",
			{% endif %}
			confirm: "{{ dialogConfirm | safe }}",
			dismiss: "{{ dialogDismiss | safe }}"
		} );
	}
</script>
 
{
  "buttonIcon": "save",
  "buttonLabel": "Save search",
  "dialogTitle": "Save search",
  "dialogQuestion": "Do you want to add these search results to your saved searches?",
  "dialogConfirm": "Yes, save",
  "dialogDismiss": "No, don&rsquo;t save",
  "dialogInput": "label",
  "dialogInputLabel": "Saved Search Label",
  "dialogInputDescription": "Enter a label for these search results so you can identify them later."
}

There are no notes for this item.