diff --git a/.gitignore b/.gitignore index d52c76b..b44c749 100644 --- a/.gitignore +++ b/.gitignore @@ -1,7 +1,5 @@ node_modules - dist - .cache .DS_Store npm-debug.log diff --git a/assets/css/global.css b/assets/css/global.css index 3cd7a89..9d814fd 100644 --- a/assets/css/global.css +++ b/assets/css/global.css @@ -255,3 +255,34 @@ aside .btn-group { #page-content a { color:#202020; } +/* simplemodal */ +.filter { + margin: 5px 0px; +} + +#app_detail_modal { + padding:10px; + height: 300px; + /* overflow-y: auto; */ +} + +#simplemodal-overlay { + background-color:black; + filter: alpha(opacity=75); /* internet explorer */ + -khtml-opacity: 0.75; /* khtml, old safari */ + -moz-opacity: 0.75; /* mozilla, netscape */ + opacity: 0.75; /* fx, safari, opera */ +} + +#simplemodal-container { + min-width: 350px; + background: #ffffff; + padding: 2px; + box-shadow: 0px 0px 12px #333333; + border-radius: 5px; +} + +.close { + float:right; + padding: 0px 0px; +} \ No newline at end of file diff --git a/assets/css/projectplay.css b/assets/css/projectplay.css new file mode 100644 index 0000000..d56999f --- /dev/null +++ b/assets/css/projectplay.css @@ -0,0 +1,685 @@ +/* +Theme Name: Project Play +Theme URI: http://www.sixhalfdozen.com/ +Version: 1.0.0 +Author: 6HD +Author URI: http://www.sixhalfdozen.com/ +*/ + +/************************************************************************************ +RESET +*************************************************************************************/ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ + +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} +body { + line-height: 1; +} +ol, ul { + list-style: none; +} +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} + +/************************************************************************************ +SITE-WIDE FORMATTING CLASSES +*************************************************************************************/ +.clear { + clear: both; +} +.left { + float: left; +} +.right { + float: right; +} +.clearfix:after { + visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; +} +.clearfix { + display: block; zoom: 1; +} + +/************************************************************************************ +WORDPRESS POST FORMATTING CLASSES +*************************************************************************************/ +img.alignleft, img.aligncenter, img.alignright, img.alignnone { + margin-bottom: 15px; +} +.alignleft { + float: left; + margin-right: 30px; +} +.alignright { + float: right; + margin-left: 30px; +} +.aligncenter { + text-align: center; + display: block; + margin-left: auto; + margin-right: auto; +} +.wp-caption { + text-align: center; + margin-bottom: 15px; + max-width: 100%; +} +.wp-caption-text { + font-style: italic; + font-size: 95%; + line-height: 120%; + margin: 6px 0; +} + +/************************************************************************************ +SITE-WIDE TAG STYLES +*************************************************************************************/ +/*html { + overflow-y: scroll; /* vertical scrollbar always shows to prevent sideways jumping effect between pages that would or would not show the scrollbar +}*/ +/*html.backgroundsize { + /*background: url('images/bg-fullscreen.png') no-repeat top center fixed; + -webkit-background-size: cover; + -moz-background-size: cover; + -o-background-size: cover; + background-size: cover; +}*/ +#background-image { + position:fixed; + top:0; + left:0; +} +body { + font: .85em/140% "futura-pt", Arial, Helvetica, sans-serif; + color: #202020; +} +body.delay-transitions * { + -webkit-transition: none !important; + -moz-transition: none !important; + -o-transition: none !important; +} +a { + text-decoration: underline; + color: #202020; + outline: none; + -webkit-transition: all 0.3s ease-in-out; + -moz-transition: all 0.3s ease-in-out; + -o-transition: all 0.3s ease-in-out; + transition: all 0.3s ease-in-out; +} +a:hover, a:active, a:focus { + color: #93288d; +} +a img, a.rollover, li.rollover, li.rollover a, input[type='submit'] { + zoom: 1; + opacity:1; + -webkit-transition: all 0.2s ease-in-out; + -moz-transition: all 0.2s ease-in-out; + -o-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; + backface-visibility:hidden; /* to prevent flicker when changing opacity on hover */ + -webkit-backface-visibility:hidden; + -moz-backface-visibility:hidden; + -ms-backface-visibility:hidden; +} +a:hover img, a.rollover:hover, li.rollover:hover, li.rollover a:hover, input[type='submit']:hover { + opacity:0.8; +} +p { + margin: 0 0 1.2em; + padding: 0; +} +small { + font-size: 87%; +} +blockquote { + font: italic 110%/130% "Times New Roman", Times, serif; + padding: 8px 30px 15px; +} + +ul, ol { + margin: 1em 0 1.1em ; + padding: 0; + line-height: 140%; +} +li { + margin: 0 0 0.5em 2.7em; + padding: 0; +} + +h1, h2, h3, h4, h5, h6 { + line-height: 1.4em; + margin: 0 0 .4em; +} +h1 { + font-size: 2em; +} +h2 { + font-size: 1.8em; +} +h3 { + font-size: 1.6em; +} +h4 { + font-size: 1.4em; +} +h5 { + font-size: 1.2em; +} +h6 { + font-size: 1em; +} +input[type=text], input[type=email], input[type=tel], input[type=password], input[type=search], textarea, select, button { + font: 120%/140% "Times New Roman", Times, serif; +} +input[type=text], input[type=email], input[type=tel], input[type=password], input[type=search], textarea { + color: #3b3b3b; + border: solid 1px #d6d6d6; + background: white; + padding: 6px 10px; + -webkit-appearance: none; +} +select { + border: solid 1px #d6d6d6; +} +input[type=text], input[type=email], input[type=tel], input[type=password], input[type=search], textarea { + width: 240px; + max-width: 93.5%; +} +textarea { + line-height: 150%; + overflow: auto; +} +textarea:focus, input[type=password]:focus, input[type=text]:focus, input[type=email]:focus, input[type=tel]:focus, input[type=search]:focus, select:focus { + outline: none; + -webkit-box-shadow: 0px 0px 3px 0px rgba(42,42,42,0.2); + -moz-box-shadow: 0px 0px 3px 0px rgba(42,42,42,0.2); + box-shadow: 0px 0px 3px 0px rgba(42,42,42,0.2); +} +input[type=reset], input[type=submit], button { + background: white; + border: none; + padding: 7px 20px; + cursor: pointer; +} +input[type=reset]:hover, input[type=submit]:hover, button:hover { + outline: none; +} + +/************************************************************************************ +AVOID FOUC +*************************************************************************************/ +html.opacity #content-main-fade-in { + opacity:0; +} +html.no-opacity #content-main-fade-in { + visibility:hidden; +} + +/************************************************************************************ +OLD BROWSER MESSAGE +*************************************************************************************/ +#no-browser-support { + display:none; +} +html.lt-ie8 #no-browser-support { + display:block; + width:440px; + padding:30px; + margin:50px auto; + text-align:center; + border:1px solid black; +} +html.lt-ie8 #no-browser-support h3 { + font-size:110%; +} +html.lt-ie8 #no-browser-support img { + width:90px; + height:auto; +} +html.lt-ie8 img#background-image { + display:none; +} +html.lt-ie8 #page-wrap { + display:none; +} + +/************************************************************************************ +SITE-WIDE CLASS STYLES +*************************************************************************************/ +.page-centered { + width:978px; + padding:0; + margin:0 auto; +} +.content-width { + width:946px; + padding:0 16px; +} +.content-width-left { + margin-left:16px; + width:322px; +} +.content-width-right { + margin-right:16px; + width:548px; +} +.content-frontpage-width-left { + margin-left:16px; + width:168px; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} +.content-frontpage-width-right { + margin-right:16px; + width:764px; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +/************************************************************************************ +HEADER +*************************************************************************************/ +/* #header-bar-across { + height:34px; + margin-top:112px; + background:url('../img/bg-header-across-sliver.png') repeat-x; + position:relative; +} +#header-bar-page { + height:100%; + position:relative; + background: url('../img/bg-header.png') no-repeat; +} */ +#header-text { + position:relative; + height:1px; +} +#header-text p { + padding:10px 12px 8px 12px; + background:#8cc645; + color:white; + font-size:93%; + font-weight:bold; + border-radius:0 0 6px 6px; + position:absolute; + top:0px; + right:16px; +} +#logo { + position:absolute; + top:-98px; + left:16px; +} +#logo a { + display:block; +} +#logo img { + width:165px; + height:255px; + display:block; +} +#menu { + position:absolute; + top:0px; + right:16px; +} + +/************************************************************************************ +CONTENT +*************************************************************************************/ +#content-front-main { + min-height:360px; + margin-top:30px; + position:relative; + border:10px solid #93288d; +} +#content-front-main img { + display:block; + width:100%; +} +#content-main { + min-height:400px; + margin-top:70px; + padding:28px 28px 48px; + border-radius:9px; + background:#fbfbfb; + background-color: rgba(255, 255, 255, 0.9); + position:relative; +} +#copyright { + width:100%; + line-height:100%; + font-size:80%; + text-align:center; + position:absolute; + bottom:18px; + left:0px; +} +#content-front-main #copyright { + bottom:-30px !important; + font-size:90% !important; + font-weight:bold; +} +.funfact h5 { + color: #93288d; + text-transform:uppercase; + font-size:120%; + font-weight:bold; +} +#gallery div { + padding:0 0 14px 0; + margin:0; +} +#gallery a.gallery-item { + padding:0 0 0 14px; + margin:0; + display:block; + width:126px; + height:126px; + float:left; +} +#gallery a.gallery-item.first { + padding-left:0px !important; +} +#gallery img { + display:block; + width:129px; + height:129px; +} +#navigation { + width:100%; +} +#navigation a { + text-decoration: none; + display:block; + font-size:120%; +} +#navigation #previous-posts { + float:left; +} +#navigation #next-posts { + float:right; +} + +/************************************************************************************ +SIDEBAR +*************************************************************************************/ +aside#sidebar { + position:relative; +} +#content-sidebar { + margin-top:140px; +} +#content-sidebar img { + display:block; + margin-left:-16px; +} +#content-front-sidebar { + margin-top:140px; + min-height:405px; + position:relative; + background:#93288d; + border:2px solid white; + border-radius:10px 0 0 10px; + padding: 10px 5px; + text-align: center; +} + +/************************************************************************************ +FOOTER +*************************************************************************************/ + +#footer-content-right #copyright { + font-size:0.83em; + padding-top:8px; + text-align:right; +} +#footer-content-right #copyright { + font-size:0.83em; + padding-top:8px; + text-align:right; +} + +/************************************************************************************ +TOP MENU +*************************************************************************************/ +ul#menu-top, ul#menu-top li { + margin: 0; + padding: 0; + list-style:none; + position:relative; +} +ul#menu-top > li { + list-style:none; + margin:0 6px 0 0; + float:left; + position:relative; +} +ul#menu-top > li.last { + margin:0 !important; +} +ul#menu-top > li > a { + display:block; + height:34px; + padding-top:7px; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing:border-box; + text-align:center; + border:1px solid white; + background:#8cc645; + border-radius:4px; + white-space:nowrap; + text-decoration: none; + text-transform: uppercase; + color: white; + font-weight:bold; + font-size:91.91%; +} +ul#menu-top > li.menu-1 > a { + width:162px; +} +ul#menu-top > li.menu-2 > a { + width:98px; +} +ul#menu-top > li.menu-3 > a { + width:100px; +} +ul#menu-top > li.menu-4 > a { + width:94px; +} +ul#menu-top > li.menu-5 > a { + width:126px; +} +ul#menu-top li.current-menu-item > a, ul#menu-top li.current-page-item > a, ul#menu-top li.current-menu-parent > a, ul#menu-top li.current-page-parent > a, ul#menu-top li:hover > a { + background:#93288d; +} +#menu-top ul { + margin: 0; + padding: 0; + width:100%; + list-style:none; + position:absolute; + top:-46px; + left:0px; + z-index:-1; +} +ul#menu-top ul li { + list-style:none; + height:46px; + padding:0; + margin:0; + position:relative; +} +/* #menu-top ul li.submenu-1 { + background:url('../img/nav-icons-about-projectplay.png') center center no-repeat; +} +#menu-top ul li.submenu-2 { + background:url('../img/nav-icons-playis-projectplay.png') center center no-repeat; +} +#menu-top ul li.submenu-3 { + background:url('../img/nav-icons-wheredoyouplay-projectplay.png') center center no-repeat; +} +#menu-top ul li.submenu-4 { + background:url('../img/nav-icons-contact-projectplay.png') center center no-repeat; +} +#menu-top ul li.submenu-5 { + background:url('../img/nav-icons-gallery-projectplay.png') center center no-repeat; +} */ +ul#menu-top ul { + display:none; +} +html.no-js ul#menu-top li:hover ul { + display:block; +} +ul#menu-top li.current-menu-item ul, ul#menu-top li.current-page-item ul, ul#menu-top li.current-menu-parent ul, ul#menu-top li.current-page-parent ul { + display:block !important; +} + +#map_canvas { + width: 744px; + height: 600px; +} + +.imgBtn { + cursor: pointer; +} + +#app_listview { + height: 400px; + background-color: #FFFFFF; + overflow: auto; + text-align: left; + border-radius: 5px; +} + +.listViewRow { + padding: 3px; +} + +.oddRow { + background-color: #E1E1E1; +} + +.btn { + background-color: #9ACE69; + border-radius: 5px; + border: solid #FFFFFF 1px; + cursor: pointer; + font-weight: bold; + color: #FFFFFF; + margin: 3px 0px; + text-align: center; +} + +.sbtext { + color: white; +} + +input:not([type=submit]):not([type=file]), select { + padding: 6px; + border-radius: 5px; + vertical-align: middle; + font-family: Arial; + font-size: 80%; +} + +.filter { + margin: 5px 0px; +} + +#app_detail_modal { + padding:10px; + height: 300px; + overflow-y: auto; +} + +#simplemodal-overlay { + background-color:black; + filter: alpha(opacity=75); /* internet explorer */ + -khtml-opacity: 0.75; /* khtml, old safari */ + -moz-opacity: 0.75; /* mozilla, netscape */ + opacity: 0.75; /* fx, safari, opera */ +} + +#simplemodal-container { + min-width: 350px; + background: #ffffff; + padding: 2px; + box-shadow: 0px 0px 12px #333333; + border-radius: 5px; +} + +.close { + float:right; + padding: 0px 0px; +} + +#advancedFilterPanel { + text-align: left; + color: #ffffff; +} + +#advancedFilterPanel hr { + border: 0; + border-bottom: 1px dashed #ffffff; + background: #E1E1E1; +} + +input[type='radio'], label{ + vertical-align: middle; + padding: 10px 2px; + margin: 10px 2px; +} + +#modal_school { + background-color: #68afcc; + border-radius: 10px; + padding:10px; +} + +#detail_school em { + font-weight: bold; + font-style: italic; +} \ No newline at end of file diff --git a/index.html b/index.html index 8a63fa9..2452818 100644 --- a/index.html +++ b/index.html @@ -31,10 +31,13 @@ + + + @@ -144,6 +147,34 @@ + + diff --git a/map/js/app.js b/map/js/app.js index 39276d4..84775f3 100644 --- a/map/js/app.js +++ b/map/js/app.js @@ -348,9 +348,11 @@ window.playApp = function() $('#modal_img').empty(); if (result.imageurl) { var img = $(''); + // console.log(img) + // console.log(result) $('#modal_img').append(img); - img.load(function() { - //console.log("image loaded."); + img.on('load', function() { //.load(function() { + // console.log("image loaded."); $('#simplemodal-container').css({height: $('#app_detail_modal').outerHeight()}); $('#simplemodal-container').css({top: ($(document.body).outerHeight() - $('#simplemodal-container').outerHeight()) / 2}); $('#modal_img').show(); diff --git a/map/js/jquery.simplemodal.1.4.4.min.js b/map/js/jquery.simplemodal.1.4.4.min.js index f2b5daa..5fe499b 100644 --- a/map/js/jquery.simplemodal.1.4.4.min.js +++ b/map/js/jquery.simplemodal.1.4.4.min.js @@ -5,22 +5,721 @@ * Licensed under MIT and GPL * Date: Sun, Jan 20 2013 15:58:56 -0800 */ -(function(b){"function"===typeof define&&define.amd?define(["jquery"],b):b(jQuery)})(function(b){var j=[],n=b(document),k=navigator.userAgent.toLowerCase(),l=b(window),g=[],o=null,p=/msie/.test(k)&&!/opera/.test(k),q=/opera/.test(k),m,r;m=p&&/msie 6./.test(k)&&"object"!==typeof window.XMLHttpRequest;r=p&&/msie 7.0/.test(k);b.modal=function(a,h){return b.modal.impl.init(a,h)};b.modal.close=function(){b.modal.impl.close()};b.modal.focus=function(a){b.modal.impl.focus(a)};b.modal.setContainerDimensions= -function(){b.modal.impl.setContainerDimensions()};b.modal.setPosition=function(){b.modal.impl.setPosition()};b.modal.update=function(a,h){b.modal.impl.update(a,h)};b.fn.modal=function(a){return b.modal.impl.init(this,a)};b.modal.defaults={appendTo:"body",focus:!0,opacity:50,overlayId:"simplemodal-overlay",overlayCss:{},containerId:"simplemodal-container",containerCss:{},dataId:"simplemodal-data",dataCss:{},minHeight:null,minWidth:null,maxHeight:null,maxWidth:null,autoResize:!1,autoPosition:!0,zIndex:1E3, -close:!0,closeHTML:'',closeClass:"simplemodal-close",escClose:!0,overlayClose:!1,fixed:!0,position:null,persist:!1,modal:!0,onOpen:null,onShow:null,onClose:null};b.modal.impl={d:{},init:function(a,h){if(this.d.data)return!1;o=p&&(document.compatMode === "BackCompat");this.o=b.extend({},b.modal.defaults,h);this.zIndex=this.o.zIndex;this.occb=!1;if("object"===typeof a){if(a=a instanceof b?a:b(a),this.d.placeholder=!1,0").attr("id", -"simplemodal-placeholder").css({display:"none"})),this.d.placeholder=!0,this.display=a.css("display"),!this.o.persist))this.d.orig=a.clone(!0)}else if("string"===typeof a||"number"===typeof a)a=b("
").html(a);else return alert("SimpleModal Error: Unsupported data type: "+typeof a),this;this.create(a);this.open();b.isFunction(this.o.onShow)&&this.o.onShow.apply(this,[this.d]);return this},create:function(a){this.getDimensions();if(this.o.modal&&m)this.d.iframe=b('').css(b.extend(this.o.iframeCss, -{display:"none",opacity:0,position:"fixed",height:g[0],width:g[1],zIndex:this.o.zIndex,top:0,left:0})).appendTo(this.o.appendTo);this.d.overlay=b("
").attr("id",this.o.overlayId).addClass("simplemodal-overlay").css(b.extend(this.o.overlayCss,{display:"none",opacity:this.o.opacity/100,height:this.o.modal?j[0]:0,width:this.o.modal?j[1]:0,position:"fixed",left:0,top:0,zIndex:this.o.zIndex+1})).appendTo(this.o.appendTo);this.d.container=b("
").attr("id",this.o.containerId).addClass("simplemodal-container").css(b.extend({position:this.o.fixed? -"fixed":"absolute"},this.o.containerCss,{display:"none",zIndex:this.o.zIndex+2})).append(this.o.close&&this.o.closeHTML?b(this.o.closeHTML).addClass(this.o.closeClass):"").appendTo(this.o.appendTo);this.d.wrap=b("
").attr("tabIndex",-1).addClass("simplemodal-wrap").css({height:"100%",outline:0,width:"100%"}).appendTo(this.d.container);this.d.data=a.attr("id",a.attr("id")||this.o.dataId).addClass("simplemodal-data").css(b.extend(this.o.dataCss,{display:"none"})).appendTo("body");this.setContainerDimensions(); -this.d.data.appendTo(this.d.wrap);(m||o)&&this.fixIE()},bindEvents:function(){var a=this;b("."+a.o.closeClass).bind("click.simplemodal",function(b){b.preventDefault();a.close()});a.o.modal&&a.o.close&&a.o.overlayClose&&a.d.overlay.bind("click.simplemodal",function(b){b.preventDefault();a.close()});n.bind("keydown.simplemodal",function(b){a.o.modal&&9===b.keyCode?a.watchTab(b):a.o.close&&a.o.escClose&&27===b.keyCode&&(b.preventDefault(),a.close())});l.bind("resize.simplemodal orientationchange.simplemodal", -function(){a.getDimensions();a.o.autoResize?a.setContainerDimensions():a.o.autoPosition&&a.setPosition();m||o?a.fixIE():a.o.modal&&(a.d.iframe&&a.d.iframe.css({height:g[0],width:g[1]}),a.d.overlay.css({height:j[0],width:j[1]}))})},unbindEvents:function(){b("."+this.o.closeClass).unbind("click.simplemodal");n.unbind("keydown.simplemodal");l.unbind(".simplemodal");this.d.overlay.unbind("click.simplemodal")},fixIE:function(){var a=this.o.position;b.each([this.d.iframe||null,!this.o.modal?null:this.d.overlay, -"fixed"===this.d.container.css("position")?this.d.container:null],function(b,e){if(e){var f=e[0].style;f.position="absolute";if(2>b)f.removeExpression("height"),f.removeExpression("width"),f.setExpression("height",'document.body.scrollHeight > document.body.clientHeight ? document.body.scrollHeight : document.body.clientHeight + "px"'),f.setExpression("width",'document.body.scrollWidth > document.body.clientWidth ? document.body.scrollWidth : document.body.clientWidth + "px"');else{var c,d;a&&a.constructor=== -Array?(c=a[0]?"number"===typeof a[0]?a[0].toString():a[0].replace(/px/,""):e.css("top").replace(/px/,""),c=-1===c.indexOf("%")?c+' + (t = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop) + "px"':parseInt(c.replace(/%/,""))+' * ((document.documentElement.clientHeight || document.body.clientHeight) / 100) + (t = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop) + "px"',a[1]&&(d="number"===typeof a[1]? -a[1].toString():a[1].replace(/px/,""),d=-1===d.indexOf("%")?d+' + (t = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft) + "px"':parseInt(d.replace(/%/,""))+' * ((document.documentElement.clientWidth || document.body.clientWidth) / 100) + (t = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft) + "px"')):(c='(document.documentElement.clientHeight || document.body.clientHeight) / 2 - (this.offsetHeight / 2) + (t = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop) + "px"', -d='(document.documentElement.clientWidth || document.body.clientWidth) / 2 - (this.offsetWidth / 2) + (t = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft) + "px"');f.removeExpression("top");f.removeExpression("left");f.setExpression("top",c);f.setExpression("left",d)}}})},focus:function(a){var h=this,a=a&&-1!==b.inArray(a,["first","last"])?a:"first",e=b(":input:enabled:visible:"+a,h.d.wrap);setTimeout(function(){0c?c:bc?c:this.o.minHeight&&"auto"!==i&&ed?d:ad?d:this.o.minWidth&&"auto"!==c&&fb||f>a?"auto":"visible"});this.o.autoPosition&&this.setPosition()},setPosition:function(){var a,b;a=g[0]/2-this.d.container.outerHeight(!0)/2;b=g[1]/2-this.d.container.outerWidth(!0)/2;var e="fixed"!==this.d.container.css("position")?l.scrollTop():0;this.o.position&&"[object Array]"===Object.prototype.toString.call(this.o.position)?(a=e+(this.o.position[0]||a),b=this.o.position[1]||b): -a=e+a;this.d.container.css({left:b,top:a})},watchTab:function(a){if(0my data').modal({options}); + * @example $('#myDiv').modal({options}); + * @example jQueryObject.modal({options}); + * + * 2) As a stand-alone function, like $.modal(data). The data parameter + * is required and an optional options object can be passed as a second + * parameter. This method provides more flexibility in the types of data + * that are allowed. The data could be a DOM object, a jQuery object, HTML + * or a string. + * + * @example $.modal('
my data
', {options}); + * @example $.modal('my data', {options}); + * @example $.modal($('#myDiv'), {options}); + * @example $.modal(jQueryObject, {options}); + * @example $.modal(document.getElementById('myDiv'), {options}); + * + * A SimpleModal call can contain multiple elements, but only one modal + * dialog can be created at a time. Which means that all of the matched + * elements will be displayed within the modal container. + * + * SimpleModal internally sets the CSS needed to display the modal dialog + * properly in all browsers, yet provides the developer with the flexibility + * to easily control the look and feel. The styling for SimpleModal can be + * done through external stylesheets, or through SimpleModal, using the + * overlayCss, containerCss, and dataCss options. + * + * SimpleModal has been tested in the following browsers: + * - IE 6+ + * - Firefox 2+ + * - Opera 9+ + * - Safari 3+ + * - Chrome 1+ + * + * @name SimpleModal + * @type jQuery + * @requires jQuery v1.3 + * @cat Plugins/Windows and Overlays + * @author Eric Martin (http://ericmmartin.com) + * @version @VERSION + */ + +;(function (factory) { + if (typeof define === 'function' && define.amd) { + // AMD. Register as an anonymous module. + define(['jquery'], factory); + } else { + // Browser globals + factory(jQuery); + } +} +(function ($) { + var d = [], + doc = $(document), + ua = navigator.userAgent.toLowerCase(), + wndw = $(window), + w = []; + + var browser = { + ieQuirks: null, + msie: /msie/.test(ua) && !/opera/.test(ua), + opera: /opera/.test(ua) + }; + browser.ie6 = browser.msie && /msie 6./.test(ua) && typeof window['XMLHttpRequest'] !== 'object'; + browser.ie7 = browser.msie && /msie 7.0/.test(ua); + browser.boxModel = (document.compatMode === "CSS1Compat"); + + /* + * Create and display a modal dialog. + * + * @param {string, object} data A string, jQuery object or DOM object + * @param {object} [options] An optional object containing options overrides + */ + $.modal = function (data, options) { + return $.modal.impl.init(data, options); + }; + + /* + * Close the modal dialog. + */ + $.modal.close = function () { + $.modal.impl.close(); + }; + + /* + * Set focus on first or last visible input in the modal dialog. To focus on the last + * element, call $.modal.focus('last'). If no input elements are found, focus is placed + * on the data wrapper element. + */ + $.modal.focus = function (pos) { + $.modal.impl.focus(pos); + }; + + /* + * Determine and set the dimensions of the modal dialog container. + * setPosition() is called if the autoPosition option is true. + */ + $.modal.setContainerDimensions = function () { + $.modal.impl.setContainerDimensions(); + }; + + /* + * Re-position the modal dialog. + */ + $.modal.setPosition = function () { + $.modal.impl.setPosition(); + }; + + /* + * Update the modal dialog. If new dimensions are passed, they will be used to determine + * the dimensions of the container. + * + * setContainerDimensions() is called, which in turn calls setPosition(), if enabled. + * Lastly, focus() is called is the focus option is true. + */ + $.modal.update = function (height, width) { + $.modal.impl.update(height, width); + }; + + /* + * Chained function to create a modal dialog. + * + * @param {object} [options] An optional object containing options overrides + */ + $.fn.modal = function (options) { + return $.modal.impl.init(this, options); + }; + + /* + * SimpleModal default options + * + * appendTo: (String:'body') The jQuery selector to append the elements to. For .NET, use 'form'. + * focus: (Boolean:true) Focus in the first visible, enabled element? + * opacity: (Number:50) The opacity value for the overlay div, from 0 - 100 + * overlayId: (String:'simplemodal-overlay') The DOM element id for the overlay div + * overlayCss: (Object:{}) The CSS styling for the overlay div + * containerId: (String:'simplemodal-container') The DOM element id for the container div + * containerCss: (Object:{}) The CSS styling for the container div + * dataId: (String:'simplemodal-data') The DOM element id for the data div + * dataCss: (Object:{}) The CSS styling for the data div + * minHeight: (Number:null) The minimum height for the container + * minWidth: (Number:null) The minimum width for the container + * maxHeight: (Number:null) The maximum height for the container. If not specified, the window height is used. + * maxWidth: (Number:null) The maximum width for the container. If not specified, the window width is used. + * autoResize: (Boolean:false) Automatically resize the container if it exceeds the browser window dimensions? + * autoPosition: (Boolean:true) Automatically position the container upon creation and on window resize? + * zIndex: (Number: 1000) Starting z-index value + * close: (Boolean:true) If true, closeHTML, escClose and overClose will be used if set. + If false, none of them will be used. + * closeHTML: (String:'') The HTML for the default close link. + SimpleModal will automatically add the closeClass to this element. + * closeClass: (String:'simplemodal-close') The CSS class used to bind to the close event + * escClose: (Boolean:true) Allow Esc keypress to close the dialog? + * overlayClose: (Boolean:false) Allow click on overlay to close the dialog? + * fixed: (Boolean:true) If true, the container will use a fixed position. If false, it will use a + absolute position (the dialog will scroll with the page) + * position: (Array:null) Position of container [top, left]. Can be number of pixels or percentage + * persist: (Boolean:false) Persist the data across modal calls? Only used for existing + DOM elements. If true, the data will be maintained across modal calls, if false, + the data will be reverted to its original state. + * modal: (Boolean:true) User will be unable to interact with the page below the modal or tab away from the dialog. + If false, the overlay, iframe, and certain events will be disabled allowing the user to interact + with the page below the dialog. + * onOpen: (Function:null) The callback function used in place of SimpleModal's open + * onShow: (Function:null) The callback function used after the modal dialog has opened + * onClose: (Function:null) The callback function used in place of SimpleModal's close + */ + $.modal.defaults = { + appendTo: 'body', + focus: true, + opacity: 50, + overlayId: 'simplemodal-overlay', + overlayCss: {}, + containerId: 'simplemodal-container', + containerCss: {}, + dataId: 'simplemodal-data', + dataCss: {}, + minHeight: null, + minWidth: null, + maxHeight: null, + maxWidth: null, + autoResize: false, + autoPosition: true, + zIndex: 1000, + close: true, + closeHTML: '', + closeClass: 'simplemodal-close', + escClose: true, + overlayClose: false, + fixed: true, + position: null, + persist: false, + modal: true, + onOpen: null, + onShow: null, + onClose: null + }; + + /* + * Main modal object + * o = options + */ + $.modal.impl = { + /* + * Contains the modal dialog elements and is the object passed + * back to the callback (onOpen, onShow, onClose) functions + */ + d: {}, + /* + * Initialize the modal dialog + */ + init: function (data, options) { + var s = this; + + // don't allow multiple calls + if (s.d.data) { + return false; + } + + browser.ieQuirks = browser.msie && !browser.boxModel; + + // merge defaults and user options + s.o = $.extend({}, $.modal.defaults, options); + + // keep track of z-index + s.zIndex = s.o.zIndex; + + // set the onClose callback flag + s.occb = false; + + // determine how to handle the data based on its type + if (typeof data === 'object') { + // convert DOM object to a jQuery object + data = data instanceof $ ? data : $(data); + s.d.placeholder = false; + + // if the object came from the DOM, keep track of its parent + if (data.parent().parent().length > 0) { + data.before($('') + .attr('id', 'simplemodal-placeholder') + .css({display: 'none'})); + + s.d.placeholder = true; + s.display = data.css('display'); + + // persist changes? if not, make a clone of the element + if (!s.o.persist) { + s.d.orig = data.clone(true); + } + } + } + else if (typeof data === 'string' || typeof data === 'number') { + // just insert the data as innerHTML + data = $('
').html(data); + } + else { + // unsupported data type! + alert('SimpleModal Error: Unsupported data type: ' + typeof data); + return s; + } + + // create the modal overlay, container and, if necessary, iframe + s.create(data); + data = null; + + // display the modal dialog + s.open(); + + // useful for adding events/manipulating data in the modal dialog + if ($.isFunction(s.o.onShow)) { + s.o.onShow.apply(s, [s.d]); + } + + // don't break the chain =) + return s; + }, + /* + * Create and add the modal overlay and container to the page + */ + create: function (data) { + var s = this; + + // get the window properties + s.getDimensions(); + + // add an iframe to prevent select options from bleeding through + if (s.o.modal && browser.ie6) { + s.d.iframe = $('') + .css($.extend(s.o.iframeCss, { + display: 'none', + opacity: 0, + position: 'fixed', + height: w[0], + width: w[1], + zIndex: s.o.zIndex, + top: 0, + left: 0 + })) + .appendTo(s.o.appendTo); + } + + // create the overlay + s.d.overlay = $('
') + .attr('id', s.o.overlayId) + .addClass('simplemodal-overlay') + .css($.extend(s.o.overlayCss, { + display: 'none', + opacity: s.o.opacity / 100, + height: s.o.modal ? d[0] : 0, + width: s.o.modal ? d[1] : 0, + position: 'fixed', + left: 0, + top: 0, + zIndex: s.o.zIndex + 1 + })) + .appendTo(s.o.appendTo); + + // create the container + s.d.container = $('
') + .attr('id', s.o.containerId) + //Adding role attribute with value 'dialog' for 508 compliance. + .attr('role', 'dialog') + .addClass('simplemodal-container') + .css($.extend( + {position: s.o.fixed ? 'fixed' : 'absolute'}, + s.o.containerCss, + {display: 'none', zIndex: s.o.zIndex + 2} + )) + .append(s.o.close && s.o.closeHTML + ? $(s.o.closeHTML).addClass(s.o.closeClass) + : '') + .appendTo(s.o.appendTo); + + s.d.wrap = $('
') + .attr('tabIndex', -1) + .addClass('simplemodal-wrap') + .css({height: '100%', outline: 0, width: '100%'}) + .appendTo(s.d.container); + + // add styling and attributes to the data + // append to body to get correct dimensions, then move to wrap + s.d.data = data + .attr('id', data.attr('id') || s.o.dataId) + .addClass('simplemodal-data') + .css($.extend(s.o.dataCss, { + display: 'none' + })) + .appendTo('body'); + data = null; + + s.setContainerDimensions(); + s.d.data.appendTo(s.d.wrap); + + // fix issues with IE + if (browser.ie6 || browser.ieQuirks) { + s.fixIE(); + } + }, + /* + * Bind events + */ + bindEvents: function () { + var s = this; + + // bind the close event to any element with the closeClass class + $('.' + s.o.closeClass).bind('click.simplemodal', function (e) { + e.preventDefault(); + s.close(); + }); + + // bind the overlay click to the close function, if enabled + if (s.o.modal && s.o.close && s.o.overlayClose) { + s.d.overlay.bind('click.simplemodal', function (e) { + e.preventDefault(); + s.close(); + }); + } + + // bind keydown events + doc.bind('keydown.simplemodal', function (e) { + if (s.o.modal && e.keyCode === 9) { // TAB + s.watchTab(e); + } + else if ((s.o.close && s.o.escClose) && e.keyCode === 27) { // ESC + e.preventDefault(); + s.close(); + } + }); + + // update window size + wndw.bind('resize.simplemodal orientationchange.simplemodal', function () { + // redetermine the window width/height + s.getDimensions(); + + // reposition the dialog + s.o.autoResize ? s.setContainerDimensions() : s.o.autoPosition && s.setPosition(); + + if (browser.ie6 || browser.ieQuirks) { + s.fixIE(); + } + else if (s.o.modal) { + // update the iframe & overlay + s.d.iframe && s.d.iframe.css({height: w[0], width: w[1]}); + s.d.overlay.css({height: d[0], width: d[1]}); + } + }); + }, + /* + * Unbind events + */ + unbindEvents: function () { + $('.' + this.o.closeClass).unbind('click.simplemodal'); + doc.unbind('keydown.simplemodal'); + wndw.unbind('.simplemodal'); + this.d.overlay.unbind('click.simplemodal'); + }, + /* + * Fix issues in IE6 and IE7 in quirks mode + */ + fixIE: function () { + var s = this, p = s.o.position; + + // simulate fixed position - adapted from BlockUI + $.each([s.d.iframe || null, !s.o.modal ? null : s.d.overlay, s.d.container.css('position') === 'fixed' ? s.d.container : null], function (i, el) { + if (el) { + var bch = 'document.body.clientHeight', bcw = 'document.body.clientWidth', + bsh = 'document.body.scrollHeight', bsl = 'document.body.scrollLeft', + bst = 'document.body.scrollTop', bsw = 'document.body.scrollWidth', + ch = 'document.documentElement.clientHeight', cw = 'document.documentElement.clientWidth', + sl = 'document.documentElement.scrollLeft', st = 'document.documentElement.scrollTop', + s = el[0].style; + + s.position = 'absolute'; + if (i < 2) { + s.removeExpression('height'); + s.removeExpression('width'); + s.setExpression('height','' + bsh + ' > ' + bch + ' ? ' + bsh + ' : ' + bch + ' + "px"'); + s.setExpression('width','' + bsw + ' > ' + bcw + ' ? ' + bsw + ' : ' + bcw + ' + "px"'); + } + else { + var te, le; + if (p && p.constructor === Array) { + var top = p[0] + ? typeof p[0] === 'number' ? p[0].toString() : p[0].replace(/px/, '') + : el.css('top').replace(/px/, ''); + te = top.indexOf('%') === -1 + ? top + ' + (t = ' + st + ' ? ' + st + ' : ' + bst + ') + "px"' + : parseInt(top.replace(/%/, '')) + ' * ((' + ch + ' || ' + bch + ') / 100) + (t = ' + st + ' ? ' + st + ' : ' + bst + ') + "px"'; + + if (p[1]) { + var left = typeof p[1] === 'number' ? p[1].toString() : p[1].replace(/px/, ''); + le = left.indexOf('%') === -1 + ? left + ' + (t = ' + sl + ' ? ' + sl + ' : ' + bsl + ') + "px"' + : parseInt(left.replace(/%/, '')) + ' * ((' + cw + ' || ' + bcw + ') / 100) + (t = ' + sl + ' ? ' + sl + ' : ' + bsl + ') + "px"'; + } + } + else { + te = '(' + ch + ' || ' + bch + ') / 2 - (this.offsetHeight / 2) + (t = ' + st + ' ? ' + st + ' : ' + bst + ') + "px"'; + le = '(' + cw + ' || ' + bcw + ') / 2 - (this.offsetWidth / 2) + (t = ' + sl + ' ? ' + sl + ' : ' + bsl + ') + "px"'; + } + s.removeExpression('top'); + s.removeExpression('left'); + s.setExpression('top', te); + s.setExpression('left', le); + } + } + }); + }, + /* + * Place focus on the first or last visible input + */ + focus: function (pos) { + var s = this, p = pos && $.inArray(pos, ['first', 'last']) !== -1 ? pos : 'first'; + + // focus on dialog or the first visible/enabled input element + var input = $(':input:enabled:visible:' + p, s.d.wrap); + setTimeout(function () { + input.length > 0 ? input.focus() : s.d.wrap.focus(); + }, 10); + }, + getDimensions: function () { + // fix a jQuery bug with determining the window height - use innerHeight if available + var s = this, + h = typeof window.innerHeight === 'undefined' ? wndw.height() : window.innerHeight; + + d = [doc.height(), doc.width()]; + w = [h, wndw.width()]; + }, + getVal: function (v, d) { + return v ? (typeof v === 'number' ? v + : v === 'auto' ? 0 + : v.indexOf('%') > 0 ? ((parseInt(v.replace(/%/, '')) / 100) * (d === 'h' ? w[0] : w[1])) + : parseInt(v.replace(/px/, ''))) + : null; + }, + /* + * Update the container. Set new dimensions, if provided. + * Focus, if enabled. Re-bind events. + */ + update: function (height, width) { + var s = this; + + // prevent update if dialog does not exist + if (!s.d.data) { + return false; + } + + // reset orig values + s.d.origHeight = s.getVal(height, 'h'); + s.d.origWidth = s.getVal(width, 'w'); + + // hide data to prevent screen flicker + s.d.data.hide(); + height && s.d.container.css('height', height); + width && s.d.container.css('width', width); + s.setContainerDimensions(); + s.d.data.show(); + s.o.focus && s.focus(); + + // rebind events + s.unbindEvents(); + s.bindEvents(); + }, + setContainerDimensions: function () { + var s = this, + badIE = browser.ie6 || browser.ie7; + + // get the dimensions for the container and data + var ch = s.d.origHeight ? s.d.origHeight : browser.opera ? s.d.container.height() : s.getVal(badIE ? s.d.container[0].currentStyle['height'] : s.d.container.css('height'), 'h'), + cw = s.d.origWidth ? s.d.origWidth : browser.opera ? s.d.container.width() : s.getVal(badIE ? s.d.container[0].currentStyle['width'] : s.d.container.css('width'), 'w'), + dh = s.d.data.outerHeight(true), dw = s.d.data.outerWidth(true); + + s.d.origHeight = s.d.origHeight || ch; + s.d.origWidth = s.d.origWidth || cw; + + // mxoh = max option height, mxow = max option width + var mxoh = s.o.maxHeight ? s.getVal(s.o.maxHeight, 'h') : null, + mxow = s.o.maxWidth ? s.getVal(s.o.maxWidth, 'w') : null, + mh = mxoh && mxoh < w[0] ? mxoh : w[0], + mw = mxow && mxow < w[1] ? mxow : w[1]; + + // moh = min option height + var moh = s.o.minHeight ? s.getVal(s.o.minHeight, 'h') : 'auto'; + if (!ch) { + if (!dh) {ch = moh;} + else { + if (dh > mh) {ch = mh;} + else if (s.o.minHeight && moh !== 'auto' && dh < moh) {ch = moh;} + else {ch = dh;} + } + } + else { + ch = s.o.autoResize && ch > mh ? mh : ch < moh ? moh : ch; + } + + // mow = min option width + var mow = s.o.minWidth ? s.getVal(s.o.minWidth, 'w') : 'auto'; + if (!cw) { + if (!dw) {cw = mow;} + else { + if (dw > mw) {cw = mw;} + else if (s.o.minWidth && mow !== 'auto' && dw < mow) {cw = mow;} + else {cw = dw;} + } + } + else { + cw = s.o.autoResize && cw > mw ? mw : cw < mow ? mow : cw; + } + + s.d.container.css({height: ch, width: cw}); + s.d.wrap.css({overflow: (dh > ch || dw > cw) ? 'auto' : 'visible'}); + s.o.autoPosition && s.setPosition(); + }, + setPosition: function () { + var s = this, top, left, + hc = (w[0]/2) - (s.d.container.outerHeight(true)/2), + vc = (w[1]/2) - (s.d.container.outerWidth(true)/2), + st = s.d.container.css('position') !== 'fixed' ? wndw.scrollTop() : 0; + + if (s.o.position && Object.prototype.toString.call(s.o.position) === '[object Array]') { + top = parseFloat(st) + parseFloat(s.o.position[0] || hc); + left = s.o.position[1] || vc; + } else { + top = st + hc; + left = vc; + } + s.d.container.css({left: left, top: top}); + }, + watchTab: function (e) { + var s = this; + + if ($(e.target).parents('.simplemodal-container').length > 0) { + // save the list of inputs + s.inputs = $(':input:enabled:visible:first, :input:enabled:visible:last', s.d.data[0]); + + // if it's the first or last tabbable element, refocus + if ((!e.shiftKey && e.target === s.inputs[s.inputs.length -1]) || + (e.shiftKey && e.target === s.inputs[0]) || + s.inputs.length === 0) { + e.preventDefault(); + var pos = e.shiftKey ? 'last' : 'first'; + s.focus(pos); + } + } + else { + // might be necessary when custom onShow callback is used + e.preventDefault(); + s.focus(); + } + }, + /* + * Open the modal dialog elements + * - Note: If you use the onOpen callback, you must "show" the + * overlay and container elements manually + * (the iframe will be handled by SimpleModal) + */ + open: function () { + var s = this; + // display the iframe + s.d.iframe && s.d.iframe.show(); + + if ($.isFunction(s.o.onOpen)) { + // execute the onOpen callback + s.o.onOpen.apply(s, [s.d]); + } + else { + // display the remaining elements + s.d.overlay.show(); + s.d.container.show(); + s.d.data.show(); + } + + s.o.focus && s.focus(); + + // bind default events + s.bindEvents(); + }, + /* + * Close the modal dialog + * - Note: If you use an onClose callback, you must remove the + * overlay, container and iframe elements manually + * + * @param {boolean} external Indicates whether the call to this + * function was internal or external. If it was external, the + * onClose callback will be ignored + */ + close: function () { + var s = this; + + // prevent close when dialog does not exist + if (!s.d.data) { + return false; + } + + // remove the default events + s.unbindEvents(); + + if ($.isFunction(s.o.onClose) && !s.occb) { + // set the onClose callback flag + s.occb = true; + + // execute the onClose callback + s.o.onClose.apply(s, [s.d]); + } + else { + // if the data came from the DOM, put it back + if (s.d.placeholder) { + var ph = $('#simplemodal-placeholder'); + // save changes to the data? + if (s.o.persist) { + // insert the (possibly) modified data back into the DOM + ph.replaceWith(s.d.data.removeClass('simplemodal-data').css('display', s.display)); + } + else { + // remove the current and insert the original, + // unmodified data back into the DOM + s.d.data.hide().remove(); + ph.replaceWith(s.d.orig); + } + } + else { + // otherwise, remove it + s.d.data.hide().remove(); + } + + // remove the remaining elements + s.d.container.hide().remove(); + s.d.overlay.hide(); + s.d.iframe && s.d.iframe.hide().remove(); + s.d.overlay.remove(); + + // reset the dialog object + s.d = {}; + } + } + }; +})); \ No newline at end of file