diff --git a/public/css/app.css b/public/css/app.css index 20ea729..7659e9e 100644 --- a/public/css/app.css +++ b/public/css/app.css @@ -1,4 +1,5 @@ -@import url(https://fonts.googleapis.com/css?family=Nunito);@charset "UTF-8"; +@import url(https://fonts.googleapis.com/css?family=Nunito); +@charset "UTF-8"; /*! * Bootstrap v4.3.1 (https://getbootstrap.com/) @@ -11100,19 +11101,10 @@ a.text-dark:focus { } } -.full-height { - height: 100%; -} - -.flex-center { - align-items: center; - display: flex; - justify-content: center; -} - .position-ref { position: relative; } + .title { font-size: 84px; } @@ -11127,89 +11119,82 @@ a.text-dark:focus { text-transform: uppercase; } -.m-b-md { - margin-bottom: 30px; -} .content { text-align: center; color: #636b6f; } + #app { display: flex; flex-direction: column; } -.container, .py-4 { - height: 100%; -} -/*.btn-custom {*/ - /*border: none;*/ - /*border-bottom: 1px solid lightgrey;*/ - /*background-color: white;*/ - /*color: #1e3572;*/ -/*}*/ + .custom-header { display: flex; justify-content: space-between; + background-color: #ececec; } + .add-subject, .add-attendance { display: none; } + .add-subject.open, .add-attendance.open { display: block; } -.card-body { - margin-top: 30px; -} -.classes-form { - margin-bottom: 50px; -} -.map-buttons { - display: flex; - align-items: center; - justify-content: space-between; - width: 100%; -} -.subjects-table { - margin-bottom: 50px; -} -.seat-wrapper { - display: flex; - flex-direction: column; -} -.main-seat-text { - font-size: 50px; -} -.navbar-nav.ml-auto { - justify-content: flex-end; - width: 100%; -} -.no-margin-top { - margin-top: 0; -} -.nav-link { - margin-left: 30px; - transition: transform 0.3s; -} -.nav-link:hover { - transform: scale(1.1); -} -.btn-export { - background-color: #649a24; -} -.card-header { - background-color: #ececec; -} + .card-custom { display: flex; justify-content: flex-start; align-items: center; } + +.card-body { + margin-top: 30px; +} + +.classes-form { + margin-bottom: 50px; +} + +.subjects-table { + margin-bottom: 50px; +} + +.navbar-nav.ml-auto { + justify-content: flex-end; + width: 100%; +} + +.no-margin-top { + margin-top: 0; +} + +.nav-link { + margin-left: 30px; + transition: transform 0.3s; +} + +.nav-link:hover { + transform: scale(1.1); +} + +.btn-export { + background-color: #649a24; +} + .sort-span { margin-right: 20px; } + .form-custom { width: auto; } -.carousel-control-prev, .carousel-control-next { + +.carousel-control-prev, .carousel-control-next, .sr-only { filter: invert(100%); } + +main { + padding-top: 20px; +} diff --git a/public/css/map/jquery.seat-charts.css b/public/css/map/jquery.seat-charts.css index 65093ac..6267de7 100644 --- a/public/css/map/jquery.seat-charts.css +++ b/public/css/map/jquery.seat-charts.css @@ -1,41 +1,49 @@ -div.seatCharts-container { - min-width: 700px; +a { + color: #b71a4c; } -div.seatCharts-cell { - height: 16px; - width: 16px; +div.seatCharts-container { + text-align: center; + width: fit-content; + padding: 30px; + margin: auto; +} + +div.seatCharts-cell { margin: 3px; float: left; text-align: center; outline: none; font-size: 13px; - line-height:16px; - color: blue; - + color: #182C4E; + height: 90px; + width: 90px; + line-height: 90px; } + div.seatCharts-seat { background-color: green; - color: white; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; - cursor: default; + color: #FFFFFF; + cursor: pointer; } + div.seatCharts-seat:focus { border: none; } -.seatCharts-seat:focus { - outline: none; -} - - div.seatCharts-space { background-color: white; } + div.seatCharts-row { - height: 50px; + height: 100px; + display: flex; + justify-content: flex-start; + margin: 0 auto; + width: auto; } div.seatCharts-row:after { @@ -43,33 +51,270 @@ div.seatCharts-row:after { } div.seatCharts-seat.selected { - background-color: aqua; + background-color: #1b4d76; } div.seatCharts-seat.focused { - background-color: #6db131; + background-color: #1F5684; } div.seatCharts-seat.available { - background-color: green; + background-color: #649a24; +} + +div.seatCharts-seat.available.student-class { + background-color: #a8b9bd; } div.seatCharts-seat.unavailable { - background-color: red; cursor: not-allowed; + background-color: #6F7881; } ul.seatCharts-legendList { list-style: none; cursor: default; + padding-left: 0; } + li.seatCharts-legendItem { margin-top: 10px; line-height: 2; } + li.seatCharts-legendItem div { cursor: default; } + li.seatCharts-legendItem > .seatCharts-cell { cursor: default; } + +div.seatCharts-legend { + display: inline-block; +} + +div.seatCharts-legend li { + text-align: left; +} + +span.seatCharts-legendDescription { + margin-left: 5px; + line-height: 100px; +} + +.front-indicator { + margin: 0; + background-color: #ececec; + color: #a1a1a1; + text-align: center; + padding: 15px; + border-radius: 5px; + display: flex; + justify-content: flex-start; + align-items: center; +} + +#legend { + width: 49%; + margin: 0 auto; + float: left; + font-size: 16px; +} +.booking-details { + display: inline-block; + text-align: right; + font-size: 12px; + width: 49%; + margin: 0 auto; +} + +.booking-details h2 { + margin: 25px 0 20px 0; + font-size: 22px; + color: #333333; + letter-spacing: 0.15em; + font-weight: bold; +} +.booking-details h3 { + margin: 5px 5px 0 0; + font-size: 40px; + color: #333333; + font-weight: bold; +} + +.map-buttons { + display: flex; + align-items: center; + justify-content: space-between; + width: 100%; +} + +.checkout-button { + margin: 10px 0; + font-size: 14px; + color: #fff; + background-color: #3490dc; + border-radius: 3px; + border: 0; + padding: 15px 40px; + display: inline-block; + text-align: center; + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1), 0 3px 10px 0 rgba(0, 0, 0, 0.1); +} + +.checkout-button:hover { + box-shadow: 0 0 rgb(103, 88, 184); + background-color: #227dc7; + border-color: #2176bd; +} + +a.checkout-button { + color: #fff; + text-decoration: none; +} + +#selected-seats { + list-style-type: none; + margin-left: 0; + padding-left: 0; +} + +.seat-p { + font-weight: bold; + font-size: 20px; + margin-left: 15%; +} + +.wrapper { + margin: 0 40px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding: 0; +} + +.wrapper h2 { + font-size: 40px; + padding: 0; +} + +.wrapper h3 { + font-size: 30px; + font-weight: 400; + text-shadow: 1px 0px 0px rgb(160, 160, 160); +} + +.seat-stat-wrapper, .seat-chart-wrapper { + width: 100%; +} + +.card-reader { + text-align: center; + color: #3490dc; + border-color: #3490dc; + padding: 50px 100px; + font-size: 30px; + display: none; + width: 70%; + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1), 0 3px 10px 0 rgba(0, 0, 0, 0.1); +} + +.card-reader.open { + display: block; +} + +.code-p { + text-align: center; + font-size: 20px; + margin-bottom: 100px; +} + +.card-reader-form { + display: flex; + flex-direction: column; + align-items: flex-start; +} + +.card-reader-form div { + width: 100%; + display: flex; + justify-content: space-between; +} + +.main-text { + text-transform: uppercase; + font-family: 'Nunito', sans-serif; + font-weight: 500; + text-shadow: 0 0 2px rgba(56, 55, 55, 0.6); + color: #636b6f; + text-align: center; + font-size: 50px; +} + +#sel-seat { + font-size: 24px; + text-shadow: 0px 0px 1px rgb(160, 160, 160); + margin-top: -15px; + margin-bottom: 100px; + padding: 0; + font-weight: 600; + letter-spacing: 0.2em; +} + + +@media (max-width: 1300px) { + .wrapper { + height: 50%; + } + + .main-text { + font-size: 9vh; + } +} + +@media (max-width: 870px) { + .wrapper { + height: 35%; + } + + .main-text { + font-size: 3.5em; + line-height: 10vh; + width: 100%; + } + + .card-reader { + bottom: -30%; + transform: translate(-50%, -10%); + padding: 30px 50px; + font-size: 25px; + } + +} + +@media (max-width: 650px) { + .wrapper { + height: 30%; + } + + .main-text { + font-size: 2.7em; + line-height: 6vh; + width: 100%; + padding: 20px 0; + } +} + +@media screen and (max-width: 550px) { + #legend { + width: 100%; + } + + .booking-details { + width: 100%; + text-align: left; + } +} + diff --git a/public/css/map/koncowastrona.css b/public/css/map/koncowastrona.css deleted file mode 100644 index a20272b..0000000 --- a/public/css/map/koncowastrona.css +++ /dev/null @@ -1,93 +0,0 @@ -body { - font-family: 'Nunito', sans-serif; - background-color: #f8fafc; -} - -.wrapper { - text-align: center; - margin: 100px; - border-radius: 10px; - padding: 50px 0; - text-shadow: 0 0 2px rgba(56, 55, 55, 0.6); - color: #545c5f; -} - -.wrapper h2 { - font-size: 64px; - padding: 0; -} - -.wrapper h3 { - font-size: 36px; - font-weight: 400; - text-shadow: 1px 0px 0px rgb(160, 160, 160); -} - -#sel-seat { - font-size: 24px; - text-shadow: 0px 0px 1px rgb(160, 160, 160); - margin-top: -15px; - margin-bottom: 100px; - padding: 0; - font-weight: 600; - letter-spacing: 0.2em; -} - -button { - margin: auto 0; - font-size: 18px; - border-radius: 2px; - border: 0; - min-width: 250px; - padding: 25px 60px; - text-align: center; - color: #fff; - background-color: #3490dc; - border-color: #3490dc; - display: inline-block; - position: absolute; - left: 50%; - bottom: 30%; - transform: translate(-50%, -10%); -} - -button:hover { - color: #fff; - background-color: #227dc7; - border-color: #2176bd; -} - -button:active { - box-shadow: 0 0 #b85a5b; - background-color: #3654ff; -} -.checkout-button { - margin: 10px 0; - font-size: 14px; - background-color: #5d7cd3; - border-radius: 3px; - border: 0; - padding: 15px 40px; - display: inline-block; - text-align: center; - box-shadow:0px 4px 0px #1e3572; -} - -.checkout-button:hover { - box-shadow: 0 0 rgb(103, 88, 184); - background-color: #3654c9; - cursor: pointer; -} - -.checkout-button:active { - box-shadow: 0 0 #b85a5b; - background-color: #3654ff; -} -a.checkout-button { - color: #fff; - text-decoration: none; -} -.add-mn-btn { - display: none; -} - diff --git a/public/css/map/przylozlegitke.css b/public/css/map/przylozlegitke.css deleted file mode 100644 index 26f9e97..0000000 --- a/public/css/map/przylozlegitke.css +++ /dev/null @@ -1,148 +0,0 @@ -body { - background-color: #f8fafc; -} - -.wrapper { - margin: 0 auto; - display: inline-block; - padding: 20px; - width: 70%; - height:60vh; - position: absolute; - left: 50%; - top: 50%; - transform: translate(-50%, -50%); -} -.czytnik { - text-align: center; - position: absolute; - left: 50%; - bottom: -30%; - transform: translate(-50%, -10%); - box-shadow: 0 0 rgb(103, 88, 184); - color: #fff; - background-color: #3490dc; - border-color: #3490dc; - padding: 50px 100px; - font-size: 30px; - display: none; - width: 70%; -} -.czytnik:hover { - color: #fff; - background-color: #227dc7; - border-color: #2176bd; -} - -.czytnik.open { - display: block; -} -.code-p { - text-align: center; - font-size: 20px; - margin-bottom: 100px; -} -.test-form { - display: flex; - flex-direction: column; - align-items: flex-start; -} -.test-form div { - width: 100%; - display: flex; - justify-content: space-between; -} -.main-text { - text-transform: uppercase; - font-family: 'Nunito', sans-serif; - font-weight: 500; - text-shadow: 0 0 2px rgba(56, 55, 55, 0.6); - color: #636b6f; - text-align: center; - font-size: 12vh; -} - -@media (max-width: 1300px) { - .wrapper { - height: 50%; - } - .main-text { - font-size: 9vh; - } -} - - @media (max-width: 870px) { - .wrapper { - height: 35%; - } - .main-text { - font-size: 3.5em; - line-height: 10vh; - width: 100%; - } - - .czytnik { - bottom: -30%; - transform: translate(-50%, -10%); - padding: 30px 50px; - font-size: 25px; - } - - } - - @media (max-width: 650px) { - - .wrapper { - height: 30%; - } - - .main-text { - font-size: 2.7em; - line-height: 6vh; - width: 100%; - padding: 20px 0; - } - } -.checkout-button { - margin: 10px 0; - font-size: 14px; - background-color: #5d7cd3; - border-radius: 3px; - border: 0; - padding: 15px 40px; - display: inline-block; - text-align: center; - box-shadow:0px 4px 0px #1e3572; - color: #fff; -} - -.checkout-button:hover { - box-shadow: 0 0 rgb(103, 88, 184); - background-color: #3654c9; - cursor: pointer; -} - -.checkout-button:active { - top: 4px; - box-shadow: 0 0 #b85a5b; - background-color: #3654ff; -} -a.checkout-button { - color: #fff; - text-decoration: none; -} -.map-buttons { - display: flex; - align-items: center; - justify-content: space-between; - width: 100%; -} - -.seat-wrapper { - display: flex; - flex-direction: column; -} -.main-seat-text { - font-size: 70px; - text-align: center; -} diff --git a/public/css/map/seatchart-preview.css b/public/css/map/seatchart-preview.css index 0389dce..525b597 100644 --- a/public/css/map/seatchart-preview.css +++ b/public/css/map/seatchart-preview.css @@ -1,101 +1,72 @@ -body { - background-color: #f8fafc; - font-family: 'Nunito', sans-serif; - font-weight: 600; -} -.seat-stat-wrapper h1{ - text-align: center; - font-size: 56px; - padding-bottom: 10px; - border-bottom: 2px outset rgba(133, 133, 133, 0.4); - text-transform: uppercase; - font-family: 'Nunito', sans-serif; - font-weight: 500; - text-shadow: 0 0 6px rgba(133, 133, 133, 0.4); - color: #636b6f; -} -.add-mn-btn, .end-button { - display: none; -} -#choosepanel h2, .room-view h2 { - font-size: 23px; - text-shadow: 0 0 6px rgba(133, 133, 133, 0.4); -} -#choosepanel select { - font-size: 18px; - width: 150px; - text-shadow: 0 0 6px rgba(133, 133, 133, 0.4); - display: block; - font-family: sans-serif; -} - -.seat-chart-wrapper, div.seatCharts-space { - background-color: #ececec; -} .seat-chart-wrapper { - padding: 60px 0; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1), 0 3px 10px 0 rgba(0, 0, 0, 0.1); } + .preview-page-content { display: flex; - justify-content: center; - align-items: flex-start; + justify-content: space-between; + align-items: center; height: 100%; - padding: auto; - padding-top: 50px; + margin: 40px; } + .preview-attendance-table { - width: 40%; + width: 35%; } + .seat-chart-wrapper { width: 60%; } -.preview-attendance-table, .seat-chart-wrapper { - margin: 0 30px; -} + div.seatCharts-space { background-color: unset; } + div.seatCharts-row { - height: 130px; + height: 150px; justify-content: flex-start; margin: 0 auto; width: auto; } + div.seatCharts-cell { - width: 120px; - height: 120px; - line-height: 37px; -} -.preview-name { - color: rgba(0,0,0,0.7); -} -.front-indicator-preview { + width: 140px; + height: 140px; + font-size: 16px; display: flex; + flex-direction: column; align-items: center; justify-content: center; + line-height: initial; } -.preview-box { - display: flex; - align-items: center; + +div.seatCharts-seat.available { + background-color: rgba(111,120,129, 0.7); } + +div.seatCharts-seat.taken { + background-color: #649a24; +} + +.preview-name { + color: rgba(0,0,0,0.7); + word-wrap: break-word; + width: 90%; + font-weight: bold; +} + .checkout-button-preview { + display: flex; justify-content: flex-start; width: 40%; - padding-left: 35px; } -.seat-p-ppreview { + +.seat-p-preview { justify-content: center; width: 60%; padding: 0 auto; } -div.seatCharts-seat.available { - background-color: rgba(111,120,129, 0.7); -} -div.seatCharts-seat.taken { - background-color: #649a24; -} + .front-indicator { - width: 100%; - margin: 5px 0; + margin: 0 40px; } diff --git a/public/css/map/seatchart.css b/public/css/map/seatchart.css deleted file mode 100644 index 333daad..0000000 --- a/public/css/map/seatchart.css +++ /dev/null @@ -1,154 +0,0 @@ -body { - background-color: #f8fafc; - font-family: 'Nunito', sans-serif; - font-weight: 600; -} -a { - color: #b71a4c; -} -.front-indicator { - width: 90%; - margin: 5px 32px 5px 32px; - background-color: #ececec; - color: #a1a1a1; - text-align: center; - padding: 15px; - border-radius: 5px; -} - -.container { - margin: 0 auto; - text-align: left; -} -.seat-stat-wrapper { - display: inline; -} -#legend { - width: 49%; - margin: 0 auto; - float: left; - font-size: 16px; -} -.booking-details { - display: inline-block; - text-align: right; - font-size: 12px; - width: 49%; - margin: 0 auto; - -} -@media screen and (max-width: 550px) { - #legend { - width: 100%; - } - .booking-details { - width: 100%; - text-align: left; - } -} -.booking-details h2 { - margin: 25px 0 20px 0; - font-size: 22px; - color: #333333; - letter-spacing: 0.15em; - font-weight: bold; -} -.booking-details h3 { - margin: 5px 5px 0 0; - font-size: 40px; - color: #333333; - font-weight: bold; -} -div.seatCharts-cell { - color: #182C4E; - height: 90px; - width: 90px; - line-height: 90px; - -} -div.seatCharts-seat { - color: #FFFFFF; - cursor: pointer; -} -div.seatCharts-row { - height: 100px; - display: flex; - justify-content: flex-start; - margin: 0 auto; - width: auto; -} -div.seatCharts-seat.available { - background-color: #649a24; -} -div.seatCharts-seat.available.student-class { - background-color: #a8b9bd; -} -div.seatCharts-seat.focused { - background-color: #1F5684; -} -div.seatCharts-seat.selected { - background-color: #1b4d76; -} -div.seatCharts-seat.unavailable { - background-color: #6F7881; -} - -div.seatCharts-container { - text-align: center; - width: fit-content; - padding: 30px; - margin: auto; - -} -div.seatCharts-legend { - display: inline-block; -} - -div.seatCharts-legend li { - text-align: left; -} - -ul.seatCharts-legendList { - padding-left: 0px; -} -span.seatCharts-legendDescription { - margin-left: 5px; - line-height: 100px; -} - -.checkout-button { - margin: 10px 0; - font-size: 14px; - color: #fff; - background-color: #3490dc; - border-color: #3490dc; - border-radius: 3px; - border: 0; - padding: 15px 40px; - display: inline-block; - text-align: center; -} - -.checkout-button:hover { - box-shadow: 0 0 rgb(103, 88, 184); - background-color: #227dc7; - border-color: #2176bd; -} -a.checkout-button { - color: #fff; - text-decoration: none; -} - -#selected-seats { - list-style-type: none; - margin-left: 0; - padding-left: 0; -} -.add-mn-btn { - display: none; -} -.seat-p { - font-weight: bold; - margin-bottom: 0; - font-size: 20px; -} diff --git a/public/js/custom.js b/public/js/custom.js index d636f41..705828e 100644 --- a/public/js/custom.js +++ b/public/js/custom.js @@ -1,6 +1,6 @@ $(document).ready(function(){ $('.add-mn-btn').on('click', function () { - $('.czytnik').toggleClass('open'); + $('.card-reader').toggleClass('open'); }); diff --git a/public/js/map/jquery.seat-charts.js b/public/js/map/jquery.seat-charts.js index bb042ba..868dcd5 100644 --- a/public/js/map/jquery.seat-charts.js +++ b/public/js/map/jquery.seat-charts.js @@ -5,623 +5,625 @@ * Copyright 2013, 2016 Mateusz Markowski * Released under the MIT license */ +$(document).ready(function() { -(function($) { - - //'use strict'; - - $.fn.seatCharts = function (setup) { + (function ($) { + + //'use strict'; + + $.fn.seatCharts = function (setup) { + + //if there's seatCharts object associated with the current element, return it + if (this.data('seatCharts')) { + return this.data('seatCharts'); + } + + var fn = this, + seats = {}, + seatIds = [], + legend, + settings = { + animate: false, //requires jQuery UI + naming: { + top: false, + left: false, + getId: function (character, row, column) { + return row + '_' + column; + }, + getLabel: function (character, row, column) { + return column; + } - //if there's seatCharts object associated with the current element, return it - if (this.data('seatCharts')) { - return this.data('seatCharts'); - } - - var fn = this, - seats = {}, - seatIds = [], - legend, - settings = { - animate : false, //requires jQuery UI - naming : { - top : false, - left : false, - getId : function(character, row, column) { - return row + '_' + column; }, - getLabel : function (character, row, column) { - return column; - } - - }, - legend : { - node : null, - items : [] - }, - click : function() { + legend: { + node: null, + items: [] + }, + click: function () { - if (this.status() == 'available') { - return 'selected'; - } else if (this.status() == 'selected') { - return 'available'; - } else { - return this.style(); - } - - }, - focus : function() { + if (this.status() == 'available') { + return 'selected'; + } else if (this.status() == 'selected') { + return 'available'; + } else { + return this.style(); + } - if (this.status() == 'available') { - return 'focused'; - } else { - return this.style(); - } - }, - blur : function() { - return this.status(); - }, - seats : {} - - }, - //seat will be basically a seat object which we'll when generating the map - seat = (function(seatCharts, seatChartsSettings) { - return function (setup) { - var fn = this; - - fn.settings = $.extend({ - status : 'available', //available, unavailable, selected - style : 'available', - //make sure there's an empty hash if user doesn't pass anything - data : seatChartsSettings.seats[setup.character] || {} - //anything goes here? - }, setup); + }, + focus: function () { - fn.settings.$node = $('
'); - - fn.settings.$node - .attr({ - id : fn.settings.id, - role : 'checkbox', - 'aria-checked' : false, - focusable : true, - tabIndex : -1 //manual focus - }) - .text(fn.settings.label) - .addClass(['seatCharts-seat', 'seatCharts-cell', 'available'].concat( - //let's merge custom user defined classes with standard JSC ones - fn.settings.classes, - typeof seatChartsSettings.seats[fn.settings.character] == "undefined" ? - [] : seatChartsSettings.seats[fn.settings.character].classes + if (this.status() == 'available') { + return 'focused'; + } else { + return this.style(); + } + }, + blur: function () { + return this.status(); + }, + seats: {} + + }, + //seat will be basically a seat object which we'll when generating the map + seat = (function (seatCharts, seatChartsSettings) { + return function (setup) { + var fn = this; + + fn.settings = $.extend({ + status: 'available', //available, unavailable, selected + style: 'available', + //make sure there's an empty hash if user doesn't pass anything + data: seatChartsSettings.seats[setup.character] || {} + //anything goes here? + }, setup); + + fn.settings.$node = $(''); + + fn.settings.$node + .attr({ + id: fn.settings.id, + role: 'checkbox', + 'aria-checked': false, + focusable: true, + tabIndex: -1 //manual focus + }) + .text(fn.settings.label) + .addClass(['seatCharts-seat', 'seatCharts-cell', 'available'].concat( + //let's merge custom user defined classes with standard JSC ones + fn.settings.classes, + typeof seatChartsSettings.seats[fn.settings.character] == "undefined" ? + [] : seatChartsSettings.seats[fn.settings.character].classes ).join(' ')); - - //basically a wrapper function - fn.data = function() { - return fn.settings.data; - }; - - fn.char = function() { - return fn.settings.character; - }; - - fn.node = function() { - return fn.settings.$node; - }; - /* - * Can either set or return status depending on arguments. - * - * If there's no argument, it will return the current style. - * - * If you pass an argument, it will update seat's style - */ - fn.style = function() { + //basically a wrapper function + fn.data = function () { + return fn.settings.data; + }; - return arguments.length == 1 ? - (function(newStyle) { - var oldStyle = fn.settings.style; + fn.char = function () { + return fn.settings.character; + }; - //if nothing changes, do nothing - if (newStyle == oldStyle) { - return oldStyle; - } - - //focused is a special style which is not associated with status - fn.settings.status = newStyle != 'focused' ? newStyle : fn.settings.status; - fn.settings.$node - .attr('aria-checked', newStyle == 'selected'); + fn.node = function () { + return fn.settings.$node; + }; - //if user wants to animate status changes, let him do this - seatChartsSettings.animate ? - fn.settings.$node.switchClass(oldStyle, newStyle, 200) : - fn.settings.$node.removeClass(oldStyle).addClass(newStyle); - - return fn.settings.style = newStyle; - })(arguments[0]) : fn.settings.style; - }; - - //either set or retrieve - fn.status = function() { - - return fn.settings.status = arguments.length == 1 ? - fn.style(arguments[0]) : fn.settings.status; - }; - - //using immediate function to convienietly get shortcut variables - (function(seatSettings, character, seat) { - //attach event handlers - $.each(['click', 'focus', 'blur'], function(index, callback) { - - //we want to be able to call the functions for each seat object - fn[callback] = function() { - if (callback == 'focus') { - //if there's already a focused element, we have to remove focus from it first - if (seatCharts.attr('aria-activedescendant') !== undefined) { - seats[seatCharts.attr('aria-activedescendant')].blur(); + /* + * Can either set or return status depending on arguments. + * + * If there's no argument, it will return the current style. + * + * If you pass an argument, it will update seat's style + */ + fn.style = function () { + + return arguments.length == 1 ? + (function (newStyle) { + var oldStyle = fn.settings.style; + + //if nothing changes, do nothing + if (newStyle == oldStyle) { + return oldStyle; } - seatCharts.attr('aria-activedescendant', seat.settings.id); - seat.node().focus(); - } - - /* - * User can pass his own callback function, so we have to first check if it exists - * and if not, use our default callback. - * - * Each callback function is executed in the current seat context. - */ - return fn.style(typeof seatSettings[character][callback] === 'function' ? - seatSettings[character][callback].apply(seat) : seatChartsSettings[callback].apply(seat)); - }; - - }); - //the below will become seatSettings, character, seat thanks to the immediate function - })(seatChartsSettings.seats, fn.settings.character, fn); - - fn.node() - //the first three mouse events are simple - .on('click', fn.click) - .on('mouseenter', fn.focus) - .on('mouseleave', fn.blur) - - //keydown requires quite a lot of logic, because we have to know where to move the focus - .on('keydown', (function(seat, $seat) { - - return function (e) { - - var $newSeat; - - //everything depends on the pressed key - switch (e.which) { - //spacebar will just trigger the same event mouse click does - case 32: - e.preventDefault(); - seat.click(); - break; - //UP & DOWN - case 40: - case 38: - e.preventDefault(); - - /* - * This is a recursive, immediate function which searches for the first "focusable" row. - * - * We're using immediate function because we want a convenient access to some DOM elements - * We're using recursion because sometimes we may hit an empty space rather than a seat. - * - */ - $newSeat = (function findAvailable($rows, $seats, $currentRow) { - var $newRow; - - //let's determine which row should we move to - - if (!$rows.index($currentRow) && e.which == 38) { - //if this is the first row and user has pressed up arrow, move to the last row - $newRow = $rows.last(); - } else if ($rows.index($currentRow) == $rows.length-1 && e.which == 40) { - //if this is the last row and user has pressed down arrow, move to the first row - $newRow = $rows.first(); - } else { - //using eq to get an element at the desired index position - $newRow = $rows.eq( - //if up arrow, then decrement the index, if down increment it - $rows.index($currentRow) + (e.which == 38 ? (-1) : (+1)) - ); - } - - //now that we know the row, let's get the seat using the current column position - $newSeat = $newRow.find('.seatCharts-seat,.seatCharts-space').eq($seats.index($seat)); - - //if the seat we found is a space, keep looking further - return $newSeat.hasClass('seatCharts-space') ? - findAvailable($rows, $seats, $newRow) : $newSeat; - - })($seat - //get a reference to the parent container and then select all rows but the header - .parents('.seatCharts-container') - .find('.seatCharts-row:not(.seatCharts-header)'), - $seat - //get a reference to the parent row and then find all seat cells (both seats & spaces) - .parents('.seatCharts-row:first') - .find('.seatCharts-seat,.seatCharts-space'), - //get a reference to the current row - $seat.parents('.seatCharts-row:not(.seatCharts-header)') - ); - - //we couldn't determine the new seat, so we better give up - if (!$newSeat.length) { - return; + + //focused is a special style which is not associated with status + fn.settings.status = newStyle != 'focused' ? newStyle : fn.settings.status; + fn.settings.$node + .attr('aria-checked', newStyle == 'selected'); + + //if user wants to animate status changes, let him do this + seatChartsSettings.animate ? + fn.settings.$node.switchClass(oldStyle, newStyle, 200) : + fn.settings.$node.removeClass(oldStyle).addClass(newStyle); + + return fn.settings.style = newStyle; + })(arguments[0]) : fn.settings.style; + }; + + //either set or retrieve + fn.status = function () { + + return fn.settings.status = arguments.length == 1 ? + fn.style(arguments[0]) : fn.settings.status; + }; + + //using immediate function to convienietly get shortcut variables + (function (seatSettings, character, seat) { + //attach event handlers + $.each(['click', 'focus', 'blur'], function (index, callback) { + + //we want to be able to call the functions for each seat object + fn[callback] = function () { + if (callback == 'focus') { + //if there's already a focused element, we have to remove focus from it first + if (seatCharts.attr('aria-activedescendant') !== undefined) { + seats[seatCharts.attr('aria-activedescendant')].blur(); } - - //remove focus from the old seat and put it on the new one - seat.blur(); - seats[$newSeat.attr('id')].focus(); - $newSeat.focus(); - - //update our "aria" reference with the new seat id - seatCharts.attr('aria-activedescendant', $newSeat.attr('id')); - - break; - //LEFT & RIGHT - case 37: - case 39: - e.preventDefault(); - /* - * The logic here is slightly different from the one for up/down arrows. - * User will be able to browse the whole map using just left/right arrow, because - * it will move to the next row when we reach the right/left-most seat. - */ - $newSeat = (function($seats) { - - if (!$seats.index($seat) && e.which == 37) { - //user has pressed left arrow and we're currently on the left-most seat - return $seats.last(); - } else if ($seats.index($seat) == $seats.length -1 && e.which == 39) { - //user has pressed right arrow and we're currently on the right-most seat - return $seats.first(); - } else { - //simply move one seat left or right depending on the key - return $seats.eq($seats.index($seat) + (e.which == 37 ? (-1) : (+1))); + seatCharts.attr('aria-activedescendant', seat.settings.id); + seat.node().focus(); + } + + /* + * User can pass his own callback function, so we have to first check if it exists + * and if not, use our default callback. + * + * Each callback function is executed in the current seat context. + */ + return fn.style(typeof seatSettings[character][callback] === 'function' ? + seatSettings[character][callback].apply(seat) : seatChartsSettings[callback].apply(seat)); + }; + + }); + //the below will become seatSettings, character, seat thanks to the immediate function + })(seatChartsSettings.seats, fn.settings.character, fn); + + fn.node() + //the first three mouse events are simple + .on('click', fn.click) + .on('mouseenter', fn.focus) + .on('mouseleave', fn.blur) + + //keydown requires quite a lot of logic, because we have to know where to move the focus + .on('keydown', (function (seat, $seat) { + + return function (e) { + + var $newSeat; + + //everything depends on the pressed key + switch (e.which) { + //spacebar will just trigger the same event mouse click does + case 32: + e.preventDefault(); + seat.click(); + break; + //UP & DOWN + case 40: + case 38: + e.preventDefault(); + + /* + * This is a recursive, immediate function which searches for the first "focusable" row. + * + * We're using immediate function because we want a convenient access to some DOM elements + * We're using recursion because sometimes we may hit an empty space rather than a seat. + * + */ + $newSeat = (function findAvailable($rows, $seats, $currentRow) { + var $newRow; + + //let's determine which row should we move to + + if (!$rows.index($currentRow) && e.which == 38) { + //if this is the first row and user has pressed up arrow, move to the last row + $newRow = $rows.last(); + } else if ($rows.index($currentRow) == $rows.length - 1 && e.which == 40) { + //if this is the last row and user has pressed down arrow, move to the first row + $newRow = $rows.first(); + } else { + //using eq to get an element at the desired index position + $newRow = $rows.eq( + //if up arrow, then decrement the index, if down increment it + $rows.index($currentRow) + (e.which == 38 ? (-1) : (+1)) + ); + } + + //now that we know the row, let's get the seat using the current column position + $newSeat = $newRow.find('.seatCharts-seat,.seatCharts-space').eq($seats.index($seat)); + + //if the seat we found is a space, keep looking further + return $newSeat.hasClass('seatCharts-space') ? + findAvailable($rows, $seats, $newRow) : $newSeat; + + })($seat + //get a reference to the parent container and then select all rows but the header + .parents('.seatCharts-container') + .find('.seatCharts-row:not(.seatCharts-header)'), + $seat + //get a reference to the parent row and then find all seat cells (both seats & spaces) + .parents('.seatCharts-row:first') + .find('.seatCharts-seat,.seatCharts-space'), + //get a reference to the current row + $seat.parents('.seatCharts-row:not(.seatCharts-header)') + ); + + //we couldn't determine the new seat, so we better give up + if (!$newSeat.length) { + return; } - })($seat - .parents('.seatCharts-container:first') - .find('.seatCharts-seat:not(.seatCharts-space)')); - - if (!$newSeat.length) { - return; - } - - //handle focus - seat.blur(); - seats[$newSeat.attr('id')].focus(); - $newSeat.focus(); - - //update our "aria" reference with the new seat id - seatCharts.attr('aria-activedescendant', $newSeat.attr('id')); - break; - default: - break; - - } - }; - - })(fn, fn.node())); + //remove focus from the old seat and put it on the new one + seat.blur(); + seats[$newSeat.attr('id')].focus(); + $newSeat.focus(); + + //update our "aria" reference with the new seat id + seatCharts.attr('aria-activedescendant', $newSeat.attr('id')); + + break; + //LEFT & RIGHT + case 37: + case 39: + e.preventDefault(); + /* + * The logic here is slightly different from the one for up/down arrows. + * User will be able to browse the whole map using just left/right arrow, because + * it will move to the next row when we reach the right/left-most seat. + */ + $newSeat = (function ($seats) { + + if (!$seats.index($seat) && e.which == 37) { + //user has pressed left arrow and we're currently on the left-most seat + return $seats.last(); + } else if ($seats.index($seat) == $seats.length - 1 && e.which == 39) { + //user has pressed right arrow and we're currently on the right-most seat + return $seats.first(); + } else { + //simply move one seat left or right depending on the key + return $seats.eq($seats.index($seat) + (e.which == 37 ? (-1) : (+1))); + } + + })($seat + .parents('.seatCharts-container:first') + .find('.seatCharts-seat:not(.seatCharts-space)')); + + if (!$newSeat.length) { + return; + } + + //handle focus + seat.blur(); + seats[$newSeat.attr('id')].focus(); + $newSeat.focus(); + + //update our "aria" reference with the new seat id + seatCharts.attr('aria-activedescendant', $newSeat.attr('id')); + break; + default: + break; + + } + }; + + })(fn, fn.node())); //.appendTo(seatCharts.find('.' + row)); - } - })(fn, settings); - - fn.addClass('seatCharts-container'); - - //true -> deep copy! - $.extend(true, settings, setup); - - //Generate default row ids unless user passed his own - settings.naming.rows = settings.naming.rows || (function(length) { - var rows = []; - for (var i = 1; i <= length; i++) { - rows.push(i); - } - return rows; - })(settings.map.length); - - //Generate default column ids unless user passed his own - settings.naming.columns = settings.naming.columns || (function(length) { - var columns = []; - for (var i = 1; i <= length; i++) { - columns.push(i); - } - return columns; - })(settings.map[0].split('').length); - - if (settings.naming.top) { - var $headerRow = $('') - .addClass('seatCharts-row seatCharts-header'); - - if (settings.naming.left) { - $headerRow.append($('').addClass('seatCharts-cell')); - } - - - $.each(settings.naming.columns, function(index, value) { - $headerRow.append( - $('') - .addClass('seatCharts-cell') - .text(value) - ); - }); - } - - fn.append($headerRow); - - //do this for each map row - $.each(settings.map, function(row, characters) { - - var $row = $('').addClass('seatCharts-row'); - - if (settings.naming.left) { - $row.append( - $('') - .addClass('seatCharts-cell seatCharts-space') - .text(settings.naming.rows[row]) - ); - } - - /* - * Do this for each seat (letter) - * - * Now users will be able to pass custom ID and label which overwrite the one that seat would be assigned by getId and - * getLabel - * - * New format is like this: - * a[ID,label]a[ID]aaaaa - * - * So you can overwrite the ID or label (or both) even for just one seat. - * Basically ID should be first, so if you want to overwrite just label write it as follows: - * a[,LABEL] - * - * Allowed characters in IDs areL 0-9, a-z, A-Z, _ - * Allowed characters in labels are: 0-9, a-z, A-Z, _, ' ' (space) - * - */ - - $.each(characters.match(/[a-z_]{1}(\[[0-9a-z_]{0,}(,[0-9a-z_ ]+)?\])?/gi), function (column, characterParams) { - var matches = characterParams.match(/([a-z_]{1})(\[([0-9a-z_ ,]+)\])?/i), - //no matter if user specifies [] params, the character should be in the second element - character = matches[1], - //check if user has passed some additional params to override id or label - params = typeof matches[3] !== 'undefined' ? matches[3].split(',') : [], - //id param should be first - overrideId = params.length ? params[0] : null, - //label param should be second - overrideLabel = params.length === 2 ? params[1] : null; - - $row.append(character != '_' ? - //if the character is not an underscore (empty space) - (function(naming) { - - //so users don't have to specify empty objects - settings.seats[character] = character in settings.seats ? settings.seats[character] : {}; - - var id = overrideId ? overrideId : naming.getId(character, naming.rows[row], naming.columns[column]); - seats[id] = new seat({ - id : id, - label : overrideLabel ? - overrideLabel : naming.getLabel(character, naming.rows[row], naming.columns[column]), - row : row, - column : column, - character : character - }); - - seatIds.push(id); - return seats[id].node(); - - })(settings.naming) : - //this is just an empty space (_) - $('').addClass('seatCharts-cell seatCharts-space') - ); - }); - - fn.append($row); - }); - - //if there're any legend items to be rendered - settings.legend.items.length ? (function(legend) { - //either use user-defined container or create our own and insert it right after the seat chart div - var $container = (legend.node || $('').insertAfter(fn)) - .addClass('seatCharts-legend'); - - var $ul = $('