mozilla
/
webmaker-events
зеркало из https://github.com/mozilla/webmaker-events.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

Initial attempt at adding enhanced date/time/select elements. 

Using webmaker.org's UI library for 'select', and jQuery-UI for date/time.
This commit is contained in:
Hike Danakian 2013-06-06 12:24:06 -07:00
Родитель 40432cb951
Коммит f6ad2f8ec7
10 изменённых файлов: 16881 добавлений и 156 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

229
assets/css/event_create.less
Просмотреть файл

@ -1,21 +1,20 @@
body#events .overlay-container {
position: relative;
margin: 0px auto;
max-width: 1020px;
}
body#events .map-overlay {
position: absolute;
z-index: 1;
margin: 20px;
@import "ui";
color: #fafafa;
body#events.map {
form {
background: rgba(32,32,32,.8);
.overlay-container {
position: relative;
margin: 0px auto;
max-width: 1200px;
}
.map-overlay {
position: absolute;
z-index: 1;
margin: 20px;
color: #fafafa;
h2,label,textarea,input,select,button {
font-family: 'Open Sans';
}
h2 {
margin-top: 1px;
margin-left: 4px;
@ -25,6 +24,9 @@ body#events .map-overlay {
font-size: 20px;
font-weight: 300;
}
form {
background: rgba(32,32,32,.8);
}
fieldset {
display: inline-block;
border: none;
@ -40,22 +42,34 @@ body#events .map-overlay {
vertical-align: top;
font-size: 13px;
}
textarea,input,select {
textarea,input {
background: white;
outline: none;
outline: 0px;
border: 0.5px solid #444;
margin: 5px;
vertical-align: middle;
font-size: 13px;
font-size: 13px;
}
textarea {
width: 20em;
padding: 8px 10px;
}
input,select {
height: 5ex;
padding: 0px 10px;
.ui-selected {
padding-left: 4px;
}
.ui-select-menu {
z-index: 1;
}
.ui-selected li {
padding-left: 4px;
}
.ui-select {
margin: 4px;
vertical-align: top;
.icon-calendar {
padding-right: 6px;
}
}
button[type="submit"] {
border: 0px;
@ -68,62 +82,71 @@ body#events .map-overlay {
&:active { background: #d7000a; }
.clickable
}
}
form#find-event {
display: inline-block;
form#find-event {
display: inline-block;
padding-right: 8px;
padding-left: 2px;
padding-right: 8px;
padding-left: 2px;
h2 {
margin: 0px;
display: inline-block;
h2 {
margin: 0px;
display: inline-block;
vertical-align: middle;
vertical-align: middle;
.icon-search {
color: #888;
.icon-search {
color: #888;
}
}
input {
margin-left: 0px;
}
button[type="submit"] {
height: 5ex;
width: 5ex;
font-size: 13px;
vertical-align: middle;
.icon-chevron-right {
color: #f2f2f2;
font-size: 16px;
}
}
}
input {
margin-left: 0px;
form#create-event {
width: 100%;
position: relative;
vertical-align: middle;
}
button[type="submit"] {
height: 5ex;
width: 5ex;
margin-top: 10px;
font-size: 13px;
vertical-align: middle;
.icon-chevron-right {
color: #f2f2f2;
font-size: 16px;
.datetime {
display: inline-block;
input {
.ui-smedium;
}
}
}
}
form#create-event {
width: 100%;
margin-top: 10px;
h2 {
.icon-plus {
font-size: 18px;
margin-right: 4px;
button[type="submit"] {
position: absolute;
bottom: 15px;
right: 15px;
padding: 12px 18px;
padding-bottom: 13px;
font-size: 22;
.icon-plus {
font-size: 17px;
margin-right: 4px;
}
}
}
.datetime {
display: inline-block;
}
.upload {
display: inline-block;
margin: 10px 0px;
}
input[name="address"],input[name="registerLink"] {
width: 276px;
}
#image-upload {
display: table-cell;
width: 125px;
@ -136,62 +159,56 @@ body#events .map-overlay {
vertical-align: middle;
.clickable;
img {
max-width: 123px;
max-height: 78px;
}
}
input[type="file"] {
display: none;
}
button[type="submit"] {
position: absolute;
bottom: 15px;
right: 15px;
padding: 12px 18px;
padding-bottom: 13px;
font-size: 22;
.icon-plus {
font-size: 17px;
margin-right: 4px;
img {
max-width: 123px;
max-height: 78px;
}
}
}
h2.formExpandButton {
.disable-selection;
.clickable;
}
.toggleHidden {
display: none;
}
h2.formExpandButton {
.disable-selection;
.clickable;
}
#add-event-button {
background: #e1000b;
&:hover { background: #ee1c25; }
&:active { background: #d7000a; }
#add-event-button {
background: #e1000b;
&:hover { background: #ee1c25; }
&:active { background: #d7000a; }
width: 180px;
margin-top: 10px;
width: 180px;
margin-top: 10px;
color: #fff;
color: #fff;
h2 {
.icon-plus {
margin-right: 4px;
h2 {
.icon-plus {
margin-right: 4px;
font-size: 18px;
}
font-size: 18px;
margin-top: 1px;
margin-left: 4px;
padding: 10px 12px;
padding-bottom: 12px;
font-size: 20px;
font-weight: 300;
}
}
margin-top: 1px;
margin-left: 4px;
padding: 10px 12px;
padding-bottom: 12px;
input[type="file"] { .hidden; }
font-size: 20px;
font-weight: 300;
.hidden { display: none; }
.ui-spinner a {
border-radius: 0px;
.ui-btn;
}
.ui-widget-content {
border: 0px;
}
.ui-corner-all {
border-radius: 0px;
}
}
}

3
assets/css/events.less
Просмотреть файл

@ -5,8 +5,6 @@
@import "marker_info_window";
body#events {
#content {
}
main {
margin-bottom: 0px;
}
@ -23,6 +21,7 @@ body#events {
&:hover {
text-shadow: #bbb 0px 0px 1px;
}
.disable-selection;
}
.disable-selection {
-webkit-touch-callout: none;

33
assets/css/map.less
Просмотреть файл

@ -1,33 +1,8 @@
body#events.map {
#content {
max-width: none;
width: 100%;
padding: 0px;
}
#map-canvas {
height: 800px;
margin-bottom: -4px;
}
#map-canvas {
height: 800px;
width: 100%;
z-index: 0;
margin-bottom: -4px;
}
#map-content {
position: relative;
width: 100%;
height: 800px;
}
#delete-button {
position: absolute;
bottom: 3px;
right: 12px;
}
#log-button {
position: absolute;
bottom: 3px;
right: 142px;
}
}

