Form: Edit Notifications

Prototype

HTML
View
Context
Info
Notes


        
        <!-- form -->

<script async defer src="https://maps.googleapis.com/maps/api/js?sensor=false&callback=initMap"></script>
<script>
    let map, infoWindow;

    function initMap() {
        map = new google.maps.Map(document.getElementById("mapCanvas"), {
            center: {
                lat: 41.9028,
                lng: 12.4964
            },
            zoom: 5,
        });
    }

    function getLocation() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(
                (position) => {
                    const pos = {
                        lat: position.coords.latitude,
                        lng: position.coords.longitude,
                    };

                    function HTMLMarker(lat, lng) {
                        this.lat = lat;
                        this.lng = lng;
                        this.pos = new google.maps.LatLng(lat, lng);
                    }
                    HTMLMarker.prototype = new google.maps.OverlayView();
                    HTMLMarker.prototype.onRemove = function() {}
                    //init your html element here
                    HTMLMarker.prototype.onAdd = function() {
                        div = document.createElement('DIV');
                        div.className = "marker-pin";
                        // div.innerHTML = "<img src='' alt=''>";
                        var panes = this.getPanes();
                        panes.overlayImage.appendChild(div);
                    }
                    HTMLMarker.prototype.draw = function() {
                        var overlayProjection = this.getProjection();
                        var position = overlayProjection.fromLatLngToDivPixel(this.pos);
                        var panes = this.getPanes();
                        panes.overlayImage.style.left = position.x + 'px';
                        panes.overlayImage.style.top = position.y - 30 + 'px';
                    }
                    var htmlMarker = new HTMLMarker(this.lat, this.lng);
                    htmlMarker.setMap(map);
                    map.setCenter(pos);
                    map.setZoom(16);
                },
                () => {
                    handleLocationError(true, infoWindow, map.getCenter());
                }
            );
        } else {
            handleLocationError(false, infoWindow, map.getCenter());
        }
    }

    function handleLocationError(browserHasGeolocation, infoWindow, pos) {
        infoWindow.setPosition(pos);
        infoWindow.setContent(
            browserHasGeolocation ?
            "Error: The Geolocation service failed." :
            "Error: Your browser doesn't support geolocation."
        );
        infoWindow.open(map);
    }
    var toggleLocation = document.getElementById("findLocation");
    if (toggleLocation.addEventListener) toggleLocation.addEventListener("click", getLocation, false);
    else if (el.attachEvent) toggleLocation.attachEvent('onclick', getLocation);
</script>


        {% set prevStepForLabel = 'sidebar-form-radio' %}

<!-- form -->
{% for item in userSettingsSections %}
	{% if item.slug == "notificationsSettings" %}
	<!-- fildset-->
	<input {% if item.slug=='notificationsSettings' %}checked{% endif %} type="radio" value="{{item.slug}}" id="radio-{{item.slug}}" class="u-none" name="c-tabs__choice">
	<div class="c-tab__content u-size-full u-pl-base u-pr-base u-pl-large@md u-pr-large@md">
		<form id="{{item.slug}}-form" class="fw__wrapper" onsubmit="window.ga && ga( 'send', 'event', 'Community');" method="post"novalidate>
			<div class="u-mb-large u-block u-none@md">
				{% render "@stepcontrols", {
					submitForm: 'FALSE',
					actionLabel: actionLabel,
					prevStep: 'FALSE',
					prevStepIndex: 'TRUE',
					prevStepForLabel: prevStepForLabel,
					nextStep: 'FALSE',
					skipStep: 'FALSE',
					backLabel:'← Indietro',
					nextLabel:'Avanti →',
					mode: mode,
					type: type,
					slug: item.slug
				}, true %}
			</div>
			<fieldset data-toggle="{{type}}-fw__step" class="fw__inputs o-divider {{type}}-fw__step u-pl-none u-pr-none u-mb-medium">
				<div class="u-mb-xlarge u-mt-large">
					<h2 class="u-heading-03 u-mb-small u-text-center u-text-left@md">{{ item.title }}</h2>
					<p class="u-color-secondary u-my-none u-text-center u-text-left@md">{{ item.subtitle }}</p>
				</div>
				<div class="u-mb-base">
					{% render "@switch", {label:'Voglio ricevere una notifica locali'}, true %}
				</div>
				<div class="u-mb-base">
					{% render "@switch", {label:'Voglio ricevere le notifiche e-mail'}, true %}
				</div>
				<div class="u-mb-base">
					{% render "@switch", {label:'Voglio ricevere le notifiche push'}, true %}
				</div>
				<div class="u-mt-large">
					{% render "@stepcontrols", {
						toggleVisibilityClass:'u-none@md',
						submitForm: 'TRUE',
						actionLabel: actionLabel,
						prevStep: 'FALSE',
						prevStepIndex: 'TRUE',
						prevStepForLabel: prevStepForLabel,
						skipStep: 'FALSE',
						backLabel:'← Indietro',
						nextLabel:'Avanti →',
						mode: mode,
						type: type,
						slug: item.slug
					}, true %}
				</div>
			</fieldset>
		</form>
	</div>
	<!-- end fildset -->
	{% endif %}
{% endfor %}

<script async defer src="https://maps.googleapis.com/maps/api/js?sensor=false&callback=initMap"></script>
<script>

	let map, infoWindow;

	function initMap() {
		map = new google.maps.Map(document.getElementById("mapCanvas"), {
			center: {
				lat: 41.9028,
				lng: 12.4964
			},
			zoom: 5,
		});
		
	}

	function getLocation() {
		if (navigator.geolocation) {
			navigator.geolocation.getCurrentPosition(
				(position) => {
					const pos = {
						lat: position.coords.latitude,
						lng: position.coords.longitude,
					};

					function HTMLMarker(lat,lng){
							this.lat = lat;
							this.lng = lng;
							this.pos = new google.maps.LatLng(lat,lng);
					}
					
					HTMLMarker.prototype = new google.maps.OverlayView();
    			HTMLMarker.prototype.onRemove= function(){}

					 //init your html element here
					HTMLMarker.prototype.onAdd= function(){
							div = document.createElement('DIV');
							div.className = "marker-pin";
							// div.innerHTML = "<img src='' alt=''>";
							var panes = this.getPanes();
							panes.overlayImage.appendChild(div);
					}

					HTMLMarker.prototype.draw = function(){
							var overlayProjection = this.getProjection();
							var position = overlayProjection.fromLatLngToDivPixel(this.pos);
							var panes = this.getPanes();
							panes.overlayImage.style.left = position.x + 'px';
							panes.overlayImage.style.top = position.y - 30 + 'px';
					}

					var htmlMarker = new HTMLMarker(this.lat, this.lng);
					htmlMarker.setMap(map);

					map.setCenter(pos);
					map.setZoom(16);
				},
				() => {
					handleLocationError(true, infoWindow, map.getCenter());
				}
			);
		} else {
			handleLocationError(false, infoWindow, map.getCenter());
		}
	}

	function handleLocationError(browserHasGeolocation, infoWindow, pos) {
		infoWindow.setPosition(pos);
		infoWindow.setContent(
			browserHasGeolocation ?
			"Error: The Geolocation service failed." :
			"Error: Your browser doesn't support geolocation."
		);
		infoWindow.open(map);
	}

	var toggleLocation = document.getElementById("findLocation");

	if (toggleLocation.addEventListener) toggleLocation.addEventListener("click", getLocation, false);
	else if (el.attachEvent) toggleLocation.attachEvent('onclick', getLocation);

