some work on static2 edit event

This commit is contained in:
James Turk 2012-06-30 19:56:45 -04:00
parent 211755931a
commit e9354585ae
7 changed files with 2220 additions and 79 deletions

View File

@ -0,0 +1,60 @@
Select2
=================
Select2 is a jQuery based replacement for select boxes. It supports searching, remote data sets, and infinite scrolling of results. Look and feel of Select2 is based on the excellent [Chosen](http://harvesthq.github.com/chosen/) library.
To get started -- checkout http://ivaynberg.github.com/select2!
What Does Select2 Support That Chosen Does Not?
-------------------------------------------------
* Working with large datasets: Chosen requires the entire dataset to be loaded as `option` tags in the DOM, which limits
it to working with small-ish datasets. Select2 uses a function to find results on-the-fly, which allows it to partially
load results.
* Paging of results: Since Select2 works with large datasets and only loads a small amount of matching results at a time
it has to support paging. Select2 will call the search function when the user scrolls to the bottom of currently loaded
result set allowing for the 'infinite scrolling' of results.
* Custom markup for results: Chosen only supports rendering text results because that is the only markup supported by
`option` tags. Select2 provides an extension point which can be used to produce any kind of markup to represent results.
* Ability to add results on the fly: Select2 provides the ability to add results from the search term entered by the user, which allows it to be used for
tagging.
Browser Compatibility
--------------------
* IE 8+ (7 mostly works except for [issue with z-index](https://github.com/ivaynberg/select2/issues/37))
* Chrome 8+
* Firefox 3.5+
* Safari 3+
* Opera 10.6+
Bug tracker
-----------
Have a bug? Please create an issue here on GitHub!
https://github.com/ivaynberg/select2/issues
Mailing list
------------
Have a question? Ask on our mailing list!
select2@googlegroups.com
https://groups.google.com/d/forum/select2
Copyright and License
---------------------
Copyright 2012 Igor Vaynberg
Licensed under the Apache License, Version 2.0 (the "License"); you may not use this work except in
compliance with the License. You may obtain a copy of the License in the LICENSE file, or at:
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software distributed under the License is
distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and limitations under the License.

View File

@ -0,0 +1,456 @@
/*
Version: 2.1 Timestamp: Tue Jun 12 19:50:25 PDT 2012
*/
.select2-container {
position: relative;
display: inline-block;
/* inline-block for ie7 */
zoom: 1;
*display: inline;
}
.select2-container,
.select2-drop,
.select2-search,
.select2-container .select2-search input{
/*
Force border-box so that % widths fit the parent
container without overlap because of margin/padding.
More Info : http://www.quirksmode.org/css/box.html
*/
-moz-box-sizing: border-box; /* firefox */
-ms-box-sizing: border-box; /* ie */
-webkit-box-sizing: border-box; /* webkit */
-khtml-box-sizing: border-box; /* konqueror */
box-sizing: border-box; /* css3 */
}
.select2-container .select2-choice {
background-color: #fff;
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #eeeeee), color-stop(0.5, white));
background-image: -webkit-linear-gradient(center bottom, #eeeeee 0%, white 50%);
background-image: -moz-linear-gradient(center bottom, #eeeeee 0%, white 50%);
background-image: -o-linear-gradient(bottom, #eeeeee 0%, #ffffff 50%);
background-image: -ms-linear-gradient(top, #eeeeee 0%, #ffffff 50%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#eeeeee', endColorstr = '#ffffff', GradientType = 0);
background-image: linear-gradient(top, #eeeeee 0%, #ffffff 50%);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid #aaa;
display: block;
overflow: hidden;
white-space: nowrap;
position: relative;
height: 26px;
line-height: 26px;
padding: 0 0 0 8px;
color: #444;
text-decoration: none;
}
.select2-container .select2-choice span {
margin-right: 26px;
display: block;
overflow: hidden;
white-space: nowrap;
-o-text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
text-overflow: ellipsis;
}
.select2-container .select2-choice abbr {
display: block;
position: absolute;
right: 26px;
top: 8px;
width: 12px;
height: 12px;
font-size: 1px;
background: url(select2.png) right top no-repeat;
cursor: pointer;
text-decoration: none;
border:0;
outline: 0;
}
.select2-container .select2-choice abbr:hover {
background-position: right -11px;
cursor: pointer;
}
.select2-container .select2-drop {
background: #fff;
border: 1px solid #aaa;
border-top: 0;
position: absolute;
top: 100%;
-webkit-box-shadow: 0 4px 5px rgba(0, 0, 0, .15);
-moz-box-shadow: 0 4px 5px rgba(0, 0, 0, .15);
-o-box-shadow: 0 4px 5px rgba(0, 0, 0, .15);
box-shadow: 0 4px 5px rgba(0, 0, 0, .15);
z-index: 999;
width:100%;
margin-top:-1px;
-webkit-border-radius: 0 0 4px 4px;
-moz-border-radius: 0 0 4px 4px;
border-radius: 0 0 4px 4px;
}
.select2-container .select2-choice div {
-webkit-border-radius: 0 4px 4px 0;
-moz-border-radius: 0 4px 4px 0;
border-radius: 0 4px 4px 0;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
background: #ccc;
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #ccc), color-stop(0.6, #eee));
background-image: -webkit-linear-gradient(center bottom, #ccc 0%, #eee 60%);
background-image: -moz-linear-gradient(center bottom, #ccc 0%, #eee 60%);
background-image: -o-linear-gradient(bottom, #ccc 0%, #eee 60%);
background-image: -ms-linear-gradient(top, #cccccc 0%, #eeeeee 60%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#cccccc', endColorstr = '#eeeeee', GradientType = 0);
background-image: linear-gradient(top, #cccccc 0%, #eeeeee 60%);
border-left: 1px solid #aaa;
position: absolute;
right: 0;
top: 0;
display: block;
height: 100%;
width: 18px;
}
.select2-container .select2-choice div b {
background: url('select2.png') no-repeat 0 1px;
display: block;
width: 100%;
height: 100%;
}
.select2-container .select2-search {
display: inline-block;
white-space: nowrap;
z-index: 1010;
min-height: 26px;
width: 100%;
margin: 0;
padding-left: 4px;
padding-right: 4px;
}
.select2-container .select2-search-hidden {
display: block;
position: absolute;
left: -10000px;
}
.select2-container .select2-search input {
background: #fff url('select2.png') no-repeat 100% -22px;
background: url('select2.png') no-repeat 100% -22px, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, white), color-stop(0.99, #eeeeee));
background: url('select2.png') no-repeat 100% -22px, -webkit-linear-gradient(center bottom, white 85%, #eeeeee 99%);
background: url('select2.png') no-repeat 100% -22px, -moz-linear-gradient(center bottom, white 85%, #eeeeee 99%);
background: url('select2.png') no-repeat 100% -22px, -o-linear-gradient(bottom, white 85%, #eeeeee 99%);
background: url('select2.png') no-repeat 100% -22px, -ms-linear-gradient(top, #ffffff 85%, #eeeeee 99%);
background: url('select2.png') no-repeat 100% -22px, linear-gradient(top, #ffffff 85%, #eeeeee 99%);
padding: 4px 20px 4px 5px;
outline: 0;
border: 1px solid #aaa;
font-family: sans-serif;
font-size: 1em;
width:100%;
margin:0;
height:auto !important;
min-height: 26px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
border-radius: 0;
-moz-border-radius: 0;
-webkit-border-radius: 0;
}
.select2-container .select2-search input.select2-active {
background: #fff url('spinner.gif') no-repeat 100%;
background: url('spinner.gif') no-repeat 100%, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, white), color-stop(0.99, #eeeeee));
background: url('spinner.gif') no-repeat 100%, -webkit-linear-gradient(center bottom, white 85%, #eeeeee 99%);
background: url('spinner.gif') no-repeat 100%, -moz-linear-gradient(center bottom, white 85%, #eeeeee 99%);
background: url('spinner.gif') no-repeat 100%, -o-linear-gradient(bottom, white 85%, #eeeeee 99%);
background: url('spinner.gif') no-repeat 100%, -ms-linear-gradient(top, #ffffff 85%, #eeeeee 99%);
background: url('spinner.gif') no-repeat 100%, linear-gradient(top, #ffffff 85%, #eeeeee 99%);
}
.select2-container-active .select2-choice,
.select2-container-active .select2-choices {
-webkit-box-shadow: 0 0 5px rgba(0,0,0,.3);
-moz-box-shadow : 0 0 5px rgba(0,0,0,.3);
-o-box-shadow : 0 0 5px rgba(0,0,0,.3);
box-shadow : 0 0 5px rgba(0,0,0,.3);
border: 1px solid #5897fb;
outline: none;
}
.select2-dropdown-open .select2-choice {
border: 1px solid #aaa;
border-bottom-color: transparent;
-webkit-box-shadow: 0 1px 0 #fff inset;
-moz-box-shadow : 0 1px 0 #fff inset;
-o-box-shadow : 0 1px 0 #fff inset;
box-shadow : 0 1px 0 #fff inset;
background-color: #eee;
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, white), color-stop(0.5, #eeeeee));
background-image: -webkit-linear-gradient(center bottom, white 0%, #eeeeee 50%);
background-image: -moz-linear-gradient(center bottom, white 0%, #eeeeee 50%);
background-image: -o-linear-gradient(bottom, white 0%, #eeeeee 50%);
background-image: -ms-linear-gradient(top, #ffffff 0%,#eeeeee 50%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eeeeee',GradientType=0 );
background-image: linear-gradient(top, #ffffff 0%,#eeeeee 50%);
-webkit-border-bottom-left-radius : 0;
-webkit-border-bottom-right-radius: 0;
-moz-border-radius-bottomleft : 0;
-moz-border-radius-bottomright: 0;
border-bottom-left-radius : 0;
border-bottom-right-radius: 0;
}
.select2-dropdown-open .select2-choice div {
background: transparent;
border-left: none;
}
.select2-dropdown-open .select2-choice div b {
background-position: -18px 1px;
}
/* results */
.select2-container .select2-results {
margin: 4px 4px 4px 0;
padding: 0 0 0 4px;
position: relative;
overflow-x: hidden;
overflow-y: auto;
max-height: 200px;
}
.select2-container .select2-results li {
line-height: 80%;
padding: 7px 7px 8px;
margin: 0;
list-style: none;
cursor: pointer;
display: list-item;
}
.select2-container .select2-results .select2-highlighted {
background: #3875d7;
color: #fff;
}
.select2-container .select2-results li em {
background: #feffde;
font-style: normal;
}
.select2-container .select2-results .select2-highlighted em {
background: transparent;
}
.select2-container .select2-results .select2-no-results {
background: #f4f4f4;
display: list-item;
}
/*
disabled look for already selected choices in the results dropdown
.select2-container .select2-results .select2-disabled.select2-highlighted {
color: #666;
background: #f4f4f4;
display: list-item;
cursor: default;
}
.select2-container .select2-results .select2-disabled {
background: #f4f4f4;
display: list-item;
cursor: default;
}
*/
.select2-container .select2-results .select2-disabled {
display: none;
}
.select2-more-results.select2-active {
background: #f4f4f4 url('spinner.gif') no-repeat 100%;
}
.select2-more-results {
background: #f4f4f4;
display: list-item;
}
/* disabled styles */
.select2-container.select2-container-disabled .select2-choice {
background-color: #f4f4f4;
background-image: none;
border: 1px solid #ddd;
cursor: default;
}
.select2-container.select2-container-disabled .select2-choice div {
background-color: #f4f4f4;
background-image: none;
border-left: 0;
}
/* multiselect */
.select2-container-multi .select2-choices {
background-color: #fff;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(1%, #eeeeee), color-stop(15%, #ffffff));
background-image: -webkit-linear-gradient(top, #eeeeee 1%, #ffffff 15%);
background-image: -moz-linear-gradient(top, #eeeeee 1%, #ffffff 15%);
background-image: -o-linear-gradient(top, #eeeeee 1%, #ffffff 15%);
background-image: -ms-linear-gradient(top, #eeeeee 1%, #ffffff 15%);
background-image: linear-gradient(top, #eeeeee 1%, #ffffff 15%);
border: 1px solid #aaa;
margin: 0;
padding: 0;
cursor: text;
overflow: hidden;
height: auto !important;
height: 1%;
position: relative;
}
.select2-container-multi .select2-drop {
margin-top:0;
}
.select2-container-multi .select2-choices {
min-height: 26px;
}
.select2-container-multi.select2-container-active .select2-choices {
-webkit-box-shadow: 0 0 5px rgba(0,0,0,.3);
-moz-box-shadow : 0 0 5px rgba(0,0,0,.3);
-o-box-shadow : 0 0 5px rgba(0,0,0,.3);
box-shadow : 0 0 5px rgba(0,0,0,.3);
border: 1px solid #5897fb;
outline: none;
}
.select2-container-multi .select2-choices li {
float: left;
list-style: none;
}
.select2-container-multi .select2-choices .select2-search-field {
white-space: nowrap;
margin: 0;
padding: 0;
}
.select2-container-multi .select2-choices .select2-search-field input {
color: #666;
background: transparent !important;
font-family: sans-serif;
font-size: 100%;
height: 15px;
padding: 5px;
margin: 1px 0;
outline: 0;
border: 0;
-webkit-box-shadow: none;
-moz-box-shadow : none;
-o-box-shadow : none;
box-shadow : none;
}
.select2-default {
color: #999 !important;
}
.select2-container-multi .select2-choices .select2-search-choice {
-webkit-border-radius: 3px;
-moz-border-radius : 3px;
border-radius : 3px;
-moz-background-clip : padding;
-webkit-background-clip: padding-box;
background-clip : padding-box;
background-color: #e4e4e4;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f4f4', endColorstr='#eeeeee', GradientType=0 );
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(20%, #f4f4f4), color-stop(50%, #f0f0f0), color-stop(52%, #e8e8e8), color-stop(100%, #eeeeee));
background-image: -webkit-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
background-image: -moz-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
background-image: -o-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
background-image: -ms-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
background-image: linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
-webkit-box-shadow: 0 0 2px #ffffff inset, 0 1px 0 rgba(0,0,0,0.05);
-moz-box-shadow : 0 0 2px #ffffff inset, 0 1px 0 rgba(0,0,0,0.05);
box-shadow : 0 0 2px #ffffff inset, 0 1px 0 rgba(0,0,0,0.05);
color: #333;
border: 1px solid #aaaaaa;
line-height: 13px;
padding: 3px 5px 3px 18px;
margin: 3px 0 3px 5px;
position: relative;
cursor: default;
}
.select2-container-multi .select2-choices .select2-search-choice span {
cursor: default;
}
.select2-container-multi .select2-choices .select2-search-choice-focus {
background: #d4d4d4;
}
.select2-search-choice-close {
display: block;
position: absolute;
right: 3px;
top: 4px;
width: 12px;
height: 13px;
font-size: 1px;
background: url(select2.png) right top no-repeat;
outline: none;
}
.select2-container-multi .select2-search-choice-close {
left: 3px;
}
.select2-container-multi .select2-choices .select2-search-choice .select2-search-choice-close:hover {
background-position: right -11px;
}
.select2-container-multi .select2-choices .select2-search-choice-focus .select2-search-choice-close {
background-position: right -11px;
}
.select2-container-multi .select2-results {
margin: -1px 0 0;
padding: 0;
}
/* disabled styles */
.select2-container-multi.select2-container-disabled .select2-choices{
background-color: #f4f4f4;
background-image: none;
border: 1px solid #ddd;
cursor: default;
}
.select2-container-multi.select2-container-disabled .select2-choices .select2-search-choice {
background-image: none;
background-color: #f4f4f4;
border: 1px solid #ddd;
padding: 3px 5px 3px 5px;
}
.select2-container-multi.select2-container-disabled .select2-choices .select2-search-choice .select2-search-choice-close {
display: none;
}
/* end multiselect */

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,58 @@
/*
Copyright 2012 Igor Vaynberg
Version: 2.1 Timestamp: Tue Jun 12 19:50:25 PDT 2012
Licensed under the Apache License, Version 2.0 (the "License"); you may not use this work except in
compliance with the License. You may obtain a copy of the License in the LICENSE file, or at:
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software distributed under the License is
distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and limitations under the License.*/
(function(e,h){function i(a,b){var c=0,f=b.length,j;if("undefined"===typeof a)return-1;if(a.constructor===String)for(;c<f;c+=1){if(0===a.localeCompare(b[c]))return c}else for(;c<f;c+=1)if(j=b[c],j.constructor===String){if(0===j.localeCompare(a))return c}else if(j===a)return c;return-1}function n(a,b){return a===b?!0:a===h||b===h||null===a||null===b?!1:a.constructor===String?0===a.localeCompare(b):b.constructor===String?0===b.localeCompare(a):!1}function r(a,b){var c,f,j;if(null===a||1>a.length)return[];
c=a.split(b);f=0;for(j=c.length;f<j;f+=1)c[f]=e.trim(c[f]);return c}function w(a){a.bind("keydown",function(){a.data("keyup-change-value",a.val())});a.bind("keyup",function(){a.val()!==a.data("keyup-change-value")&&a.trigger("keyup-change")})}function x(a){a.bind("mousemove",function(a){var c=e(document).data("select2-lastpos");(c===h||c.x!==a.pageX||c.y!==a.pageY)&&e(a.target).trigger("mousemove-filtered",a)})}function s(a,b){var c;return function(){window.clearTimeout(c);c=window.setTimeout(b,a)}}
function y(a,b){var c=s(a,function(a){b.trigger("scroll-debounced",a)});b.bind("scroll",function(a){0<=i(a.target,b.get())&&c(a)})}function g(a){a.preventDefault();a.stopPropagation()}function t(a){var b,c=0,f=null,j=a.quietMillis||100;return function(d){window.clearTimeout(b);b=window.setTimeout(function(){var b=c+=1,j=a.data,h=a.transport||e.ajax,j=j.call(this,d.term,d.page,d.context);null!==f&&f.abort();f=h.call(null,{url:a.url,dataType:a.dataType,data:j,success:function(f){b<c||(f=a.results(f,
d.page),d.callback(f))}})},j)}}function u(a){var b=a,c=function(a){return""+a.text};e.isArray(b)||(c=b.text,e.isFunction(c)||(c=function(a){return a[b.text]}),b=b.results);return function(a){var j=a.term,d={};if(j==="")a.callback({results:b});else{d.results=e(b).filter(function(){return a.matcher(j,c(this))}).get();a.callback(d)}}}function v(a){return e.isFunction(a)?a:function(b){var c=b.term,f={results:[]};e(a).each(function(){var a=this.text!==h,e=a?this.text:this;if(""===c||b.matcher(c,e))f.results.push(a?
this:{id:this,text:this})});b.callback(f)}}function o(a,b){var c=function(){};c.prototype=new a;c.prototype.constructor=c;c.prototype.parent=a.prototype;c.prototype=e.extend(c.prototype,b);return c}if(window.Select2===h){var d,m,p,q;d={TAB:9,ENTER:13,ESC:27,SPACE:32,LEFT:37,UP:38,RIGHT:39,DOWN:40,SHIFT:16,CTRL:17,ALT:18,PAGE_UP:33,PAGE_DOWN:34,HOME:36,END:35,BACKSPACE:8,DELETE:46,isArrow:function(a){a=a.which?a.which:a;switch(a){case d.LEFT:case d.RIGHT:case d.UP:case d.DOWN:return!0}return!1},isControl:function(a){a=
a.which?a.which:a;switch(a){case d.SHIFT:case d.CTRL:case d.ALT:return!0}return!1},isFunctionKey:function(a){a=a.which?a.which:a;return 112<=a&&123>=a}};e(document).delegate("*","mousemove",function(a){e(document).data("select2-lastpos",{x:a.pageX,y:a.pageY})});e(document).ready(function(){e(document).delegate("*","mousedown focusin touchend",function(a){var b=e(a.target).closest("div.select2-container").get(0);e(document).find("div.select2-container-active").each(function(){this!==b&&e(this).data("select2").blur()})})});
m=o(Object,{bind:function(a){var b=this;return function(){a.apply(b,arguments)}},init:function(a){var b,c;this.opts=a=this.prepareOpts(a);this.id=a.id;a.element.data("select2")!==h&&null!==a.element.data("select2")&&this.destroy();this.enabled=!0;this.container=this.createContainer();a.element.attr("class")!==h&&this.container.addClass(a.element.attr("class"));this.opts.element.data("select2",this).hide().after(this.container);this.container.data("select2",this);this.dropdown=this.container.find(".select2-drop");
this.results=b=this.container.find(".select2-results");this.search=c=this.container.find("input[type=text]");this.resultsPage=0;this.context=null;this.initContainer();x(this.results);this.container.delegate(".select2-results","mousemove-filtered",this.bind(this.highlightUnderEvent));y(80,this.results);this.container.delegate(".select2-results","scroll-debounced",this.bind(this.loadMoreIfNeeded));e.fn.mousewheel&&b.mousewheel(function(a,c,e,d){c=b.scrollTop();0<d&&0>=c-d?(b.scrollTop(0),g(a)):0>d&&
b.get(0).scrollHeight-b.scrollTop()+d<=b.height()&&(b.scrollTop(b.get(0).scrollHeight-b.height()),g(a))});w(c);c.bind("keyup-change",this.bind(this.updateResults));c.bind("focus",function(){c.addClass("select2-focused")});c.bind("blur",function(){c.removeClass("select2-focused")});this.container.delegate(".select2-results","click",this.bind(function(a){0<e(a.target).closest(".select2-result:not(.select2-disabled)").length?(this.highlightUnderEvent(a),this.selectHighlighted(a)):(g(a),this.focusSearch())}));
e.isFunction(this.opts.initSelection)&&(this.initSelection(),this.monitorSource());a.element.is(":disabled")&&this.disable()},destroy:function(){var a=this.opts.element.data("select2");a!==h&&(a.container.remove(),a.opts.element.removeData("select2").unbind(".select2").show())},prepareOpts:function(a){var b,c,f;b=a.element;"select"===b.get(0).tagName.toLowerCase()&&(this.select=c=a.element);c&&e.each("id multiple ajax query createSearchChoice initSelection data tags".split(" "),function(){if(this in
a)throw Error("Option '"+this+"' is not allowed for Select2 when attached to a <select> element.");});a=e.extend({},{formatResult:function(a){return a.text},formatSelection:function(a){return a.text},formatNoMatches:function(){return"No matches found"},formatInputTooShort:function(a,b){return"Please enter "+(b-a.length)+" more characters"},minimumResultsForSearch:0,minimumInputLength:0,id:function(a){return a.id},matcher:function(a,b){return b.toUpperCase().indexOf(a.toUpperCase())>=0}},a);"function"!==
typeof a.id&&(f=a.id,a.id=function(a){return a[f]});c?(a.query=this.bind(function(a){var c={results:[],more:false},f=a.term,d=this.getPlaceholder();b.find("option").each(function(b){var g=e(this),i=g.text();if(b===0&&d!==h&&i==="")return true;a.matcher(f,i)&&c.results.push({id:g.attr("value"),text:i})});a.callback(c)}),a.id=function(a){return a.id}):"query"in a||("ajax"in a?a.query=t(a.ajax):"data"in a?a.query=u(a.data):"tags"in a&&(a.query=v(a.tags),a.createSearchChoice=function(a){return{id:a,text:a}},
a.initSelection=function(a){var b=[];e(r(a.val(),",")).each(function(){b.push({id:this,text:this})});return b}));if("function"!==typeof a.query)throw"query function not defined for Select2 "+a.element.attr("id");return a},monitorSource:function(){this.opts.element.bind("change.select2",this.bind(function(){!0!==this.opts.element.data("select2-change-triggered")&&this.initSelection()}))},triggerChange:function(){this.opts.element.data("select2-change-triggered",!0);this.opts.element.trigger("change");
this.opts.element.data("select2-change-triggered",!1)},enable:function(){this.enabled||(this.enabled=!0,this.container.removeClass("select2-container-disabled"))},disable:function(){this.enabled&&(this.close(),this.enabled=!1,this.container.addClass("select2-container-disabled"))},opened:function(){return this.container.hasClass("select2-dropdown-open")},open:function(){this.opened()||(this.container.addClass("select2-dropdown-open").addClass("select2-container-active"),this.updateResults(!0),this.dropdown.show(),
this.ensureHighlightVisible(),this.focusSearch())},close:function(){this.opened()&&(this.dropdown.hide(),this.container.removeClass("select2-dropdown-open"),this.results.empty(),this.clearSearch())},clearSearch:function(){},ensureHighlightVisible:function(){var a=this.results,b,c,f,d;b=a.children(".select2-result");c=this.highlight();0>c||(f=e(b[c]),d=f.offset().top+f.outerHeight(),c===b.length-1&&(b=a.find("li.select2-more-results"),0<b.length&&(d=b.offset().top+b.outerHeight())),b=a.offset().top+
a.outerHeight(),d>b&&a.scrollTop(a.scrollTop()+(d-b)),f=f.offset().top-a.offset().top,0>f&&a.scrollTop(a.scrollTop()+f))},moveHighlight:function(a){for(var b=this.results.children(".select2-result"),c=this.highlight();-1<c&&c<b.length;)if(c+=a,!e(b[c]).hasClass("select2-disabled")){this.highlight(c);break}},highlight:function(a){var b=this.results.children(".select2-result");if(0===arguments.length)return i(b.filter(".select2-highlighted")[0],b.get());b.removeClass("select2-highlighted");a>=b.length&&
(a=b.length-1);0>a&&(a=0);e(b[a]).addClass("select2-highlighted");this.ensureHighlightVisible();this.opened()&&this.focusSearch()},highlightUnderEvent:function(a){a=e(a.target).closest(".select2-result");0<a.length&&this.highlight(a.index())},loadMoreIfNeeded:function(){var a=this.results,b=a.find("li.select2-more-results"),c,f=-1,d=this.resultsPage+1;0!==b.length&&(c=b.offset().top-a.offset().top-a.height(),0>=c&&(b.addClass("select2-active"),this.opts.query({term:this.search.val(),page:d,context:this.context,
matcher:this.opts.matcher,callback:this.bind(function(c){var k=[],g=this;e(c.results).each(function(){k.push("<li class='select2-result'>");k.push(g.opts.formatResult(this));k.push("</li>")});b.before(k.join(""));a.find(".select2-result").each(function(a){var b=e(this);b.data("select2-data")!==h?f=a:b.data("select2-data",c.results[a-f-1])});c.more?b.removeClass("select2-active"):b.remove();this.resultsPage=d})})))},updateResults:function(a){function b(a){f.html(a);f.scrollTop(0);c.removeClass("select2-active")}
var c=this.search,f=this.results,d=this.opts,g=this;!0!==a&&!1===this.showSearchInput||(c.addClass("select2-active"),c.val().length<d.minimumInputLength?b("<li class='select2-no-results'>"+d.formatInputTooShort(c.val(),d.minimumInputLength)+"</li>"):(this.resultsPage=1,d.query({term:c.val(),page:this.resultsPage,context:null,matcher:d.matcher,callback:this.bind(function(k){var i=[],l;this.context=k.context===h?null:k.context;this.opts.createSearchChoice&&""!==c.val()&&(l=this.opts.createSearchChoice.call(null,
c.val(),k.results),l!==h&&null!==l&&g.id(l)!==h&&null!==g.id(l)&&0===e(k.results).filter(function(){return n(g.id(this),g.id(l))}).length&&k.results.unshift(l));0===k.results.length?b("<li class='select2-no-results'>"+d.formatNoMatches(c.val())+"</li>"):(e(k.results).each(function(){i.push("<li class='select2-result'>");i.push(d.formatResult(this));i.push("</li>")}),!0===k.more&&i.push("<li class='select2-more-results'>Loading more results...</li>"),b(i.join("")),f.children(".select2-result").each(function(a){a=
k.results[a];e(this).data("select2-data",a)}),this.postprocessResults(k,a))})})))},cancel:function(){this.close()},blur:function(){window.setTimeout(this.bind(function(){this.close();this.container.removeClass("select2-container-active");this.clearSearch();this.selection.find(".select2-search-choice-focus").removeClass("select2-search-choice-focus");this.search.blur()}),10)},focusSearch:function(){window.setTimeout(this.bind(function(){this.search.focus()}),10)},selectHighlighted:function(){var a=
this.results.find(".select2-highlighted:not(.select2-disabled)").data("select2-data");if(a)this.onSelect(a)},getPlaceholder:function(){return this.opts.element.attr("placeholder")||this.opts.element.data("placeholder")||this.opts.placeholder},getContainerWidth:function(){var a,b,c,f;if(this.opts.width!==h)return this.opts.width;a=this.opts.element.attr("style");if(a!==h){a=a.split(";");c=0;for(f=a.length;c<f;c+=1)if(b=a[c].replace(/\s/g,"").match(/width:(([-+]?([0-9]*\.)?[0-9]+)(px|em|ex|%|in|cm|mm|pt|pc))/),
null!==b&&1<=b.length)return b[1]}return this.opts.element.width()+"px"}});p=o(m,{createContainer:function(){return e("<div></div>",{"class":"select2-container",style:"width: "+this.getContainerWidth()}).html(" <a href='javascript:void(0)' class='select2-choice'> <span></span><abbr class='select2-search-choice-close' style='display:none;'></abbr> <div><b></b></div></a> <div class='select2-drop' style='display:none;'> <div class='select2-search'> <input type='text' autocomplete='off'/> </div> <ul class='select2-results'> </ul></div>")},
open:function(){this.opened()||this.parent.open.apply(this,arguments)},close:function(){this.opened()&&this.parent.close.apply(this,arguments)},focus:function(){this.close();this.selection.focus()},isFocused:function(){return this.selection.is(":focus")},cancel:function(){this.parent.cancel.apply(this,arguments);this.selection.focus()},initContainer:function(){var a,b=this.container,c=!1;this.selection=a=b.find(".select2-choice");this.search.bind("keydown",this.bind(function(a){switch(a.which){case d.UP:case d.DOWN:this.moveHighlight(a.which===
d.UP?-1:1);g(a);break;case d.TAB:case d.ENTER:this.selectHighlighted();g(a);break;case d.ESC:this.cancel(a),a.preventDefault()}}));b.delegate(".select2-choice","click",this.bind(function(b){c=!0;this.opened()?(this.close(),a.focus()):this.enabled&&this.open();b.preventDefault();c=!1}));b.delegate(".select2-choice","keydown",this.bind(function(a){if(this.enabled&&!(a.which===d.TAB||d.isControl(a)||d.isFunctionKey(a)||a.which===d.ESC))this.open(),(a.which===d.PAGE_UP||a.which===d.PAGE_DOWN||a.which===
d.SPACE)&&g(a),a.which===d.ENTER&&g(a)}));b.delegate(".select2-choice","focus",function(){this.enabled&&b.addClass("select2-container-active")});b.delegate(".select2-choice","blur",this.bind(function(){c||this.opened()||this.blur()}));a.delegate("abbr","click",this.bind(function(a){this.enabled&&(this.val(""),g(a),this.close(),this.triggerChange())}));this.setPlaceholder()},initSelection:function(){var a;""===this.opts.element.val()?this.updateSelection({id:"",text:""}):(a=this.opts.initSelection.call(null,
this.opts.element),a!==h&&null!==a&&this.updateSelection(a));this.close();this.setPlaceholder()},prepareOpts:function(){var a=this.parent.prepareOpts.apply(this,arguments);"select"===a.element.get(0).tagName.toLowerCase()&&(a.initSelection=function(a){a=a.find(":selected");return{id:a.attr("value"),text:a.text()}});return a},setPlaceholder:function(){var a=this.getPlaceholder();""===this.opts.element.val()&&a!==h&&!(this.select&&""!==this.select.find("option:first").text())&&("object"===typeof a?
this.updateSelection(a):this.selection.find("span").html(a),this.selection.addClass("select2-default"),this.selection.find("abbr").hide())},postprocessResults:function(a,b){var c=0,f=this,d=!0;this.results.find(".select2-result").each(function(a){if(n(f.id(e(this).data("select2-data")),f.opts.element.val()))return c=a,!1});this.highlight(c);!0===b&&(d=this.showSearchInput=a.results.length>=this.opts.minimumResultsForSearch,this.container.find(".select2-search")[d?"removeClass":"addClass"]("select2-search-hidden"),
this.container[d?"addClass":"removeClass"]("select2-with-searchbox"))},onSelect:function(a){var b=this.opts.element.val();this.opts.element.val(this.id(a));this.updateSelection(a);this.close();this.selection.focus();n(b,this.id(a))||this.triggerChange()},updateSelection:function(a){this.selection.find("span").html(this.opts.formatSelection(a));this.selection.removeClass("select2-default");this.opts.allowClear&&this.getPlaceholder()!==h&&this.selection.find("abbr").show()},val:function(){var a,b=null;
if(0===arguments.length)return this.opts.element.val();a=arguments[0];this.select?(this.select.val(a).find(":selected").each(function(){b={id:e(this).attr("value"),text:e(this).text()};return!1}),this.updateSelection(b)):(this.opts.element.val(!a?"":this.id(a)),this.updateSelection(a));this.setPlaceholder()},clearSearch:function(){this.search.val("")}});q=o(m,{createContainer:function(){return e("<div></div>",{"class":"select2-container select2-container-multi",style:"width: "+this.getContainerWidth()}).html(" <ul class='select2-choices'> <li class='select2-search-field'> <input type='text' autocomplete='off' style='width: 25px;'> </li></ul><div class='select2-drop' style='display:none;'> <ul class='select2-results'> </ul></div>")},
prepareOpts:function(){var a=this.parent.prepareOpts.apply(this,arguments),a=e.extend({},{closeOnSelect:!0},a);"select"===a.element.get(0).tagName.toLowerCase()&&(a.initSelection=function(a){var c=[];a.find(":selected").each(function(){c.push({id:e(this).attr("value"),text:e(this).text()})});return c});return a},initContainer:function(){var a;this.searchContainer=this.container.find(".select2-search-field");this.selection=a=this.container.find(".select2-choices");this.search.bind("keydown",this.bind(function(b){if(this.enabled){if(b.which===
d.BACKSPACE&&""===this.search.val()){this.close();var c;c=a.find(".select2-search-choice-focus");if(0<c.length){this.unselect(c.first());this.search.width(10);g(b);return}c=a.find(".select2-search-choice");0<c.length&&c.last().addClass("select2-search-choice-focus")}else a.find(".select2-search-choice-focus").removeClass("select2-search-choice-focus");if(this.opened())switch(b.which){case d.UP:case d.DOWN:this.moveHighlight(b.which===d.UP?-1:1);g(b);return;case d.ENTER:case d.TAB:this.selectHighlighted();
g(b);return;case d.ESC:this.cancel(b);b.preventDefault();return}b.which===d.TAB||(d.isControl(b)||d.isFunctionKey(b)||b.which===d.BACKSPACE||b.which===d.ESC)||(this.open(),(b.which===d.PAGE_UP||b.which===d.PAGE_DOWN)&&g(b))}}));this.search.bind("keyup",this.bind(this.resizeSearch));this.container.delegate(".select2-choices","click",this.bind(function(a){this.enabled&&(this.open(),this.focusSearch(),a.preventDefault())}));this.container.delegate(".select2-choices","focus",this.bind(function(){this.enabled&&
(this.container.addClass("select2-container-active"),this.clearPlaceholder())}));this.clearSearch()},enable:function(){this.enabled||(this.parent.enable.apply(this,arguments),this.search.show())},disable:function(){this.enabled&&(this.parent.disable.apply(this,arguments),this.search.hide())},initSelection:function(){var a;""===this.opts.element.val()&&this.updateSelection([]);if(this.select||""!==this.opts.element.val())a=this.opts.initSelection.call(null,this.opts.element),a!==h&&null!==a&&this.updateSelection(a);
this.close();this.clearSearch()},clearSearch:function(){var a=this.getPlaceholder();a!==h&&0===this.getVal().length&&!1===this.search.hasClass("select2-focused")?(this.search.val(a).addClass("select2-default"),this.search.width(this.getContainerWidth())):this.search.val("").width(10)},clearPlaceholder:function(){this.search.hasClass("select2-default")&&this.search.val("").removeClass("select2-default")},open:function(){this.opened()||(this.parent.open.apply(this,arguments),this.resizeSearch(),this.focusSearch())},
close:function(){this.opened()&&this.parent.close.apply(this,arguments)},focus:function(){this.close();this.search.focus()},isFocused:function(){return this.search.hasClass("select2-focused")},updateSelection:function(a){var b=[],c=[],d=this;e(a).each(function(){0>i(d.id(this),b)&&(b.push(d.id(this)),c.push(this))});a=c;this.selection.find(".select2-search-choice").remove();e(a).each(function(){d.addSelectedChoice(this)});d.postprocessResults()},onSelect:function(a){this.addSelectedChoice(a);this.select&&
this.postprocessResults();this.opts.closeOnSelect?(this.close(),this.search.width(10)):(this.search.width(10),this.resizeSearch());this.triggerChange();this.focusSearch()},cancel:function(){this.close();this.focusSearch()},addSelectedChoice:function(a){var b,c=this.id(a),d=this.getVal();b=["<li class='select2-search-choice'>",this.opts.formatSelection(a),"<a href='javascript:void(0)' class='select2-search-choice-close' tabindex='-1'></a>","</li>"];b=e(b.join(""));b.find("a").bind("click dblclick",
this.bind(function(a){this.enabled&&(this.unselect(e(a.target)),this.selection.find(".select2-search-choice-focus").removeClass("select2-search-choice-focus"),g(a),this.close(),this.focusSearch())})).bind("focus",this.bind(function(){this.enabled&&this.container.addClass("select2-container-active")}));b.data("select2-data",a);b.insertBefore(this.searchContainer);d.push(c);this.setVal(d)},unselect:function(a){var b=this.getVal(),c,a=a.closest(".select2-search-choice");if(0===a.length)throw"Invalid argument: "+
a+". Must be .select2-search-choice";c=i(this.id(a.data("select2-data")),b);0<=c&&(b.splice(c,1),this.setVal(b),this.select&&this.postprocessResults());a.remove();this.triggerChange()},postprocessResults:function(){var a=this.getVal(),b=this.results.find(".select2-result"),c=this;b.each(function(){var b=e(this),d=c.id(b.data("select2-data"));0<=i(d,a)?b.addClass("select2-disabled"):b.removeClass("select2-disabled")});b.each(function(a){if(!e(this).hasClass("select2-disabled"))return c.highlight(a),
!1})},resizeSearch:function(){var a,b,c,d;c=this.search;a=e("<div></div>").css({position:"absolute",left:"-1000px",top:"-1000px",display:"none",fontSize:c.css("fontSize"),fontFamily:c.css("fontFamily"),fontStyle:c.css("fontStyle"),fontWeight:c.css("fontWeight"),letterSpacing:c.css("letterSpacing"),textTransform:c.css("textTransform"),whiteSpace:"nowrap"});a.text(c.val());e("body").append(a);c=a.width();a.remove();a=c+10;b=this.search.offset().left;c=this.selection.width();d=this.selection.offset().left;
b=c-(b-d)-(this.search.outerWidth()-this.search.width());b<a&&(b=c-(this.search.outerWidth()-this.search.width()));40>b&&(b=c-(this.search.outerWidth()-this.search.width()));this.search.width(b)},getVal:function(){var a;if(this.select)return a=this.select.val(),null===a?[]:a;a=this.opts.element.val();return r(a,",")},setVal:function(a){var b;this.select?this.select.val(a):(b=[],e(a).each(function(){0>i(this,b)&&b.push(this)}),this.opts.element.val(0===b.length?"":b.join(",")))},val:function(){var a,
b=[],c=this;if(0===arguments.length)return this.getVal();a=arguments[0];this.select?(this.setVal(a),this.select.find(":selected").each(function(){b.push({id:e(this).attr("value"),text:e(this).text()})}),this.updateSelection(b)):(a=null===a?[]:a,this.setVal(a),e(a).each(function(){b.push(c.id(this))}),this.setVal(b),this.updateSelection(a));this.clearSearch()},onSortStart:function(){if(this.select)throw Error("Sorting of elements is not supported when attached to <select>. Attach to <input type='hidden'/> instead.");
this.search.width(0);this.searchContainer.hide()},onSortEnd:function(){var a=[],b=this;this.searchContainer.show();this.searchContainer.appendTo(this.searchContainer.parent());this.resizeSearch();this.selection.find(".select2-search-choice").each(function(){a.push(b.opts.id(e(this).data("select2-data")))});this.setVal(a);this.triggerChange()}});e.fn.select2=function(){var a=Array.prototype.slice.call(arguments,0),b,c,d,g,m="val destroy open close focus isFocused container onSortStart onSortEnd enable disable".split(" ");
this.each(function(){if(0===a.length||"object"===typeof a[0])b=0===a.length?{}:e.extend({},a[0]),b.element=e(this),"select"===b.element.get(0).tagName.toLowerCase()?g=b.element.attr("multiple"):(g=b.multiple||!1,"tags"in b&&(b.multiple=g=!0)),c=g?new q:new p,c.init(b);else if("string"===typeof a[0]){if(0>i(a[0],m))throw"Unknown method: "+a[0];d=h;c=e(this).data("select2");if(c!==h&&(d="container"===a[0]?c.container:c[a[0]].apply(c,a.slice(1)),d!==h))return!1}else throw"Invalid arguments to select2 plugin: "+
a;});return d===h?this:d};window.Select2={query:{ajax:t,local:u,tags:v},util:{debounce:s},"class":{"abstract":m,single:p,multi:q}}}})(jQuery);

Binary file not shown.

After

Width:  |  Height:  |  Size: 396 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

View File

@ -1,6 +1,9 @@
{% extends "base.html" %}
{% load static %}
{% block extrascript %}
<link href="{% static "select2-2.1/select2.css" %}" rel="stylesheet">
<script src="{% static "select2-2.1/select2.js" %}"></script>
<script>
var stars = [
{% for star in stars %}
@ -10,45 +13,79 @@
$(document).ready(function() {
$('#addMatch').click(function() {
var newform = '<div class="matchform"> \
<h4>Match</h4> \
<table class="table"> <tbody> \
<tr> <th>team #1</th> \
<td><input type="text" class="span3" name="members-MATCH_NUM-1" value=""> </td> \
<td><input type="text" class="span3" name="members-MATCH_NUM-1" value=""> </td> \
</tr> \
<tr> <th>team #2</th> \
<td><input type="text" class="span3" name="members-MATCH_NUM-2" value=""> </td> \
<td><input type="text" class="span3" name="members-MATCH_NUM-2" value=""> </td> \
</tr> \
<tr> <th>team #3</th> \
<td><input type="text" class="span3" name="members-MATCH_NUM-3" value=""> </td> \
<td><input type="text" class="span3" name="members-MATCH_NUM-3" value=""> </td> \
</tr> \
</tbody> </table> \
<label>Outcome</label> <select name="outcome"> \
var newform = '<div class="matchform" id="match-MATCH_NUM"> \
<h4>Match #MATCH_NUM</h4> \
<table class="table"><tbody id="tbody-MATCH_NUM"> </tbody></table> \
<input type="hidden" class="star-select" name="winner" /> \
<select class="outcome-select" name="outcome"> \
{% for val, name in OUTCOMES %} <option value="{{val}}">{{name}}</option> {% endfor %} \
</select> \
<label>Winner</label> <input type="text" class="span3" name="winner"> \
<label>Title</label> <select name="title"> <option value="">(none)</option> \
{% for val, name in TITLES %} <option value="{{val}}"> {{name}}</option> {% endfor %} \
</select> <br> \
<label>Notes</label> <input type="text" class="span6" name="notes"> \
<br> <button class="btn">Add Team</button> <button class="btn">Add Member</button> <button class="btn btn-danger delete-btn">Delete Match</button> </div>';
<select class="title-select" name="title"> \
<option value="" selected="selected">(no title at stake)</option> \
{% for val, name in TITLES %} <option value="{{val}}">{{name}}</option> {% endfor %} \
</select> \
<br><label>Notes</label> <input type="text" class="span6" name="notes"> \
<br><button class="btn addteam-btn">Add Team</button> <button class="btn addmember-btn">Add Member</button> <button class="btn btn-danger delete-btn">Delete Match</button> </div>';
var num_matches = $('.matchform').length+1;
$('#all-matches').append(newform.replace(/MATCH_NUM/g, num_matches));
register_handlers();
var last = $($('#all-matches').children().last()[0]);
last.find('.star-select').last().select2({
data:stars,
allowClear: true,
placeholder: 'Winner'
});
last.find('.delete-btn').click(function() {
$(this).parent().remove();
return false;
});
last.find('.addteam-btn').click(function() {
add_team($(this).parent());
return false;
});
last.find('.addmember-btn').click(function() {
$(this).parent().find('tr').each(function(i, e) {
add_member(e, 1, i+1);
});
return false;
});
// add 2 teams
add_team(last);
add_team(last);
return false;
});
});
var register_handlers = function() {
$('.delete-btn').click(function() {
$(this).parent().remove();
return false;
var add_team = function(matchdiv) {
var match_num = $(matchdiv)[0].id.replace(/match-/, '');
var team_num = $(matchdiv).find('tr').length+1;
var template = '<tr id="row-MATCHNUM-TEAMNUM"> <th>team #TEAMNUM</th> </tr>';
template = template.replace(/MATCHNUM/g, match_num);
template = template.replace(/TEAMNUM/g, team_num);
$(matchdiv).find('tbody').append(template);
add_member($(matchdiv).find('tr').last(), match_num, team_num);
};
var add_member = function(tr) {
var pieces = $(tr)[0].id.split('-');
var match_num = pieces[1];
var team_num = pieces[2];
var template = '<td><input type="hidden" style="width: 150px;" class="star-select" name="members-MATCHNUM-TEAMNUM" /></td>';
template = template.replace(/MATCHNUM/g, match_num);
template = template.replace(/TEAMNUM/g, team_num);
$(tr).append(template);
$(tr).find('input').last().select2({
data:stars,
allowClear: true,
placeholder: '------',
});
}
};
</script>
{% endblock %}
@ -60,56 +97,7 @@
placeholder="RAW/Smackdown/PPV Name">
<label>Date</label>
<input type="text" class="span3" name="date" value="{{event.date}}" placeholder="YYYY-MM-DD">
<div id="all-matches">
{% for match in event.matches %}
<div class="matchform">
<h4>Match</h4>
<table class="table">
<tbody>
{% for team in match.teams %}
<tr>
<th>team #{{forloop.counter}}</th>
{% for member in team %}
<td><input type="text" class="span3"
{# member-event_id-team_id #}
name="members-{{forloop.parentloop.parentloop.counter}}-{{forloop.parentloop.counter}}"
value="{{member}}">
</td>
{% endfor %}
</tr>
{% endfor %}
</tbody>
</table>
<label>Outcome</label>
<select name="outcome">
{% for val, name in OUTCOMES %}
<option value="{{val}}"
{% if match.outcome == val %}selected="selected"{% endif %}>
{{name}}</option>
{% endfor %}
</select>
<label>Winner</label>
<input type="text" class="span3" name="winner"
value="{{match.winner}}">
<label>Title</label>
<select name="title">
<option value="">(none)</option>
{% for val, name in TITLES %}
<option value="{{val}}"
{% if match.title_at_stake == val %}selected="selected"{% endif %}>
{{name}}</option>
{% endfor %}
</select>
<br>
<label>Notes</label>
<input type="text" class="span6" name="notes" value="{{match.notes}}">
<br>
<button class="btn">Add Team</button>
<button class="btn">Add Member</button>
<button class="btn btn-danger delete-btn">Delete Match</button>
</div>
{% endfor %}
</div>
<div id="all-matches"> </div>
<div>
<button class="btn" id="addMatch">Add Match</button>
{% csrf_token %}