1573
static/ext/js/globalize.js Normal file
Просмотреть файл

Разница между файлами не показана из-за своего большого размера Загрузить разницу

15003
static/ext/js/jquery-ui.js поставляемый Normal file
Просмотреть файл

Разница между файлами не показана из-за своего большого размера Загрузить разницу

101
static/ext/js/jquery.mousewheel.js Normal file
Просмотреть файл

@ -0,0 +1,101 @@
/*! Copyright (c) 2013 Brandon Aaron (http://brandonaaron.net)
* Licensed under the MIT License (LICENSE.txt).
*
* Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers.
* Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix.
* Thanks to: Seamus Leahy for adding deltaX and deltaY
*
* Version: 3.1.0
*
* Requires: 1.2.2+
*/
(function (factory) {
if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module.
define(['jquery'], factory);
} else {
// Browser globals
factory(jQuery);
}
}(function ($) {
var toFix = ['wheel', 'mousewheel', 'DOMMouseScroll'];
var toBind = 'onwheel' in document || document.documentMode >= 9 ? ['wheel'] : ['mousewheel', 'DomMouseScroll', 'MozMousePixelScroll'];
var lowestDelta, lowestDeltaXY;
if ($.event.fixHooks) {
for ( var i=toFix.length; i; ) {
$.event.fixHooks[ toFix[--i] ] = $.event.mouseHooks;
}
}
$.event.special.mousewheel = {
setup: function() {
if ( this.addEventListener ) {
for ( var i=toBind.length; i; ) {
this.addEventListener( toBind[--i], handler, false );
}
} else {
this.onmousewheel = handler;
}
},
teardown: function() {
if ( this.removeEventListener ) {
for ( var i=toBind.length; i; ) {
this.removeEventListener( toBind[--i], handler, false );
}
} else {
this.onmousewheel = null;
}
}
};
$.fn.extend({
mousewheel: function(fn) {
return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");
},
unmousewheel: function(fn) {
return this.unbind("mousewheel", fn);
}
});
function handler(event) {
var orgEvent = event || window.event, args = [].slice.call( arguments, 1 ), delta = 0, deltaX = 0, deltaY = 0, absDelta = 0, absDeltaXY = 0;
event = $.event.fix(orgEvent);
event.type = "mousewheel";
// Old school scrollwheel delta
if ( orgEvent.wheelDelta ) { delta = orgEvent.wheelDelta; }
if ( orgEvent.detail ) { delta = orgEvent.detail * -1; }
// New school wheel delta (wheel event)
if ( orgEvent.deltaY ) {
deltaY = orgEvent.deltaY * -1;
delta = deltaY;
}
if ( orgEvent.deltaX ) {
deltaX = orgEvent.deltaX;
delta = deltaX * -1;
}
// Webkit
if ( orgEvent.wheelDeltaY !== undefined ) { deltaY = orgEvent.wheelDeltaY; }
if ( orgEvent.wheelDeltaX !== undefined ) { deltaX = orgEvent.wheelDeltaX * -1; }
absDelta = Math.abs(delta);
if ( !lowestDelta || absDelta < lowestDelta ) { lowestDelta = absDelta; }
absDeltaXY = Math.max( Math.abs(deltaY), Math.abs(deltaX) );
if ( !lowestDeltaXY || absDeltaXY < lowestDeltaXY ) { lowestDeltaXY = absDeltaXY; }
// Add event and delta to the front of the arguments
args.unshift(event, Math.floor(delta/lowestDelta), Math.floor(deltaX/lowestDeltaXY), Math.floor(deltaY/lowestDeltaXY));
return ($.event.dispatch || $.event.handle).apply(this, args);
}
}));

