Skip to content

34: Fooled around … #35

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 1 commit into
base: feature/svelte
Choose a base branch
from
Draft

34: Fooled around … #35

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions build/standalone/assets/tidy_feedback.css
View file
Open in desktop

Large diffs are not rendered by default.

6 changes: 3 additions & 3 deletions build/standalone/tidy_feedback.min.js
View file
Open in desktop

Large diffs are not rendered by default.

78 changes: 39 additions & 39 deletions templates/test.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,48 +1,48 @@
{% extends 'base.html.twig' %}

{% block title 'Tidy feedback test'|trans %}

{% block content %}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{% block title 'Tidy feedback test'|trans %}</title>
<style>
button {
[type="button"] {
outline: dotted 10px orange;
}
</style>

<button>x</button>

<h1>{{ block('title') }}</h1>

<p>This is a <strong>tset</strong>!</p>

{% for i in range(1, 99) %}
<section>
<header><h2>Section {{ i }}</h2></header>

<p></p>
</section>
{% endfor %}

{#
<style>
.tidy-feedback-region {
left: 100px;
top: 100px;

width: 20em;
height: 5em;

padding: 1em;
p {
color: green;
}
</style>

<div class="tidy-feedback-select-region">
<div class="tidy-feedback-region">
This is a fake region …
{% for s in ['nw', 'ne', 'sw', 'se'] %}
<div class="handle handle-{{ s }}"></div>
</head>
<body>
{% block nav %}
{% endblock %}
{% block main %}
<div class="container-fluid">
{% block content %}
<h1>{{ block('title') }}</h1>

<p>
This is a <strong>tset</strong>!
<button type="button" class="btn" >x</button>
</p>

{% for i in range(1, 9) %}
<section>
<header><h2>Section {{ i }}</h2></header>

<p>
<a href="https://www.lipsum.com">Lorem ipsum</a> dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</section>
{% endfor %}
</div>
{% endblock %}
</div>
#}
{% endblock %}

{% block javascripts %}
xxx <script src="{{ path('tidy_feedback_asset', {asset: 'app.js'}) }}"></script>
{% endblock %}

</body>
</html>
56 changes: 36 additions & 20 deletions templates/widget.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,38 +16,54 @@
Cancelled: 'Cancelled'|trans,
Feedback: 'Feedback'|trans,
} %}
{% set config = {
messages: messages,
} %}

<template id="tidy_feedback_form" data-tidy-feedback-config="{{ config|json_encode }}">
<form class="tidy-feedback-form-elements" action="{{ path('tidy_feedback_create') }}" method="post">
<h1 class="tidy-feedback-form-title">{{ 'Your feedback'|trans }}</h1>
<p class="tidy-feedback-form-lead">{{ 'Highlight the relevant part of the page and fill in the form to send us your feedback'|trans }}</p>

{# "subject" is required and all other inputs with be stored in the data blob on the feedback item. #}
{{ forms.input('subject', 'Subject'|trans, {
{% set form = {
action: path('tidy_feedback_create'),
title: 'Your feedback'|trans,
lead: 'Highlight the relevant part of the page and fill in the form to send us your feedback'|trans,
fields: [
{
name: 'subject',
label: 'Subject'|trans,
placeholder: 'Subject'|trans,
value: default_values['subject']|default(''),
}) }}
},

{{ forms.input('created_by', 'Your email address'|trans, {
{
name: 'created_by',
label: 'Your email address'|trans,
type: 'email',
placeholder: 'Your email address'|trans,
value: default_values['email']|default(''),
readonly: default_values['email'] is defined,
}) }}
},

{{ forms.textarea('description', 'Description'|trans, {
{
name: 'description',
label: 'Description'|trans,
type: 'textarea',
placeholder: 'Description'|trans,
value: default_values['description']|default(''),
}) }}
{{ forms.textarea('what_did_you_do', 'What did you do?'|trans, {
},

{
name: 'what_did_you_do',
label: 'What did you do?'|trans,
type: 'textarea',
placeholder: 'What did you do?'|trans,
required: false,
value: default_values['what_did_you_do']|default(''),
}) }}
</form>
</template>
},

],
} %}
{% set config = {
messages: messages,
form: form,
} %}

<div id="tidy_feedback_widget" data-tidy-feedback-config="{{ config|json_encode }}">

{# "subject" is required and all other inputs with be stored in the data blob on the feedback item. #}
<style {{ capture_exclude_attributes|raw }}>@import {{ path('tidy_feedback_asset', {asset: 'standalone/assets/tidy_feedback.css'})|json_encode(constant('JSON_UNESCAPED_SLASHES'))|raw }}</style>
<script {{ capture_exclude_attributes|raw }} src="{{ path('tidy_feedback_asset', {asset: 'standalone/tidy_feedback.min.js'}) }}"></script>
</div>
69 changes: 57 additions & 12 deletions widget/src/_standalone/tidy_feedback/index.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
<script lang="ts">
import { snapdom } from '@zumer/snapdom';
import { onMount } from 'svelte';
import './styles/widget.scss';
import './styles/widget-region.scss';

// https://coreui.io/bootstrap/docs/getting-started/vite/#import-coreui

import { makeResizableDiv } from './component/region';
import { makeDraggable } from './component/draggable';
import Alert from '@coreui/coreui/js/src/alert';

const config = (() => {
const el = document.querySelector('[data-tidy-feedback-config]');
Expand Down Expand Up @@ -157,12 +158,8 @@
};

$effect(() => {
// Notice: It's important not to clone the form element. If it's cloned form validation (via form.reportValidity) breaks.
form = document.getElementById('tidy_feedback_form').content?.firstElementChild;
form = document.getElementById('the_tidy_feedback_form');
if (form) {
const placeholder = formContainer.querySelector('.form-placeholder');
placeholder.parentNode.replaceChild(form, placeholder);

makeDraggable(formContainer, '.tidy-feedback-draggable-handle', {
constrainToViewport: true
});
Expand All @@ -179,7 +176,7 @@
for (const [key, value] of params.entries()) {
const match = regexp.exec(key);
if (match) {
const el = form.elements[match[1]];
const el = form.elements[match[1]] ?? null;
if (el) {
// @todo Handle non-text elements
el.value = value;
Expand All @@ -196,7 +193,7 @@
});
</script>

<div data-capture="exclude">
<div data-capture="exclude" class="tidy-feedback-container">
{#if message}
<div class="tidy-feedback-message-wrapper container position-fixed top-0">
<row class="row">
Expand Down Expand Up @@ -236,10 +233,53 @@
<span></span>
</div>

<div class="form-placeholder"></div>
<form
class="x-tidy-feedback-form"
action={config.form.action ?? '/tidy_feedback'}
method="post"
id="the_tidy_feedback_form"
>
{#if config.form}
{#if config.form.title}
<h1 class="tidy-feedback-form-title">{config.form.title}</h1>
{/if}
{#if config.form.lead}
<p class="tidy-feedback-form-lead">{config.form.lead}</p>
{/if}
{#if config.form.fields}
{#each config.form.fields as field}
{#if field.type == 'textarea'}
<div class={['form-row', 'mb-3', { required: field.required }]}>
<label for={field.name} class="form-label">{field.label}</label>
<textarea
name={field.name}
id={field.name}
class="form-control"
required={field.required}
placeholder={field.placeholder}>{field.value ?? ''}</textarea
>
</div>
{:else}
<div class={['form-row', 'mb-3', { required: field.required }]}>
<label for={field.name} class="form-label">{field.label}</label>
<input
type={field.type ?? 'text'}
name={field.name}
id={field.name}
class="form-control"
required={field.required}
placeholder={field.placeholder}
value={field.value ?? ''}
/>
</div>
{/if}
{/each}
{/if}

<button class="btn btn-submit" onclick={submitForm}>{t('Send feedback')}</button>
<button class="btn btn-cancel" onclick={cancelForm}>{t('Cancel')}</button>
<button class="btn btn-submit" onclick={submitForm}>{t('Send feedback')}</button>
<button class="btn btn-cancel" onclick={cancelForm} type="button">{t('Cancel')}</button>
{/if}
</form>
</div>

<div id="tidy-feedback-region" hidden={regionHidden} bind:this={region}>
Expand All @@ -258,3 +298,8 @@
</div>
</div>
</div>

<style>
@import './styles/widget.scss';
@import './styles/widget-region.scss';
</style>
7 changes: 7 additions & 0 deletions widget/src/_standalone/tidy_feedback/styles/widget.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,13 @@
@use './variables';
@use './btn';

.tidy-feedback-container {
font-family: var(--bs-body-font-family);
font-size: var(--bs-body-font-size);
font-weight: var(--bs-body-font-weight);
line-height: var(--bs-body-line-height);
}

.tidy-feedback-start {
position: fixed;
top: var(--position-top);
Expand Down
Loading
Loading