Skip to content

Commit

Permalink
change location name to venue name, with button. add progressbar when…
Browse files Browse the repository at this point in the history 
… searching venue. add new form for add location.
  • Loading branch information
@swznd
swznd committed Jan 2, 2013
1 parent d38d073 commit f1f47a4
Show file tree
Hide file tree
Showing 2 changed files with 98 additions and 35 deletions.
89 changes: 61 additions & 28 deletions index.html
View file
Expand Up @@ -8,6 +8,8 @@
<link rel="stylesheet" href="shared/style_unstable/lists.css">
<link rel="stylesheet" href="shared/style_unstable/tabs.css">
<link rel="stylesheet" href="shared/style/input_areas.css">
<link rel="stylesheet" href="shared/style_unstable/progress_activity.css">
<link rel="stylesheet" href="shared/style/buttons.css">
<link rel="stylesheet" href="style/fonts.css">
<link rel="stylesheet" href="style/icons.css">
<link rel="stylesheet" href="style/app.css">
Expand Down Expand Up @@ -78,14 +80,23 @@ <h1>Add Event</h1>
<article class="body full padding">
<div class="inner">
<form id="event-form" action="#" class="full">
<p>
<input data-cancelable placeholder="Event Name" name="name" class="textfield" type="text" x-inputmode="latin-prose" value="" id="name" required="required">
<button type="reset">Clear</button>
</p>
<p>
<textarea placeholder="Description" required="required"></textarea>
<button type="reset">Clear</button>
</p>
<p>
<input data-cancelable placeholder="Event Name" name="name" class="textfield" type="text" x-inputmode="latin-prose" value="" id="name" required="required">
<button type="reset">Clear</button>
</p>
<p>
<textarea placeholder="Description" required="required"></textarea>
<button type="reset">Clear</button>
</p>
<p>
<button class="icon icon-view" id="location-name">Venue Name</button>
<input type="hidden" name="venueid" id="venueid">
<input type="hidden" name="venuename" id="venuename">
<input type="hidden" name="venueaddress" id="venueaddress">
<input type="hidden" name="venuelatitude" id="venuelatitude">
<input type="hidden" name="venuelongitude" id="venuelongitude">
<button type="reset">Clear</button>
</p>
<fieldset>
<legend>Start</legend>
<section>
Expand All @@ -111,21 +122,7 @@ <h1>Add Event</h1>
<button type="reset">Clear</button>
</p>
</section>
</fieldset>

<fieldset>
<legend>Place</legend>
<section>
<p>
<input data-cancelable placeholder="Name or Address" name="location-name" class="textfield" type="text" x-inputmode="latin-prose" value="" id="location-name" required="required">
<button type="reset">Clear</button>
</p>
<p>
<input data-cancelable placeholder="Latitude and Longitude" name="location-latlong" class="textfield" type="text" x-inputmode="latin-prose" value="" id="location-latlong" required="required">
<button type="reset">Clear</button>
</p>
</section>
</fieldset>
</fieldset>
<input type="submit" style="display:none" id="submit-event-button">
</form>
</div>
Expand All @@ -138,7 +135,7 @@ <h1>Add Event</h1>
<button id="cancel-search-location" class="cancel-navigation negative"><span class="icon icon-close">Exit</span></button>
<menu type="toolbar">
</menu>
<h1>Place</h1>
<h1>Venue</h1>
</header>

<article class="body full">
Expand All @@ -149,16 +146,51 @@ <h1>Place</h1>
</p>
</form>
<section data-type="list" id="search-location-result">
<p role="status" class="loading">
<progress class="small"></progress>
<span>Searching...</span>
</p>
<p role="status" class="no-result">
<span>No results</span>
</p>
<ul>
<li data-template>
<a href="#">
<p>#name#</p>
<p>#location#</p>
<p class="name">#name#</p>
<p class="location">#location#</p>
</a>
</li>
</ul>
</section>
</article>
</section>

<!-- Add Location Section -->
<section id="view-event-add-location" role="region" class="view transition transition-bottom" data-mirror="mirror-event-add-location">
<header>
<button id="cancel-add-location" class="cancel-navigation negative"><span class="icon icon-close">Exit</span></button>
<menu type="toolbar">
</menu>
<h1>Add Venue</h1>
</header>

<article class="body full">
<form id="add-location-form" action="#" class="full">
<p>
<input data-cancelable placeholder="Venue Name" name="addvenuename" class="textfield" type="text" x-inputmode="latin-prose" value="" id="add-location-name" required="required">
<button type="reset">Clear</button>
</p>
<p>
<input data-cancelable placeholder="Address" name="addvenueaddress" class="textfield" type="text" x-inputmode="latin-prose" value="" id="add-location-address" required="required">
<button type="reset">Clear</button>
</p>
<p>
<input data-cancelable placeholder="Latitude and Longitude" name="addvenuealatlong" class="textfield" type="text" x-inputmode="latin-prose" value="" id="add-location-latlong" required="required">
<button type="reset">Clear</button>
</p>
<input type="submit" style="display:none" id="submit-add-location-button">
</form>
</article>
</section>

<!-- Add LatLong Section -->
Expand All @@ -168,7 +200,7 @@ <h1>Place</h1>
<menu type="toolbar">
<button id="submit-latlong-event" role="menuitem" disabled>Done</button>
</menu>
<h1>Place</h1>
<h1>Venue Map</h1>
</header>

<article class="body full">
Expand Down Expand Up @@ -282,7 +314,8 @@ <h1>Register</h1>
<div id="mirror-profile" class="view" style="background-image: -moz-element(#view-profile);"></div>
<div id="mirror-login" class="view" style="background-image: -moz-element(#view-login);"></div>
<div id="mirror-register" class="view" style="background-image: -moz-element(#view-register);"></div>
<div id="mirror-event-search-location" class="view" style="background-image: -moz-element(#view-event-search-location);"></div>
<div id="mirror-event-search-location" class="view" style="background-image: -moz-element(#view-event-search-location);"></div>
<div id="mirror-event-add-location" class="view" style="background-image: -moz-element(#view-event-add-location);"></div>
</div>

</body>
Expand Down
44 changes: 37 additions & 7 deletions js/form.js
View file
Expand Up @@ -34,13 +34,15 @@ $(function() {
}
});

$('#location-name').focus(function() {
$('#location-name').click(function(e) {
navigation.go('view-event-search-location','popup');
e.preventDefault();
});

$('#location-latlong').focus(function() {
navigation.go('view-event-latlong-add','popup');
map.openMap($('#location-name').val());
var q = $('#location-latlong').val() ? $('#location-latlong').val() : $('#location-name').val();
map.openMap(q);
$('#submit-latlong-event').removeAttr('disabled');
});

Expand Down Expand Up @@ -69,22 +71,50 @@ $(function() {
});

$('#search-location-text').keyup($.debounce( function() {
if($(this).val() == '') return false;

$('#search-location-result').find('p.no-result').hide();
$('#search-location-result').find('p.loading').show();

api.venuesearch($(this).val(), function(data) {
$('#search-location-result li:not([data-template])').each(function() {
$(this).remove();
});

$('#search-location-result').find('p.loading').hide();

if(data == false) {
$('#search-location-result').find('p.no-result').show();
return false;
}

var template = $('#search-location-result').find('[data-template]');

$.each(data, function() {
template.clone()
template.clone().appendTo('#search-location-result')
.removeAttr('data-template')
.find('a').attr('data-id',this.id).attr('data-latitude',this.latitude).attr('data-longitude',this.longitude)
.find("p:contains('#name#')").text(this.name)
.find("p:contains('#location#')").text(this.location)
.find('a').attr('data-id',this.id).attr('data-name',this.name).attr('data-latitude',this.latitude).attr('data-longitude',this.longitude).addClass('select-venue')
.find("p.name").text(this.name)
.siblings("p.location").text(this.location)
})
});
}, 300));
}, 500));

$(document).on('click','.select-venue',function(e) {
$('#venueid').val($(this).attr('data-id'));
$('#location-name').text($(this).attr('data-name'));
navigation.back();
e.preventDefault();
});

$('#add-location-link').click(function() {
navigation.back();
navigation.popup('view-event-add-location');
})

$('#add-location-form').submit(function(e) {
e.preventDefault();
})

/* Profile */
$('#firstname, #lastname').keyup(function() {
Expand Down

0 comments on commit f1f47a4

Please sign in to comment.