</script>


        
            
            {
  "limit": 9,
  "stories": [
    {
      "index": 1,
      "title": "Coronavirus, la fase 2 tra sicurezza e libertà: tutte le idee per ripartire",
      "label": "Emergenza Coronavirus",
      "date": "ieri pomeriggio, 15:51",
      "author": "Violetto Gorrasi",
      "number": 1,
      "summary": "\"Ieri ci sono stati più di 500 morti e i casi totali sono ancora tanti\", dice Giovanni Rezza, direttore del Dipartimento malattie infettive. La richiesta della regione Lombardia di riaprire le attività produttive il 4 maggio ha preso in contropiede il governo",
      "media": {
        "horizontal": "https://citynews-today.stgy.ovh/~media/horizontal-mid/51380415156697/coronavirus-ansa-4-2-2.jpg",
        "vertical": "https://citynews-today.stgy.ovh/~media/vertical-hi/51380415156697/coronavirus-ansa-4-2-2.jpg",
        "square": "https://citynews-romatoday.stgy.ovh/~media/square-hi/55989804286522/una-signora-con-il-carrello-della-spesa-al-mercato-plateatico-coperto-laurentino.jpg"
      }
    },
    {
      "index": 2,
      "title": "Casa di riposo degli orrori: anziani legati e bastonati. Le immagini shock",
      "label": "Sei arresti",
      "date": "ieri pomeriggio, 15:51",
      "author": "Matteo Scarlino",
      "number": 2,
      "summary": "\"Ieri ci sono stati più di 500 morti e i casi totali sono ancora tanti\", dice Giovanni Rezza, direttore del Dipartimento malattie infettive. La richiesta della regione Lombardia di riaprire le attività produttive il 4 maggio ha preso in contropiede il governo",
      "media": {
        "horizontal": "https://citynews-today.stgy.ovh/~media/horizontal-mid/19878683460037/casa-di-riposo-palermo-ansa-2.jpg",
        "vertical": "https://citynews-today.stgy.ovh/~media/vertical-hi/19878683460037/casa-di-riposo-palermo-ansa-2.jpg",
        "square": "https://citynews-romatoday.stgy.ovh/~media/square-hi/55989804286522/una-signora-con-il-carrello-della-spesa-al-mercato-plateatico-coperto-laurentino.jpg"
      }
    },
    {
      "index": 3,
      "title": "Coronavirus, negli Usa 2.500 morti in un giorno ma Trump \"ha fretta\" di riaprire",
      "label": "Esteri",
      "date": "ieri pomeriggio, 15:51",
      "author": "Fabio Grilli",
      "number": 3,
      "summary": "\"Ieri ci sono stati più di 500 morti e i casi totali sono ancora tanti\", dice Giovanni Rezza, direttore del Dipartimento malattie infettive. La richiesta della regione Lombardia di riaprire le attività produttive il 4 maggio ha preso in contropiede il governo",
      "media": {
        "horizontal": "https://citynews-today.stgy.ovh/~media/horizontal-mid/31908412136750/donald-trump-coronavirus-ansa-2.jpg",
        "vertical": "https://citynews-today.stgy.ovh/~media/vertical-hi/31908412136750/donald-trump-coronavirus-ansa-2.jpg",
        "square": "https://citynews-romatoday.stgy.ovh/~media/square-hi/55989804286522/una-signora-con-il-carrello-della-spesa-al-mercato-plateatico-coperto-laurentino.jpg"
      }
    },
    {
      "index": 4,
      "title": "Turismo e coronavirus, quali località più colpite nell'estate 2020",
      "label": "Lo studio del Touring Club italiano",
      "date": "ieri pomeriggio, 15:51",
      "author": "Ginevra Nozzoli",
      "number": 4,
      "summary": "Dramma nella piscina comunale a Brescia, in Via Rodi. Un bambino di 7 anni, Ansh S., è annegato. Le urla della mamma hanno allertato il bagnino, ma non c'è stato nulla da fare",
      "media": {
        "horizontal": "https://citynews-today.stgy.ovh/~media/horizontal-low/2304174717311/turismo-crisi-ansa-milano-2.jpg",
        "vertical": "https://citynews-today.stgy.ovh/~media/vertical-hi/2304174717311/turismo-crisi-ansa-milano-2.jpg",
        "square": "https://citynews-romatoday.stgy.ovh/~media/square-hi/55989804286522/una-signora-con-il-carrello-della-spesa-al-mercato-plateatico-coperto-laurentino.jpg"
      }
    },
    {
      "index": 5,
      "title": "Turismo e coronavirus, quali località più colpite nell'estate 2020",
      "label": "Lo studio del Touring Club italiano",
      "date": "ieri pomeriggio, 15:51",
      "author": "Veronica Altimari",
      "number": 5,
      "summary": "Dramma nella piscina comunale a Brescia, in Via Rodi. Un bambino di 7 anni, Ansh S., è annegato. Le urla della mamma hanno allertato il bagnino, ma non c'è stato nulla da fare",
      "media": {
        "horizontal": "https://citynews-today.stgy.ovh/~media/horizontal-low/2304174717311/turismo-crisi-ansa-milano-2.jpg",
        "vertical": "https://citynews-today.stgy.ovh/~media/vertical-hi/2304174717311/turismo-crisi-ansa-milano-2.jpg",
        "square": "https://citynews-romatoday.stgy.ovh/~media/square-hi/55989804286522/una-signora-con-il-carrello-della-spesa-al-mercato-plateatico-coperto-laurentino.jpg"
      }
    },
    {
      "index": 6,
      "title": "Turismo e coronavirus, quali località più colpite nell'estate 2020",
      "label": "Lo studio del Touring Club italiano",
      "date": "ieri pomeriggio, 15:51",
      "author": "Alberto Berlini",
      "number": 6,
      "summary": "Dramma nella piscina comunale a Brescia, in Via Rodi. Un bambino di 7 anni, Ansh S., è annegato. Le urla della mamma hanno allertato il bagnino, ma non c'è stato nulla da fare",
      "media": {
        "horizontal": "https://citynews-today.stgy.ovh/~media/horizontal-low/2304174717311/turismo-crisi-ansa-milano-2.jpg",
        "vertical": "https://citynews-today.stgy.ovh/~media/vertical-hi/2304174717311/turismo-crisi-ansa-milano-2.jpg",
        "square": "https://citynews-romatoday.stgy.ovh/~media/square-hi/55989804286522/una-signora-con-il-carrello-della-spesa-al-mercato-plateatico-coperto-laurentino.jpg"
      }
    },
    {
      "index": 7,
      "title": "Turismo e coronavirus, quali località più colpite nell'estate 2020",
      "label": "Lo studio del Touring Club italiano",
      "date": "ieri pomeriggio, 15:51",
      "author": "Ginevra Nozzoli",
      "number": 7,
      "summary": "Dramma nella piscina comunale a Brescia, in Via Rodi. Un bambino di 7 anni, Ansh S., è annegato. Le urla della mamma hanno allertato il bagnino, ma non c'è stato nulla da fare",
      "media": {
        "horizontal": "https://citynews-today.stgy.ovh/~media/horizontal-low/2304174717311/turismo-crisi-ansa-milano-2.jpg",
        "vertical": "https://citynews-today.stgy.ovh/~media/vertical-hi/2304174717311/turismo-crisi-ansa-milano-2.jpg",
        "square": "https://citynews-romatoday.stgy.ovh/~media/square-hi/55989804286522/una-signora-con-il-carrello-della-spesa-al-mercato-plateatico-coperto-laurentino.jpg"
      }
    },
    {
      "index": 8,
      "title": "Muore annegato nella piscina comunale il giorno prima di compiere 7 anni",
      "label": "Lo studio del Touring Club italiano",
      "date": "ieri pomeriggio, 15:51",
      "author": "Fabio Grilli",
      "number": 8,
      "summary": "Dramma nella piscina comunale a Brescia, in Via Rodi. Un bambino di 7 anni, Ansh S., è annegato. Le urla della mamma hanno allertato il bagnino, ma non c'è stato nulla da fare",
      "media": {
        "horizontal": "https://citynews-today.stgy.ovh/~media/horizontal-mid/65846868204321/pisicina-comunale-ansa-archivio-2.jpg",
        "vertical": "https://citynews-today.stgy.ovh/~media/vertical-hi/65846868204321/pisicina-comunale-ansa-archivio-2.jpg",
        "square": "https://citynews-romatoday.stgy.ovh/~media/square-hi/55989804286522/una-signora-con-il-carrello-della-spesa-al-mercato-plateatico-coperto-laurentino.jpg"
      }
    },
    {
      "index": 9,
      "title": "Riceve il reddito di cittadinanza, ma ha 40 case e percepisce 120mila euro d'affitto",
      "label": "Economia",
      "date": "ieri pomeriggio, 15:51",
      "author": "Fabio Grilli",
      "number": 9,
      "summary": "L'uomo è stato denunciato dalla Guardia di finanza a Lanciano, in provincia di Chieti. Gli immobili affittati, oltre quindici, secondo le Fiamme Gialle rendevano alla famiglia del beneficiario del sussidio oltre 120mila euro all'anno",
      "media": {
        "horizontal": "https://citynews-today.stgy.ovh/~media/horizontal-mid/56625536121153/evasione-fiscale-controlli-finanza-ansa-2.jpg",
        "vertical": "https://citynews-today.stgy.ovh/~media/vertical-hi/56625536121153/evasione-fiscale-controlli-finanza-ansa-2.jpg",
        "square": "https://citynews-romatoday.stgy.ovh/~media/square-hi/55989804286522/una-signora-con-il-carrello-della-spesa-al-mercato-plateatico-coperto-laurentino.jpg"
      }
    }
  ],
  "opinions": [
    {
      "title": "Caso Dentix: quali tutele per i pazienti delle cliniche dentali",
      "date": "17 luglio, 2020",
      "author": "Carlo Sala"
    },
    {
      "title": "Caso Dentix: quali tutele per i pazienti delle cliniche dentali",
      "date": "12 luglio, 2020",
      "author": "Massimiliano Dona"
    },
    {
      "title": "Caso Dentix: quali tutele per i pazienti delle cliniche dentali",
      "date": "30 giugno, 2020",
      "author": "Luciano Lanna"
    },
    {
      "title": "Caso Dentix: quali tutele per i pazienti delle cliniche dentali",
      "date": "05 giugno, 2020",
      "author": "Marilia Parente"
    },
    {
      "title": "Caso Dentix: quali tutele per i pazienti delle cliniche dentali",
      "date": "27 maggio, 2020",
      "author": "Dario Balotta"
    },
    {
      "title": "Caso Dentix: quali tutele per i pazienti delle cliniche dentali",
      "date": "13 aprile, 2020",
      "author": "Rossella Lamina"
    },
    {
      "title": "Caso Dentix: quali tutele per i pazienti delle cliniche dentali",
      "date": "11 aprile, 2020",
      "author": "Dario Balotta"
    },
    {
      "title": "Caso Dentix: quali tutele per i pazienti delle cliniche dentali",
      "date": "04 marzo, 2020",
      "author": "Luciano Lanna"
    },
    {
      "title": "Caso Dentix: quali tutele per i pazienti delle cliniche dentali",
      "date": "18 febbraio, 2020",
      "author": "Dario Balotta"
    },
    {
      "title": "Caso Dentix: quali tutele per i pazienti delle cliniche dentali",
      "date": "01 febbraio, 2020",
      "author": "Rossella Lamina"
    },
    {
      "title": "Caso Dentix: quali tutele per i pazienti delle cliniche dentali",
      "date": "25 gennaio, 2020",
      "author": "Dario Balotta"
    },
    {
      "title": "Caso Dentix: quali tutele per i pazienti delle cliniche dentali",
      "date": "05 gennaio, 2020",
      "author": "Luciano Lanna"
    }
  ],
  "googlePlayStoreImg": "/assets/images/site/app/google_play_store.svg",
  "iosAppStoreImg": "/assets/images/site/app/ios_app_store.svg",
  "type": "edit-notifications",
  "steps": 4,
  "switchPrivacy": "Ho letto <a>fgddg</a>",
  "switchPersonalData": "Acconsento <a>fgddg</a>",
  "succededImg": "/assets/images/site/illustrations/end_wizard_user-min.svg"
}

Handle: @form--edit-notifications
Variants (20): Default , Avatar , Login , Logout , Delete , Recovery , Activate , Signup , Buysignup , Buysignupshort , Signup Social , Edit , Edit Profile , Edit Subscriptions , Edit Payments , Edit Arguments , Edit Notifications , Lead , Buy , Subscription
Preview:
- With layout
- Component only
Filesystem Path: src/lib/templates/form/form--edit-notifications.njk
References (2): @stepcontrols, @switch
Referenced by (1): @notifications

Forms templates

Items templates are used to display forms.

Parameters

type - toggle input email/phone, accepted values: login, logout, recovery, delete, activate, signup, edit, lead
mode - toggle input email/phone, accepted values: email, phone, social, user,
zoneRequired - toggle required zone fieldset, accepted values: bolean

Variants

Default - Unused
Login - Used for login form
Logout - Used for logout form
Delete - Used for delete account
Recovery - Used for recovery credentials
Activate - Used for activate account
Signup - Used for new account registration
Edit - Used for edit user profile
Lead - Used for marketing lead generation