35
static/js/events/forms.js
Просмотреть файл

@ -1,5 +1,5 @@
define(['jquery', 'model'],
function ($, EventModel) { return function (mapMaker) {
define(['jquery', 'model', '../base/ui', 'globalize', 'jquery-ui', 'jquery.mousewheel'],
function ($, EventModel, UI, Globalize) { return function (mapMaker) {
$.event.props.push('dataTransfer');
$(document).ready(function () {
var create_form = $('form#create-event');
@ -107,8 +107,8 @@ function ($, EventModel) { return function (mapMaker) {
upload_div.find('> img').attr('src', '');
upload_div.text(upload_div._prev_text);
create_form.toggleClass('toggleHidden');
$("#add-event-button").toggleClass('toggleHidden');
create_form.toggleClass('hidden');
$("#add-event-button").toggleClass('hidden');
}
$("h2.formExpandButton").click(function(ev) {
ev.preventDefault();
@ -132,9 +132,32 @@ function ($, EventModel) { return function (mapMaker) {
}
}
});
EventModel.all(function (models) {
mapMaker.dropPins(models);
EventModel.all(function (models) { mapMaker.dropPins(models); });
$('.datepicker').datepicker().each(function(i, elem) {
$(elem).next('a.icon').click(function () { $(elem).focus();});
});
$.widget('ui.timespinner', $.ui.spinner, {
options: { step: 60 * 1000, // seconds
page: 60 }, // hours
_parse: function( value ) {
if (typeof value === 'string') {
// already a timestamp
if (Number(value) == value)
return Number( value );
return +Globalize.parseDate(value);
}
return value;
},
_format: function(value) {
return Globalize.format(new Date(value), 't');
}
});
$('.timespinner').timespinner();
UI.select('select[name="attendees"]');
window.scroll();
toggleCreateForm();
});
}})

23
static/js/events/index.js
Просмотреть файл

@ -1,7 +1,20 @@
require.config({
deps: ['map/index'],
paths: {
'jquery': '/ext/js/jquery-1.9.1',
'async': '/ext/js/async',
}
deps: ['map/index'],
paths: {
'async': '/ext/js/async',
'text': '/ext/js/text',
'html': '/js/html',
'jquery': '/ext/js/jquery-1.9.1',
'jquery-ui': '/ext/js/jquery-ui',
'globalize': '/ext/js/globalize',
'jquery.mousewheel': '/ext/js/jquery.mousewheel',
},
shim: {
'jquery-ui': ['jquery'],
'jquery.mousewheel': ['jquery'],
'globalize': {
deps: ['jquery'],
init: function () { return window.Globalize; }
},
}
});

1
views/events/layout.html
Просмотреть файл

@ -3,6 +3,7 @@
{% block title %}{% endblock %}
{% block head %}
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" href="/css/events.css">
{% endblock %}

36
views/events/map.html
Просмотреть файл

@ -19,7 +19,7 @@
<h2 class='formExpandButton'><span class="icon-plus"></span> Add an event</h2>
</div>
<form id="create-event" action="/events" method="POST" class='toggleHidden'>
<form id="create-event" action="/events" method="POST" class='hidden'>
<h2 class='formExpandButton'><span class="icon-remove"></span> Add an event</h2>
<fieldset>
<label for="title"> Name your event </label>
@ -44,24 +44,44 @@
</select><br />
<label for="address"> Event location </label>
<input name="address" type="text" /><br />
<span class="ui-append ui-select">
<input name="address" type="text" />
</span><br />
<input name="latitude" type="hidden" />
<input name="longitude" type="hidden" />
<label for="registerLink"> Event Link </label>
<input name="registerLink" type="url"
placeholder="Link to registration page" /><br />
<span class="ui-append ui-select">
<input name="registerLink" type="url"
placeholder="Link to registration page" />
</span><br />
<label for="beginDate"> Event begins </label>
<div class='datetime'>
<input name="beginDate" type="date" />
<input name="beginTime" type="time" />
<span class="ui-append ui-select">
<span class="icon-calendar"></span>
<input name="beginDate" type="text" class="datepicker"
placeholder="--/--/--" />
<a class="icon icon-chevron-down"></a>
</span>
<span class="ui-append ui-select">
<input name="beginTime" type="text" class="timespinner"
placeholder="--:-- --" />
</span>
</div><br />
<label for="endDate"> Event ends </label>
<div class='datetime'>
<input name="endDate" type="date" />
<input name="endTime" type="time" />
<span class="ui-append ui-select">
<span class="icon-calendar"></span>
<input name="endDate" type="text" class="datepicker"
placeholder="--/--/--" />
<a class="icon icon-chevron-down"></a>
</span>
<span class="ui-append ui-select">
<input name="endTime" type="text" class="timespinner"
placeholder="--:-- --" />
</span>
</div><br />
<div class="upload">