Bug 901975 - Implement an event creation confirmation dialog
This commit is contained in:
Christopher De Cairos
Родитель
7c5c567626
Коммит
258a029341
|
|
@ -103,4 +103,26 @@ body#events.map form#create-event {
|
|||
outline: red solid 1px;
|
||||
input { background: #ffeeee; }
|
||||
}
|
||||
.create-event-confirmation {
|
||||
.confirmation-message,
|
||||
.confirmation-link,
|
||||
.confirmation-info {
|
||||
text-align: center;
|
||||
}
|
||||
.confirmation-link,
|
||||
.confirmation-info {
|
||||
font-size: 20px;
|
||||
}
|
||||
.confirmation-message {
|
||||
font-size: 30px;
|
||||
margin-top: 5px;
|
||||
padding-bottom: 25px;
|
||||
}
|
||||
.confirmation-link {
|
||||
padding-bottom: 25px;
|
||||
}
|
||||
.confirmation-info {
|
||||
padding-bottom: 55px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -65,7 +65,9 @@ function ($, EventModel, forms) { return function (mapMaker) {
|
|||
else return true;
|
||||
}, "End date must be after start date.");
|
||||
|
||||
var $createForm = $('form#create-event');
|
||||
var $createForm = $('form#create-event'),
|
||||
$createFormArea = $('form#create-event .create-event-form'),
|
||||
$eventConfirmation = $('form#create-event .create-event-confirmation');
|
||||
$createForm.validate({
|
||||
rules: {
|
||||
title: 'required',
|
||||
|
|
@ -88,7 +90,6 @@ function ($, EventModel, forms) { return function (mapMaker) {
|
|||
});
|
||||
$.post($createForm.attr('action'), data, function (data) {
|
||||
if (data.event) {
|
||||
toggleCreateForm();
|
||||
scroll(0, 0);
|
||||
var evt = new EventModel(data.event);
|
||||
$where.val('');
|
||||
|
|
@ -96,6 +97,7 @@ function ($, EventModel, forms) { return function (mapMaker) {
|
|||
new google.maps.LatLng(evt.latitude, evt.longitude)
|
||||
);
|
||||
mapMaker.addMarker(evt);
|
||||
openEventConfirmation(evt);
|
||||
}
|
||||
}, 'json').error(function (res) {
|
||||
switch (res.status) {
|
||||
|
|
@ -139,10 +141,24 @@ function ($, EventModel, forms) { return function (mapMaker) {
|
|||
forms.setupImageUpload($createForm);
|
||||
forms.setupSelectUI($createForm);
|
||||
|
||||
function openEventConfirmation( event ) {
|
||||
var href = '/events/' + event.id;
|
||||
$createFormArea.toggleClass('hidden');
|
||||
$eventConfirmation.toggleClass('hidden');
|
||||
$('.confirmation-link a')
|
||||
.attr('href', href)
|
||||
.text(window.location.protocol + "//" + window.location.host + href);
|
||||
$('#map-canvas').bind( 'click', function clickCallback() {
|
||||
toggleCreateForm();
|
||||
$('#map-canvas').unbind( 'click', clickCallback );
|
||||
});
|
||||
}
|
||||
// setup form toggle button
|
||||
function toggleCreateForm() {
|
||||
$createForm[0].reset();
|
||||
$createForm.toggleClass('hidden');
|
||||
$createFormArea.removeClass('hidden');
|
||||
$eventConfirmation.addClass('hidden');
|
||||
$(".overlay-buttons").toggleClass('hidden');
|
||||
}
|
||||
$(".expand-form-button").click(function(ev) {
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@
|
|||
{% endif %}
|
||||
</span>
|
||||
</a>
|
||||
<a href="/guides" id="event-guides" class="header">
|
||||
<a href="/event-guides" id="event-guides" class="header">
|
||||
Event Guides
|
||||
<span class="icon-chevron-right"></span>
|
||||
</a>
|
||||
|
|
@ -51,75 +51,81 @@
|
|||
|
||||
<form id="create-event" class="hidden" action="/events" method="POST">
|
||||
<a class="header expand-form-button"><span class="icon-remove"></span> Add an Event</a><br />
|
||||
<fieldset>
|
||||
<label for="event_title"> Name your event </label>
|
||||
<span class="ui-input ui-append">
|
||||
<input id="event_title" name="title" {{ tabIndex() }}
|
||||
placeholder="Use an awesome title so people will come!" /></span>
|
||||
<span class="create-event-form">
|
||||
<fieldset>
|
||||
<label for="event_title"> Name your event </label>
|
||||
<span class="ui-input ui-append">
|
||||
<input id="event_title" name="title" {{ tabIndex() }}
|
||||
placeholder="Use an awesome title so people will come!" /></span>
|
||||
|
||||
<label for="event_description"> Describe your event </label>
|
||||
<textarea id="event_description" name="description" data-provide="markdown" {{ tabIndex() }}
|
||||
placeholder="Tell people a few more details about your event. What can they expect?"></textarea><br />
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label for="event_attendees"> How many attendees are you expecting? </label>
|
||||
<div><select id="event_attendees" name="attendees" {{ tabIndex() }}>
|
||||
<option selected
|
||||
value='5'> <10 </option>
|
||||
<option value='15'> 10-20 </option>
|
||||
<option value='35'> 20-50 </option>
|
||||
<option value='75'> 50-100 </option>
|
||||
<option value='150'> 100-200 </option>
|
||||
<option value='350'> 200-500 </option>
|
||||
<option value=6> 500+ </option>
|
||||
</select></div><br />
|
||||
<label for="event_description"> Describe your event </label>
|
||||
<textarea id="event_description" name="description" data-provide="markdown" {{ tabIndex() }}
|
||||
placeholder="Tell people a few more details about your event. What can they expect?"></textarea><br />
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label for="event_attendees"> How many attendees are you expecting? </label>
|
||||
<div><select id="event_attendees" name="attendees" {{ tabIndex() }}>
|
||||
<option selected
|
||||
value='5'> <10 </option>
|
||||
<option value='15'> 10-20 </option>
|
||||
<option value='35'> 20-50 </option>
|
||||
<option value='75'> 50-100 </option>
|
||||
<option value='150'> 100-200 </option>
|
||||
<option value='350'> 200-500 </option>
|
||||
<option value=6> 500+ </option>
|
||||
</select></div><br />
|
||||
|
||||
<label for="event_address"> Event location </label>
|
||||
<span class="cell ui-input ui-append">
|
||||
<input id="event_address" name="address" type="text" {{ tabIndex() }} />
|
||||
</span>
|
||||
|
||||
<input name="latitude" type="hidden" />
|
||||
<input name="longitude" type="hidden" />
|
||||
|
||||
<label for="event_registerLink"> Event Link </label>
|
||||
<span class="registerLink cell ui-input ui-append">
|
||||
<input id="event_registerLink" name="registerLink" type="url" {{ tabIndex() }}
|
||||
placeholder="Link to registration page" /> </span>
|
||||
|
||||
{% for i in ['begin','end'] %}
|
||||
<label for="event_{{i}}Date"> Event {{i}}s </label>
|
||||
<div class='datetime'>
|
||||
<span class="ui-append ui-select ui-input select-date">
|
||||
<span class="icon-calendar"></span>
|
||||
<input id="event_{{i}}Date" name="{{i}}Date" type="text" class="datepicker" {{ tabIndex() }}
|
||||
placeholder="--/--/--" />
|
||||
<a class="icon icon-chevron-down"></a>
|
||||
<label for="event_address"> Event location </label>
|
||||
<span class="cell ui-input ui-append">
|
||||
<input id="event_address" name="address" type="text" {{ tabIndex() }} />
|
||||
</span>
|
||||
<label class="switch"></label>
|
||||
<span class="ui-append ui-select ui-input select-time">
|
||||
<input name="{{i}}Time" type="text" class="timepicker" {{ tabIndex() }}
|
||||
placeholder="--:-- --" />
|
||||
<a class="icon icon-chevron-down"></a>
|
||||
</span>
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
<div class="upload">
|
||||
<input type="file" accept="image/*" />
|
||||
<input name="picture" type="hidden" />
|
||||
<div id="image-upload">Upload an image</div>
|
||||
</div>
|
||||
<input name="_csrf" type="hidden" value="{{ csrf }}" />
|
||||
<input name="latitude" type="hidden" />
|
||||
<input name="longitude" type="hidden" />
|
||||
|
||||
<button type="submit" data-disable-with="Submitting...">
|
||||
Submit your event
|
||||
<span class="icon-chevron-right"></span>
|
||||
</button>
|
||||
</fieldset>
|
||||
<label for="event_registerLink"> Event Link </label>
|
||||
<span class="registerLink cell ui-input ui-append">
|
||||
<input id="event_registerLink" name="registerLink" type="url" {{ tabIndex() }}
|
||||
placeholder="Link to registration page" /> </span>
|
||||
|
||||
{% for i in ['begin','end'] %}
|
||||
<label for="event_{{i}}Date"> Event {{i}}s </label>
|
||||
<div class='datetime'>
|
||||
<span class="ui-append ui-select ui-input select-date">
|
||||
<span class="icon-calendar"></span>
|
||||
<input id="event_{{i}}Date" name="{{i}}Date" type="text" class="datepicker" {{ tabIndex() }}
|
||||
placeholder="--/--/--" />
|
||||
<a class="icon icon-chevron-down"></a>
|
||||
</span>
|
||||
<label class="switch"></label>
|
||||
<span class="ui-append ui-select ui-input select-time">
|
||||
<input name="{{i}}Time" type="text" class="timepicker" {{ tabIndex() }}
|
||||
placeholder="--:-- --" />
|
||||
<a class="icon icon-chevron-down"></a>
|
||||
</span>
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
<div class="upload">
|
||||
<input type="file" accept="image/*" />
|
||||
<input name="picture" type="hidden" />
|
||||
<div id="image-upload">Upload an image</div>
|
||||
</div>
|
||||
<input name="_csrf" type="hidden" value="{{ csrf }}" />
|
||||
|
||||
<button type="submit" data-disable-with="Submitting...">
|
||||
Submit your event
|
||||
<span class="icon-chevron-right"></span>
|
||||
</button>
|
||||
</fieldset>
|
||||
</span>
|
||||
<span class="create-event-confirmation hidden">
|
||||
<div class="confirmation-message">Thank you! Your event has been added.</div>
|
||||
<div class="confirmation-link">Check out your page: <a href=""></a></div>
|
||||
<div class="confirmation-info">Looking for help on next steps? Check out our handy <a href="/event-guides">event guides</a>.</div>
|
||||
</span>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div id="map-canvas"></div>
|
||||
|
||||
{% endblock %}
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче