--- /dev/null
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport"
+ content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+ <meta http-equiv="X-UA-Compatible" content="ie=edge">
+ <meta name="width" content="500">
+ <meta name="height" content="700">
+ <title>YSL Satisfaction Survey</title>
+ <link rel="preconnect" href="https://fonts.googleapis.com">
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+ <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400&display=swap" rel="stylesheet">
+ <style>
+ html {
+ box-sizing: border-box;
+ }
+ *, *:before, *:after {
+ box-sizing: inherit;
+ }
+
+ html, body {
+ height: 100%;
+ }
+
+ body {
+ background-color: #000;
+ color: #fff;
+ margin: 0;
+ padding: 2em;
+ font-family: 'Open Sans', sans-serif;
+ font-weight: 400;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+ label, legend {
+ text-transform: uppercase;
+ display: block;
+ margin-bottom: 0.75em;
+ }
+
+ textarea, select {
+ appearance: none;
+ border: none;
+ font-family: 'Open Sans', sans-serif;
+ width: 100%;
+ border-radius: 4px;
+ outline: none;
+ }
+
+ textarea:focus-visible, select:focus-visible {
+ outline: none;
+ box-shadow: inset 0 0 15px 0 #999;
+ }
+
+ textarea {
+ resize: none;
+ padding: 0.75em;
+ height: 150px;
+ }
+
+ select {
+ background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 9'%3E%3Cg fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M13.9 1.3L7.5 7.7M1.1 1.3l6.4 6.4'/%3E%3C/g%3E%3C/svg%3E") 95% no-repeat;
+ background-size: .8em auto;
+ padding: 1.1em 1em;
+ font-size: 1em;
+ text-transform: uppercase;
+ }
+
+ input[type="submit"] {
+ border: none;
+ border-radius: 4px;
+ background-color: #444;
+ color: #fff;
+ font-size: 1em;
+ font-family: 'Open Sans', sans-serif;
+ text-transform: uppercase;
+ padding: 0.72em 2.5em;
+ cursor: pointer;
+ transition: background-color 0.25s ease-out;
+ outline: none;
+ }
+ input[type="submit"]:hover {
+ background-color: #666;
+ }
+ input[type="submit"]:focus-visible {
+ box-shadow: 0 0 0 2px #989898;
+ }
+
+ .ysl-form {
+ max-width: 425px;
+ margin: 0 auto;
+ flex: 1;
+ }
+
+ .form-footer {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ text-transform: uppercase;
+ }
+ .form-footer > *:last-child {
+ display: flex;
+ justify-content: flex-end;
+ }
+
+ .field {
+ margin-bottom: 1.5em;
+ }
+
+ .rating {
+ font-size: 1em; /* Controls star size */
+ border: none;
+ padding: 0;
+ display: flex;
+ flex-direction: row-reverse;
+ justify-content: flex-end;
+ }
+
+ .rating > input {
+ display: none;
+ }
+
+ .rating > label {
+ cursor: pointer;
+ padding: 0 0.3em;
+ margin-bottom: 0;
+ }
+
+ .rating svg {
+ width: 2.0625em;
+ height: 2.0625em;
+ transition: all 0.3s ease-out;
+ }
+ .rating svg path {
+ fill: inherit;
+ /*stroke: inherit;*/
+ }
+
+ .rating.error {
+ color: red; /* Changes stroke colour of SVG symbol */
+ }
+
+ /***** CSS Magic to Highlight Stars on Hover *****/
+ .rating > input:checked ~ label, /* show filled star when clicked */
+ .rating:not(:checked) > label:hover, /* hover current star */
+ .rating:not(:checked) > label:hover ~ label { /* hover previous stars in list */
+ fill: #fff;
+ color: #fff; /* Changes stroke colour of SVG symbol */
+ }
+
+ .success-message {
+ display: none;
+ font-size: 1.5rem;
+ text-align: center;
+ }
+
+ @media screen and (max-width: 400px) {
+ html {
+ font-size: 14px;
+ }
+ }
+
+ </style>
+
+</head>
+<body>
+
+<!-- Star symbol -->
+<svg xmlns="http://www.w3.org/2000/svg" style="display: none">
+ <symbol id="star" viewBox="0 0 20 20">
+ <path stroke="currentColor" style="stroke-linecap:round;stroke-miterlimit:10;stroke-width:1.2px;" d="M10.58,1.36l2.68,5.3,5.15.51a.65.65,0,0,1,.59.7.63.63,0,0,1-.19.4l-4.24,4.2,1.57,5.71a.65.65,0,0,1-.46.8.67.67,0,0,1-.46-.05L10,16.34,4.78,18.93a.65.65,0,0,1-.87-.29.67.67,0,0,1-.05-.46l1.57-5.71L1.19,8.27a.65.65,0,0,1,0-.91.61.61,0,0,1,.4-.19l5.15-.51,2.67-5.3a.66.66,0,0,1,.89-.29A.61.61,0,0,1,10.58,1.36Z"/>
+ </symbol>
+</svg>
+
+<form class="ysl-form" action="https://workshop.fluidbook.com/services/yslSurvey">
+
+ <fieldset class="rating field">
+ <legend>Rate the content*</legend>
+ <input type="radio" id="star5" name="rating" value="5" /><label class="full" for="star5"><svg><use href="#star" /></svg></label>
+ <input type="radio" id="star4" name="rating" value="4" /><label class="full" for="star4"><svg><use href="#star" /></svg></label>
+ <input type="radio" id="star3" name="rating" value="3" /><label class="full" for="star3"><svg><use href="#star" /></svg></label>
+ <input type="radio" id="star2" name="rating" value="2" /><label class="full" for="star2"><svg><use href="#star" /></svg></label>
+ <input type="radio" id="star1" name="rating" value="1" /><label class="full" for="star1"><svg><use href="#star" /></svg></label>
+ </fieldset>
+
+ <div class="field">
+ <label for="feedback">Feedback / Suggestions</label>
+ <textarea name="feedback" id="feedback"></textarea>
+ </div>
+
+ <div class="field">
+ <label for="country">Your Country</label>
+ <select name="country" id="country">
+ <option value="">(Please Select)</option>
+ <option>France</option>
+ </select>
+ </div>
+
+ <div class="field">
+ <label for="function">Your Function</label>
+ <select name="function" id="function">
+ <option value="">(Please Select)</option>
+ <option>SEO</option>
+ </select>
+ </div>
+
+ <div class="form-footer">
+ <span>* Mandatory Field</span>
+ <input type="submit" value="Send">
+ </div>
+
+</form>
+
+<div class="success-message">
+ Thank you for your feedback!
+</div>
+
+<script>
+ function handleSubmitEvents (e) {
+ const formEl = e.target;
+
+ // Make sure we handle the correct form
+ if (formEl.className.indexOf('ysl-form') < 0) {
+ return
+ }
+ e.preventDefault(); // always prevent default because we only want to send via AJAX
+ submitForm(formEl)
+ }
+
+ function submitForm(form) {
+ const formData = new FormData(form);
+
+ // First, make sure that a rating has been set
+ if (!document.querySelector('input[name="rating"]:checked')) {
+ document.querySelector('.ysl-form .rating').classList.add('error'); // Flag the error for the user
+ return false;
+ }
+
+ // Add the current page, ID and title of the Fluidbook
+ formData.append('Fluidbook_ID', parent.fluidbook?.settings.id);
+ formData.append('title', parent.fluidbook?.settings.title);
+ formData.append('page', parent.fluidbook?.currentPage);
+
+ //console.table([...formData]);
+
+ let request = new XMLHttpRequest();
+ request.onreadystatechange = createRequestHandler(form);
+ request.open('POST', form.action, true);
+ request.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
+ request.send(formData);
+ request = null;
+ }
+
+ function createRequestHandler (formEl) {
+ // const loader = new Loader(formEl);
+ // loader.start();
+
+ return function () {
+ // Is the XHR request complete? https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/readyState
+ if (this.readyState === 4) {
+ let response;
+ //loader.stop();
+
+ if (this.status >= 200 && this.status < 400) {
+
+ try {
+ // response = JSON.parse(this.responseText);
+ response = this.responseText;
+ } catch (error) {
+ console.log('Failed to parse AJAX response.\n\nError: "' + error + '"');
+ return;
+ }
+
+ if (parseInt(response) === 1) {
+
+ // Hide the form
+ document.querySelector('.ysl-form').style.display = 'none';
+
+ // Show success message and close the popup after 2 seconds
+ document.querySelector('.success-message').style.display = 'block';
+ setTimeout(function() { parent.fluidbook.menu.closeView(function(){}, true, true); }, 2000);
+ }
+
+ } else {
+ // Server error :(
+ console.log(this.responseText)
+ }
+ }
+ }
+ }
+
+ function ratingChange(event) {
+ // Clear any validation errors if they existed. Once a radio value is set it can't be unset.
+ document.querySelector('.ysl-form .rating').classList.remove('error');
+ }
+
+ //=============================
+ document.addEventListener('submit', handleSubmitEvents, false);
+ document.querySelectorAll("input[name='rating']").forEach((radio) => {
+ radio.addEventListener('change', ratingChange);
+ });
+</script>
+
+
+</body>
+</html>
projects / Animations.git / commitdiff