University of Toronto

<!DOCTYPE html> <html> <head> <base href="https://engage.utoronto.ca/site/SPageServer?pagename=donate" /> <title> University of Toronto </title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta name="Keywords" content=" " /> <meta name="Description" content="" /> <meta name="Robots" content="index, follow" /> <script type="text/javascript" src="../yui3/yui/yui-min.js"></script><noscript> </noscript> <script type="text/javascript" src="../js/convio/modules.js?version=2.9.2"></script><noscript> </noscript> <script type="text/javascript"> var Y = YUI({base: '../yui3/', insertBefore: 'yui_marker_loader_css', // insert all YUI module css before customstyle so it can be overridden debug: false, modules: getModules('../', 'convio', true, false)}); </script><noscript> </noscript> <script type="text/javascript" src="../js/utils.js"></script><noscript> </noscript> <script type="text/javascript" src="../js/obs_comp_rollup.js"></script><noscript> </noscript> <link href="../css/themes/default.css" rel="stylesheet" type="text/css" /> <link href="../css/themes/alphacube.css" rel="stylesheet" type="text/css"/> <link href="../css/UserGlobalStyle.css" rel="stylesheet" type="text/css" /> <link href="../css/UserIEStyle.css" rel="stylesheet" type="text/css" /> <link rel="stylesheet" type="text/css" id="yui_marker_loader_css" /> <link href="../css/CustomStyle.css" rel="stylesheet" type="text/css" /> <link href="../css/CustomWysiwygStyle.css" rel="stylesheet" type="text/css" /> <meta name="CnvHeaderVersion" content="v5.0" /> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <base href="https://engage.utoronto.ca/site/SPageServer?pagename=donate" /> <title>University of Toronto</title>  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <link rel="stylesheet" href="https://use.typekit.net/eyx8aqb.css"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous"> <link rel="shortcut icon" href="../custom/graphic/app/favicon.ico" type="image/x-icon" />   <style> p.ErrorMessage { width: 100%; text-align: center; position: absolute; background: red; max-width: 100%; color: white; padding: 20px 50px; top: 0; } body { font-family: 'trade-gothic-next', sans-serif; } [v-cloak] { display: none; } A:link { color: #0a58ca; } li a:hover, p a:hover{ color: #cc0052; } LABEL { white-space: normal; } a { font-size: inherit; color: inherit; } .Error{ border: 1px solid red; } .Shake { border: 1px solid red; animation: shake 0.82s cubic-bezier(.36, .07, .19, .97) both; transform: translate3d(0, 0, 0); backface-visibility: hidden; perspective: 1000px; } .Error__msg{ color: red !important; } .form-control { font-size: 18px !important; font-family: 'trade-gothic-next', sans-serif; } .text-jumbo { font-family: 'trade-gothic-next', sans-serif; font-weight: 800; font-size: 74px; line-height: 1.05; } h1 { font-family: 'trade-gothic-next', sans-serif; font-weight: 700; font-size: 60px; line-height: 1.1; letter-spacing: -1px; } h2 { font-family: 'trade-gothic-next', sans-serif; font-weight: 700; font-size: 38px; line-height: 1.15; letter-spacing: -1px; } h3 { font-family: 'trade-gothic-next', sans-serif; font-weight: bold; font-size: 32px; line-height: 1.35; letter-spacing: -1px; } h4 { font-family: 'trade-gothic-next', sans-serif; font-weight: 700; font-size: 24px; line-height: 1.33; letter-spacing: -1px; } h5 { font-family: 'trade-gothic-next', sans-serif; font-weight: 700; font-size: 18px; line-height: 1.33; letter-spacing: -1px; } p, ul li, ol li { font-size: 20px; line-height: 1.44; font-weight: 400; color: #424b5a; font-family: 'trade-gothic-next', sans-serif; max-width: 850px; } span, div, label { font-family: 'trade-gothic-next', sans-serif; } .text-normal { font-size: 21px; line-height: 1.33; font-weight: 400; color: #424b5a; font-family: 'trade-gothic-next', sans-serif; } .text-small { font-size: 18px; line-height: 1.33; font-weight: 400; font-family: 'trade-gothic-next', sans-serif; } .text-small li{ font-size: 18px; line-height: 1.33; font-weight: 400; font-family: 'trade-gothic-next', sans-serif; } .text-xs { font-size: 16px; line-height: 1.57; font-weight: 400; } .text-white { color: white; } .text-black { color: black; } .text-light { color: #424B5A !important; } .text-boundless { color: #007FA3; } .text-bold { font-weight: bold; } .line-15 { line-height: 1.5; } .line-165 { line-height: 1.65; } .line-18 { line-height: 1.8; } .line-2 { line-height: 2; } TEXTAREA, INPUT, SELECT, OPTION{ font-size: inherit; } div.responsive span.field-required{ vertical-align: super; } div.responsive input{ vertical-align: middle; } .border-left::before { content: ''; border-left: 1px solid #C2D1D9; position: absolute; width: 1px; height: 100%; margin-left: -150px; top: 0; } .bg-navyGradient { background: #001e4e; background: -moz-linear-gradient(top, #001e4e 0%, #1f2432 100%); background: -webkit-linear-gradient(top, #001e4e 0%, #1f2432 100%); background: linear-gradient(to bottom, #001e4e 0%, #1f2432 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#001e4e', endColorstr='#1f2432', GradientType=0); } .bg-fundtop { background: #B2DDEE; background: -moz-linear-gradient(top, #EDFAFD 0%, #B2DDEE 100%); background: -webkit-linear-gradient(top, #EDFAFD 0%, #B2DDEE 100%); background: linear-gradient(to bottom, #EDFAFD 0%, #B2DDEE 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#EDFAFD', endColorstr='#B2DDEE', GradientType=0); } .bg-greyGradient { background: #fcfcfc; background: -moz-linear-gradient(top, #fcfcfc 0%, #ebebeb 100%); background: -webkit-linear-gradient(top, #fcfcfc 0%, #ebebeb 100%); background: linear-gradient(to bottom, #fcfcfc 0%, #ebebeb 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ebebeb', endColorstr='#B2DDEE', GradientType=0); } .bg-grey { background: #EFEFEF; } .bg-karet-grey-top-left { background: url(https://engage.utoronto.ca/custom/refresh/images/karet-grey.png) no-repeat; background-position: top 45px left -200px; background-size: 800px; } .bg-karet-grey-top-right { background: url(https://engage.utoronto.ca/custom/refresh/images/karet-grey.png) no-repeat; background-position: top 45px right 200px; background-size: 800px; } .bg-karet-grey-bottom-left { /* background: url(https://engage.utoronto.ca/custom/refresh/images/karet-grey.png) no-repeat; background-position: bottom 45px left -200px; background-size: 800px; */ } .bg-karet-grey-bottom-right { /* background: url(https://engage.utoronto.ca/custom/refresh/images/karet-grey.png) no-repeat; background-position: bottom 45px right 200px; background-size: 800px; */ } .bg-karet-blue-bottom-right { background: url(https://engage.utoronto.ca/custom/refresh/images/karet-blue.png) no-repeat; background-position: bottom 0px right 0px; background-size: 800px; } .container-fluid { position: relative; } .btn-primary, .Button { background: #008BB0 !important; font-size: 16px !important; font-weight: 600 !important; border-radius: 50px !important; padding: 10px 24px !important; color: #fff !important; border-color: #008BB0 !important; } .Button{ border: none !important; padding: 10px 24px !important; } .btn-primary-inverse { font-size: 16px !important; font-weight: 600 !important; border-radius: 50px !important; padding: 10px 24px !important; color: #fff !important; text-decoration: none !important; color: #008BB0 !important; border: 1px solid #008BB0 !important; background: transparent !important; } .btn-primary:hover, .btn-primary.active, .btn-primary-inverse:hover, .Button:hover { background: #cc0052 !important; font-size: 16px !important; font-weight: 600 !important; border-radius: 50px !important; padding: 10px 24px !important; color: #fff !important; border-color: #cc0052 !important; } .btn-secondary { background: #fff !important; font-size: 16px !important; border-radius: 50px !important; padding: 10px 24px !important; color: #1F2432 !important; border-color: #fff !important; font-weight: 600 !important; } .btn-secondary:hover { background: #cc0052 !important; font-size: 16px !important; border-radius: 50px !important; padding: 10px 24px !important; color: #fff !important; border-color: #cc0052 !important; font-weight: 600 !important; } .modal-header { border-bottom: none; } .modal-content { padding: 25px; } .modal-body { padding-top: 0; } .modal-dialog { max-width: 750px; } .Modal__close { position: absolute; top: 20px; right: 20px; } .form-control-rounded { border-radius: 50px !important; } .form-control, .form-select{ border-radius: 20px; } .input-group-append .btn-outline-secondary { color: inherit; border-left: 0 !important; border-top-right-radius: 50px; border-bottom-right-radius: 50px; height: 100%; border-color: #dee2e6; } .input-group-append .btn-outline-secondary:hover { color: inherit; } .icon-phone { background: url(https://engage.utoronto.ca/custom/refresh/images/icon/icon-phone.png); width: 15px; height: 15px; display: inline-block; background-size: 100%; color: white; margin-right: 12px; } .icon-email { background: url(https://engage.utoronto.ca/custom/refresh/images/icon/icon-email.png); width: 15px; height: 15px; display: inline-block; background-size: 100% !important; color: white; margin-right: 12px; } .mt-100 { margin-top: 100px; } .mt-75 { margin-top: 75px; } .mb-75 { margin-bottom: 75px; } .mb-100 { margin-bottom: 100px; } .mb-50 { margin-bottom: 50px; } .mb-25 { margin-bottom: 25px; } .pt-100 { padding-top: 100px; } .pt-75 { padding-top: 75px; } .pt-50 { padding-top: 50px; } .pt-25 { padding-top: 25px; } .pb-75 { padding-bottom: 75px; } .pb-50 { padding-bottom: 50px; } .pb-100 { padding-bottom: 100px; } .pb-25 { padding-bottom: 25px; } .Donatebox__nav input[type=radio] { display: none; } i[class^="fa"] { font-family: 'Font Awesome 5 Free'; font-size: inherit; font-style: initial; font-weight: 600; } span.checked { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%221em%22%20viewBox%3D%220%200%20512%20512%22%3E%3C!--!%20Font%20Awesome%20Free%206.4.2%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%20(Commercial%20License)%20Copyright%202023%20Fonticons%2C%20Inc.%20--%3E%3Cpath%20d%3D%22M464%20256A208%20208%200%201%200%2048%20256a208%20208%200%201%200%20416%200zM0%20256a256%20256%200%201%201%20512%200A256%20256%200%201%201%200%20256zm256-96a96%2096%200%201%201%200%20192%2096%2096%200%201%201%200-192z%22%2F%3E%3C%2Fsvg%3E"); width: 15px; height: 15px; display: none; background-size: contain; background-repeat: no-repeat; } span.unchecked { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%221em%22%20viewBox%3D%220%200%20512%20512%22%3E%3C!--!%20Font%20Awesome%20Free%206.4.2%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%20(Commercial%20License)%20Copyright%202023%20Fonticons%2C%20Inc.%20--%3E%3Cpath%20d%3D%22M464%20256A208%20208%200%201%200%2048%20256a208%20208%200%201%200%20416%200zM0%20256a256%20256%200%201%201%20512%200A256%20256%200%201%201%200%20256z%22%2F%3E%3C%2Fsvg%3E"); width: 15px; height: 15px; display: none; background-size: contain; background-repeat: no-repeat; } label.Donatebox__navitem.active{ color: #cc0052; font-weight: bold; } label.Donatebox__navitem.active span{ color: #cc0052; } .Donatebox__navitem.active span.checked { display: inline-block; } .Donatebox__navitem.active span.unchecked { display: none; } .Donatebox__navitem span.checked { display: none; } .Donatebox__navitem span.unchecked { display: inline-block; } .card { padding: 15px; margin: auto; border-radius: 20px; } .card h3 { font-size: 28px; line-height: 1.05; } .card .fa-chevron-right:before { font-size: 14px !important; color: #007FA3; vertical-align: middle; } .Category .card .card-body { padding-bottom: 0; } .Category .card-body p { font-size: 16px !important; color: #424B5A !important; line-height: 1.57 !important; font-weight: 400 !important; } .Category .card-body a { font-size: 18px; color: #000; font-weight: bold; } .Category .card-header { font-size: 18px; color: #424B5A; border: none; padding: 0; background: none; text-transform: uppercase; } .Category .card .card-body p:last-child { margin-bottom: 0px !important; } img[src*="https://donate.utoronto"] { display: none; } img[src*=""], img:not([srcset*="."]):not([src*="."]) { display: none; } /* START: ANIMATIONS */ .animate.animate__animated { animation: fadeInUp; /* referring directly to the animation's @keyframe declaration */ animation-duration: 2s; /* don't forget to set a duration! */ } /* END: ANIMATIONS */ /* START: HEADER */ .Header { padding: 16px 0; } .Header__logo { width: 245px; } .Header__search { padding: 8px 20px; color: #000 !important; border: 1px solid #000; border-radius: 25px; font-size: 20px; margin: 0 5px; } .Header__cart { padding: 14px 20px 11px; background: #D8D8D8; color: #1f2432; border-radius: 25px; position: relative; margin: 0 5px; } a.Header__cart, a.Header__cart:hover { color: grey; } .Header__cart:hover { color: #1f2432; } .Header__cart.active { background: #1f2432; color: white; } .Header__cart .badge { position: absolute; top: -10px; right: -5px; border-radius: 12px; background: #1f2432; } .Header__cart.active .badge { background: #cc0052; } .Search__input { position: relative; } .Search__input .input-group-append { position: absolute; right: 0; top: 0; bottom: 0; z-index: 3; } .input-group-append .btn { padding: 0.6rem 0.75rem 0.6rem 1.5rem !important; margin-left: -52px; } /* END: HEADER */ /* START: Vue JS render */ .vRender__text p, .vRender__text span, .vRender__text div, .vRender__text a { font-size: 24px !important; line-height: 1.33 !important; font-weight: 400 !important; } .vRender__text a, .vRender__anchor { text-decoration: underline; color: #212529 !important; } .vRender__anchor i { font-size: 12px !important; vertical-align: middle; text-decoration: none; display: inline-block; margin-left: 3px } .vRender__anchor i:hover, .vRender__anchor:hover { color: #cc0052 !important; } .modal-body p, .modal-body span, .modal-body div, .modal-body a { font-size: 18px !important; line-height: 1.33 !important; font-weight: 400 !important; } /* START: Vue JS render */ /* START: HERO */ .Hero { background: url('https://engage.utoronto.ca/custom/refresh/images/bg1.png'); background-size: cover; min-height: 900px; } .Hero .animate__animated { position: absolute; } .Hero_right { padding-left: 50px; } /* END: HERO */ /* START: Explore Giving Opportunities */ /* END: Explore Giving Opportunities */ .Explore .card { height: 100%; margin-bottom: 20px; } .Explore .card-img-top {} .Explore .card-title { margin-left: -15px; } .Explore .card-title { text-decoration: none; color: #1F2432; } .Explore .card-text { text-decoration: none; color: #1F2432; font-family: 'trade-gothic-next', sans-serif; } .Explore .cardWrapper { text-decoration: none; display: block; height: 100%; } .Explore .cardWrapper:hover { margin-top: -5px; transition: margin 800ms; } /* START: Other Ways to Donate */ .OtherWaysToGive { position: relative; } .OtherWaysToGive__thumbs {} .OtherWaysToGive_thumb { position: absolute; } .OtherWaysToGive_thumb:first-of-type { margin: -10% 0% auto 60%; } .OtherWaysToGive_thumb:nth-of-type(2) { margin: auto; z-index: 2; } .OtherWaysToGive_thumb:nth-of-type(3) { margin: 35% auto auto -10%; z-index: 3; } /* END: Other Ways to Donate */ /* START: Giving Moments */ .Page__home .Moments { padding-top: 50px; padding-bottom: 150px; } .Moments .carousel-inner { border-radius: 10px; -webkit-box-shadow: 0px 0px 4px 0px #000000; box-shadow: 0px 0px 4px 0px #000000; } .Moments .carousel-item { padding: 50px; padding-bottom: 0; background: url(https://engage.utoronto.ca/custom/refresh/images/quote-bg.png) no-repeat; background-position: bottom right; background-size: contain; } .Moments .carousel-item h1 { margin-top: 20px; font-family: "kepler-std"; font-weight: 400; font-size: 46px; line-height: 50px; } .Moments__content--padd { padding-bottom: 25px; } .Moments__image { text-align: right; } .Moments .carousel-indicators { left: 0; right: auto; bottom: 20px; display: none; } /* END: Giving Moments */ /* START: Footer */ .Footer { padding-top: 50px; color: white; } .Footer__left { text-align: center; } .Footer__img { width: 100%; margin: auto; margin-top: -75px; margin-bottom: 50px; } .Footer__wordmark { margin-bottom: 50px; } .Footer__info { padding-top: 45px; margin-top: 45px; border-top: solid 1px #424b5a; } .footer__social svg { display: inline-block; width: 20px; color: white; margin-right: 10px; } .Footer p { color: white; } .footer__social a { fill: #fff; transition: .5s all ease; } .footer__social a:hover { fill: #cc0052; } .Copyright { margin-top: 25px; padding-top: 15px; border-top: solid 1px #424b5a; } .card .fa-stack { height: 20px !important; width: auto !important; margin: 0 5px; vertical-align: initial !important; line-height: 1 !important; } /* END: Footer */ /* START: Individual pages subnav */ .btn-primary { background: #008BB0; font-size: 16px; font-weight: 600; border-radius: 50px; padding: 10px 24px; color: #fff; border-color: #008BB0; } .btn-primary:hover { background: #cc0052; font-size: 16px; font-weight: 600; border-radius: 50px; padding: 10px 24px; color: #fff; border-color: #cc0052; } .btn-secondary { background: #fff; font-size: 16px; font-weight: 600; border-radius: 50px; padding: 10px 24px; color: #1F2432; border-color: #fff; } .btn-secondary:hover { background: #cc0052; font-size: 16px; font-weight: 600; border-radius: 50px; padding: 10px 24px; color: #fff; border-color: #cc0052; } .Page__nav .nav-link { border: 1px solid #D8D8D8; border-radius: 50px; display: inline-block; width: auto !important; padding-right: 50px !important; padding-left: 50px !important; color: #007FA3; } .Page__nav .nav-link.active { background: #cc0052; color: white; } .nav-fill .nav-item, .nav-fill>.nav-link { flex: 0 0 auto; text-align: center; margin: 0 10px; } .accordion-item, .accordion-item:first-of-type { margin-bottom: 20px; border-radius: 10px !important; overflow: hidden; } .accordion-body { padding: 1.25rem 2rem !important; } .accordion-body p { font-size: 18px; line-height: 1.33; font-weight: 400; font-family: 'trade-gothic-next', sans-serif; } .accordion-flush .accordion-item { -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, .35); box-shadow: 0 0 10px 0 rgba(0, 0, 0, .35) !important; } .accordion-button { font-size: 28px; color: black !important; padding: 1.25rem 2rem; border: none !important; } .accordion-button:not(.collapsed) { background: none !important; } /* END: Individual pages subnav */ /* START: Category Pages */ .Category__bg { padding-top: 150px; } .Category__content { background: white; padding-top: 60px; border-top-left-radius: 10px; border-top-right-radius: 10px; border: 1px solid #979797; border-bottom: none; } .Category__content h1 { margin-bottom: 20px; } .Category__search {} .Category .card { width: 100%; padding: 20px; border: 10px; -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, .35); box-shadow: 0 0 10px 0 rgba(0, 0, 0, .35); margin-bottom: 20px; display: block; margin-top: 0; } .Category__breadcrumb a { text-decoration: none; color: inherit; text-transform: uppercase; font-weight: bold; font-size: 15px; } .Category .card a { text-decoration: none; color: inherit; } .Category .card a:hover{ color: #cc0052; } .Category .card .card-body { padding: 1rem 0; padding-top: 0 !important; padding-bottom: 0 !important; } .Category .card h4 { font-size: 26px; } .card-body .btn { margin-top: 15px } .Category__search { padding-top: 50px; padding-bottom: 50px; } .Category__results .card:hover { margin-top: -3px; transition: margin 800ms; } .Category__results--image { margin-bottom: 10px; } div:not(.flexmasonry):not(.align-self-center):not(.Hero_left):not(.h-100) {} .flexmasonry__wrap { flex-flow: wrap !important; } .flexmasonry-break-1, .flexmasonry-break-2 { display: none; } /* END: Category Pages */ /* START: Banners for category pages */ .College.Category .Category__bg { background: url('https://engage.utoronto.ca/custom/refresh/images/bg-college.jpeg') no-repeat; background-size: cover; background-position: center center; } .Faculty.Category .Category__bg { background: url('https://engage.utoronto.ca/custom/refresh/images/bg-faculty.jpeg') no-repeat; background-size: cover; background-position: center center; } .Special.Category .Category__bg { background: url('https://engage.utoronto.ca/custom/refresh/images/bg-special.jpeg') no-repeat; background-size: cover; background-position: center center; } .Page__faculty .Category__bg, .Page__facultyDepartments .Category__bg, .Page__classGiving .Category__bg, .Page__facultyOther .Category__bg, .Page__collection .Category__bg, .Page__department .Category__bg, .Page__fund .Category__bg, .Page__content .Category__bg, .Page__search .Category__bg, .Page__thankyou .Category__bg, .payroll .Category__bg { background: url('https://engage.utoronto.ca/custom/refresh/images/bg-facultypage.jpeg') no-repeat; background-size: cover; background-position: center center; } .ways_to_give .Category__bg, .international_giving .Category__bg, .the_associates .Category__bg, .gift_planning .Category__bg, .matching_gifts .Category__bg, .faculty_and_staff_gifts .Category__bg, .corporate_partner .Category__bg, .ways_to_give .Category__bg, .faqs .Category__bg, .presidents_circle .Category__bg, .request_information .Category__bg, .contact_us .Category__bg, .kings_college_circle_heritage_society .Category__bg, .meet_gift_planning .Category__bg, .hong_kong_foundation .Category__bg { background: url('https://engage.utoronto.ca/custom/refresh/images/bg-ways.jpeg') no-repeat; background-size: cover; background-position: center center; } .Page__campus .Category__bg { background: url('https://engage.utoronto.ca/custom/refresh/images/bg-facultypage.jpeg') no-repeat; background-size: cover; background-position: center center; } .Page__college .Category__bg { background: url('https://engage.utoronto.ca/custom/refresh/images/bg-facultypage.jpeg') no-repeat; background-size: cover; background-position: center center; } .Page__institute .Category__bg { background: url('https://engage.utoronto.ca/custom/refresh/images/bg-facultypage.jpeg') no-repeat; background-size: cover; background-position: center center; } .Page__initiative .Category__bg, .privacy .Category__bg { background: url('https://engage.utoronto.ca/custom/refresh/images/bg-special.jpeg') no-repeat; background-size: cover; background-position: center center; } /* END: Banners for category pages */ /* START: Fund Pages */ .Donatebox { border: solid 1px #979797; background: #F9F9F9; padding: 30px 50px; } .Donatebox__amount { border: 1px solid #C2D1D9; border-radius: 25px; width: 100%; text-align: center; padding: 10px 0; margin: 15px auto; background: white; cursor: pointer; font-size: 20px; font-weight: bold; color: #1F2432; } .Donatebox__amount.active { background: #cc0052; border: #cc0052 solid 1px; color: white; } .Donatebox #other-amount-input { border-radius: 25px; padding: 10px 0; margin: 15px auto; text-align: center; height: 50px; } .Donatebox .input-group-prepend { position: absolute; z-index: 2; top: 22px; left: 15px; } .Donatebox .input-group-text { background: transparent; border: none; } .donation-amounts-container { margin-top: 20px; } .Donatebox .btn-primary { margin: 15px auto; } /* END: Fund Pages */ /* START: Donation Form Steps */ .Steps__header { margin-top: 45px; } .Steps__nav { display: table; width: 100%; padding: 0; margin: 0; } .Steps__nav li { display: table-cell; text-align: center; } .Steps__form { margin: 60px 0; font-weight: 300; color: #405576; } .Steps__form h2, .Steps__form h3 { color: #1f2432; } .Steps__form label { font-size: 20px; color: #424b5a; } .Steps__form .form-group { margin-bottom: 20px; } .Steps__nav a, .Steps__nav h4 { text-decoration: none !important; } /* .Steps__form input[type=checkbox] { margin-bottom: 40px; margin-top: 10px; } */ .Steps__addmore { display: block; padding: 10px 0; margin: 35px 0; border-top: #929292 1px solid; border-bottom: #929292 1px solid; } .Steps__addmore span.text-underline { text-decoration: underline; } .Steps__addmore span.text-underline:hover { color: #cc0052; text-decoration: underline; } .Steps__nav li a h4 { color: #c1c7d0 !important; font-weight: 800; } .Steps__nav li a.current h4 { color: #25355a !important; } a.add-another-gift { padding-left: 20px; display: inline-block; vertical-align: super; color: #007fa3; } a.add-another-gift:hover { color: #cc0052; } a.add-another-gift i:before { color: #25355a; } a.add-another-gift i:hover:before { color: #007fa3; } /* START: Donation Cart Styles */ .Cart__icon { position: relative; display: inline-block; } .Cart__icon .badge { border-radius: 50%; margin-top: -5px; opacity: 0.9; margin-left: -5px; } .Cart__icon span { position: absolute; } .Cart__editlink, .Cart__update, .Cart__remove { cursor: pointer; color: #25355a !important; } .Cart__editlink:hover, .Cart__update:hover, .Cart__remove:hover { cursor: pointer; color: #007fa3 !important; } .Cart__edit .Cart__amount, .Cart__edit .Cart__editlink, .Cart__edit .Cart__remove { display: none; } .Cart__edit .Cart__update { display: block !important; } .Cart { font-weight: 300; color: #405576; } .Cart .row.BG__lightblue { background-color: #f4f7f9; color: #25355a; } .Cart b { color: #25355a; } p.step-mini-headline { margin-bottom: 20px; } .previous-link { text-decoration: underline !important; } .previous-link:hover { text-decoration: underline !important; font-weight: 600; } span.review-label { font-weight: 600; color: #25355a; } .badge-primary { color: #fff; background-color: #007fad; } /* START: Direct your Gift */ .Direct__selected { background: #e7eff9; border-bottom: 5px solid white; position: relative; padding: 25px 35px; } .Direct__selected h3 {} .Direct__notselected h3 { display: block; background: #25355a; color: white; padding: 12px 0; font-weight: normal; } .Direct__selected p.Vue__shortd { font-size: 18px; } .Direct__change { position: absolute; right: 25px; top: 5px; font-size: 14px; cursor: pointer; color: #00516a; font-weight: 300; text-decoration: underline; transition: 0.2s ease-out; } .Direct__change:hover { font-weight: 600; } /* END: Direct your gift */ /* START: Internal Pages */ .InternalPage .Category__content { border: none; } .InternalPage a { color: #424B5A; } .InternalPage .Hero__right { position: relative; } .InternalPage .Hero__right img { position: absolute; top: -95%; left: 10%; } .Offset { border-radius: 10px; margin-top: 100px; margin-bottom: 100px; } .Offset__left { position: relative; } .Offset__left img { margin-top: -30px; margin-left: -35px; margin-bottom: 30px; width: 95%; } .OffsetR { border-radius: 10px; margin-top: 100px; margin-bottom: 100px; } .OffsetR .Offset__right { position: relative; } .OffsetR .Offset__right img { margin-top: -30px; margin-right: -35px; margin-bottom: 30px; width: 98%; } .Expand { margin-top: 50px; -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, .35); box-shadow: 0 0 10px 0 rgba(0, 0, 0, .35) !important; } .Expand__header { padding: 25px; background: #F0F2F5; } .Expand__collapse { padding: 25px; } .Expand p, .Sidebar .Sidebar__content p { font-size: 18px; line-height: 1.33; font-weight: 400; } .Expand__toggle { background: #F0F2F5; display: block; text-align: center; padding-top: 15px; padding-bottom: 20px; cursor: pointer; border-top: 1px solid #C2D1D9; } .collapse+.Expand__toggle>span:last-child { display: none; } .collapse.show+.Expand__toggle>span:first-child { display: none !important; } .collapse.show+.Expand__toggle>span:last-child { display: inline !important; display: initial !important; } .collapsing+.Expand__toggle>span:last-child { display: none; } .Expand__l-item::marker { font-size: 25px; margin-top: -10px; } .Expand__l-item:first-child::marker { color: #AA0061; } .Expand__l-item:nth-child(2)::marker { color: #5BC2E7; } .Expand__l-item:nth-child(3)::marker { color: #009681; } .Sidebar { border-radius: 20px; overflow: hidden; -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, .35); box-shadow: 0 0 10px 0 rgba(0, 0, 0, .35) !important; } .Sidebar .Sidebar__content { padding: 30px; } .Sidebar__title { margin-bottom: 20px; } .Sidebar .Anchor { text-decoration: none; color: black !important; font-weight: bold; } .Sidebar__quote { margin-top: 20px; -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, .35); box-shadow: 0 0 10px 0 rgba(0, 0, 0, .35) !important; background: url(https://engage.utoronto.ca/custom/refresh/images/bg-caret-quote.png) no-repeat; background-position: bottom right; background-size: contain; } .Sidebar__quote h1 { font-family: "kepler-std"; font-weight: 400; font-size: 42px; line-height: 48px; } .Sidebar__quote-content { padding: 30px } /* END: Internal Pages */ /* START: Media Queries */ @media only screen and (max-width: 1399px) { .Hero_right .animate__animated { display: none; } .Hero_right { background: url(https://engage.utoronto.ca/custom/refresh/images/bg-hero1.png) no-repeat; background-size: contain; background-position: center; } .Explore .card-title { margin-left: 0px; } .Explore .card h3 { font-size: 24px; } } @media only screen and (max-width: 1199px) and (min-width: 768px) { .Category .Category__content { padding-left: 50px; padding-right: 50px; } .InternalPage .Hero__right img { position: relative; top: 0; left: 0; width: 60%; display: flex; margin: 0 auto; } } @media only screen and (max-width: 1199px) { .Category__content--icon { display: none; } } @media only screen and (max-width: 992px) { .Explore .card { height: auto; margin-bottom: 35px; } .Explore .card h3 { font-size: 21px; } .navbar-nav .nav-link { width: 100% !important; margin-bottom: 10px !important; padding-right: 35px !important; padding-left: 35px !important; } .Category__content h1 img { display: block; margin-bottom: 15px; } .Sidebar { margin-top: 50px; } } @media only screen and (max-width: 768px) { .Category__bg { padding-top: 0; background: none !important; } .Category__content { border: none; border-radius: 0; padding-top: 25px; } .Donatebox { padding: 25px; border: none; background: none; } .donation-amounts-container { padding: 0; } .Hero { padding-top: 50px; } .Hero_right { display: none; } .Header__search { padding: 5px 15px; } .Header__logo { width: 200px; } .Header__cart { padding: 8px 15px 10px; } .progress-step h4 { font-size: 14px !important; } .Quickie { background: none; } .Quickie h1 { margin-bottom: 30px; } .Quickie .Search__input { margin-top: 30px; } .OtherWaysToGive { padding-top: 0px !important; padding-bottom: 0px !important; } .Search__input { margin-top: 20px; } } .flexmasonry { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; -webkit-column-gap: 1em; -moz-column-gap: 1em; column-gap: 1em; margin: 1.5em; padding: 0; -moz-column-gap: 1.5em; -webkit-column-gap: 1.5em; column-gap: 1.5em; font-size: .85em; } .grid-item { display: inline-block; padding: 1em; margin: 0 0 1.5em; -webkit-transition: 1s ease all; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } .grid-item .card { } @media only screen and (max-width: 767px) { .flexMasonryWrapper>div { height: auto !important } .Hero { min-height: auto; padding: 100px 0; } .card { height: auto !important; } .Category .card .card-body { padding-bottom: 0 !important; } .Category .card .card-body p:last-child { margin-bottom: 10px !important; } .Hero_right { display: none; } .text-jumbo { font-size: 40px; } h1 { font-size: 40px; } h2 { font-size: 32px; } h3 { font-size: 28px; } h4 { font-size: 20px; } h5 { font-size: 15px; } p { font-size: 21px; max-width: 850px; } .text-small { font-size: 16px; } .Copyright .col { flex: 0 0 100%; } .Footer, .Copyright .col { text-align: center !important; } .Moments .carousel-item h1 { font-size: 34px; line-height: 42px; } .InternalPage .Hero__right img { position: relative; top: auto; left: auto; } .Offset__left img { position: relative; margin-top: 10px; margin-bottom: auto; width: 100%; margin-left: auto; } } @media only screen and (max-width: 580px) { .Pressing .Category__content .btn { width: 100%; } .Explore .mt-100 { margin-top: 50px !important; } } @media only screen and (max-width: 425px) { .Header__logo { width: 180px; } } </style> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" /> <link rel="stylesheet" href="https://unpkg.com/flexmasonry/dist/flexmasonry.css"> </head> <body class="mobile donate DonatePage " >  <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-KJQWN29');</script>   <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-KJQWN29" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>   <div id="app" :class="domdom.body"> <form id="donate-form" class="clearfix" @submit.prevent="submit_donation"> <div class="d-none"> <input type="hidden" id="auth" name="auth" value="DERt-_SSOAjnjeeRvXOFeJiFqrVsuijEF1bqXzZF7gV_D1MhB01feHySNu6P8aopj8DqApnODsPl6PwKcPYsyBbqnCSxIqaVha1zEys" /> </div> <input type="hidden" id="donation_form_id" value="1620"> <input type="hidden" id="captcha_text">  <div class="container-fluid"> <div class="container"> <div class="row Header"> <div class="col"> <a href="#/home"> <img class="Header__logo" src="https://engage.utoronto.ca/custom/graphic/dua/holiday-card/u-of-t-sig.svg" width="255" alt=""> </a> </div> <div class="col d-flex justify-content-end align-items-center"> <a class="Header__search" href="#/search"> <i class="fas fa-search"></i> </a> <a href="#/donorInfo" class="Header__cart" :class="{ 'active' : cart.items.length > 0}"> <i class="fas fa-shopping-cart"></i> <span class='badge badge-primary'> {{ cart.items.length }} </span> </a> </div> </div> </div> </div>   <section data-route="home" v-if="this.show.page == 'home'" class="Page__home"> <div class="container-fluid"> <div class="row"> <div class="col Hero"> <div class="container h-100"> <div class="row h-100"> <div class="col-lg-6 d-flex Hero_left"> <div class="align-self-center"> <h1 class="text-jumbo text-white"> Be a catalyst for change–here at U of T and around the world. </h1> <p class="mt-5"> <a href="#pressing-needs" class="btn btn-primary"> Give now </a> <a href="#direct" class="btn btn-secondary"> Explore funds </a> </p> </div> </div> <div class="col-lg-6 Hero_right"> <div class=" " style="position: relative;"> <div class="animate__animated animate__fadeInUp animate__slow" style="margin: 25% auto auto -1%; animation-delay: 0.2s;"> <img src="https://engage.utoronto.ca/custom/refresh/images/thumb1.png" alt="" width="350"> </div> <div class=" animate__animated animate__fadeInUp animate__slow" style="margin: 105% auto auto -2%; animation-delay: 0.1s; z-index: 2;"> <img src="https://engage.utoronto.ca/custom/refresh/images/thumb2.png" alt="" width="280"> </div> <div class=" animate__animated animate__fadeInUp animate__slow" style="margin: 62% auto auto -40px; animation-delay: 0.3s;"> <img src="https://engage.utoronto.ca/custom/refresh/images/thumb3.png" alt="" width="200"> </div> <div class=" animate__animated animate__fadeInUp animate__slow" style="margin: 20% auto auto 61%; z-index: 2; animation-delay: 0.35s;"> <img src="https://engage.utoronto.ca/custom/refresh/images/thumb4.png" alt=""> </div> <div class=" animate__animated animate__fadeInUp animate__slow" style="margin: 55% auto auto 70%; z-index: 1; animation-delay: 0.4s;"> <img src="https://engage.utoronto.ca/custom/refresh/images/thumb5.png" alt="" width="200"> </div> <div class=" animate__animated animate__fadeInUp animate__slow" style="margin: 90% auto auto 50%; animation-delay: 0.45s; z-index: 2;"> <img src="https://engage.utoronto.ca/custom/refresh/images/thumb6.png" alt="" width="280"> </div> </div> </div> </div> </div> </div> </div> </div>  <div class="container-fluid bg-navyGradient Explore" style="margin-top: -2px;"> <div class="container pb-50 border-left"> <div class="row"> <div class="col-md-8 offset-md-2 text-center mt-100"> <h1 class="text-white mb-4"> Explore Giving Opportunities </h1> <p class="text-white mb-50"> Your gift will make an impact on deserving students, life-changing research, or other pressing needs at the University of Toronto. </p> </div> </div> <div class="row"> <div class="col-lg-4"> <a href="#/colleges-campuses-communities" class="cardWrapper"> <div class="card animate animate__fadeInUp animate__slow"> <img src="https://engage.utoronto.ca/custom/refresh/images/college.png" class="card-img-top mb-2" alt="..."> <div class="card-body"> <div class="row card-title-wrapper"> <div class="col-xl-3 col-lg-5 d-none d-lg-block mb-2"> <img src="https://engage.utoronto.ca/custom/refresh/images/icon/icon-college.png" width="60" alt=""> </div> <div class="col-md-9"> <h3 class="card-title">Colleges, Campuses & Communities <i class="fa-solid fa-chevron-right"></i></h3> </div> </div> <p class="card-text text-small mt-2">Explore the many ways to make a direct impact on your campus or college community.</p> </div> </div> </a> </div> <div class="col-lg-4"> <a href="#/faculties-institutes" class="cardWrapper"> <div class="card animate animate__fadeInUp animate__slow" style=""> <img src="https://engage.utoronto.ca/custom/refresh/images/faculties.png" class="card-img-top mb-2" alt="..."> <div class="card-body"> <div class="row card-title-wrapper"> <div class="col-xl-3 col-lg-5 d-none d-lg-block mb-2"> <img src="https://engage.utoronto.ca/custom/refresh/images/icon/icon-faculty.png" width="60" alt=""> </div> <div class="col-md-9"> <h3 class="card-title">Faculties<br>& Institutes <i class="fa-solid fa-chevron-right"></i> </h3> </div> </div> <p class="card-text text-small mt-2">Advance research, support priorities and promote student success in the areas you care about most.</p> </div> </div> </a> </div> <div class="col-lg-4"> <a href="#/special-projects-initiatives" class="cardWrapper"> <div class="card animate animate__fadeInUp animate__slow" style=""> <img src="https://engage.utoronto.ca/custom/refresh/images/specialprojects.png" class="card-img-top mb-2" alt="..."> <div class="card-body"> <div class="row card-title-wrapper"> <div class="col-xl-3 col-lg-5 d-none d-lg-block mb-2"> <img src="https://engage.utoronto.ca/custom/refresh/images/icon/icon-special.png" width="60" alt=""> </div> <div class="col-md-9"> <h3 class="card-title">Special Projects, Initiatives & more <i class="fa-solid fa-chevron-right"></i></h3> </div> </div> <p class="card-text text-small mt-2">Browse projects and initiatives that contribute to a world-class experience for students, faculty and alumni.</p> </div> </div> </a> </div> </div> </div> </div>   <div class="container-fluid Quickie bg-karet-grey-top-left"> <div class="container border-left pt-75 pb-75"> <div class="row"> <div class="col-lg-11 offset-lg-1 col-md-12 text-left"> <h1>Quick Search</h1> </div> </div> <div class="row"> <div class="col-lg-5 offset-lg-1 col-md-12"> <p class="text-light"> Looking for a specific project, faculty, department, or giving opportunity? Enter a keyword, such as “Medicine” or “Pearson Scholars.” </p> </div> <div class="col-lg-5 col-md-11"> <div class="input-group Search__input" style="height: 48px !important;"> <input class="form-control border form-control-lg form-control-rounded" type="search" v-model="search.searchFunds" v-on:keyup.enter="go_to_route('search')" style="height: 48px !important;"> <span class="input-group-append"> <a href="#search" class="btn btn-primary btn-sm text-sm" type="button"> Search   <i class="fa fa-search"></i> </a> </span> </div> </div> </div> </div> <div class="container border-left pt-75 pb-75 OtherWaysToGive"> <div class="row"> <div class="col-lg-6 OtherWaysToGive__thumbs mb-5" style="position: relative;"> <img src="https://engage.utoronto.ca/custom/refresh/images/bg-search-thumbs.png" class="img-fluid" alt=""> </div> <div class="col-lg-6"> <h1>Other Ways to Donate</h1> <p class="text-light"> There are many ways to support U of T. Find your best fit here, whether it's a matching program, bequest, stock or security, or any other option. </p> <p class="mt-4"> <a href="https://engage.utoronto.ca/site/SPageServer?pagename=ways_to_give" class="btn btn-primary">Learn more</a> </p> </div> </div> </div> </div>   <div class="container-fluid Moments"> <div class="container border-left"> <div id="carouselExampleIndicators" data-ride="carousel" class="carousel slide"> <div class="carousel-inner"> <div class="carousel-item"> <div class="row"> <div class="col-lg-6 col-md-12 col-sm-12 my-auto Moments__content"> <div class="Moments__content--padd"> <img src="https://engage.utoronto.ca/custom/refresh/images/icon-quote.png" width="50" alt=""> <h1>“I think young people have the power to transform their communities and their countries.”</h1> <p class="text-small">—Emmanuela Alimlim (BA 2018 WDW)</p> <p class="text-small"> Emmanuela grew up in rural northern Kenya and was able to come to the University of Toronto courtesy of the Mastercard Foundation Scholars Program. </p> </div> </div> <div class="col-lg-6 col-md-12 col-sm-12 pl-0 pr-0 Moments__image align-self-end"> <img src="https://engage.utoronto.ca/custom/refresh/images/quote.png" alt="" class="img-fluid" width="80%"> </div> </div> </div>  <div class="carousel-item active"> <div class="row"> <div class="col-lg-6 col-md-12 col-sm-12 my-auto Moments__content"> <div class="Moments__content--padd"> <img src="https://engage.utoronto.ca/custom/refresh/images/icon-quote.png" width="50" alt=""> <h1>“I feel lucky that we were successful enough that I can give back to others.” </h1> <p class="text-small">—Judith Schurek (BASc 1958)</p> <p class="text-small"> Judith was one of the first women to earn a degree in mechanical engineering at the University of Toronto, and gave $1 million to establish two Pearson scholarships, in her name and her late husband’s. </p> </div> </div> <div class="col-lg-6 col-md-12 col-sm-12 pl-0 pr-0 Moments__image align-self-end">  <img src="https://engage.utoronto.ca/custom/refresh/images/judith.png" alt="" class="img-fluid" width="110%"> </div> </div> </div> </div> <ol class="carousel-indicators"> <li data-bs-target="#carouselExampleIndicators" data-slide-to="0" class=""></li> <li data-bs-target="#carouselExampleIndicators" data-slide-to="1" class=""></li> <li data-bs-target="#carouselExampleIndicators" data-slide-to="2" class="active"></li> </ol> </div> </div> </div>  </section>   <section data-route="faculties-institutes" id="faculties-institutes" name="faculties-institutes" class="faculties-institutes Category Faculty" v-if="this.show.page == 'faculties-institutes'"> <div class="container-fluid Category__bg"> <div class="container Category__content"> <div class="row"> <div class="col-xl-10 offset-xl-1 col-lg-12"> <p class="text-xs Category__breadcrumb"> <a href="#/home"> <i class="fa-solid fa-chevron-left"></i> HOME </a> </p> </div> </div> <div class="row"> <div class="col-xl-10 offset-xl-1 col-lg-12"> <h1> <img src="https://engage.utoronto.ca/custom/refresh/images/icon/icon-faculty.png" width="80" alt=""> Faculties & Institutes </h1> <p> By donating to a specific faculty, you can choose to advance research, support priorities and promote student success in the areas you care about most. Explore the many ways you can make a direct impact on your faculty community. </p> </div> </div> </div> </div> <div class="container-fluid"> <div class="container border-left"> <div class="row Category__search"> <div class="col-md-4 offset-md-4 p-0 text-center"> <h4 class="p-0 m-0"> Search Faculties & Institutes </h4> <div class="input-group Search__input mt-3"> <input class="form-control border form-control-lg form-control-rounded" type="search" v-model="search.searchFacultyInstitute"> <span class="input-group-append"> <button class="btn" type="button" disabled> <i class="fa fa-search"></i> </button> </span> </div> </div> </div> <div class="row Category__results bg-karet-grey-top-right bg-karet-grey-bottom-left"> <div class="col-md-12 flexMasonryWrapper"> <div class="row flexMasonry"> <div class="col-lg-4" v-for="(facultyInstitute, index) in getFacultiesInstitutes" :key="index"> <div class="card"> <img v-bind:src="facultyInstitute.image" class="w-100 img-fluid Category__results--image" alt=""> <div class="card-body"> <a :href="'#/' + facultyInstitute.type + '/' + facultyInstitute.id"> <h4 class="name">{{ facultyInstitute.name }}</h4> </a> <p class="card-text text-xs" v-html="facultyInstitute.shortd"> </p> <a :href="'#/' + facultyInstitute.type + '/' + facultyInstitute.id" class=""> Browse giving opportunities <i class="fa-solid fa-chevron-right"></i> </a> </div> </div> </div> </div> </div> </div> </div> </div> </section>   <section data-route="colleges-campuses-communities" id="colleges-campuses-communities" name="colleges-campuses-communities" class="colleges-campuses-communities College Category" v-if="this.show.page == 'colleges-campuses-communities'"> <div class="container-fluid Category__bg"> <div class="container Category__content"> <div class="row"> <div class="col-xl-10 offset-xl-1 col-lg-12"> <p class="text-xs Category__breadcrumb"> <a href="#/home"> <i class="fa-solid fa-chevron-left"></i> HOME </a> </p> </div> </div> <div class="row"> <div class="col-xl-10 offset-xl-1 col-lg-12"> <h1> <img src="https://engage.utoronto.ca/custom/refresh/images/icon/icon-college.png" width="80" alt=""> Colleges, Campuses & Communities </h1> <p> For many, the choice of college and campus is among the most defining factors of their university experience. A gift to your alma mater will continue to advance U of T’s unique programs and opportunities. Explore the many ways to make a direct impact on your campus or college community. </p> </div> </div> </div> </div> <div class="container-fluid"> <div class="container border-left"> <div class="row Category__search"> <div class="col-md-4 offset-md-4 p-0 text-center"> <h4 class="p-0 m-0"> Search Colleges, Campuses & Communities </h4> <div class="input-group Search__input mt-3"> <input class="form-control border form-control-lg form-control-rounded" type="search" v-model="search.searchCollegeCampusCommunity"> <span class="input-group-append"> <button class="btn" type="button" disabled> <i class="fa fa-search"></i> </button> </span> </div> </div> </div> <div class="row Category__results bg-karet-grey-top-right bg-karet-grey-bottom-left"> <div class="col-md-12 flexMasonryWrapper"> <div class="row flexMasonry">  <div class="col-lg-4 grid-item" v-for="(collegeCampusCommunity, index) in getCollegesCampusesCommunitites" :key="index"> <div class="card"> <img v-bind:src="collegeCampusCommunity.image" class="w-100 img-fluid Category__results--image" alt=""> <div class="card-body"> <a :href="'#/' + collegeCampusCommunity.type + '/' + collegeCampusCommunity.id"> <h4 class="name">{{ collegeCampusCommunity.name }}</h4> </a> <p class="card-text text-xs" v-html="collegeCampusCommunity.shortd"></p> <a :href="'#/' + collegeCampusCommunity.type + '/' + collegeCampusCommunity.id" class=""> Browse giving opportunities <i class="fa-solid fa-chevron-right"></i> </a> </div> </div> </div> </div> </div> </div> </div> </div> </section>   <section data-route="special-projects-initiatives" id="special-projects-initiatives" name="special-projects-initiatives" class="special-projects-initiatives Category Special" v-if="this.show.page == 'special-projects-initiatives'"> <div class="container-fluid Category__bg"> <div class="container Category__content"> <div class="row"> <div class="col-xl-10 offset-xl-1 col-lg-12"> <p class="text-xs Category__breadcrumb"> <a href="#/home"> <i class="fa-solid fa-chevron-left"></i> HOME </a> </p> </div> </div> <div class="row"> <div class="col-xl-10 offset-xl-1 col-lg-12"> <h1> <img src="https://engage.utoronto.ca/custom/refresh/images/icon/icon-special.png" width="80" alt=""> Special Projects, Initiatives & more </h1> <p> The University of Toronto is home to a great diversity of projects and places that contribute to a world-class experience for students, faculty and alumni. Browse this section to see the many ways you can support the issues and initiatives you care about most. </p> </div> </div> </div> </div> <div class="container-fluid"> <div class="container border-left"> <div class="row Category__search"> <div class="col-md-4 offset-md-4 p-0 text-center"> <h4 class="p-0 m-0"> Search Special Projects, Initiatives & more </h4> <div class="input-group Search__input mt-3"> <input class="form-control border form-control-lg form-control-rounded" type="search" v-model="search.searchSpecialProjectInitiative"> <span class="input-group-append"> <button class="btn" type="button" disabled> <i class="fa fa-search"></i> </button> </span> </div> </div> </div> <div class="row Category__results bg-karet-grey-top-right bg-karet-grey-bottom-left"> <div class="col-md-12 flexMasonryWrapper"> <div class="row flexMasonry"> <div class="col-lg-4 grid-item" v-for="(initiative, index) in getSpecialProjectsInitiatives" :key="index"> <div class="card"> <img v-bind:src="initiative.image" class="w-100 img-fluid Category__results--image" alt=""> <div class="card-body"> <a :href="'#/' + initiative.type + '/' + initiative.id"> <h4 class="name">{{ initiative.name }}</h4> </a> <p class="card-text text-xs" v-html="initiative.shortd"> </p> <a :href="'#/' + initiative.type + '/' + initiative.id" class=""> Browse giving opportunities <i class="fa-solid fa-chevron-right"></i> </a> </div> </div> </div> </div> </div> </div> </div> </div> </section>    <section data-route="campus" id="viewCampus" name="viewCampus" class="Campus Category Page__campus" v-if="getSpecificCampus && this.show.page == 'campus'"> <div class="container-fluid Category__bg"> <div class="container Category__content"> <div class="row"> <div class="col-xl-10 offset-xl-1 col-lg-12"> <p class="text-xs Category__breadcrumb"> <a href="#/colleges-campuses-communities"> <i class="fa-solid fa-chevron-left"></i> Colleges, Campuses and Communities </a> </p> <h1> {{ getSpecificCampus.name }} </h1> <p v-if="getSpecificCampus.shortd"> {{ getSpecificCampus.shortd }} <a href="javascript:void(0)" data-bs-toggle="modal" class="vRender__anchor" :data-bs-target="'#Campus' + getSpecificCampus.id">Read more<i class="fa-solid fa-chevron-right"></i></a> </p> <div v-if="!getSpecificCampus.shortd && getSpecificCampus.description" class="vRender__text"> <span v-html="getDescriptionSubstring(getSpecificCampus.description)"></span> <a href="javascript:void(0)" data-bs-toggle="modal" class="vRender__anchor" :data-bs-target="'#Campus' + getSpecificCampus.id">Read more<i class="fa-solid fa-chevron-right"></i></a> </div> </div> </div> </div> </div> <div class="container-fluid"> <div class="container"> <div class="row"> <div class="col-md-10 offset-md-1 mt-4 mb-75"> <img v-bind:src="getSpecificCampus.image" class="w-100 img-fluid" alt=""> </div> </div>  <div class="row"> <div class="col-md-6 offset-md-3 p-0 mb-5 mt-4"> <div class="row"> <div class="col-md-6 text-center"> <h4 class="p-0 m-0"> Search funds </h4> </div> <div class="col-md-6"> <div class="input-group"> <input class="form-control border-end-0 border form-control-lg form-control-rounded" type="search" v-model="search.searchCampusFunds"> <span class="input-group-append"> <button class="btn btn-outline-secondary bg-white border ms-n5" type="button" disabled> <i class="fa fa-search"></i> </button> </span> </div> </div> </div> </div> </div> <div class="row" v-cloak v-if="getFundsByCampus.length"> <div class="col-md-12 flexMasonryWrapper"> <div class="row flexMasonry">  <div class="grid-item col-lg-4" v-for="(fund, index) in getFundsByCampus" :key="index"> <div class="card fundCard" :class="{ 'bg-fundtop' : fund.campuses[0].pivot.important == 'true'}"> <img v-if="fund.image" v-bind:src="fund.image" class="w-100 img-fluid Category__results--image" alt=""> <div class="card-body"> <a :href="'#/fund/' + fund.id"> <h4 class="name">{{ fund.name }}</h4> </a> <p class="card-text text-xs" v-if="fund.shortd" v-html="fund.shortd"></p> <p class="card-text text-xs" v-if="!fund.shortd && fund.description" v-html="getDescriptionSubstring(fund.description)"></p> <a :href="'#/fund/' + fund.id" class="btn btn-primary"> Give now </a> </div> </div> </div> </div> </div> </div> </div> <div class="container fund" v-if="!getFundsByCampus.length"> <div class="row"> <div class="col-md-12"> No funds found, please try again or <a class="text-underline" href="#/pressing-needs">click here</a> to donate to the most pressing needs of the University of Toronto </div> </div> </div>  <div :id="'Campus' + getSpecificCampus.id" tabindex="-1" class="modal fade show" aria-modal="true" role="dialog" style="display: none; padding-left: 0px;"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <div class="modal-title"> <h3>{{ getSpecificCampus.name }} </h3> </div> <a href="javascript:void(0)" style="text-decoration: none;" type="button" data-bs-dismiss="modal" aria-label="Close" class="close"> <img src="https://engage.utoronto.ca/custom/refresh/images/icon/icon-close.png" class="Modal__close" width="20" alt=""> </a> </div> <div class="modal-body"> <div class="text-small" v-html="getSpecificCampus.description"></div> </div> </div> </div> </div>  </div> </section>   <section data-route="college" id="viewCollege" name="viewCollege" class="College Category Page__college" v-if="getSpecificCollege && this.show.page == 'college'"> <div class="container-fluid Category__bg"> <div class="container Category__content"> <div class="row"> <div class="col-xl-10 offset-xl-1 col-lg-12"> <p class="text-xs Category__breadcrumb"> <a href="#/colleges-campuses-communities"> <i class="fa-solid fa-chevron-left"></i> Colleges, Campuses and Communities </a> </p> <h1> {{ getSpecificCollege.name }} </h1> <p v-if="getSpecificCollege.shortd"> {{ getSpecificCollege.shortd }} <a href="javascript:void(0)" data-bs-toggle="modal" class="vRender__anchor" :data-bs-target="'#College' + getSpecificCollege.id">Read more<i class="fa-solid fa-chevron-right"></i></a> </p> <div v-if="!getSpecificCollege.shortd && getSpecificCollege.description" class="vRender__text"> <span v-html="getDescriptionSubstring(getSpecificCollege.description)"></span> <a href="javascript:void(0)" data-bs-toggle="modal" class="vRender__anchor" :data-bs-target="'#College' + getSpecificCollege.id">Read more<i class="fa-solid fa-chevron-right"></i></a> </div> </div> </div> </div> </div> <div class="container-fluid"> <div class="container"> <div class="row"> <div class="col-md-10 offset-md-1 mt-4 mb-75"> <img v-bind:src="getSpecificCollege.image" class="w-100 img-fluid" alt=""> </div> </div>   <div class="row" v-cloak v-if="getFundsByCollege.length"> <div class="col-md-10 offset-md-1"> <div class="row flexMasonryWrapper" > <div class="flexMasonry row"> <div class="col-lg-4 grid-item" v-for="(fund, index) in getFundsByCollege" :key="index"> <div class="card fundCard" :class="{ 'bg-fundtop' : fund.colleges[0].pivot.important == 'true'}"> <img v-if="fund.image" v-bind:src="fund.image" class="w-100 img-fluid Category__results--image" alt=""> <div class="card-body"> <a :href="'#/fund/' + fund.id"> <h4 class="name">{{ fund.name }}</h4> </a> <p class="card-text text-xs" v-if="fund.shortd" v-html="fund.shortd"></p> <p class="card-text text-xs" v-if="!fund.shortd && fund.description" v-html="getDescriptionSubstring(fund.description)"></p> <a :href="'#/fund/' + fund.id" class="btn btn-primary"> Give now </a> </div> </div> </div> </div> </div> </div> </div> <div class="container fund" v-if="!getFundsByCollege.length"> <div class="row"> <div class="col-md-12"> No funds found, please try again or <a class="text-underline" href="#/pressing-needs">click here</a> to donate to the most pressing needs of the University of Toronto </div> </div> </div>  <div :id="'College' + getSpecificCollege.id" tabindex="-1" class="modal fade show" aria-modal="true" role="dialog" style="display: none; padding-left: 0px;"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <div class="modal-title"> <h3>{{ getSpecificCollege.name }} </h3> </div> <a href="javascript:void(0)" style="text-decoration: none;" type="button" data-bs-dismiss="modal" aria-label="Close" class="close"> <img src="https://engage.utoronto.ca/custom/refresh/images/icon/icon-close.png" class="Modal__close" width="20" alt=""> </a> </div> <div class="modal-body"> <div class="text-small" v-html="getSpecificCollege.description"></div> </div> </div> </div> </div>  </div> </div> </section>   <section data-route="department" id="viewDepartment" name="viewDepartment" class="Department Category Page__department" v-if="getSpecificDepartment && this.show.page == 'department'"> <div class="container-fluid Category__bg"> <div class="container Category__content"> <div class="row"> <div class="col-xl-10 offset-xl-1 col-lg-12"> <p class="text-xs Category__breadcrumb"> <a :href="'#/faculty/' + getSpecificDepartment.faculties[0].id"> <i class="fa-solid fa-chevron-left"></i> {{ getSpecificDepartment.faculties[0].name }} </a> </p> <h1> {{ getSpecificDepartment.name }} </h1> <p v-if="getSpecificDepartment.shortd"> <span v-html="getDescriptionSubstring(getSpecificDepartment.shortd)"></span> <a href="javascript:void(0)" data-bs-toggle="modal" class="vRender__anchor" :data-bs-target="'#Department' + getSpecificDepartment.id">Read more<i class="fa-solid fa-chevron-right"></i></a> </p> <div v-if="!getSpecificDepartment.shortd && getSpecificDepartment.description" class="vRender__text"> <span v-html="getDescriptionSubstring(getSpecificDepartment.description)"></span> <a href="javascript:void(0)" data-bs-toggle="modal" :data-bs-target="'#Department' + getSpecificDepartment.id">Read more<i class="fa-solid fa-chevron-right"></i></a> </div> </div> </div> </div> </div> <div class="container-fluid"> <div class="container"> <div class="row"> <div class="col-md-10 offset-md-1 mt-4 mb-75"> <img v-bind:src="getSpecificDepartment.image" class="w-100 img-fluid" alt=""> </div> </div>   <div class="row" v-cloak v-if="getFundsByDepartment.length"> <div class="col-md-12"> <div class=" flexMasonryWrapper" > <div class="flexMasonry row"> <div class="col-lg-4 grid-item" v-for="(fund, index) in getFundsByDepartment" :key="index"> <div class="card fundCard" :class="{ 'bg-fundtop' : fund.departments[0].pivot.important == 'true'}"> <img v-if="fund.image" v-bind:src="fund.image" class="w-100 img-fluid Category__results--image" alt=""> <div class="card-body"> <a :href="'#/fund/' + fund.id"> <h4 class="name">{{ fund.name }}</h4> </a> <p class="card-text text-xs" v-if="fund.shortd" v-html="fund.shortd"></p> <p class="card-text text-xs" v-if="!fund.shortd && fund.description" v-html="getDescriptionSubstring(fund.description)"></p> <a :href="'#/fund/' + fund.id" class="btn btn-primary"> Give now </a> </div> </div> </div> </div> </div> </div> </div> <div class="container fund" v-if="!getFundsByDepartment.length"> <div class="row"> <div class="col-md-12"> No funds found, please try again or <a class="text-underline" href="#/pressing-needs">click here</a> to donate to the most pressing needs of the University of Toronto </div> </div> </div>  <div :id="'Department' + getSpecificDepartment.id" tabindex="-1" class="modal fade show" aria-modal="true" role="dialog" style="display: none; padding-left: 0px;"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <div class="modal-title"> <h3>{{ getSpecificDepartment.name }} </h3> </div> <a href="javascript:void(0)" style="text-decoration: none;" type="button" data-bs-dismiss="modal" aria-label="Close" class="close"> <img src="https://engage.utoronto.ca/custom/refresh/images/icon/icon-close.png" class="Modal__close" width="20" alt=""> </a> </div> <div class="modal-body"> <div class="text-small" v-html="getSpecificDepartment.description"></div> </div> </div> </div> </div>  </div> </div> </section>   <section data-route="collection" id="viewCollection" name="viewCollection" class="Collection Category Page__collection" v-if="getSpecificCollection && this.show.page == 'collection'"> <div class="container-fluid Category__bg"> <div class="container Category__content"> <div class="row"> <div class="col-xl-10 offset-xl-1 col-lg-12"> <p class="text-xs Category__breadcrumb" v-if="getSpecificCollection.faculty_id > 0"> <a :href="'#/faculty/' + getSpecificCollection.faculty_id"> <i class="fa-solid fa-chevron-left"></i> {{ getFacultyNameByID(getSpecificCollection.faculty_id).name }} </a> </p> <h1> {{ getSpecificCollection.name }} </h1> <p v-if="getSpecificCollection.shortd" class="vRender__text"> <span v-html="getSpecificCollection.shortd"></span> <a href="javascript:void(0)" data-bs-toggle="modal" class="vRender__anchor" :data-bs-target="'#Collection' + getSpecificCollection.id" v-if="getSpecificCollection.description">Read more<i class="fa-solid fa-chevron-right"></i></a> </p> <div v-if="!getSpecificCollection.shortd && getSpecificCollection.description" class="vRender__text"> <span v-html="getDescriptionSubstring(getSpecificCollection.description)"></span> <a href="javascript:void(0)" data-bs-toggle="modal" class="vRender__anchor" :data-bs-target="'#Collection' + getSpecificCollection.id">Read more<i class="fa-solid fa-chevron-right"></i></a> </div> </div> </div> </div> </div> <div class="container-fluid"> <div class="container"> <div class="row"> <div class="col-md-10 offset-md-1 mt-4 mb-75"> <img v-bind:src="getSpecificCollection.image" class="w-100 img-fluid" alt=""> </div> </div>   <div class="row" v-cloak v-if="getFundsByCollection.length"> <div class="col-md-12"> <div class=" flexMasonryWrapper" > <div class="flexMasonry row"> <div class="col-lg-4 grid-item" v-for="(fund, index) in getFundsByCollection" :key="index"> <div class="card fundCard" :class="{ 'bg-fundtop' : fund.collections[0].pivot.important == 'true'}"> <img v-if="fund.image" v-bind:src="fund.image" class="w-100 img-fluid Category__results--image" alt=""> <div class="card-body"> <a :href="'#/fund/' + fund.id"> <h4 class="name">{{ fund.name }}</h4> </a> <p class="card-text text-xs" v-if="fund.shortd" v-html="fund.shortd"></p> <p class="card-text text-xs" v-if="!fund.shortd && fund.description" v-html="getDescriptionSubstring(fund.description)"></p> <a :href="'#/fund/' + fund.id" class="btn btn-primary"> Give now </a> </div> </div> </div> </div> </div> </div> </div> <div class="container fund" v-if="!getFundsByCollection.length"> <div class="row"> <div class="col-md-12"> No funds found, please try again or <a class="text-underline" href="#/pressing-needs">click here</a> to donate to the most pressing needs of the University of Toronto </div> </div> </div>  <div :id="'Collection' + getSpecificCollection.id" tabindex="-1" class="modal fade show" aria-modal="true" role="dialog" style="display: none; padding-left: 0px;"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <div class="modal-title"> <h3>{{ getSpecificCollection.name }} </h3> </div> <a href="javascript:void(0)" style="text-decoration: none;" type="button" data-bs-dismiss="modal" aria-label="Close" class="close"> <img src="https://engage.utoronto.ca/custom/refresh/images/icon/icon-close.png" class="Modal__close" width="20" alt=""> </a> </div> <div class="modal-body"> <div class="text-small" v-html="getSpecificCollection.description"></div> </div> </div> </div> </div>  </div> </div> </section>   <section data-route="faculty" id="viewFaculty" name="viewFaculty" class="Page__faculty Category" v-if="getSpecificFaculty && this.show.page == 'faculty'"> <div class="container-fluid Category__bg"> <div class="container Category__content"> <div class="row"> <div class="col-xl-10 offset-xl-1 col-lg-12"> <p class="text-xs Category__breadcrumb"> <a href="#/faculties-institutes"> <i class="fa-solid fa-chevron-left"></i> FACULTIES AND DIVISIONS </a> </p> <h1> {{ getSpecificFaculty.name }} </h1> <p v-if="getSpecificFaculty.shortd"> {{ getSpecificFaculty.shortd }} <a href="javascript:void(0)" data-bs-toggle="modal" class="vRender__anchor" :data-bs-target="'#Faculty' + getSpecificFaculty.id">Read more<i class="fa-solid fa-chevron-right"></i></a> </p> <div v-if="!getSpecificFaculty.shortd && getSpecificFaculty.description" class="vRender__text"> <span v-html="getDescriptionSubstring(getSpecificFaculty.description)"></span> <a href="javascript:void(0)" data-bs-toggle="modal" class="vRender__anchor" :data-bs-target="'#Faculty' + getSpecificFaculty.id">Read more<i class="fa-solid fa-chevron-right"></i></a> </div> </div> </div> </div> </div> <div class="container-fluid"> <div class="container"> <div class="row"> <div class="col-md-10 offset-md-1 mt-4 mb-4"> <img v-bind:src="getSpecificFaculty.image" class="w-100 img-fluid" alt=""> </div> </div> <div class="row" :class="{ 'd-none' : ifFacultyHasDepartments < 1 && ifFacultyHasClassGivings < 1 && ifFacultyHasCollections < 1 }"> <div class="col-md-10 offset-md-1 mt-4 mb-4"> <nav class="Page__nav navbar navbar-expand-lg searchBlock__nav d-block w-100" style="background: white;"> <div class="" id="navbarNav"> <ul class="navbar-nav nav-fill w-100 mx-auto justify-content-center"> <li class="nav-item active"> <a class="nav-link active" :href="'#/faculty/' + getSpecificFaculty.id"> Featured Funds <span class="sr-only">(current)</span> </a> </li> <li class="nav-item" :class="{ 'd-none' : ifFacultyHasDepartments < 1}"> <a class="nav-link" :href="'#/faculty-departments/' + getSpecificFaculty.id"> Departments and Specific Areas </a> </li> <li class="nav-item" :class="{ 'd-none' : ifFacultyHasClassGivings < 1}"> <a class="nav-link" :href="'#/faculty-class-giving/' + getSpecificFaculty.id"> Class Giving </a> </li> <li class="nav-item" :class="{ 'd-none' : ifFacultyHasCollections < 1 }"> <a class="nav-link" :href="'#/other-giving-opportunities/' + getSpecificFaculty.id"> Other Giving Opportunities </a> </li> </ul> </div> </nav> </div> </div> <div class="row Category__search"> <div class="col-md-4 offset-md-4 p-0 text-center"> <h4 class="p-0 m-0"> Search funds </h4> <div class="input-group Search__input mt-3"> <input class="form-control border form-control-lg form-control-rounded" type="search" v-model="search.searchFacultyFunds"> <span class="input-group-append"> <button class="btn" type="button" disabled> <i class="fa fa-search"></i> </button> </span> </div> </div> </div> <div class="row" v-if="getFundsByFaculty.length"> <div class="col-md-12 flexMasonryWrapper"> <div class="row flexMasonry"> <div class="col-lg-4 grid-item" v-for="(fund, index) in getFundsByFaculty" :key="index"> <div class="card fundCard" :class="{ 'bg-fundtop ' : fund.faculties[0].pivot.important == 'true'}"> <img v-if="fund.image" v-bind:src="fund.image" class="w-100 img-fluid Category__results--image" alt=""> <div class="card-body"> <a :href="'#/fund/' + fund.id"> <h4 class="name">{{ fund.name }}</h4> </a> <p class="card-text text-xs" v-if="fund.shortd" v-html="fund.shortd"></p> <p class="card-text text-xs" v-if="!fund.shortd && fund.description" v-html="getDescriptionSubstring(fund.description)"></p> <a :href="'#/fund/' + fund.id" class="btn btn-primary"> Give now </a> </div> </div> </div> </div> </div> </div> <div class="container fund" v-if="!getFundsByFaculty.length"> <div class="row"> <div class="col-md-12"> No funds found, please try again or <a class="text-underline" href="#/pressing-needs">click here</a> to donate to the most pressing needs of the University of Toronto </div> </div> </div> </div> </div>  <div :id="'Faculty' + getSpecificFaculty.id" tabindex="-1" class="modal fade show" aria-modal="true" role="dialog" style="display: none; padding-left: 0px;"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <div class="modal-title"> <h3>{{ getSpecificFaculty.name }} </h3> </div> <a href="javascript:void(0)" style="text-decoration: none;" type="button" data-bs-dismiss="modal" aria-label="Close" class="close"> <img src="https://engage.utoronto.ca/custom/refresh/images/icon/icon-close.png" class="Modal__close" width="20" alt=""> </a> </div> <div class="modal-body"> <div class="text-small" v-html="getSpecificFaculty.description"></div> </div> </div> </div> </div>  </section>   <section data-route="faculty-departments" id="viewFacultyDepartments" name="viewFacultyDepartments" class="facultyDepartments Category Page__facultyDepartments" v-if="getSpecificFacultyForDepartments && this.show.page == 'faculty-department'"> <div class="container-fluid Category__bg"> <div class="container Category__content"> <div class="row"> <div class="col-xl-10 offset-xl-1 col-lg-12"> <p class="text-xs Category__breadcrumb"> <a href="#/faculties-institutes"> <i class="fa-solid fa-chevron-left"></i> FACULTIES AND DIVISIONS </a> </p> <h1> {{ getSpecificFacultyForDepartments.name }} </h1> <p v-if="getSpecificFacultyForDepartments.shortd"> {{ getSpecificFacultyForDepartments.shortd }} <a href="javascript:void(0)" data-bs-toggle="modal" class="vRender__anchor" :data-bs-target="'#FacultyDepartment' + getSpecificFacultyForDepartments.id">Read more<i class="fa-solid fa-chevron-right"></i></a> </p> <div v-if="!getSpecificFacultyForDepartments.shortd && getSpecificFacultyForDepartments.description" class="vRender__text"> <span v-html="getDescriptionSubstring(getSpecificFacultyForDepartments.description)"></span> <a href="javascript:void(0)" data-bs-toggle="modal" :data-bs-target="'#FacultyDepartment' + getSpecificFacultyForDepartments.id">Read more<i class="fa-solid fa-chevron-right"></i></a> </div> </div> </div> </div> </div> <div class="container-fluid"> <div class="container"> <div class="row"> <div class="col-md-10 offset-md-1 mt-4 mb-4"> <img v-bind:src="getSpecificFacultyForDepartments.image" class="w-100 img-fluid" alt=""> </div> </div> <div class="row" :class="{ 'd-none' : ifFacultyHasDepartments < 1 && ifFacultyHasClassGivings < 1 && ifFacultyHasCollections < 1 }"> <div class="col-md-10 offset-md-1 mt-4 mb-4"> <nav class="Page__nav navbar navbar-expand-lg searchBlock__nav d-block w-100" style="background: white;"> <div class="" id="navbarNav"> <ul class="navbar-nav nav-fill w-100 mx-auto justify-content-center"> <li class="nav-item" :class="{ 'd-none' : ifFacultyHasDepartments < 1 && ifFacultyHasClassGivings < 1 && ifFacultyHasCollections < 1 }"> <a class="nav-link" :href="'#/faculty/' + this.show.facultyDepartment"> Featured Funds <span class="sr-only">(current)</span> </a> </li> <li class="nav-item active" :class="{ 'd-none' : ifFacultyHasDepartments < 1}"> <a class="nav-link active" :href="'#/faculty-departments/' + this.show.facultyDepartment"> Departments and Specific Areas </a> </li> <li class="nav-item" :class="{ 'd-none' : ifFacultyHasClassGivings < 1}"> <a class="nav-link" :href="'#/faculty-class-giving/' + this.show.facultyDepartment"> Class Giving </a> </li> <li class="nav-item" :class="{ 'd-none' : ifFacultyHasCollections < 1 }"> <a class="nav-link" :href="'#/other-giving-opportunities/' + this.show.facultyDepartment"> Other Giving Opportunities </a> </li> </ul> </div> </nav> </div> </div> <div class="row Category__search"> <div class="col-md-4 offset-md-4 p-0 text-center"> <h4 class="p-0 m-0"> Search funds </h4> <div class="input-group Search__input mt-3"> <input class="form-control border form-control-lg form-control-rounded" type="search" v-model="search.searchFacultyDepartment"> <span class="input-group-append"> <button class="btn" type="button" disabled> <i class="fa fa-search"></i> </button> </span> </div> </div> </div> <div class="row" v-if="getDepartmentsByFaculty.length"> <div class="col-md-12 flexMasonryWrapper"> <div class="row flexMasonry"> <div class="col-lg-4 grid-item" v-for="(department, index) in getDepartmentsByFaculty" :key="index"> <div class="card"> <img v-if="department.image" v-bind:src="department.image" class="w-100 img-fluid Category__results--image" alt=""> <div class="card-body"> <a :href="'#/department/' + department.id"> <h4 class="name">{{ department.name }}</h4> </a> <p class="card-text text-xs" v-if="department.shortd" v-html="getDescriptionSubstring(department.shortd)"></p> <p class="card-text text-xs" v-if="!department.shortd && department.description" v-html="getDescriptionSubstring(department.description)"></p> <a :href="'#/department/' + department.id" class=""> Browse giving opportunities <i class="fa-solid fa-chevron-right"></i> </a> </div> </div> </div> </div> </div> </div> <div class="container fund" v-if="!getDepartmentsByFaculty.length"> <div class="row"> <div class="col-md-12"> No funds found, please try again or <a class="text-underline" href="#/pressing-needs">click here</a> to donate to the most pressing needs of the University of Toronto </div> </div> </div> </div> </div>  <div :id="'FacultyDepartment' + getSpecificFacultyForDepartments.id" tabindex="-1" class="modal fade show" aria-modal="true" role="dialog" style="display: none; padding-left: 0px;"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <div class="modal-title"> <h3>{{ getSpecificFacultyForDepartments.name }} </h3> </div> <a href="javascript:void(0)" style="text-decoration: none;" type="button" data-bs-dismiss="modal" aria-label="Close" class="close"> <img src="https://engage.utoronto.ca/custom/refresh/images/icon/icon-close.png" class="Modal__close" width="20" alt=""> </a> </div> <div class="modal-body"> <div class="text-small" v-html="getSpecificFacultyForDepartments.description"></div> </div> </div> </div> </div>  </section>   <section data-route="faculty-class-giving" id="viewFacultyClassGiving" name="viewFacultyClassGiving" class="facultyClassGiving Category Page__classGiving" v-if="getSpecificFacultyForClassGiving && this.show.page == 'faculties-class-giving'"> <div class="container-fluid Category__bg"> <div class="container Category__content"> <div class="row"> <div class="col-xl-10 offset-xl-1 col-lg-12"> <p class="text-xs Category__breadcrumb"> <a href="#/faculties-institutes"> <i class="fa-solid fa-chevron-left"></i> FACULTIES AND DIVISIONS </a> </p> <h1> {{ getSpecificFacultyForClassGiving.name }} </h1> <p v-if="getSpecificFacultyForClassGiving.shortd"> {{ getSpecificFacultyForClassGiving.shortd }} <a href="javascript:void(0)" data-bs-toggle="modal" class="vRender__anchor" :data-bs-target="'#FacultyClassGiving' + getSpecificFacultyForClassGiving.id">Read more<i class="fa-solid fa-chevron-right"></i></a> </p> <div v-if="!getSpecificFacultyForClassGiving.shortd && getSpecificFacultyForClassGiving.descriptions" class="vRender__text"> <span v-html="getDescriptionSubstring(getSpecificFacultyForClassGiving.description)"></span> <a href="javascript:void(0)" data-bs-toggle="modal" :data-bs-target="'#FacultyClassGiving' + getSpecificFacultyForClassGiving.id">Read more<i class="fa-solid fa-chevron-right"></i></a> </div> </div> </div> </div> </div> <div class="container-fluid"> <div class="container"> <div class="row"> <div class="col-md-10 offset-md-1 mt-4 mb-4"> <img v-bind:src="getSpecificFacultyForClassGiving.image" class="w-100 img-fluid" alt=""> </div> </div> <div class="row" :class="{ 'd-none' : ifFacultyHasDepartments < 1 && ifFacultyHasClassGivings < 1 && ifFacultyHasCollections < 1 }"> <div class="col-md-10 offset-md-1 mt-4 mb-4"> <nav class="Page__nav navbar navbar-expand-lg searchBlock__nav d-block w-100" style="background: white;"> <div class="" id="navbarNav"> <ul class="navbar-nav nav-fill w-100 mx-auto justify-content-center"> <li class="nav-item" :class="{ 'd-none' : ifFacultyHasDepartments < 1 && ifFacultyHasClassGivings < 1 && ifFacultyHasCollections < 1 }"> <a class="nav-link" :href="'#/faculty/' + this.show.facultyClassGiving"> Featured Funds <span class="sr-only">(current)</span> </a> </li> <li class="nav-item" :class="{ 'd-none' : ifFacultyHasDepartments < 1}"> <a class="nav-link" :href="'#/faculty-departments/' + this.show.facultyClassGiving"> Departments and Specific Areas </a> </li> <li class="nav-item active" :class="{ 'd-none' : ifFacultyHasClassGivings < 1}"> <a class="nav-link active" :href="'#/faculty-class-giving/' + this.show.facultyClassGiving"> Class Giving </a> </li> <li class="nav-item" :class="{ 'd-none' : ifFacultyHasCollections < 1 }"> <a class="nav-link" :href="'#/other-giving-opportunities/' + this.show.facultyClassGiving"> Other Giving Opportunities </a> </li> </ul> </div> </nav> </div> </div> <div class="row Category__search"> <div class="col-md-4 offset-md-4 p-0 text-center"> <h4 class="p-0 m-0"> Search funds </h4> <div class="input-group Search__input mt-3"> <input class="form-control border form-control-lg form-control-rounded" type="search" v-model="search.searchFacultyClassGiving"> <span class="input-group-append"> <button class="btn" type="button" disabled> <i class="fa fa-search"></i> </button> </span> </div> </div> </div> <div class="row" v-if="getFundsByClassGiving.length"> <div class="col-md-12 flexMasonryWrapper"> <div class="row flexMasonry"> <div class="col-lg-4 grid-item" v-for="(fund, index) in getFundsByClassGiving" :key="index"> <div class="card"> <img v-if="fund.image" v-bind:src="fund.image" class="w-100 img-fluid Category__results--image" alt=""> <div class="card-body"> <a :href="'#/fund/' + fund.id"> <h4 class="name">{{ fund.name }}</h4> </a> <p class="card-text text-xs" v-if="fund.shortd" v-html="fund.shortd"></p> <p class="card-text text-xs" v-if="!fund.shortd && fund.description" v-html="getDescriptionSubstring(fund.description)"></p> <a :href="'#/fund/' + fund.id" class="btn btn-primary"> Give now </a> </div> </div> </div> </div> </div> </div> <div class="container fund" v-if="!getFundsByClassGiving.length"> <div class="row"> <div class="col-md-12"> No funds found, please try again or <a class="text-underline" href="#/pressing-needs">click here</a> to donate to the most pressing needs of the University of Toronto </div> </div> </div> </div> </div>  <div :id="'FacultyClassGiving' + getSpecificFacultyForClassGiving.id" tabindex="-1" class="modal fade show" aria-modal="true" role="dialog" style="display: none; padding-left: 0px;"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <div class="modal-title"> <h3>{{ getSpecificFacultyForClassGiving.name }} </h3> </div> <a href="javascript:void(0)" style="text-decoration: none;" type="button" data-bs-dismiss="modal" aria-label="Close" class="close"> <img src="https://engage.utoronto.ca/custom/refresh/images/icon/icon-close.png" class="Modal__close" width="20" alt=""> </a> </div> <div class="modal-body"> <div class="text-small" v-html="getSpecificFacultyForClassGiving.description"></div> </div> </div> </div> </div>  </section>   <section data-route="other-giving-opportunities" id="viewFacultyOther" name="viewFacultyOther" class="facultyOther Category Page__facultyOther" v-if="getSpecificFacultyForOthers && this.show.page == 'other-giving-opportunities'"> <div class="container-fluid Category__bg"> <div class="container Category__content"> <div class="row"> <div class="col-xl-10 offset-xl-1 col-lg-12"> <p class="text-xs Category__breadcrumb"> <a href="#/faculties-institutes"> <i class="fa-solid fa-chevron-left"></i> FACULTIES AND DIVISIONS </a> </p> <h1> {{ getSpecificFacultyForOthers.name }} </h1> <p v-if="getSpecificFacultyForOthers.shortd"> {{ getSpecificFacultyForOthers.shortd }} <a href="javascript:void(0)" data-bs-toggle="modal" class="vRender__anchor" :data-bs-target="'#FacultyOther' + getSpecificFacultyForOthers.id">Read more<i class="fa-solid fa-chevron-right"></i></a> </p> <div v-if="!getSpecificFacultyForOthers.shortd && getSpecificFacultyForOthers.description" class="vRender__text"> <span v-html="getDescriptionSubstring(getSpecificFacultyForOthers.description)"></span> <a href="javascript:void(0)" data-bs-toggle="modal" class="vRender__anchor" :data-bs-target="'#FacultyOther' + getSpecificFacultyForOthers.id">Read more<i class="fa-solid fa-chevron-right"></i></a> </div> </div> </div> </div> </div> <div class="container-fluid"> <div class="container"> <div class="row"> <div class="col-md-10 offset-md-1 mt-4 mb-4"> <img v-bind:src="getSpecificFacultyForOthers.image" class="w-100 img-fluid" alt=""> </div> </div> <div class="row" :class="{ 'd-none' : ifFacultyHasDepartments < 1 && ifFacultyHasClassGivings < 1 && ifFacultyHasCollections < 1 }"> <div class="col-md-10 offset-md-1 mt-4 mb-4"> <nav class="Page__nav navbar navbar-expand-lg searchBlock__nav d-block w-100" style="background: white;"> <div class="" id="navbarNav"> <ul class="navbar-nav nav-fill w-100 mx-auto justify-content-center"> <li class="nav-item" :class="{ 'd-none' : ifFacultyHasDepartments < 1 && ifFacultyHasClassGivings < 1 && ifFacultyHasCollections < 1 }"> <a class="nav-link" :href="'#/faculty/' + this.show.facultyOther"> Featured Funds <span class="sr-only">(current)</span> </a> </li> <li class="nav-item" :class="{ 'd-none' : ifFacultyHasDepartments < 1}"> <a class="nav-link" :href="'#/faculty-departments/' + this.show.facultyOther"> Departments and Specific Areas </a> </li> <li class="nav-item" :class="{ 'd-none' : ifFacultyHasClassGivings < 1}"> <a class="nav-link" :href="'#/faculty-class-giving/' + this.show.facultyOther"> Class Giving </a> </li> <li class="nav-item active" :class="{ 'd-none' : ifFacultyHasCollections < 1 }"> <a class="nav-link active" :href="'#/other-giving-opportunities/' + this.show.facultyOther"> Other Giving Opportunities </a> </li> </ul> </div> </nav> </div> </div> <div class="row Category__search"> <div class="col-md-4 offset-md-4 p-0 text-center"> <h4 class="p-0 m-0"> Search funds </h4> <div class="input-group Search__input mt-3"> <input class="form-control border form-control-lg form-control-rounded" type="search" v-model="search.searchFacultyOther"> <span class="input-group-append"> <button class="btn" type="button" disabled> <i class="fa fa-search"></i> </button> </span> </div> </div> </div> <div class="row" v-if="getCollectionsByFaculty.length"> <div class="col-md-12 flexMasonryWrapper"> <div class="row flexMasonry"> <div class="col-lg-4 grid-item" v-for="(collection, index) in getCollectionsByFaculty" :key="index"> <div class="card"> <img v-if="collection.image" v-bind:src="collection.image" class="w-100 img-fluid Category__results--image" alt=""> <div class="card-body"> <a :href="'#/collection/' + collection.id"> <h4 class="name">{{ collection.name }}</h4> </a> <p class="card-text text-xs" v-if="collection.shortd" v-html="collection.shortd"></p> <p class="card-text text-xs" v-if="!collection.shortd && collection.description" v-html="getDescriptionSubstring(collection.description)"></p> <a :href="'#/collection/' + collection.id" class=""> Browse giving opportunities <i class="fa-solid fa-chevron-right"></i> </a> </div> </div> </div> </div> </div> </div> <div class="container fund" v-if="!getCollectionsByFaculty.length"> <div class="row"> <div class="col-md-12"> No funds found, please try again or <a class="text-underline" href="#/pressing-needs">click here</a> to donate to the most pressing needs of the University of Toronto </div> </div> </div> </div> </div>  <div :id="'FacultyOther' + getSpecificFacultyForOthers.id" tabindex="-1" class="modal fade show" aria-modal="true" role="dialog" style="display: none; padding-left: 0px;"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <div class="modal-title"> <h3>{{ getSpecificFacultyForOthers.name }} </h3> </div> <a href="javascript:void(0)" style="text-decoration: none;" type="button" data-bs-dismiss="modal" aria-label="Close" class="close"> <img src="https://engage.utoronto.ca/custom/refresh/images/icon/icon-close.png" class="Modal__close" width="20" alt=""> </a> </div> <div class="modal-body"> <div class="text-small" v-html="getSpecificFacultyForOthers.description"></div> </div> </div> </div> </div>  </section>   <section data-route="institute" id="viewInstitute" name="viewInstitute" class="Institute Category Page__institute" v-if="getSpecificInstitute && this.show.page == 'institute'"> <div class="container-fluid Category__bg"> <div class="container Category__content"> <div class="row"> <div class="col-xl-10 offset-xl-1 col-lg-12"> <p class="text-xs Category__breadcrumb"> <a href="#/faculties-institutes"> <i class="fa-solid fa-chevron-left"></i> Faculties and Institutes </a> </p> <h1> {{ getSpecificInstitute.name }} </h1> <p v-if="getSpecificInstitute.shortd"> {{ getSpecificInstitute.shortd }} <a href="javascript:void(0)" data-bs-toggle="modal" class="vRender__anchor" :data-bs-target="'#Institute' + getSpecificInstitute.id">Read more<i class="fa-solid fa-chevron-right"></i></a> </p> <div v-if="!getSpecificInstitute.shortd && getSpecificInstitute.description" class="vRender__text"> <span v-html="getDescriptionSubstring(getSpecificInstitute.description)"></span> <a href="javascript:void(0)" data-bs-toggle="modal" :data-bs-target="'#Institute' + getSpecificInstitute.id">Read more<i class="fa-solid fa-chevron-right"></i></a> </div> </div> </div> </div> </div> <div class="container-fluid"> <div class="container"> <div class="row"> <div class="col-md-10 offset-md-1 mt-4 mb-75"> <img v-bind:src="getSpecificInstitute.image" class="w-100 img-fluid" alt=""> </div> </div>   <div class="row" v-cloak v-if="getFundsByInstitute.length"> <div class="col-md-12"> <div class=" flexMasonryWrapper" > <div class="flexMasonry row"> <div class="col-lg-4 grid-item" v-for="(fund, index) in getFundsByInstitute" :key="index"> <div class="card fundCard" :class="{ 'bg-fundtop' : fund.institutes[0].pivot.important == 'true'}"> <img v-if="fund.image" v-bind:src="fund.image" class="w-100 img-fluid Category__results--image" alt=""> <div class="card-body"> <a :href="'#/fund/' + fund.id"> <h4 class="name">{{ fund.name }}</h4> </a> <p class="card-text text-xs" v-if="fund.shortd" v-html="fund.shortd"></p> <p class="card-text text-xs" v-if="!fund.shortd && fund.description" v-html="getDescriptionSubstring(fund.description)"></p> <a :href="'#/fund/' + fund.id" class="btn btn-primary"> Give now </a> </div> </div> </div> </div> </div> </div> </div> <div class="container fund" v-if="!getFundsByInstitute.length"> <div class="row"> <div class="col-md-12"> No funds found, please try again or <a class="text-underline" href="#/pressing-needs">click here</a> to donate to the most pressing needs of the University of Toronto </div> </div> </div>  <div :id="'Institute' + getSpecificInstitute.id" tabindex="-1" class="modal fade show" aria-modal="true" role="dialog" style="display: none; padding-left: 0px;"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <div class="modal-title"> <h3>{{ getSpecificInstitute.name }} </h3> </div> <a href="javascript:void(0)" style="text-decoration: none;" type="button" data-bs-dismiss="modal" aria-label="Close" class="close"> <img src="https://engage.utoronto.ca/custom/refresh/images/icon/icon-close.png" class="Modal__close" width="20" alt=""> </a> </div> <div class="modal-body"> <div class="text-small" v-html="getSpecificInstitute.description"></div> </div> </div> </div> </div>  </div> </div> </section>   <section data-route="initiative" id="viewInitiative" name="viewInitiative" class="Initiative Category Page__initiative" v-if="getSpecificInitiative && this.show.page == 'initiative'"> <div class="container-fluid Category__bg"> <div class="container Category__content"> <div class="row"> <div class="col-xl-10 offset-xl-1 col-lg-12"> <p class="text-xs Category__breadcrumb"> <a href="#/special-projects-initiatives"> <i class="fa-solid fa-chevron-left"></i> Special Projects, Initiatives & more </a> </p> <h1> {{ getSpecificInitiative.name }} </h1> <p v-if="getSpecificInitiative.shortd"> {{ getSpecificInitiative.shortd }} <a href="javascript:void(0)" data-bs-toggle="modal" class="vRender__anchor" :data-bs-target="'#Initiative' + getSpecificInitiative.id" v-if="getSpecificInitiative.description">Read more<i class="fa-solid fa-chevron-right"></i></a> </p> <div v-if="!getSpecificInitiative.shortd && getSpecificInitiative.description" class="vRender__text"> <span v-html="getDescriptionSubstring(getSpecificInitiative.description)"></span> <a href="javascript:void(0)" data-bs-toggle="modal" :data-bs-target="'#Initiative' + getSpecificInitiative.id">Read more<i class="fa-solid fa-chevron-right"></i></a> </div> </div> </div> </div> </div> <div class="container-fluid"> <div class="container"> <div class="row"> <div class="col-md-10 offset-md-1 mt-4 mb-75"> <img v-bind:src="getSpecificInitiative.image" class="w-100 img-fluid" alt=""> </div> </div>   <div class="row" v-cloak v-if="getFundsByInitiative.length"> <div class="col-md-12"> <div class=" flexMasonryWrapper"> <div class="flexMasonry row"> <div class="col-lg-4 grid-item" v-for="(fund, index) in getFundsByInitiative" :key="index"> <div class="card fundCard" :class="{ 'bg-fundtop' : fund.initiatives[0].pivot.important == 'true'}"> <img v-if="fund.image" v-bind:src="fund.image" class="w-100 img-fluid Category__results--image" alt=""> <div class="card-body"> <a :href="'#/fund/' + fund.id"> <h4 class="name">{{ fund.name }}</h4> </a> <p class="card-text text-xs" v-if="fund.shortd" v-html="fund.shortd"></p> <p class="card-text text-xs" v-if="!fund.shortd && fund.description" v-html="getDescriptionSubstring(fund.description)"></p> <a :href="'#/fund/' + fund.id" class="btn btn-primary"> Give now </a> </div> </div> </div> </div> </div> </div> </div> <div class="container fund" v-if="!getFundsByInitiative.length"> <div class="row"> <div class="col-md-12"> No funds found, please try again or <a class="text-underline" href="#/pressing-needs">click here</a> to donate to the most pressing needs of the University of Toronto </div> </div> </div>  <div :id="'Initiative' + getSpecificInitiative.id" tabindex="-1" class="modal fade show" aria-modal="true" role="dialog" style="display: none; padding-left: 0px;"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <div class="modal-title"> <h3>{{ getSpecificInitiative.name }} </h3> </div> <a href="javascript:void(0)" style="text-decoration: none;" type="button" data-bs-dismiss="modal" aria-label="Close" class="close"> <img src="https://engage.utoronto.ca/custom/refresh/images/icon/icon-close.png" class="Modal__close" width="20" alt=""> </a> </div> <div class="modal-body"> <div class="text-small" v-html="getSpecificInitiative.description"></div> </div> </div> </div> </div>  </div> </div> </section>   <section data-route="fund" id="viewFund" name="viewFund" class="Fund Category Page__fund" v-if="getSpecificFund && this.show.page == 'fund'"> <div class="container-fluid Category__bg"> <div class="container Category__content"> <div class="row"> <div class="col-xl-10 offset-xl-1 col-lg-12"> <p class="text-xs Category__breadcrumb"> <a :href="'#/' + getParentName(getSpecificFund.id).ptype + '/' + getParentName(getSpecificFund.id).pid"> <i class="fa-solid fa-chevron-left"></i> {{ getParentName(getSpecificFund.id).pname }} </a> </p> <h1> {{ getSpecificFund.name }} </h1> <p v-if="getSpecificFund.description"> <span v-html="getSpecificFund.description"></span> <a href="javascript:void(0)" v-if="getSpecificFund.content" class="vRender__anchor" v-on:click="scrollToElement('#Fund' + getSpecificFund.id)">Read more<i class="fa-solid fa-chevron-right"></i></a> </p> </div> </div> </div> </div> <div class="container-fluid"> <div class="container"> <div class="row"> <div class="col-md-10 offset-md-1"> <img v-bind:src="getSpecificFund.image" class="w-100 img-fluid mt-4 mb-75" alt=""> </div> </div> <div class="row"> <div class="col-lg-10 offset-lg-1 col-md-12"> <div class="mt-5 mb-5 Donatebox accordion mx-auto"> <h3 class="Donatebox__header">Make a Gift</h3> <div class="" id="donationAmount" :class="{ 'hide': hide_donation_amounts }"> <div class="Donatebox__nav clearfix"> <label checked class="Donatebox__navitem one-time-tab" style="margin-right: 20px;" :class="{ 'active': current_donation.donation_type === 'one-time' }" for="one-time-donation"> <input type="radio" class="d-none" name="sustaining.frequency" id="one-time-donation" value="one-time" class="" v-model="current_donation.donation_type"> <span class="checked"></span> <span class="unchecked"></span> One-time </label> <label class="Donatebox__navitem monthly-tab" :class="{ 'active': current_donation.donation_type === 'monthly' }" for="monthly-donation"> <input type="radio" class="d-none" name="sustaining.frequency" id="monthly-donation" value="monthly" class="" v-model="current_donation.donation_type"> <span class="checked"></span> <span class="unchecked"></span> Monthly </label> </div> <div class="donation-amounts-container"> <div class="row"> <div class="col-md-6"> <input type="radio" name="donation_amount" class="d-none" id="donation_amount1" value="50" v-model.number="current_donation.donation_amount"> <label :class="{ 'active': current_donation.donation_amount === 50, 'd-none': current_donation.donation_type === 'monthly' }" @click="handle_donation_amt" for="donation_amount1" class="Donatebox__amount"> $50 </label> </div> <div class="col-md-6"> <input type="radio" name="donation_amount" class="d-none" id="donation_amount2" value="100" v-model.number="current_donation.donation_amount"> <label :class="{ 'active': current_donation.donation_amount === 100, 'd-none': current_donation.donation_type === 'monthly' }" @click="handle_donation_amt" for="donation_amount2" class="Donatebox__amount"> $100 </label> </div> <div class="col-md-6"> <input type="radio" name="donation_amount" class="d-none" id="donation_amount3" value="150" v-model.number="current_donation.donation_amount"> <label :class="{ 'active': current_donation.donation_amount === 150, 'd-none': current_donation.donation_type === 'monthly' }" @click="handle_donation_amt" for="donation_amount3" class="Donatebox__amount"> $150 </label> </div> <div class="col-md-6"> <input type="radio" name="donation_amount" class="d-none" id="donation_amount4" value="500" v-model.number="current_donation.donation_amount"> <label :class="{ 'active': current_donation.donation_amount === 500, 'd-none': current_donation.donation_type === 'monthly' }" @click="handle_donation_amt" class="Donatebox__amount" for="donation_amount4"> $500 </label> </div> <div class="col-md-6"> <input type="radio" name="donation_amount" class="d-none" id="donation_amount5" value="1827" v-model.number="current_donation.donation_amount"> <label :class="{ 'active': current_donation.donation_amount === 1827, 'd-none': current_donation.donation_type === 'monthly' }" @click="handle_donation_amt" class="Donatebox__amount" for="donation_amount5"> $1,827 </label> </div> <div class="col-md-6"> <input type="radio" name="donation_amount" class="d-none" id="donation_amount6" value="5000" v-model.number="current_donation.donation_amount"> <label :class="{ 'active': current_donation.donation_amount === 5000, 'd-none': current_donation.donation_type === 'monthly' }" @click="handle_donation_amt" class="Donatebox__amount" for="donation_amount6"> $5,000 </label> </div> <div class="col-md-6"> <input type="radio" name="donation_amount" class="d-none" id="donation_amount7" value="10" v-model.number="current_donation.donation_amount"> <label :class="{ 'active': current_donation.donation_amount === 10, 'd-none': current_donation.donation_type === 'one-time' }" @click="handle_donation_amt" class="Donatebox__amount" for="donation_amount7"> $10 </label> </div> <div class="col-md-6"> <input type="radio" name="donation_amount" class="d-none" id="donation_amount8" value="25" v-model.number="current_donation.donation_amount"> <label :class="{ 'active': current_donation.donation_amount === 25, 'd-none': current_donation.donation_type === 'one-time' }" @click="handle_donation_amt" class="Donatebox__amount" for="donation_amount8"> $25 </label> </div> <div class="col-md-6"> <input type="radio" name="donation_amount" class="d-none" id="donation_amount9" value="50" v-model.number="current_donation.donation_amount"> <label :class="{ 'active': current_donation.donation_amount === 50, 'd-none': current_donation.donation_type === 'one-time' }" @click="handle_donation_amt" class="Donatebox__amount" for="donation_amount9"> $50 </label> </div> <div class="col-md-6"> <input type="radio" name="donation_amount" class="d-none" id="donation_amount10" value="100" v-model.number="current_donation.donation_amount"> <label :class="{ 'active': current_donation.donation_amount === 100, 'd-none': current_donation.donation_type === 'one-time' }" @click="handle_donation_amt" class="Donatebox__amount" for="donation_amount10"> $100 </label> </div> <div class="col-md-6"> <input type="radio" name="donation_amount" class="d-none" id="donation_amount11" value="153" v-model.number="current_donation.donation_amount"> <label :class="{ 'active': current_donation.donation_amount === 153, 'd-none': current_donation.donation_type === 'one-time' }" @click="handle_donation_amt" class="Donatebox__amount" for="donation_amount11"> $153 </label> </div> <div class="col-md-6"> <input type="radio" name="donation_amount" class="d-none" id="donation_amount12" value="250" v-model.number="current_donation.donation_amount"> <label :class="{ 'active': current_donation.donation_amount === 250, 'd-none': current_donation.donation_type === 'one-time' }" @click="handle_donation_amt" class="Donatebox__amount" for="donation_amount12"> $250 </label> </div> <div class="other-amount-container col-md-6"> <div class="input-group mb-4"> <div class="input-group-prepend"> <span class="input-group-text">$</span> </div> <input type="radio" name="donation_amount" class="d-none" id="donation_amount_other" value="other" v-model="current_donation.donation_amount"> <input type="text" class="form-control" placeholder="Other amount" id="other-amount-input" data-validate="true" data-minimum="5" data-error="$5 minimum" value="" placeholder="other amount" v-model.number="current_donation.donation_amount_other" @click="handle_custom_donation_amt" @focus="handle_custom_donation_amt"> </div> </div> <div class="col-md-6"> <a href="#" class="btn btn-primary btn-next w-100" @click.prevent="continue_to_billing_info"> Continue </a> </div> </div> <div class="alert alert-danger" id="required-field-error-message" role="alert" v-if="form_step_1.show_error"> <span v-if="current_donation.designee === '' || this.current_donation.donation_amount === ''"> Make a one-time gift, or help the University plan and sustain vital initiatives with a monthly gift. </span> <span v-if="current_donation.donation_amount === 'other' && parseFloat(current_donation.donation_amount_other) < 5"> Minimum donation of $5 is required </span> </div> <div class=""> </div> <div class="Payroll" :class="{ 'd-none': current_donation.donation_type === 'one-time' }"> <p class="text-center mt-4" style="font-size: 14px;"> If you work at U of T and wish to set up your gift as an automatic payroll deduction, please <a href="https://engage.utoronto.ca/site/SPageServer?pagename=payroll" class="Anchor">go to this form</a> instead. </p> </div> </div> </div> </div> </div> </div> <div v-if="getSpecificFund.content" class="row" :id="'Fund' + getSpecificFund.id" :name="'Fund' + getSpecificFund.id"> <div class="col-md-8 offset-md-1"> <h3>About this giving opportunity</h3> <div v-html="getSpecificFund.content"></div> </div> </div> <div class="row"> <div class="col-md-8 offset-md-1"> <div class="col-md-7 mt-4 mb-5"> <div> <div class="row d-flex Fund__Description"> <div class="col-md-12 align-self-end"> <div v-if="getUniversalContact.local.length > 0"> <hr> <div class="text-left"> <b>For any fund related queries contact:</b> <br><br> </div> <div class="Fund__Description ContactInfo" v-for="(contact, key) in getUniversalContact.local"> <div> <b>{{ contact.name }}</b> <br> {{ contact.title }} <span v-if="contact.subtitle"> | </span> {{ contact.subtitle }} <br> {{ contact.address }} <br v-if="contact.province"> {{ contact.city }}<span v-if="contact.province">,</span> {{ contact.province }}<span v-if="contact.postal">,</span> {{ contact.postal }} <br v-if="contact.tollfree"> {{ contact.telephone }} <span v-if="contact.tollfree"> | </span> {{ contact.tollfree }} <br> <a :href="'mailto:' + contact.email" target="_blank" class="Anchor">{{ contact.email }}</a> <br><br> </div> </div> </div> <div v-if="getUniversalContact.local.length < 1"> <div v-if="getUniversalContact.universal.length > 0 && getUniversalContact.local.length < 1"> <div class="Fund__Description ContactInfo" v-for="(contact, key) in getUniversalContact.universal"> <div> <hr> <b>For any fund related queries contact:</b><br><br> <b>{{ contact.name }}</b> <br> {{ contact.title }} <span v-if="contact.subtitle"> | </span> {{ contact.subtitle }} <br> {{ contact.address }} <br v-if="contact.province"> {{ contact.city }}<span v-if="contact.province">,</span> {{ contact.province }}<span v-if="contact.postal">,</span> {{ contact.postal }} <br v-if="contact.tollfree"> {{ contact.telephone }} <span v-if="contact.tollfree"> | </span> {{ contact.tollfree }} <br> <a :href="'mailto:' + contact.email" target="_blank" class="Anchor">{{ contact.email }}</a> <br><br> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </section>   <section data-route="customfundpage" id="customfundpage" name="customfundpage" class="Fund Category Page__fund" v-if="getSpecificFund && this.show.page == 'customfundpage'"> <div class="container-fluid Category__bg"> <div class="container Category__content"> <div class="row"> <div class="col-xl-10 offset-xl-1 col-lg-12"> <p class="text-xs Category__breadcrumb"> <a :href="'#/' + getParentName(getSpecificFund.id).ptype + '/' + getParentName(getSpecificFund.id).pid"> <i class="fa-solid fa-chevron-left"></i> {{ getParentName(getSpecificFund.id).pname }} </a> </p> <h1> {{ getSpecificFund.name }} </h1> <p v-if="getSpecificFund.description"> <span v-html="getSpecificFund.description"></span> <a href="javascript:void(0)" v-if="getSpecificFund.content" class="vRender__anchor" v-on:click="scrollToElement('#Fund' + getSpecificFund.id)">Read more<i class="fa-solid fa-chevron-right"></i></a> </p> </div> </div> </div> </div> <div class="container-fluid"> <div class="container"> <div class="row"> <div class="col-md-10 offset-md-1"> <img v-bind:src="getSpecificFund.image" class="w-100 img-fluid mt-4 mb-75" alt=""> </div> </div> <div class="row"> <div class="col-lg-10 offset-lg-1 col-md-12"> <div class="mt-5 mb-5 Donatebox accordion mx-auto"> <h3 class="Donatebox__header">Make a Gift</h3> <div class="" id="donationAmount" :class="{ 'hide': hide_donation_amounts }"> <div class="Donatebox__nav clearfix"> <label checked class="Donatebox__navitem one-time-tab" style="margin-right: 20px;" :class="{ 'active': current_donation.donation_type === 'one-time' }" for="one-time-donation"> <input type="radio" class="d-none" name="sustaining.frequency" id="one-time-donation" value="one-time" class="" v-model="current_donation.donation_type"> <span class="checked"></span> <span class="unchecked"></span> One-time </label> <label class="Donatebox__navitem monthly-tab" :class="{ 'active': current_donation.donation_type === 'monthly' }" for="monthly-donation"> <input type="radio" class="d-none" name="sustaining.frequency" id="monthly-donation" value="monthly" class="" v-model="current_donation.donation_type"> <span class="checked"></span> <span class="unchecked"></span> Monthly </label> </div> <div class="donation-amounts-container"> <div class="row"> <div class="col-md-6 " v-for="(donlevel, key) in getDonationLevels" :class="{'d-none': current_donation.donation_type === 'monthly' }"> <input type="radio" name="donation_amount" class="d-none" :id="'donation_amount' + key" :value="donlevel" v-model.number="current_donation.donation_amount"> <label :class="{ 'active': current_donation.donation_amount == donlevel, 'd-none': current_donation.donation_type === 'monthly' }" @click="handle_donation_amt" class="Donatebox__amount" :for="'donation_amount' + key"> ${{ donlevel }} </label> </div> <div class="col-md-6" :class="{'d-none': current_donation.donation_type === 'one-time' }"> <input type="radio" name="donation_amount" class="d-none" id="donation_amount7" value="10" v-model.number="current_donation.donation_amount"> <label :class="{ 'active': current_donation.donation_amount === 10, 'd-none': current_donation.donation_type === 'one-time' }" @click="handle_donation_amt" class="Donatebox__amount" for="donation_amount7"> $10 </label> </div> <div class="col-md-6" :class="{'d-none': current_donation.donation_type === 'one-time' }"> <input type="radio" name="donation_amount" class="d-none" id="donation_amount8" value="25" v-model.number="current_donation.donation_amount"> <label :class="{ 'active': current_donation.donation_amount === 25, 'd-none': current_donation.donation_type === 'one-time' }" @click="handle_donation_amt" class="Donatebox__amount" for="donation_amount8"> $25 </label> </div> <div class="col-md-6" :class="{'d-none': current_donation.donation_type === 'one-time' }"> <input type="radio" name="donation_amount" class="d-none" id="donation_amount9" value="50" v-model.number="current_donation.donation_amount"> <label :class="{ 'active': current_donation.donation_amount === 50, 'd-none': current_donation.donation_type === 'one-time' }" @click="handle_donation_amt" class="Donatebox__amount" for="donation_amount9"> $50 </label> </div> <div class="col-md-6" :class="{'d-none': current_donation.donation_type === 'one-time' }"> <input type="radio" name="donation_amount" class="d-none" id="donation_amount10" value="100" v-model.number="current_donation.donation_amount"> <label :class="{ 'active': current_donation.donation_amount === 100, 'd-none': current_donation.donation_type === 'one-time' }" @click="handle_donation_amt" class="Donatebox__amount" for="donation_amount10"> $100 </label> </div> <div class="col-md-6" :class="{'d-none': current_donation.donation_type === 'one-time' }"> <input type="radio" name="donation_amount" class="d-none" id="donation_amount11" value="153" v-model.number="current_donation.donation_amount"> <label :class="{ 'active': current_donation.donation_amount === 153, 'd-none': current_donation.donation_type === 'one-time' }" @click="handle_donation_amt" class="Donatebox__amount" for="donation_amount11"> $153 </label> </div> <div class="col-md-6" :class="{'d-none': current_donation.donation_type === 'one-time' }"> <input type="radio" name="donation_amount" class="d-none" id="donation_amount12" value="250" v-model.number="current_donation.donation_amount"> <label :class="{ 'active': current_donation.donation_amount === 250, 'd-none': current_donation.donation_type === 'one-time' }" @click="handle_donation_amt" class="Donatebox__amount" for="donation_amount12"> $250 </label> </div> <div class="other-amount-container col-md-6"> <div class="input-group mb-4"> <div class="input-group-prepend"> <span class="input-group-text">$</span> </div> <input type="radio" name="donation_amount" class="d-none" id="donation_amount_other" value="other" v-model="current_donation.donation_amount"> <input type="text" class="form-control" placeholder="Other amount" id="other-amount-input" data-validate="true" data-minimum="5" data-error="$5 minimum" value="" placeholder="other amount" v-model.number="current_donation.donation_amount_other" @click="handle_custom_donation_amt" @focus="handle_custom_donation_amt"> </div> </div> <div class="col-md-6"> <a href="#" class="btn btn-primary btn-next w-100" @click.prevent="continue_to_billing_info"> Continue </a> </div> </div> <div class="alert alert-danger" id="required-field-error-message" role="alert" v-if="form_step_1.show_error"> <span v-if="current_donation.designee === '' || this.current_donation.donation_amount === ''"> Make a one-time gift, or help the University plan and sustain vital initiatives with a monthly gift. </span> <span v-if="current_donation.donation_amount === 'other' && parseFloat(current_donation.donation_amount_other) < 5"> Minimum donation of $5 is required </span> </div> <div class=""> </div> <div class="Payroll" :class="{ 'd-none': current_donation.donation_type === 'one-time' }"> <p class="text-center mt-4" style="font-size: 14px;"> If you work at U of T and wish to set up your gift as an automatic payroll deduction, please <a href="https://engage.utoronto.ca/site/SPageServer?pagename=payroll" class="Anchor">go to this form</a> instead. </p> </div> </div> </div> </div> </div> </div> <div v-if="getSpecificFund.content" class="row" :id="'Fund' + getSpecificFund.id" :name="'Fund' + getSpecificFund.id"> <div class="col-md-8 offset-md-1"> <h3>About this giving opportunity</h3> <div v-html="getSpecificFund.content"></div> </div> </div> <div class="row"> <div class="col-md-8 offset-md-1"> <div class="col-md-7 mt-4 mb-5"> <div> <div class="row d-flex Fund__Description"> <div class="col-md-12 align-self-end"> <div v-if="getUniversalContact.local.length > 0"> <hr> <div class="text-left"> <b>For any fund related queries contact:</b> <br><br> </div> <div class="Fund__Description ContactInfo" v-for="(contact, key) in getUniversalContact.local"> <div> <b>{{ contact.name }}</b> <br> {{ contact.title }} <span v-if="contact.subtitle"> | </span> {{ contact.subtitle }} <br> {{ contact.address }} <br> {{ contact.city }}, {{ contact.province }}, {{ contact.postal }} <br> {{ contact.telephone }} <span v-if="contact.tollfree"> | </span> {{ contact.tollfree }} <br> <a :href="'mailto:' + contact.email" target="_blank" class="Anchor">{{ contact.email }}</a> <br><br> </div> </div> </div> <div v-if="getUniversalContact.local.length < 1"> <div v-if="getUniversalContact.universal.length > 0 && getUniversalContact.local.length < 1"> <div class="Fund__Description ContactInfo" v-for="(contact, key) in getUniversalContact.universal"> <div> <hr> <b>For any fund related queries contact:</b><br><br> <b>{{ contact.name }}</b> <br> {{ contact.title }} <span v-if="contact.subtitle"> | </span> {{ contact.subtitle }} <br> {{ contact.address }} <br> {{ contact.city }}, {{ contact.province }}, {{ contact.postal }} <br> {{ contact.telephone }} <span v-if="contact.tollfree"> | </span> {{ contact.tollfree }} <br> <a :href="'mailto:' + contact.email" target="_blank" class="Anchor">{{ contact.email }}</a> <br><br> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </section>   <section data-route="makeagift" id="makeagift" name="makeagift" class="Makeagift Page__content"> <div class="container-fluid Category__bg"> <div class="container Category__content"> <div class="row"> <div class="col-xl-10 offset-xl-1 col-lg-12 mb-5"> <p class="text-xs Category__breadcrumb"> <a href="#/home"> <i class="fa-solid fa-chevron-left"></i> HOME </a> </p> <p class="mt-5"> Your gift matters. By supporting U of T’s general funds, you open doors for students who demonstrate great need and high academic merit and help to advance leading-edge research that addresses today’s most pressing global challenges. </p> <p> <a href="#/pressing-needs" class="btn btn-primary">Support U of T's most pressing needs</a> <a href="#/direct" class="btn btn-primary">Direct your gift</a> </p> </div> </div> </div> </div> </section> <section data-route="pressing-needs" id="pressing-needs" name="pressing-needs" class="Pressing Page__content" v-if="this.show.page == 'pressing-needs'"> <div class="container-fluid Category__bg"> <div class="container Category__content"> <div class="row"> <div class="col-xl-10 offset-xl-1 col-lg-12 mb-5"> <p class="text-xs Category__breadcrumb"> <a href="#/home"> <i class="fa-solid fa-chevron-left"></i> HOME </a> </p> <h1> Ready to make a difference? </h1> <p class="mt-5"> Please select the area of giving that most interests you: </p> <p class="mt-4"> <input type="button" v-on:click=" direct.fund = 159; current_donation.designee.id = 4931; analytics.affiliation = 'GEN'; analytics.affiliationType = 'GEN'; current_donation.designee.name = 'President\'s Fund for Excellence'" :class="{ 'active' : current_donation.designee.id == 4931}" class="btn btn-primary btn-inverse" value="Greatest Need"> </input>   <input type="button" v-on:click=" direct.fund = 1233; current_donation.designee.id = 5480; analytics.affiliation = 'GEN'; analytics.affiliationType = 'GEN'; current_donation.designee.name = 'Research Fund for Excellence'" :class="{ 'active' : current_donation.designee.id == 5480}" class="btn btn-primary btn-inverse" value="Research">    <input type="button" v-on:click=" direct.fund = 431; current_donation.designee.id = 4696; analytics.affiliation = 'GEN'; analytics.affiliationType = 'GEN'; current_donation.designee.name = 'General University Bursary Fund'" :class="{ 'active' : current_donation.designee.id == 4696}" class="btn btn-primary btn-inverse" value="Student Aid">    </p> </div> </div> </div> </div> <div class="container-fluid"> <div class="container" v-if="current_donation.designee.id == 4931 || current_donation.designee.id == 5480 || current_donation.designee.id == 4696"> <div class="row"> <div class="col-md-10 offset-md-1"> <p> Make a one-time gift, or help U of T plan and sustain vital initiatives with a monthly gift. <br><br> You're giving to: <br> <b>{{ current_donation.designee.name }}</b> </p> </div> </div> <div class="row"> <div class="col-lg-10 offset-lg-1 col-md-12"> <div class="mt-5 mb-5 Donatebox accordion mx-auto"> <h3 class="Donatebox__header">Make a Gift</h3> <div class="" id="donationAmount" :class="{ 'hide': hide_donation_amounts }"> <div class="Donatebox__nav clearfix"> <label checked class="Donatebox__navitem one-time-tab" style="margin-right: 20px;" :class="{ 'active': current_donation.donation_type === 'one-time' }" for="one-time-donation"> <input type="radio" name="sustaining.frequency" id="one-time-donation" value="one-time" class="" v-model="current_donation.donation_type"> <span class="checked"></span> <span class="unchecked"></span> One-time </label> <label class="Donatebox__navitem monthly-tab" :class="{ 'active': current_donation.donation_type === 'monthly' }" for="monthly-donation"> <input type="radio" name="sustaining.frequency" id="monthly-donation" value="monthly" class="" v-model="current_donation.donation_type"> <span class="checked"></span> <span class="unchecked"></span> Monthly </label> </div> <div class="donation-amounts-container"> <div class="row"> <div class="col-md-6"> <input type="radio" name="donation_amount" class="d-none" id="donation_amount1" value="50" v-model.number="current_donation.donation_amount"> <label :class="{ 'active': current_donation.donation_amount === 50, 'd-none': current_donation.donation_type === 'monthly' }" @click="handle_donation_amt" for="donation_amount1" class="Donatebox__amount"> $50 </label> </div> <div class="col-md-6"> <input type="radio" name="donation_amount" class="d-none" id="donation_amount2" value="100" v-model.number="current_donation.donation_amount"> <label :class="{ 'active': current_donation.donation_amount === 100, 'd-none': current_donation.donation_type === 'monthly' }" @click="handle_donation_amt" for="donation_amount2" class="Donatebox__amount"> $100 </label> </div> <div class="col-md-6"> <input type="radio" name="donation_amount" class="d-none" id="donation_amount3" value="150" v-model.number="current_donation.donation_amount"> <label :class="{ 'active': current_donation.donation_amount === 150, 'd-none': current_donation.donation_type === 'monthly' }" @click="handle_donation_amt" for="donation_amount3" class="Donatebox__amount"> $150 </label> </div> <div class="col-md-6"> <input type="radio" name="donation_amount" class="d-none" id="donation_amount4" value="500" v-model.number="current_donation.donation_amount"> <label :class="{ 'active': current_donation.donation_amount === 500, 'd-none': current_donation.donation_type === 'monthly' }" @click="handle_donation_amt" class="Donatebox__amount" for="donation_amount4"> $500 </label> </div> <div class="col-md-6"> <input type="radio" name="donation_amount" class="d-none" id="donation_amount5" value="1827" v-model.number="current_donation.donation_amount"> <label :class="{ 'active': current_donation.donation_amount === 1827, 'd-none': current_donation.donation_type === 'monthly' }" @click="handle_donation_amt" class="Donatebox__amount" for="donation_amount5"> $1,827 </label> </div> <div class="col-md-6"> <input type="radio" name="donation_amount" class="d-none" id="donation_amount6" value="5000" v-model.number="current_donation.donation_amount"> <label :class="{ 'active': current_donation.donation_amount === 5000, 'd-none': current_donation.donation_type === 'monthly' }" @click="handle_donation_amt" class="Donatebox__amount" for="donation_amount6"> $5,000 </label> </div> <div class="col-md-6"> <input type="radio" name="donation_amount" class="d-none" id="donation_amount7" value="10" v-model.number="current_donation.donation_amount"> <label :class="{ 'active': current_donation.donation_amount === 10, 'd-none': current_donation.donation_type === 'one-time' }" @click="handle_donation_amt" class="Donatebox__amount" for="donation_amount7"> $10 </label> </div> <div class="col-md-6"> <input type="radio" name="donation_amount" class="d-none" id="donation_amount8" value="25" v-model.number="current_donation.donation_amount"> <label :class="{ 'active': current_donation.donation_amount === 25, 'd-none': current_donation.donation_type === 'one-time' }" @click="handle_donation_amt" class="Donatebox__amount" for="donation_amount8"> $25 </label> </div> <div class="col-md-6"> <input type="radio" name="donation_amount" class="d-none" id="donation_amount9" value="50" v-model.number="current_donation.donation_amount"> <label :class="{ 'active': current_donation.donation_amount === 50, 'd-none': current_donation.donation_type === 'one-time' }" @click="handle_donation_amt" class="Donatebox__amount" for="donation_amount9"> $50 </label> </div> <div class="col-md-6"> <input type="radio" name="donation_amount" class="d-none" id="donation_amount10" value="100" v-model.number="current_donation.donation_amount"> <label :class="{ 'active': current_donation.donation_amount === 100, 'd-none': current_donation.donation_type === 'one-time' }" @click="handle_donation_amt" class="Donatebox__amount" for="donation_amount10"> $100 </label> </div> <div class="col-md-6"> <input type="radio" name="donation_amount" class="d-none" id="donation_amount11" value="153" v-model.number="current_donation.donation_amount"> <label :class="{ 'active': current_donation.donation_amount === 153, 'd-none': current_donation.donation_type === 'one-time' }" @click="handle_donation_amt" class="Donatebox__amount" for="donation_amount11"> $153 </label> </div> <div class="col-md-6"> <input type="radio" name="donation_amount" class="d-none" id="donation_amount12" value="250" v-model.number="current_donation.donation_amount"> <label :class="{ 'active': current_donation.donation_amount === 250, 'd-none': current_donation.donation_type === 'one-time' }" @click="handle_donation_amt" class="Donatebox__amount" for="donation_amount12"> $250 </label> </div> <div class="other-amount-container col-md-6"> <div class="input-group mb-4"> <div class="input-group-prepend"> <span class="input-group-text">$</span> </div> <input type="radio" name="donation_amount" class="d-none" id="donation_amount_other" value="other" v-model="current_donation.donation_amount"> <input type="text" class="form-control" placeholder="Other amount" id="other-amount-input" data-validate="true" data-minimum="5" data-error="$5 minimum" value="" placeholder="other amount" v-model.number="current_donation.donation_amount_other" @click="handle_custom_donation_amt" @focus="handle_custom_donation_amt"> </div> </div> <div class="col-md-6"> <a href="#" class="btn btn-primary btn-next w-100" @click.prevent="continue_to_billing_info"> Continue </a> </div> </div> <div class="alert alert-danger" id="required-field-error-message" role="alert" v-if="form_step_1.show_error"> <span v-if="current_donation.designee === '' || this.current_donation.donation_amount === ''"> Make a one-time gift, or help the University plan and sustain vital initiatives with a monthly gift. </span> <span v-if="current_donation.donation_amount === 'other' && parseFloat(current_donation.donation_amount_other) < 5"> Minimum donation of $5 is required </span> </div> <div class=""> </div> <div class="Payroll" :class="{ 'd-none': current_donation.donation_type === 'one-time' }"> <p class="text-center mt-4" style="font-size: 14px;"> If you work at U of T and wish to set up your gift as an automatic payroll deduction, please <a href="https://engage.utoronto.ca/site/SPageServer?pagename=payroll" class="Anchor">go to this form</a> instead. </p> </div> </div> </div> </div> </div> </div> </div> </div> </section>  <section data-route="direct" id="direct" name="direct" class="Direct Page__content"> <div class="container-fluid Category__bg"> <div class="container Category__content"> <div class="row"> <div class="col-xl-10 offset-xl-1 col-lg-12 mb-5"> <p class="text-xs Category__breadcrumb"> <a href="#/home"> <i class="fa-solid fa-chevron-left"></i> HOME </a> </p> <h1> Direct your Gift </h1> </div> </div> </div> </div> <div class="container"> <div class="row"> <div class="mt-5 col-md-10 offset-md-1 mb-5"> <div class="Direct__tab text-center"> <div class="Direct__notselected" v-if="!direct.category"> <h3>Select a Category:</h3> <div class="form-group"> <select name="Direct__Category" class="form-control form-select mt-4" v-model="direct.category"> <option value="">Select category</option> <option value="Campuses, Colleges and Communities ">Campuses, Colleges and Communities </option> <option value="Faculties and Institutes">Faculties and Institutes</option> <option value="Special Projects, Initiatives and More">Special Projects, Initiatives and More </option> </select> </div> </div> <div class="Direct__selected" v-if="direct.category"> <h6>Selected category</h6> <h3>{{ direct.category }}</h3> <span href="#" @click="direct.category = '';direct.entity='';direct.category=''; direct.faculty=''; direct.area=''; direct.collection= '';direct.department= '';direct.fund=''" class="Direct__change">Change</span> </div> </div>  <div class="Direct__tab text-center"> <div class="Direct__notselected" v-if="direct.category == 'Faculties and Institutes' && !direct.faculty"> <h3>Select a Faculty or Division:</h3> <div class="form-group"> <select name="Direct__Category" class="form-control form-select mt-4" v-model="direct.faculty"> <option value="" selected>Select</option> <option :value="facultyInstitute.type + facultyInstitute.id" v-for="(facultyInstitute, index) in getFacultiesInstitutes" :key="index"> {{ facultyInstitute.name }} </option> </select> </div> </div> <div class="Direct__selected" v-if="direct.faculty && direct.category == 'Faculties and Institutes'"> <h6>Selected Faculty or Division:</h6> <h3>{{ getspecificEntity.name }}</h3> <p class="Vue__shortd m-auto" v-html="getspecificEntity.shortd"> </p> <span href="#" @click="direct.entity= '';direct.faculty=''; direct.area= '';direct.collection= '';direct.department= '';direct.fund=''" class="Direct__change">Change</span> </div> </div>  <div class="Direct__tab text-center"> <div class="Direct__notselected" v-if="direct.category == 'Campuses, Colleges and Communities ' && !direct.entity"> <h3>Select a College, Campus or Community:</h3> <div class="form-group"> <select name="Direct__Category" class="form-control form-select mt-4" v-model="direct.entity"> <option value="" selected>Select</option> <option :value="collegeCampusCommunity.type + collegeCampusCommunity.id" v-for="(collegeCampusCommunity, index) in getCollegesCampusesCommunitites" :key="index"> {{ collegeCampusCommunity.name }} </option> </select> </div> </div> <div class="Direct__selected" v-if="direct.entity && direct.category == 'Campuses, Colleges and Communities '"> <h6>Selected {{ getspecificEntity.type }}</h6> <h3>{{ getspecificEntity.name }}</h3> <p class="Vue__shortd m-auto" v-html="getspecificEntity.shortd"> </p> <span href="#" @click="direct.entity = '';direct.faculty=''; direct.collection= '';direct.department= ''; direct.area = '' ; direct.fund = '' " class="Direct__change">Change</span> </div> </div>  <div class="Direct__tab text-center"> <div class="Direct__notselected" v-if="direct.category == 'Special Projects, Initiatives and More' && !direct.entity"> <h3>Select a Special Project, Initiative or more:</h3> <div class="form-group"> <select name="Direct__Category" class="form-control form-select mt-4" v-model="direct.entity"> <option value="" selected>Select</option> <option :value="specialProjectInitiative.type + specialProjectInitiative.id" v-for="(specialProjectInitiative, index) in getSpecialProjectsInitiatives" :key="index"> {{ specialProjectInitiative.name }} </option> </select> </div> </div> <div class="Direct__selected" v-if="direct.entity && direct.category == 'Special Projects, Initiatives and More'"> <h6>Selected Special Project or Initiative</h6> <h3>{{ getspecificEntity.name }}</h3> <p class="Vue__shortd m-auto" v-html="getspecificEntity.shortd"> </p> <span href="#" @click="direct.entity= '';direct.faculty='';direct.area='';direct.collection= '';direct.department= ''; direct.fund=''" class="Direct__change">Change</span> </div> </div>  <div class="Direct__tab text-center"> <div class="Direct__notselected" v-if="direct.category == 'Faculties and Institutes' && direct.faculty && !direct.area && direct.faculty.indexOf('institute') !== 0 "> <h3>Select an area of giving:</h3> <div class="form-group"> <select name="Direct__AreaOfGiving" class="form-control form-select mt-4" v-model="direct.area"> <option value="" selected>Select</option> <option value="Featured Funds"> Featured Funds </option> <option value="Departments and Specific Areas" :class="{ 'd-none' : ifFacultyHasDepartments < 1}"> Departments and Specific Areas </option> <option value="Class Giving" :class="{ 'd-none' : ifFacultyHasClassGivings < 1}"> Class Giving </option> <option value="Other Giving Opportunities" :class="{ 'd-none' : ifFacultyHasCollections < 1}"> Other Giving Opportunities </option> </select> </div> </div> <div class="Direct__selected" v-if="direct.faculty && direct.area && direct.category == 'Faculties and Institutes'"> <h6>Selected area of giving</h6> <h3>{{ direct.area }}</h3> <span href="#" @click="direct.area= '';direct.collection= '';direct.department= ''; direct.fund=''" class="Direct__change">Change</span> </div> </div>  <div class="Direct__tab text-center"> <div class="Direct__notselected" v-if="direct.entity && !direct.fund"> <h3>Select a giving opportunity:</h3> <div class="form-group"> <select name="Direct__Category" class="form-control form-select mt-4" id="Direct__Category" v-model="direct.fund"> <option value="" selected>Select</option> <option :value="fund.id" v-for="(fund, index) in getspecificEntityFunds" :key="index"> {{ fund.name }} </option> </select> <div class="Direct__selected mt-4" v-if="!getspecificEntityFunds"> No funds found, please try again or <a class="text-underline" href="#/pressing-needs">click here</a> to donate to the most pressing needs of the University of Toronto </div> </div> </div> <div class="Direct__selected" v-if="direct.entity != '' && direct.fund"> <h6>You're giving to</h6> <h3>{{ getSpecificEntityFund.name }}</h3> <p class="Vue__shortd m-auto" v-html="getSpecificEntityFund.shortd"> </p> <span href="#" @click="direct.fund= '';" class="Direct__change">Change</span> </div> </div>  <div class="Direct__tab text-center"> <div class="Direct__notselected" v-if="direct.area == 'Departments and Specific Areas' && !direct.department"> <h3>Select a Department or a Specific Area</h3> <div class="form-group"> <select name="Direct__Category" class="form-control form-select mt-4" v-model="direct.department"> <option value="" selected>Select</option> <option :value="department.type + department.id" v-for="(department, index) in getDepartmentsByFacultyforDirect" :key="index"> {{ department.name }} </option> </select> </div> </div> <div class="Direct__selected" v-if="direct.department"> <h6>Selected Department or a Specific Area</h6> <h3>{{ getspecificEntityForDirectDepartments.name }}</h3> <p class="Vue__shortd m-auto" v-html="getspecificEntityForDirectDepartments.shortd"> </p> <span href="#" @click="direct.department='';direct.collection=''; direct.fund=''" class="Direct__change">Change</span> </div> </div>  <div class="Direct__tab text-center"> <div class="Direct__notselected" v-if="direct.area == 'Other Giving Opportunities' && !direct.collection"> <h3>Select Other Giving Opportunities</h3> <div class="form-group"> <select name="Direct__Category" class="form-control form-select mt-4" v-model="direct.collection"> <option value="" selected>Select</option> <option :value="collection.type + collection.id" v-for="(collection, index) in getCollectionsByFacultyforDirect" :key="index"> {{ collection.name }} </option> </select> </div> </div> <div class="Direct__selected" v-if="direct.collection"> <h6>Selected Giving Opportunities</h6> <h3>{{ getspecificEntityForDirectCollections.name }}</h3> <p class="Vue__shortd m-auto" v-html="getspecificEntityForDirectCollections.shortd"> </p> <span href="#" @click="direct.department=''; direct.collection=''; direct.fund=''" class="Direct__change">Change</span> </div> </div>  <div class="Direct__tab text-center"> <div v-if=" !direct.entity && direct.area && direct.area != 'Departments and Specific Areas' && direct.area != 'Other Giving Opportunities' && !direct.fund"> <div class="Direct__notselected"> <h3>Select a giving opportunity</h3> <div class="form-group"> <select name="Direct__Category" class="form-control form-select mt-4" id="Direct__Category" v-model="direct.fund"> <option value="" selected>Select</option> <option :value="fund.id" v-for="(fund, index) in getspecificEntityFundsForFaculties" :key="index"> {{ fund.name }} </option> </select> <div class="Direct__selected mt-4" v-if="!getspecificEntityFundsForFaculties"> No funds found, please try again or <a class="text-underline" href="#/pressing-needs">click here</a> to donate to the most pressing needs of the University of Toronto </div> </div> </div> </div> <div v-if="!direct.collection && !direct.department"> <div class="Direct__selected" v-if="direct.area && direct.fund"> <div> <h6>You're giving to</h6> <h3>{{ getSpecificEntityFund.name }}</h3> <p class="Vue__shortd m-auto" v-html="getSpecificEntityFund.shortd"> </p> <span href="#" @click="direct.fund= '';" class="Direct__change">Change</span> </div> </div> </div> </div>  <div class="Direct__tab text-center"> <div v-if=" !direct.entity && direct.area && direct.area != 'Featured Funds' && direct.area != 'Class Giving' && !direct.fund"> <div class="Direct__notselected" v-if="direct.department || direct.collection"> <h3>Select a giving opportunity</h3> <div class="form-group"> <select name="Direct__Category" class="form-control form-select mt-4" id="Direct__Category" v-model="direct.fund"> <option value="" selected>Select</option> <option :value="fund.id" v-for="(fund, index) in getspecificEntityFundsForFaculties" :key="index"> {{ fund.name }} </option> </select> <div class="Direct__selected mt-4" v-if="!getspecificEntityFundsForFaculties"> No funds found, please try again or <a class="text-underline" href="#/pressing-needs">click here</a> to donate to the most pressing needs of the University of Toronto </div> </div> </div> </div> <div class="Direct__selected" v-if="direct.collection && direct.fund"> <h6>You're giving to</h6> <h3>{{ getSpecificEntityFund.name }}</h3> <p class="Vue__shortd m-auto" v-html="getSpecificEntityFund.shortd"> </p> <span href="#" @click="direct.fund= '';" class="Direct__change">Change</span> </div> <div class="Direct__selected" v-if="direct.department && direct.fund"> <h6>You're giving to</h6> <h3>{{ getSpecificEntityFund.name }}</h3> <p class="Vue__shortd m-auto" v-html="getSpecificEntityFund.shortd"> </p> <span href="#" @click="direct.fund= '';" class="Direct__change">Change</span> </div> </div>  <div class="Direct__tab text-center"> <div class="Direct__notselected" v-if="direct.faculty.indexOf('institute') === 0"> <h3>Select a giving opportunity:</h3> <div class="form-group"> <select name="Direct__Category" class="form-control form-select mt-4" id="Direct__Category" v-model="direct.fund"> <option value="" selected>Select</option> <option :value="fund.id" v-for="(fund, index) in getspecificEntityFundsForFaculties" :key="index"> {{ fund.name }} </option> </select> <div class="Direct__selected mt-4" v-if="!getspecificEntityFundsForFaculties"> No funds found, please try again or <a class="text-underline" href="#/pressing-needs">click here</a> to donate to the most pressing needs of the University of Toronto </div> </div> </div> <div class="Direct__selected" v-if="direct.faculty.indexOf('institute') === 0 && direct.fund"> <h6>You're giving to</h6> <h3>{{ getSpecificEntityFund.name }}</h3> <p class="Vue__shortd m-auto" v-html="getSpecificEntityFund.shortd"> </p> <span href="#" @click="direct.fund= '';" class="Direct__change">Change</span> </div> </div> </div> </div> <div class="row" v-if="direct.fund"> <div class="col-lg-10 offset-lg-1 col-md-12"> <div class="mt-5 mb-5 Donatebox accordion mx-auto"> <h3 class="Donatebox__header">Make a Gift</h3> <div class="" id="donationAmount" :class="{ 'hide': hide_donation_amounts }"> <div class="Donatebox__nav clearfix"> <label checked class="Donatebox__navitem one-time-tab" style="margin-right: 20px;" :class="{ 'active': current_donation.donation_type === 'one-time' }" for="one-time-donation"> <input type="radio" name="sustaining.frequency" id="one-time-donation" value="one-time" class="" v-model="current_donation.donation_type"> <span class="checked"></span> <span class="unchecked"></span> One-time </label> <label class="Donatebox__navitem monthly-tab" :class="{ 'active': current_donation.donation_type === 'monthly' }" for="monthly-donation"> <input type="radio" name="sustaining.frequency" id="monthly-donation" value="monthly" class="" v-model="current_donation.donation_type"> <span class="checked"></span> <span class="unchecked"></span> Monthly </label> </div> <div class="donation-amounts-container"> <div class="row"> <div class="col-md-6"> <input type="radio" name="donation_amount" class="d-none" id="donation_amount1" value="50" v-model.number="current_donation.donation_amount"> <label :class="{ 'active': current_donation.donation_amount === 50, 'd-none': current_donation.donation_type === 'monthly' }" @click="handle_donation_amt" for="donation_amount1" class="Donatebox__amount"> $50 </label> </div> <div class="col-md-6"> <input type="radio" name="donation_amount" class="d-none" id="donation_amount2" value="100" v-model.number="current_donation.donation_amount"> <label :class="{ 'active': current_donation.donation_amount === 100, 'd-none': current_donation.donation_type === 'monthly' }" @click="handle_donation_amt" for="donation_amount2" class="Donatebox__amount"> $100 </label> </div> <div class="col-md-6"> <input type="radio" name="donation_amount" class="d-none" id="donation_amount3" value="150" v-model.number="current_donation.donation_amount"> <label :class="{ 'active': current_donation.donation_amount === 150, 'd-none': current_donation.donation_type === 'monthly' }" @click="handle_donation_amt" for="donation_amount3" class="Donatebox__amount"> $150 </label> </div> <div class="col-md-6"> <input type="radio" name="donation_amount" class="d-none" id="donation_amount4" value="500" v-model.number="current_donation.donation_amount"> <label :class="{ 'active': current_donation.donation_amount === 500, 'd-none': current_donation.donation_type === 'monthly' }" @click="handle_donation_amt" class="Donatebox__amount" for="donation_amount4"> $500 </label> </div> <div class="col-md-6"> <input type="radio" name="donation_amount" class="d-none" id="donation_amount5" value="1827" v-model.number="current_donation.donation_amount"> <label :class="{ 'active': current_donation.donation_amount === 1827, 'd-none': current_donation.donation_type === 'monthly' }" @click="handle_donation_amt" class="Donatebox__amount" for="donation_amount5"> $1,827 </label> </div> <div class="col-md-6"> <input type="radio" name="donation_amount" class="d-none" id="donation_amount6" value="5000" v-model.number="current_donation.donation_amount"> <label :class="{ 'active': current_donation.donation_amount === 5000, 'd-none': current_donation.donation_type === 'monthly' }" @click="handle_donation_amt" class="Donatebox__amount" for="donation_amount6"> $5,000 </label> </div> <div class="col-md-6"> <input type="radio" name="donation_amount" class="d-none" id="donation_amount7" value="10" v-model.number="current_donation.donation_amount"> <label :class="{ 'active': current_donation.donation_amount === 10, 'd-none': current_donation.donation_type === 'one-time' }" @click="handle_donation_amt" class="Donatebox__amount" for="donation_amount7"> $10 </label> </div> <div class="col-md-6"> <input type="radio" name="donation_amount" class="d-none" id="donation_amount8" value="25" v-model.number="current_donation.donation_amount"> <label :class="{ 'active': current_donation.donation_amount === 25, 'd-none': current_donation.donation_type === 'one-time' }" @click="handle_donation_amt" class="Donatebox__amount" for="donation_amount8"> $25 </label> </div> <div class="col-md-6"> <input type="radio" name="donation_amount" class="d-none" id="donation_amount9" value="50" v-model.number="current_donation.donation_amount"> <label :class="{ 'active': current_donation.donation_amount === 50, 'd-none': current_donation.donation_type === 'one-time' }" @click="handle_donation_amt" class="Donatebox__amount" for="donation_amount9"> $50 </label> </div> <div class="col-md-6"> <input type="radio" name="donation_amount" class="d-none" id="donation_amount10" value="100" v-model.number="current_donation.donation_amount"> <label :class="{ 'active': current_donation.donation_amount === 100, 'd-none': current_donation.donation_type === 'one-time' }" @click="handle_donation_amt" class="Donatebox__amount" for="donation_amount10"> $100 </label> </div> <div class="col-md-6"> <input type="radio" name="donation_amount" class="d-none" id="donation_amount11" value="153" v-model.number="current_donation.donation_amount"> <label :class="{ 'active': current_donation.donation_amount === 153, 'd-none': current_donation.donation_type === 'one-time' }" @click="handle_donation_amt" class="Donatebox__amount" for="donation_amount11"> $153 </label> </div> <div class="col-md-6"> <input type="radio" name="donation_amount" class="d-none" id="donation_amount12" value="250" v-model.number="current_donation.donation_amount"> <label :class="{ 'active': current_donation.donation_amount === 250, 'd-none': current_donation.donation_type === 'one-time' }" @click="handle_donation_amt" class="Donatebox__amount" for="donation_amount12"> $250 </label> </div> <div class="other-amount-container col-md-6"> <div class="input-group mb-4"> <div class="input-group-prepend"> <span class="input-group-text">$</span> </div> <input type="radio" name="donation_amount" class="d-none" id="donation_amount_other" value="other" v-model="current_donation.donation_amount"> <input type="text" class="form-control" placeholder="Other amount" id="other-amount-input" data-validate="true" data-minimum="5" data-error="$5 minimum" value="" placeholder="other amount" v-model.number="current_donation.donation_amount_other" @click="handle_custom_donation_amt" @focus="handle_custom_donation_amt"> </div> </div> <div class="col-md-6"> <a href="#" class="btn btn-primary btn-next w-100" @click.prevent="continue_to_billing_info"> Continue </a> </div> </div> <div class="alert alert-danger" id="required-field-error-message" role="alert" v-if="form_step_1.show_error"> <span v-if="current_donation.designee === '' || this.current_donation.donation_amount === ''"> Make a one-time gift, or help the University plan and sustain vital initiatives with a monthly gift. </span> <span v-if="current_donation.donation_amount === 'other' && parseFloat(current_donation.donation_amount_other) < 5"> Minimum donation of $5 is required </span> </div> <div class=""> </div> <div class="Payroll" :class="{ 'd-none': current_donation.donation_type === 'one-time' }"> <p class="text-center mt-4" style="font-size: 14px;"> If you work at U of T and wish to set up your gift as an automatic payroll deduction, please <a href="https://engage.utoronto.ca/site/SPageServer?pagename=payroll" class="Anchor">go to this form</a> instead. </p> </div> </div> </div> </div> </div> </div> </div> </section>   <section data-route="donorInfo" id="step1" name="step1" class="Steps Step1"> <div class="container-fluid Jumbotron text-center"> <div class="container"> <div class="row"> <div class="col-md-10 offset-md-1 Steps__header"> <ul class="Steps__nav"> <li> <a @click.prevent="go_to_route('donorInfo', 1)" href="#" class="progress-step current" :class="" id="progress-step-1"> <h4>1. Your Information</h4> </a> </li> <li> <a @click.prevent="go_to_route('giftOptions', 2)" href="#" class="progress-step" :class="" id="progress-step-2"> <h4>2. Gift Options</h4> </a> </li> <li> <a @click.prevent="go_to_route('billing', 3)" href="#" class="progress-step" :class="" id="progress-step-3"> <h4>3. Billing Information</h4> </a> </li> <li> <a @click.prevent="go_to_route('review', 4)" href="#" class="progress-step" :class="" id="progress-step-4"> <h4>4. Review</h4> </a> </li> </ul> </div> </div> </div> </div> <div class="container-fluid Steps__form"> <div class="container"> <div class="row"> <div class="col-md-6">  <h2>Your Information</h2> <div class="Steps__addmore add-more-gifts"> <div class="d-inline-block"> <a href="#/direct" @click="direct.category = '';direct.entity=''; direct.fund='', direct.area='', direct.faculty='',direct.facultyInstitute=''" class="add-another-gift"> <i class="fas fa-plus-circle fa-2x" style="font-size: 2rem !important;"></i> </a> </div> <div class="d-inline-block"> <span> <a href="#/direct" @click="direct.category = '';direct.entity=''; direct.fund='', direct.area='', direct.faculty='',direct.facultyInstitute=''" class="add-another-gift"> Do you wish to give to an additional area of need?<br> <span class="text-underline">Add another gift</span> </a> </span> </div> </div> <div class="form-group form-check"> <input type="checkbox" class="form-check-input" id="corp_gift" v-model="donor_information.is_corporate_gift"> <label for="corp_gift">This is a corporate gift</label> </div> <div class="form-group" v-if="donor_information.is_corporate_gift"> <label for="corporate_name">Corporate Name</label> <input class="form-control" id="corporate_name" name="corporate_name" type="text" v-model="donor_information.corporate_name"> </div> <div class="form-group"> <label for="billing_name_first">First Name (required)</label> <input class="form-control" id="donor_name_first" name="donor.name.first" type="text" placeholder="Enter your first name" data-validate="true" data-required="true" data-error="Please enter first name" v-model="donor_information.donor_name_first"> </div> <div class="form-group"> <label for="donor_name_last">Last Name (required)</label> <input class="form-control" id="donor_name_last" name="donor.name.last" type="text" placeholder="Enter your last name" data-validate="true" data-required="true" data-error="Please enter last name" v-model="donor_information.donor_name_last"> </div> <div class="form-group"> <label for="donor_email">Email Address (required)</label> <input class="form-control" id="donor_email" name="donor.email" type="email" placeholder="eg. 'account@mail.com' " data-validate="true" data-required="true" data-error="Please enter a valid email address" v-model="donor_information.donor_email"> <input type="hidden" name="donor.email_opt-in" value="true" v-model="donor_information.donor_email_opt_in"> </div> <div class="form-group"> <label for="donor_phone">Phone (optional)</label> <input class="form-control" id="donor_phone" name="donor.phone" type="text" placeholder="eg. 'XXX-XXX-XXXX' " data-validate="true" data-error="Please enter a valid phone number" v-model="donor_information.donor_phone"> </div> <div class="form-group"> <label for="uotaffliation">U of T Affiliation (required)</label> <select class="form-control form-select" id="uotaffliation" name="uoftaffifl" data-validate="true" data-required="true" data-error="Please select your affiliation" v-model="donor_information.uoftaffifl"> <option selected value="">Select</option> <option value="Alumni">Alumni</option> <option value="Parent of a student">Parent of a student</option> <option value="Current Student">Current Student</option> <option value="Faculty, librarian or staff">Faculty, librarian or staff</option> <option value="Faculty, librarian or staff (retired)">Faculty, librarian or staff (retired) </option> <option value="Friend">Friend</option> <option value="None">None</option> </select> <div class="Payroll d-none" :class="{ 'd-block': donor_information.uoftaffifl === 'Faculty, librarian or staff' }"> <p class="" style="font-size: 14px;"> If you work at U of T and wish to set up your gift as an automatic payroll deduction, please <a href="https://engage.utoronto.ca/site/SPageServer?pagename=payroll" class="Anchor">go to this form</a> instead. </p> </div> </div> <div class="form-group form-check"> <input type="checkbox" class="form-check-input" id="giftPlanning" v-model="donor_information.giftPlanning"> <label for="giftPlanning">I am interested in learning more about arranging a legacy gift for the University of Toronto in my will or estate plan.</label> </div> <div class="form-group"> <a href="#/giftOptions" @click.prevent='validateStep("step1", "giftOptions")' class="mt-3 btn btn-primary btn-next">Continue</a> </div> </div> <div class="col-md-4 offset-md-2 Cart"> <div class="row BG__lightblue"> <div class="col-md-12 text-center pt-3 pb-2"> <h3>Gift Summary</h3> </div> </div> <div class="row" :class="{ 'Cart__edit': (cart.edit === key) }" v-for="(cart_item, key) in cart.items"> <div class="col-6 mt-2 mb-2"> {{ cart_item.designee.name }} </div> <div class="col-4 mt-2 mb-2 text-right"> <span class="Cart__amount" v-if="cart_item.donation_amount"> ${{ parseFloat(cart_item.donation_amount).toFixed(2) }} </span> <input v-if="cart.edit === key" v-model.number="cart_item.donation_amount" type="number" class="form-control-sm w-100" :min="5" min="5" :class="{ 'Cart__editerror': (cart_item.donation_amount < 5) }"> </div> <div class="col-2 mt-2 mb-2 text-center"> <a class="Cart__editlink" @click="cart.edit = key"> <i class="far fa-edit"></i> </a> <a class="Cart__remove" @click="cart.items.splice(key, 1); if(cart.items.length == 0){ go_to_route('home'); }"> <i class="fas fa-times"></i> </a> <a class="Cart__update d-none" v-if="cart_item.donation_amount >= 5" @click="cart.edit = ''"> <i class="fas fa-check"></i> </a> </div> <div class="alert alert-danger w-100 text-center" role="alert" v-if="cart_item.donation_amount < 5"> Minimum donation of $5 is required </div> </div> <div class="row mt-3 pt-3 BG__lightblue"> <div class="col-8 mt-2 mb-2"> <b>Donation Type:</b> </div> <div class="col-4 mt-2 mb-2 text-right" style="text-transform: capitalize; font-weight: bold;"> {{ cart.donation_type }} </div> </div> <div class="row pb-3 BG__lightblue"> <div class="col-8"> <b>Gift Total:</b> </div> <div class="col-4 text-right"> <b>{{ cart_total }}</b> </div> </div> </div> </div> </div> </div> </section>   <section data-route="giftOptions" id="step2" name="step2" class="Steps Step2"> <div class="container-fluid Jumbotron text-center"> <div class="container"> <div class="row"> <div class="col-md-10 offset-md-1 Steps__header"> <ul class="Steps__nav">  <li> <a @click.prevent="go_to_route('donorInfo', 1)" href="#" class="progress-step" :class="" id="progress-step-2"> <h4>1. Your Information</h4> </a> </li> <li> <a @click.prevent="go_to_route('giftOptions', 2)" href="#" class="progress-step current" :class="" id="progress-step-3"> <h4>2. Gift Options</h4> </a> </li> <li> <a @click.prevent="go_to_route('billing', 3)" href="#" class="progress-step" :class="" id="progress-step-4"> <h4>3. Billing Information</h4> </a> </li> <li> <a @click.prevent="go_to_route('review', 4)" href="#" class="progress-step" :class="" id="progress-step-5"> <h4>4. Review</h4> </a> </li> </ul> </div> </div> </div> </div> <div class="container-fluid Steps__form"> <div class="container"> <div class="row"> <div class="col-md-6"> <h2 class="mb-5">Gift Options</h2> <p class="step-mini-headline">Would you like your gift to be recognized in a special way? (Optional) </p> <div class="form-group form-check"> <input type="checkbox" class="form-check-input" id="tribute_gift" name="tribute.show_honor_fields" v-model="gift_options.tribute_show_honor_fields" @change="reset_tribute_fields"> <label for="tribute_gift">This gift is in recognition or in memory of someone</label> </div> <div class="form-group tribute-group" v-if="gift_options.tribute_show_honor_fields"> <label for="tribute_gift_type">Select type</label> <select class="form-control form-select" id="tribute_gift_type" name="tribute.type" v-model="gift_options.tribute_type"> <option selected value="tribute">In Honor</option> <option value="memorial">In Memory Of</option> </select> </div> <div class="form-group tribute-group" v-if="gift_options.tribute_show_honor_fields"> <label for="honoree_name">Honoree Name</label> <input class="form-control" id="honoree_name" name="tribute.honoree.name.full" type="text" data-validateECard="true" data-error="Please enter honoree name" v-model="gift_options.tribute_honoree_name_full"> </div> <div class="form-group form-check tribute-group" v-if="gift_options.tribute_show_honor_fields"> <input type="checkbox" class="form-check-input" id="send_card_option" name="sendCard" v-model="gift_options.send_card_option" @change="reset_card_tribute_fields"> <label for="send_card_option">Send a card</label> </div> <div class="form-group send-card-dropdown" v-if="gift_options.send_card_option"> <label class="sr-only" for="send_card_type">Select type</label> <select class="form-control form-select" id="send_card_type" name="send_card_type" v-model="gift_options.send_card_type" @change="clear_tribute_fields"> <option selected value="none">No Card</option> <option value="ecard">E-Card</option> <option value="printedcard">Printed Card</option> </select> </div> <div class="form-group printed-card-group" v-if="gift_options.send_card_type === 'printedcard' || gift_options.send_card_type === 'ecard' "> <label for="printed_card_notify_name">Recipient Name</label> <input class="form-control" id="printed_card_notify_name" name="tribute.notify.name.full" type="text" v-model="gift_options.tribute_notify_name_full" data-validateECard="true" data-error="Please enter recipient name"> </div> <div class="form-group ecard-group" v-if="gift_options.send_card_type === 'ecard' "> <label for="ecard_recipients">Recipient email addresses</label> <input class="form-control" id="ecard_recipients" name="ecard.recipients" type="email" placeholder="email@domain.com" v-model="gift_options.ecard_recipients" data-validateECard="true" data-error="Please enter recipient email address"> </div>  <div class="form-group ecard-group" v-if="gift_options.send_card_type === 'ecard' "> <label for="ecard_message">eCard Personalized Message (optional)</label> <textarea class="form-control" id="ecard_message" name="ecard.message" col="80" rows="5" v-model="gift_options.ecard_message"></textarea> <div class="Help form-text" :class="{ 'text-danger': (gift_options.ecard_message.length > 220) }"> <em>Character limit: <span v-html="gift_options.ecard_message.length"></span>/220</em> <br> <span class="d-none text-danger" :class="{ 'd-block': (gift_options.ecard_message.length > 220) }">This message is over the character limit. Please shorten it to ensure we receive your full message.</span> </div> </div> <div class="form-group ecard-group select-ecard" v-if="gift_options.send_card_type === 'ecard' "> <label for="ecard_id">Select an eCard</label> <br> <div class="form-check form-check-inline"> <label class="form-check-label" for="stationery_layout_id_1281" @click="copyECardImage"> <input class="form-check-input" type="radio" name="ecard.id" id="stationery_layout_id_1281" value="1281" v-model="gift_options.ecard_id"> <img id="stationery_layout_id_1281_image" width="140" src="https://engage.utoronto.ca/images/content/pagebuilder/donate-ecard-2.jpg" alt="ecard option 1"> </label> </div> <div class="form-check form-check-inline"> <label class="form-check-label" for="stationery_layout_id_1283" @click="copyECardImage"> <input class="form-check-input" type="radio" name="ecard.id" id="stationery_layout_id_1283" value="1283" v-model="gift_options.ecard_id"> <img id="stationery_layout_id_1283_image" width="140" src="https://engage.utoronto.ca/images/content/pagebuilder/donate-ecard-utm.jpg" alt="ecard option 2"> </label> </div> <div class="form-check form-check-inline"> <label class="form-check-label" for="stationery_layout_id_1581" @click="copyECardImage"> <input class="form-check-input" type="radio" name="ecard.id" id="stationery_layout_id_1581" value="1581" v-model="gift_options.ecard_id"> <img id="stationery_layout_id_1283_image" width="140" src="https://engage.utoronto.ca/images/content/pagebuilder/donate-ecard-utsc.jpg" alt="ecard option 2"> </label> </div> <span class="Error__msg d-none" id="selectECardOption">Please select an eCard</span> </div> <button type="button" class="btn btn-primary btn-xs btn-preview mb-4" v-if="gift_options.send_card_type === 'ecard' && cart.items.length > 0" @click.prevent="eCardValidation"> Preview </button> <div class="modal fade" id="ecardmodal" tabindex="-1" role="dialog" aria-labelledby="ecardmodal" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="ecardmodal">eCard Preview</h5> <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body" v-if="cart.items.length > 0"> <div class="modal-body-header text-center"> <img v-bind:src="gift_options.ecard_src" style="width: 100%;" alt=""> <p v-if="gift_options.tribute_type == 'memorial' "> <br> <i>{{ donor_information.donor_name_first }} {{ donor_information.donor_name_last }}</i> <br> has made a donation to the <br> <i>{{ cart.items[0].designee.name }}</i> <br> in memory of <br> <i><b>{{ gift_options.tribute_honoree_name_full }}</b></i> </p> <p v-if="gift_options.tribute_type == 'tribute' "> <br> <i>{{ donor_information.donor_name_first }} {{ donor_information.donor_name_last }}</i> <br> has made a donation to the <br> <i>{{ cart.items[0].designee.name }}</i> <br> in honor of <br> <i><b>{{ gift_options.tribute_honoree_name_full }}</b></i> </p> </div> <div class="modal-body-body" v-if="gift_options.ecard_message"> <hr> A message from {{ donor_information.donor_name_first }}: {{ gift_options.ecard_message }} </div> </div> </div> </div> </div> <div class="form-group form-check ecard-group" v-if="gift_options.send_card_type === 'ecard' "> <input type="checkbox" class="form-check-input" id="ecard_copy_sender" name="ecard.copy_sender" v-model="gift_options.ecard_copy_sender"> <label for="ecard_copy_sender">Send me a copy of the eCard</label> </div> <div class="form-group printed-card-group" v-if="gift_options.send_card_type === 'printedcard' "> <label for="printed_card_notify_street1">Notification Recipient Street 1</label> <input class="form-control" id="printed_card_notify_street1" name="tribute.notify.address.street1" type="text" v-model="gift_options.tribute_notify_address_street1"> </div> <div class="form-group printed-card-group" v-if="gift_options.send_card_type === 'printedcard' "> <label for="printed_card_notify_street2">Notification Recipient Street 2</label> <input class="form-control" id="printed_card_notify_street2" name="tribute.notify.address.street2" type="text" v-model="gift_options.tribute_notify_address_street2"> </div> <div class="form-group printed-card-group" v-if="gift_options.send_card_type === 'printedcard' "> <label for="printed_card_notify_city">Notification Recipient City</label> <input class="form-control" id="printed_card_notify_city" name="tribute.notify.address.city" type="text" v-model="gift_options.tribute_notify_address_city"> </div> <div class="form-group printed-card-group" v-if="gift_options.send_card_type === 'printedcard' "> <label for="printed_card_notify_state">Notification Recipient Province/State</label> <select class="form-control form-select" id="printed_card_notify_state" name="tribute.notify.address.state" v-model="gift_options.tribute_notify_address_state"> <option selected value="">Select</option> <option value="AB">AB - Alberta</option> <option value="BC">BC - British Columbia</option> <option value="MB">MB - Manitoba</option> <option value="NB">NB - New Brunswick</option> <option value="NF">NF - Newfoundland and Labrador</option> <option value="NS">NS - Nova Scotia</option> <option value="NT">NT - Northwest Territories</option> <option value="NU">NU - Nunavut</option> <option value="ON">ON - Ontario</option> <option value="PE">PE - Prince Edward Island</option> <option value="QC">QC - Quebec</option> <option value="SK">SK - Saskatchewan</option> <option value="YT">YT - Yukon</option> <option value="AK">AK - Alaska</option> <option value="AL">AL - Alabama</option> <option value="AR">AR - Arkansas</option> <option value="AZ">AZ - Arizona</option> <option value="CA">CA - California</option> <option value="CO">CO - Colorado</option> <option value="CT">CT - Connecticut</option> <option value="DC">DC - District of Columbia</option> <option value="DE">DE- Delaware</option> <option value="FL">FL - Florida</option> <option value="GA">GA - Georgia</option> <option value="HI">HA - Hawaii</option> <option value="IA">IA - Iowa</option> <option value="ID">ID - Idaho</option> <option value="IL">IL - Illinois</option> <option value="IN">IN - Indiana</option> <option value="KS">KS - Kansas</option> <option value="KY">KY - Kentucky</option> <option value="LA">LA - Louisiana</option> <option value="MA">MA - Massachusetts</option> <option value="MD">MD - Maryland</option> <option value="ME">ME - Maine</option> <option value="MI">MI - Michigan</option> <option value="MN">MN - Minnesota</option> <option value="MO">MO - Missouri</option> <option value="MS">MS - Mississippi</option> <option value="MT">MT - Montana</option> <option value="NC">NC - North Carolina</option> <option value="ND">ND - North Dakota</option> <option value="NE">NE - Nebraska</option> <option value="NH">NH - New Hampshire</option> <option value="NJ">NJ - New Jersey</option> <option value="NM">NM - New Mexico</option> <option value="NV">NV - Nevada</option> <option value="NY">NY - New York</option> <option value="OH">OH - Ohio</option> <option value="OK">OK - Oklahoma</option> <option value="OR">OR - Oregon</option> <option value="PA">PA - Pennsylvania</option> <option value="RI">RI - Rhode Island</option> <option value="SC">SC - South Carolina</option> <option value="SD">SD - South Dakota</option> <option value="TN">TN - Tennessee</option> <option value="TX">TX - Texas</option> <option value="UT">UT - Utah</option> <option value="VA">VA - Virginia</option> <option value="VT">VT - Vermont</option> <option value="WA">WA - Washington</option> <option value="WI">WI - Wisconsin</option> <option value="WV">WV - West Virginia</option> <option value="WY">WY - Wyoming</option> <option value="AS">AS - American Samoa</option> <option value="FM">FM - Federated States of Micronesia</option> <option value="GU">GU - Guam</option> <option value="MH">MH - Marshall Islands</option> <option value="MP">MP - Northern Mariana Islands</option> <option value="PR">PR - Puerto Rico</option> <option value="PW">PW - Palau</option> <option value="VI">VI - Virgin Islands</option> <option value="AA">AA - Armed Forces Americas</option> <option value="AE">AE - Armed Forces</option> <option value="AP">AE - Armed Forces Pacific</option> <option value="None">Other</option> </select> </div> <div class="form-group printed-card-group" v-if="gift_options.send_card_type === 'printedcard' "> <label for="printed_card_notify_zip">Notification Recipient Postal Code</label> <input class="form-control" id="printed_card_notify_zip" name="tribute.notify.address.zip" type="text" v-model="gift_options.tribute_notify_address_zip"> </div> <div class="form-group printed-card-group" v-if="gift_options.send_card_type === 'printedcard' "> <label for="printed_card_notify_country">Notification Recipient Country</label> <select class="form-control form-select" id="printed_card_notify_country" name="tribute.notify.address.country" v-model="gift_options.tribute_notify_address_country"> <option selected value="">Select</option> <option value="Canada">Canada</option> <option value="United States">United States</option> <option value="United Kingdom">United Kingdom</option> <option value="Afghanistan">Afghanistan</option> <option value="Albania">Albania</option> <option value="Algeria">Algeria</option> <option value="American Samoa">American Samoa</option> <option value="Andorra">Andorra</option> <option value="Angola">Angola</option> <option value="Anguilla">Anguilla</option> <option value="Antarctica">Antarctica</option> <option value="Antigua and Barbuda">Antigua and Barbuda</option> <option value="Argentina">Argentina</option> <option value="Armenia">Armenia</option> <option value="Aruba">Aruba</option> <option value="Australia">Australia</option> <option value="Austria">Austria</option> <option value="Azerbaijan">Azerbaijan</option> <option value="Bahamas">Bahamas</option> <option value="Bahrain">Bahrain</option> <option value="Bangladesh">Bangladesh</option> <option value="Barbados">Barbados</option> <option value="Belarus">Belarus</option> <option value="Belgium">Belgium</option> <option value="Belize">Belize</option> <option value="Benin">Benin</option> <option value="Bermuda">Bermuda</option> <option value="Bhutan">Bhutan</option> <option value="Bolivia">Bolivia</option> <option value="Bosnia and Herzegovina">Bosnia and Herzegovina</option> <option value="Botswana">Botswana</option> <option value="Bouvet Island">Bouvet Island</option> <option value="Brazil">Brazil</option> <option value="British Indian Ocean Territory">British Indian Ocean Territory</option> <option value="Brunei Darussalam">Brunei Darussalam</option> <option value="Bulgaria">Bulgaria</option> <option value="Burkina Faso">Burkina Faso</option> <option value="Burundi">Burundi</option> <option value="Cambodia">Cambodia</option> <option value="Cameroon">Cameroon</option> <option value="Cape Verde">Cape Verde</option> <option value="Cayman Islands">Cayman Islands</option> <option value="Central African Republic">Central African Republic</option> <option value="Chad">Chad</option> <option value="Chile">Chile</option> <option value="China">China</option> <option value="Christmas Island">Christmas Island</option> <option value="Cocos (Keeling) Islands">Cocos (Keeling) Islands</option> <option value="Colombia">Colombia</option> <option value="Comoros">Comoros</option> <option value="Congo">Congo</option> <option value="Congo, The Democratic Republic of The">Congo, The Democratic Republic of The </option> <option value="Cook Islands">Cook Islands</option> <option value="Costa Rica">Costa Rica</option> <option value="Cote D'ivoire">Cote D'ivoire</option> <option value="Croatia">Croatia</option> <option value="Cuba">Cuba</option> <option value="Cyprus">Cyprus</option> <option value="Czech Republic">Czech Republic</option> <option value="Denmark">Denmark</option> <option value="Djibouti">Djibouti</option> <option value="Dominica">Dominica</option> <option value="Dominican Republic">Dominican Republic</option> <option value="Ecuador">Ecuador</option> <option value="Egypt">Egypt</option> <option value="El Salvador">El Salvador</option> <option value="Equatorial Guinea">Equatorial Guinea</option> <option value="Eritrea">Eritrea</option> <option value="Estonia">Estonia</option> <option value="Ethiopia">Ethiopia</option> <option value="Falkland Islands (Malvinas)">Falkland Islands (Malvinas)</option> <option value="Faroe Islands">Faroe Islands</option> <option value="Fiji">Fiji</option> <option value="Finland">Finland</option> <option value="France">France</option> <option value="French Guiana">French Guiana</option> <option value="French Polynesia">French Polynesia</option> <option value="French Southern Territories">French Southern Territories</option> <option value="Gabon">Gabon</option> <option value="Gambia">Gambia</option> <option value="Georgia">Georgia</option> <option value="Germany">Germany</option> <option value="Ghana">Ghana</option> <option value="Gibraltar">Gibraltar</option> <option value="Greece">Greece</option> <option value="Greenland">Greenland</option> <option value="Grenada">Grenada</option> <option value="Guadeloupe">Guadeloupe</option> <option value="Guam">Guam</option> <option value="Guatemala">Guatemala</option> <option value="Guinea">Guinea</option> <option value="Guinea-bissau">Guinea-bissau</option> <option value="Guyana">Guyana</option> <option value="Haiti">Haiti</option> <option value="Heard Island and Mcdonald Islands">Heard Island and Mcdonald Islands</option> <option value="Holy See (Vatican City State)">Holy See (Vatican City State)</option> <option value="Honduras">Honduras</option> <option value="Hong Kong">Hong Kong</option> <option value="Hungary">Hungary</option> <option value="Iceland">Iceland</option> <option value="India">India</option> <option value="Indonesia">Indonesia</option> <option value="Iran, Islamic Republic of">Iran, Islamic Republic of</option> <option value="Iraq">Iraq</option> <option value="Ireland">Ireland</option> <option value="Israel">Israel</option> <option value="Italy">Italy</option> <option value="Jamaica">Jamaica</option> <option value="Japan">Japan</option> <option value="Jordan">Jordan</option> <option value="Kazakhstan">Kazakhstan</option> <option value="Kenya">Kenya</option> <option value="Kiribati">Kiribati</option> <option value="Korea, Democratic People's Republic of">Korea, Democratic People's Republic of </option> <option value="Korea, Republic of">Korea, Republic of</option> <option value="Kuwait">Kuwait</option> <option value="Kyrgyzstan">Kyrgyzstan</option> <option value="Lao People's Democratic Republic">Lao People's Democratic Republic</option> <option value="Latvia">Latvia</option> <option value="Lebanon">Lebanon</option> <option value="Lesotho">Lesotho</option> <option value="Liberia">Liberia</option> <option value="Libyan Arab Jamahiriya">Libyan Arab Jamahiriya</option> <option value="Liechtenstein">Liechtenstein</option> <option value="Lithuania">Lithuania</option> <option value="Luxembourg">Luxembourg</option> <option value="Macao">Macao</option> <option value="Macedonia, The Former Yugoslav Republic of">Macedonia, The Former Yugoslav Republic of </option> <option value="Madagascar">Madagascar</option> <option value="Malawi">Malawi</option> <option value="Malaysia">Malaysia</option> <option value="Maldives">Maldives</option> <option value="Mali">Mali</option> <option value="Malta">Malta</option> <option value="Marshall Islands">Marshall Islands</option> <option value="Martinique">Martinique</option> <option value="Mauritania">Mauritania</option> <option value="Mauritius">Mauritius</option> <option value="Mayotte">Mayotte</option> <option value="Mexico">Mexico</option> <option value="Micronesia, Federated States of">Micronesia, Federated States of</option> <option value="Moldova, Republic of">Moldova, Republic of</option> <option value="Monaco">Monaco</option> <option value="Mongolia">Mongolia</option> <option value="Montserrat">Montserrat</option> <option value="Morocco">Morocco</option> <option value="Mozambique">Mozambique</option> <option value="Myanmar">Myanmar</option> <option value="Namibia">Namibia</option> <option value="Nauru">Nauru</option> <option value="Nepal">Nepal</option> <option value="Netherlands">Netherlands</option> <option value="Netherlands Antilles">Netherlands Antilles</option> <option value="New Caledonia">New Caledonia</option> <option value="New Zealand">New Zealand</option> <option value="Nicaragua">Nicaragua</option> <option value="Niger">Niger</option> <option value="Nigeria">Nigeria</option> <option value="Niue">Niue</option> <option value="Norfolk Island">Norfolk Island</option> <option value="Northern Mariana Islands">Northern Mariana Islands</option> <option value="Norway">Norway</option> <option value="Oman">Oman</option> <option value="Pakistan">Pakistan</option> <option value="Palau">Palau</option> <option value="Palestinian Territory, Occupied">Palestinian Territory, Occupied</option> <option value="Panama">Panama</option> <option value="Papua New Guinea">Papua New Guinea</option> <option value="Paraguay">Paraguay</option> <option value="Peru">Peru</option> <option value="Philippines">Philippines</option> <option value="Pitcairn">Pitcairn</option> <option value="Poland">Poland</option> <option value="Portugal">Portugal</option> <option value="Puerto Rico">Puerto Rico</option> <option value="Qatar">Qatar</option> <option value="Reunion">Reunion</option> <option value="Romania">Romania</option> <option value="Russian Federation">Russian Federation</option> <option value="Rwanda">Rwanda</option> <option value="Saint Helena">Saint Helena</option> <option value="Saint Kitts and Nevis">Saint Kitts and Nevis</option> <option value="Saint Lucia">Saint Lucia</option> <option value="Saint Pierre and Miquelon">Saint Pierre and Miquelon</option> <option value="Saint Vincent and The Grenadines">Saint Vincent and The Grenadines</option> <option value="Samoa">Samoa</option> <option value="San Marino">San Marino</option> <option value="Sao Tome and Principe">Sao Tome and Principe</option> <option value="Saudi Arabia">Saudi Arabia</option> <option value="Senegal">Senegal</option> <option value="Serbia and Montenegro">Serbia and Montenegro</option> <option value="Seychelles">Seychelles</option> <option value="Sierra Leone">Sierra Leone</option> <option value="Singapore">Singapore</option> <option value="Slovakia">Slovakia</option> <option value="Slovenia">Slovenia</option> <option value="Solomon Islands">Solomon Islands</option> <option value="Somalia">Somalia</option> <option value="South Africa">South Africa</option> <option value="South Georgia and The South Sandwich Islands">South Georgia and The South Sandwich Islands</option> <option value="Spain">Spain</option> <option value="Sri Lanka">Sri Lanka</option> <option value="Sudan">Sudan</option> <option value="Suriname">Suriname</option> <option value="Svalbard and Jan Mayen">Svalbard and Jan Mayen</option> <option value="Swaziland">Swaziland</option> <option value="Sweden">Sweden</option> <option value="Switzerland">Switzerland</option> <option value="Syrian Arab Republic">Syrian Arab Republic</option> <option value="Taiwan, Province of China">Taiwan, Province of China</option> <option value="Tajikistan">Tajikistan</option> <option value="Tanzania, United Republic of">Tanzania, United Republic of</option> <option value="Thailand">Thailand</option> <option value="Timor-leste">Timor-leste</option> <option value="Togo">Togo</option> <option value="Tokelau">Tokelau</option> <option value="Tonga">Tonga</option> <option value="Trinidad and Tobago">Trinidad and Tobago</option> <option value="Tunisia">Tunisia</option> <option value="Turkey">Turkey</option> <option value="Turkmenistan">Turkmenistan</option> <option value="Turks and Caicos Islands">Turks and Caicos Islands</option> <option value="Tuvalu">Tuvalu</option> <option value="Uganda">Uganda</option> <option value="Ukraine">Ukraine</option> <option value="United Arab Emirates">United Arab Emirates</option> <option value="United Kingdom">United Kingdom</option> <option value="United States">United States</option> <option value="United States Minor Outlying Islands">United States Minor Outlying Islands</option> <option value="Uruguay">Uruguay</option> <option value="Uzbekistan">Uzbekistan</option> <option value="Vanuatu">Vanuatu</option> <option value="Venezuela">Venezuela</option> <option value="Viet Nam">Viet Nam</option> <option value="Virgin Islands, British">Virgin Islands, British</option> <option value="Virgin Islands, U.S.">Virgin Islands, U.S.</option> <option value="Wallis and Futuna">Wallis and Futuna</option> <option value="Western Sahara">Western Sahara</option> <option value="Yemen">Yemen</option> <option value="Zambia">Zambia</option> <option value="Zimbabwe">Zimbabwe</option> </select> </div> <div class="form-group printed-card-group" v-if="gift_options.send_card_type === 'printedcard' "> <label for="printed_card_message">Printed Card Message</label> <textarea class="form-control" id="printed_card_message" name="printed_card_message" type="text" maxlength="255" v-model="gift_options.printed_card_message"></textarea> <div class="Help form-text" :class="{ 'text-danger': (gift_options.printed_card_message.length > 220) }"> <em>Character limit: <span v-html="gift_options.printed_card_message.length"></span>/220</em><br> <span class="d-none text-danger" :class="{ 'd-block': (gift_options.printed_card_message.length > 220) }">This message is over the character limit. Please shorten it to ensure we receive your full message.</span> </div> </div> <div class="form-group form-check"> <input type="checkbox" class="form-check-input" id="joint_donor_option" name="joint_donor" v-model="gift_options.joint_donor_option" @change="clear_joint_donor"> <label for="joint_donor_option">I would like to be recognized under a different or joint name</label> </div> <div class="form-group joint-donor-group" v-if="gift_options.joint_donor_option"> <label for="joint_donor_first_name">Name</label> <input class="form-control" id="joint_donor_first_name" name="joint_donor.name.first" type="text" v-model="gift_options.joint_donor_name_first"> <div class="Help form-text" :class="{ 'text-danger': (gift_options.joint_donor_name_first.length > 30) }"> <em>Character limit: <span v-html="gift_options.joint_donor_name_first.length"></span>/30</em><br> <span class="d-none text-danger" :class="{ 'd-block': (gift_options.joint_donor_name_first.length > 30) }">The Joint donor name can not be more than 30 characters</span> </div> </div> <div class="d-none form-group joint-donor-group" v-if="gift_options.joint_donor_option"> <label for="joint_donor_last_name">Last Name</label> <input class="form-control" id="joint_donor_last_name" name="joint_donor.name.last" type="text" v-model="gift_options.joint_donor_name_last"> </div> <div class="form-group form-check"> <input type="checkbox" class="form-check-input" id="anonymous_option" name="anonymous" v-model="gift_options.anonymous"> <label for="anonymous_option">I do not wish to be publicly recognized for this gift</label> </div> <p class="step-mini-headline">Additional gift options</p> <div class="form-group form-check"> <input type="checkbox" class="form-check-input" id="pledge_payment_option" name="pledgepayment" v-model="gift_options.pledge_payment"> <label for="pledge_payment_option">This gift is part of a pledge</label> </div> <div class="form-group" v-if="gift_options.pledge_payment"> <label for="pledge_id">Pledge ID, if known</label> <input class="form-control" id="pledge_id" name="pledge_id" type="text" v-model="gift_options.pledge_id"> </div> <div class="form-group form-check"> <input type="checkbox" class="form-check-input" id="corporate_matching_option" name="corporate_matching" v-model="gift_options.corporate_matching" @change="clear_employer_name"> <label for="corporate_matching_option">This gift is eligible for a corporate matching gift program</label> </div> <div class="form-group" v-if="gift_options.corporate_matching"> <label for="corporate_matching_employer">Employer Name</label> <input class="form-control" id="donor.employer" name="donor.employer" type="text" v-model="gift_options.corporate_matching_employer"> </div> <div class="form-group"> <label for="special_instructions">Additional Information</label> <textarea class="form-control" id="special_instructions" name="special_instructions" v-model="gift_options.special_instructions"></textarea> <div class="Help form-text" :class="{ 'text-danger': (gift_options.special_instructions.length > 220) }"> <em>Character limit: <span v-html="gift_options.special_instructions.length"></span>/220</em><br> <span class="d-none text-danger" :class="{ 'd-block': (gift_options.special_instructions.length > 220) }">This message is over the character limit. Please shorten it to ensure we receive your full message.</span> </div> </div> <a href="#" @click.prevent='validateStep("step2", "billing");' class="mt-3 btn btn-primary btn-next"> Continue </a> <br><br> <a href="#" @click.prevent='validateStep("dummy", "donorInfo")' class="previous-link"> Go Back </a> </div> <div class="col-md-4 offset-md-2 Cart"> <div class="row BG__lightblue"> <div class="col-md-12 text-center pt-3 pb-2"> <h3>Gift Summary</h3> </div> </div> <div class="row" :class="{ 'Cart__edit': (cart.edit === key) }" v-for="(cart_item, key) in cart.items"> <div class="col-6 mt-2 mb-2"> {{ cart_item.designee.name }} </div> <div class="col-4 mt-2 mb-2 text-right"> <span class="Cart__amount" v-if="cart_item.donation_amount"> ${{ parseFloat(cart_item.donation_amount).toFixed(2) }} </span> <input v-if="cart.edit === key" v-model.number="cart_item.donation_amount" type="number" class="form-control-sm w-100" :min="5" min="5" :class="{ 'Cart__editerror': (cart_item.donation_amount < 5) }"> </div> <div class="col-2 mt-2 mb-2 text-center"> <a class="Cart__editlink" @click="cart.edit = key"> <i class="far fa-edit"></i> </a> <a class="Cart__remove" @click="cart.items.splice(key, 1); if(cart.items.length == 0){ go_to_route('home'); }"> <i class="fas fa-times"></i> </a> <a class="Cart__update d-none" v-if="cart_item.donation_amount >= 5" @click="cart.edit = ''"> <i class="fas fa-check"></i> </a> </div> <div class="alert alert-danger w-100 text-center" role="alert" v-if="cart_item.donation_amount < 5"> Minimum donation of $5 is required </div> </div> <div class="row mt-3 pt-3 BG__lightblue"> <div class="col-8 mt-2 mb-2"> <b>Donation Type:</b> </div> <div class="col-4 mt-2 mb-2 text-right" style="text-transform: capitalize; font-weight: bold;"> {{ cart.donation_type }} </div> </div> <div class="row pb-3 BG__lightblue"> <div class="col-8"> <b>Gift Total:</b> </div> <div class="col-4 text-right"> <b>{{ cart_total }}</b> </div> </div> </div> </div> </div> </div> </section>   <section data-route="billing" id="step3" name="step3" class="Steps Step3"> <div class="container-fluid Jumbotron text-center"> <div class="container"> <div class="row"> <div class="col-md-10 offset-md-1 Steps__header"> <ul class="Steps__nav"> <li> <a @click.prevent="go_to_route('donorInfo', 1)" href="#" class="progress-step" :class="" id="progress-step-2"> <h4>1. Your Information</h4> </a> </li> <li> <a @click.prevent="go_to_route('giftOptions', 2)" href="#" class="progress-step" :class="" id="progress-step-3"> <h4>2. Gift Options</h4> </a> </li> <li> <a @click.prevent="go_to_route('billing', 3)" href="#" class="progress-step current" :class="" id="progress-step-4"> <h4>3. Billing Information</h4> </a> </li> <li> <a @click.prevent="go_to_route('review', 4)" href="#" class="progress-step" :class="" id="progress-step-5"> <h4>4. Review</h4> </a> </li> </ul> </div> </div> </div> </div> <div class="container-fluid Steps__form"> <div class="container"> <div class="row"> <div class="col-md-6"> <div v-if="review_page.show_error == true" class="alert alert-danger" id="error-processing required-field-error-message" role="alert"> {{ error_message.api_response }} </div> <div class="alert alert-danger d-none" id="required-field-error-message" role="alert"> Please fill out the required fields. </div> <h2 class="mb-5">Billing Information</h2> <div class="form-group"> <label for="billing_first_name">Cardholder First Name (required)</label> <div class="form-row"> <div class="col"> <label for="billing_first_name" class="sr-only">Billing First Name</label> <input class="form-control" id="billing_first_name" name="billing.name.first" type="text" data-validate="true" data-required="true" data-error="Please enter billing first name" v-model="billing_information.billing_name_first"> </div> </div> </div> <div class="form-group"> <label for="billing_last_name">Cardholder Last Name (required)</label> <div class="form-row"> <div class="col"> <label for="billing_last_name" class="sr-only">Billing Last Name</label> <input class="form-control" id="billing_last_name" name="billing.name.last" type="text" data-validate="true" data-required="true" data-error="Please enter billing last name" v-model="billing_information.billing_name_last"> </div> </div> </div> <div class="form-group"> <label for="card_number">Credit Card Number (required)</label> <input class="form-control" name="card_number" id="card_number" type="text" data-validate="true" data-required="true" data-error="Please enter credit card number" v-model="billing_information.card_number"> </div> <div class="form-group exp-cvv-container"> <div class="form-row row"> <div class="col exp-month-container"> <label for="expiration_date">Expiry (required)</label> <label for="card_exp_date_month" class="sr-only">Expiry month (required)</label> <select class="form-control form-select" name="card_exp_date_month" data-validate="true" data-required="true" data-error="Please select month" v-model="billing_information.card_exp_date_month"> <option selected disabled value="">MM</option> <option value="1">01</option> <option value="2">02</option> <option value="3">03</option> <option value="4">04</option> <option value="5">05</option> <option value="6">06</option> <option value="7">07</option> <option value="8">08</option> <option value="9">09</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> </select> </div> <div class="col exp-year-container"> <label for="card_exp_date_year"> </label> <label for="card_exp_date_year" class="sr-only">Expiry year (required)</label> <select class="form-control form-select" name="card_exp_date_year" data-validate="true" data-required="true" data-error="Please select year" v-model="billing_information.card_exp_date_year"> <option selected disabled value="">YY</option> <option value="2024">2024</option> <option value="2025">2025</option> <option value="2026">2026</option> <option value="2027">2027</option> <option value="2028">2028</option> <option value="2029">2029</option> <option value="2030">2030</option> <option value="2031">2031</option> </select> </div> <div class="col cvv-container"> <label for="card_cvv">CVV (required)</label> <input class="form-control" name="card_cvv" type="text" data-validate="true" data-required="true" data-error="Please enter security code" v-model="billing_information.card_cvv"> </div> </div> </div> <div class="form-group"> <label for="billing_address_country">Country (required)</label> <select class="form-control form-select" id="billing_address_country" name="billing.address.country" data-validate="true" data-required="true" data-error="Please select country" v-model="billing_information.billing_address_country"> <option selected value="">Select</option> <option value="Canada">Canada</option> <option value="United States">United States</option> <option value="United Kingdom">United Kingdom</option> <option value="Afghanistan">Afghanistan</option> <option value="Albania">Albania</option> <option value="Algeria">Algeria</option> <option value="American Samoa">American Samoa</option> <option value="Andorra">Andorra</option> <option value="Angola">Angola</option> <option value="Anguilla">Anguilla</option> <option value="Antarctica">Antarctica</option> <option value="Antigua and Barbuda">Antigua and Barbuda</option> <option value="Argentina">Argentina</option> <option value="Armenia">Armenia</option> <option value="Aruba">Aruba</option> <option value="Australia">Australia</option> <option value="Austria">Austria</option> <option value="Azerbaijan">Azerbaijan</option> <option value="Bahamas">Bahamas</option> <option value="Bahrain">Bahrain</option> <option value="Bangladesh">Bangladesh</option> <option value="Barbados">Barbados</option> <option value="Belarus">Belarus</option> <option value="Belgium">Belgium</option> <option value="Belize">Belize</option> <option value="Benin">Benin</option> <option value="Bermuda">Bermuda</option> <option value="Bhutan">Bhutan</option> <option value="Bolivia">Bolivia</option> <option value="Bosnia and Herzegovina">Bosnia and Herzegovina</option> <option value="Botswana">Botswana</option> <option value="Bouvet Island">Bouvet Island</option> <option value="Brazil">Brazil</option> <option value="British Indian Ocean Territory">British Indian Ocean Territory</option> <option value="Brunei Darussalam">Brunei Darussalam</option> <option value="Bulgaria">Bulgaria</option> <option value="Burkina Faso">Burkina Faso</option> <option value="Burundi">Burundi</option> <option value="Cambodia">Cambodia</option> <option value="Cameroon">Cameroon</option> <option value="Cape Verde">Cape Verde</option> <option value="Cayman Islands">Cayman Islands</option> <option value="Central African Republic">Central African Republic</option> <option value="Chad">Chad</option> <option value="Chile">Chile</option> <option value="China">China</option> <option value="Christmas Island">Christmas Island</option> <option value="Cocos (Keeling) Islands">Cocos (Keeling) Islands</option> <option value="Colombia">Colombia</option> <option value="Comoros">Comoros</option> <option value="Congo">Congo</option> <option value="Congo, The Democratic Republic of The">Congo, The Democratic Republic of The </option> <option value="Cook Islands">Cook Islands</option> <option value="Costa Rica">Costa Rica</option> <option value="Cote D'ivoire">Cote D'ivoire</option> <option value="Croatia">Croatia</option> <option value="Cuba">Cuba</option> <option value="Cyprus">Cyprus</option> <option value="Czech Republic">Czech Republic</option> <option value="Denmark">Denmark</option> <option value="Djibouti">Djibouti</option> <option value="Dominica">Dominica</option> <option value="Dominican Republic">Dominican Republic</option> <option value="Ecuador">Ecuador</option> <option value="Egypt">Egypt</option> <option value="El Salvador">El Salvador</option> <option value="Equatorial Guinea">Equatorial Guinea</option> <option value="Eritrea">Eritrea</option> <option value="Estonia">Estonia</option> <option value="Ethiopia">Ethiopia</option> <option value="Falkland Islands (Malvinas)">Falkland Islands (Malvinas)</option> <option value="Faroe Islands">Faroe Islands</option> <option value="Fiji">Fiji</option> <option value="Finland">Finland</option> <option value="France">France</option> <option value="French Guiana">French Guiana</option> <option value="French Polynesia">French Polynesia</option> <option value="French Southern Territories">French Southern Territories</option> <option value="Gabon">Gabon</option> <option value="Gambia">Gambia</option> <option value="Georgia">Georgia</option> <option value="Germany">Germany</option> <option value="Ghana">Ghana</option> <option value="Gibraltar">Gibraltar</option> <option value="Greece">Greece</option> <option value="Greenland">Greenland</option> <option value="Grenada">Grenada</option> <option value="Guadeloupe">Guadeloupe</option> <option value="Guam">Guam</option> <option value="Guatemala">Guatemala</option> <option value="Guinea">Guinea</option> <option value="Guinea-bissau">Guinea-bissau</option> <option value="Guyana">Guyana</option> <option value="Haiti">Haiti</option> <option value="Heard Island and Mcdonald Islands">Heard Island and Mcdonald Islands</option> <option value="Holy See (Vatican City State)">Holy See (Vatican City State)</option> <option value="Honduras">Honduras</option> <option value="Hong Kong">Hong Kong</option> <option value="Hungary">Hungary</option> <option value="Iceland">Iceland</option> <option value="India">India</option> <option value="Indonesia">Indonesia</option> <option value="Iran, Islamic Republic of">Iran, Islamic Republic of</option> <option value="Iraq">Iraq</option> <option value="Ireland">Ireland</option> <option value="Israel">Israel</option> <option value="Italy">Italy</option> <option value="Jamaica">Jamaica</option> <option value="Japan">Japan</option> <option value="Jordan">Jordan</option> <option value="Kazakhstan">Kazakhstan</option> <option value="Kenya">Kenya</option> <option value="Kiribati">Kiribati</option> <option value="Korea, Democratic People's Republic of">Korea, Democratic People's Republic of </option> <option value="Korea, Republic of">Korea, Republic of</option> <option value="Kuwait">Kuwait</option> <option value="Kyrgyzstan">Kyrgyzstan</option> <option value="Lao People's Democratic Republic">Lao People's Democratic Republic</option> <option value="Latvia">Latvia</option> <option value="Lebanon">Lebanon</option> <option value="Lesotho">Lesotho</option> <option value="Liberia">Liberia</option> <option value="Libyan Arab Jamahiriya">Libyan Arab Jamahiriya</option> <option value="Liechtenstein">Liechtenstein</option> <option value="Lithuania">Lithuania</option> <option value="Luxembourg">Luxembourg</option> <option value="Macao">Macao</option> <option value="Macedonia, The Former Yugoslav Republic of">Macedonia, The Former Yugoslav Republic of </option> <option value="Madagascar">Madagascar</option> <option value="Malawi">Malawi</option> <option value="Malaysia">Malaysia</option> <option value="Maldives">Maldives</option> <option value="Mali">Mali</option> <option value="Malta">Malta</option> <option value="Marshall Islands">Marshall Islands</option> <option value="Martinique">Martinique</option> <option value="Mauritania">Mauritania</option> <option value="Mauritius">Mauritius</option> <option value="Mayotte">Mayotte</option> <option value="Mexico">Mexico</option> <option value="Micronesia, Federated States of">Micronesia, Federated States of</option> <option value="Moldova, Republic of">Moldova, Republic of</option> <option value="Monaco">Monaco</option> <option value="Mongolia">Mongolia</option> <option value="Montserrat">Montserrat</option> <option value="Morocco">Morocco</option> <option value="Mozambique">Mozambique</option> <option value="Myanmar">Myanmar</option> <option value="Namibia">Namibia</option> <option value="Nauru">Nauru</option> <option value="Nepal">Nepal</option> <option value="Netherlands">Netherlands</option> <option value="Netherlands Antilles">Netherlands Antilles</option> <option value="New Caledonia">New Caledonia</option> <option value="New Zealand">New Zealand</option> <option value="Nicaragua">Nicaragua</option> <option value="Niger">Niger</option> <option value="Nigeria">Nigeria</option> <option value="Niue">Niue</option> <option value="Norfolk Island">Norfolk Island</option> <option value="Northern Mariana Islands">Northern Mariana Islands</option> <option value="Norway">Norway</option> <option value="Oman">Oman</option> <option value="Pakistan">Pakistan</option> <option value="Palau">Palau</option> <option value="Palestinian Territory, Occupied">Palestinian Territory, Occupied</option> <option value="Panama">Panama</option> <option value="Papua New Guinea">Papua New Guinea</option> <option value="Paraguay">Paraguay</option> <option value="Peru">Peru</option> <option value="Philippines">Philippines</option> <option value="Pitcairn">Pitcairn</option> <option value="Poland">Poland</option> <option value="Portugal">Portugal</option> <option value="Puerto Rico">Puerto Rico</option> <option value="Qatar">Qatar</option> <option value="Reunion">Reunion</option> <option value="Romania">Romania</option> <option value="Russian Federation">Russian Federation</option> <option value="Rwanda">Rwanda</option> <option value="Saint Helena">Saint Helena</option> <option value="Saint Kitts and Nevis">Saint Kitts and Nevis</option> <option value="Saint Lucia">Saint Lucia</option> <option value="Saint Pierre and Miquelon">Saint Pierre and Miquelon</option> <option value="Saint Vincent and The Grenadines">Saint Vincent and The Grenadines</option> <option value="Samoa">Samoa</option> <option value="San Marino">San Marino</option> <option value="Sao Tome and Principe">Sao Tome and Principe</option> <option value="Saudi Arabia">Saudi Arabia</option> <option value="Senegal">Senegal</option> <option value="Serbia and Montenegro">Serbia and Montenegro</option> <option value="Seychelles">Seychelles</option> <option value="Sierra Leone">Sierra Leone</option> <option value="Singapore">Singapore</option> <option value="Slovakia">Slovakia</option> <option value="Slovenia">Slovenia</option> <option value="Solomon Islands">Solomon Islands</option> <option value="Somalia">Somalia</option> <option value="South Africa">South Africa</option> <option value="South Georgia and The South Sandwich Islands">South Georgia and The South Sandwich Islands</option> <option value="Spain">Spain</option> <option value="Sri Lanka">Sri Lanka</option> <option value="Sudan">Sudan</option> <option value="Suriname">Suriname</option> <option value="Svalbard and Jan Mayen">Svalbard and Jan Mayen</option> <option value="Swaziland">Swaziland</option> <option value="Sweden">Sweden</option> <option value="Switzerland">Switzerland</option> <option value="Syrian Arab Republic">Syrian Arab Republic</option> <option value="Taiwan, Province of China">Taiwan, Province of China</option> <option value="Tajikistan">Tajikistan</option> <option value="Tanzania, United Republic of">Tanzania, United Republic of</option> <option value="Thailand">Thailand</option> <option value="Timor-leste">Timor-leste</option> <option value="Togo">Togo</option> <option value="Tokelau">Tokelau</option> <option value="Tonga">Tonga</option> <option value="Trinidad and Tobago">Trinidad and Tobago</option> <option value="Tunisia">Tunisia</option> <option value="Turkey">Turkey</option> <option value="Turkmenistan">Turkmenistan</option> <option value="Turks and Caicos Islands">Turks and Caicos Islands</option> <option value="Tuvalu">Tuvalu</option> <option value="Uganda">Uganda</option> <option value="Ukraine">Ukraine</option> <option value="United Arab Emirates">United Arab Emirates</option> <option value="United Kingdom">United Kingdom</option> <option value="United States">United States</option> <option value="United States Minor Outlying Islands">United States Minor Outlying Islands</option> <option value="Uruguay">Uruguay</option> <option value="Uzbekistan">Uzbekistan</option> <option value="Vanuatu">Vanuatu</option> <option value="Venezuela">Venezuela</option> <option value="Viet Nam">Viet Nam</option> <option value="Virgin Islands, British">Virgin Islands, British</option> <option value="Virgin Islands, U.S.">Virgin Islands, U.S.</option> <option value="Wallis and Futuna">Wallis and Futuna</option> <option value="Western Sahara">Western Sahara</option> <option value="Yemen">Yemen</option> <option value="Zambia">Zambia</option> <option value="Zimbabwe">Zimbabwe</option> </select> </div> <div class="form-group"> <label for="billing_address_street1">Street 1 (required)</label> <input class="form-control" id="billing_address_street1" name="billing.address.street1" type="text" data-validate="true" data-required="true" data-error="Please enter street 1" v-model="billing_information.billing_address_street1"> </div> <div class="form-group"> <label for="billing_address_street2">Street 2</label> <input class="form-control" id="billing_address_street2" name="billing.address.street2" type="text" v-model="billing_information.billing_address_street2"> </div> <div class="form-group"> <label for="billing_address_city">City (required)</label> <input class="form-control" id="billing_address_city" name="billing.address.city" type="text" data-validate="true" data-required="true" data-error="Please enter city" v-model="billing_information.billing_address_city"> </div> <div class="form-row"> <div class="form-group col"> <label for="billing_address_state">Province/State (required)</label> <select class="form-control form-select" id="billing_address_state" name="billing.address.state" data-validate="true" data-required="true" data-error="Please enter province" v-model="billing_information.billing_address_state"> <option selected value="">Select</option> <option value="AB">AB - Alberta</option> <option value="BC">BC - British Columbia</option> <option value="MB">MB - Manitoba</option> <option value="NB">NB - New Brunswick</option> <option value="NF">NF - Newfoundland and Labrador</option> <option value="NS">NS - Nova Scotia</option> <option value="NT">NT - Northwest Territories</option> <option value="NU">NU - Nunavut</option> <option value="ON">ON - Ontario</option> <option value="PE">PE - Prince Edward Island</option> <option value="QC">QC - Quebec</option> <option value="SK">SK - Saskatchewan</option> <option value="YT">YT - Yukon</option> <option value="AK">AK - Alaska</option> <option value="AL">AL - Alabama</option> <option value="AR">AR - Arkansas</option> <option value="AZ">AZ - Arizona</option> <option value="CA">CA - California</option> <option value="CO">CO - Colorado</option> <option value="CT">CT - Connecticut</option> <option value="DC">DC - District of Columbia</option> <option value="DE">DE- Delaware</option> <option value="FL">FL - Florida</option> <option value="GA">GA - Georgia</option> <option value="HI">HA - Hawaii</option> <option value="IA">IA - Iowa</option> <option value="ID">ID - Idaho</option> <option value="IL">IL - Illinois</option> <option value="IN">IN - Indiana</option> <option value="KS">KS - Kansas</option> <option value="KY">KY - Kentucky</option> <option value="LA">LA - Louisiana</option> <option value="MA">MA - Massachusetts</option> <option value="MD">MD - Maryland</option> <option value="ME">ME - Maine</option> <option value="MI">MI - Michigan</option> <option value="MN">MN - Minnesota</option> <option value="MO">MO - Missouri</option> <option value="MS">MS - Mississippi</option> <option value="MT">MT - Montana</option> <option value="NC">NC - North Carolina</option> <option value="ND">ND - North Dakota</option> <option value="NE">NE - Nebraska</option> <option value="NH">NH - New Hampshire</option> <option value="NJ">NJ - New Jersey</option> <option value="NM">NM - New Mexico</option> <option value="NV">NV - Nevada</option> <option value="NY">NY - New York</option> <option value="OH">OH - Ohio</option> <option value="OK">OK - Oklahoma</option> <option value="OR">OR - Oregon</option> <option value="PA">PA - Pennsylvania</option> <option value="RI">RI - Rhode Island</option> <option value="SC">SC - South Carolina</option> <option value="SD">SD - South Dakota</option> <option value="TN">TN - Tennessee</option> <option value="TX">TX - Texas</option> <option value="UT">UT - Utah</option> <option value="VA">VA - Virginia</option> <option value="VT">VT - Vermont</option> <option value="WA">WA - Washington</option> <option value="WI">WI - Wisconsin</option> <option value="WV">WV - West Virginia</option> <option value="WY">WY - Wyoming</option> <option value="AS">AS - American Samoa</option> <option value="FM">FM - Federated States of Micronesia</option> <option value="GU">GU - Guam</option> <option value="MH">MH - Marshall Islands</option> <option value="MP">MP - Northern Mariana Islands</option> <option value="PR">PR - Puerto Rico</option> <option value="PW">PW - Palau</option> <option value="VI">VI - Virgin Islands</option> <option value="AA">AA - Armed Forces Americas</option> <option value="AE">AE - Armed Forces</option> <option value="AP">AE - Armed Forces Pacific</option> <option value="None">Other</option> </select> </div> <div class="form-group col"> <label for="billing_address_zip">Postal Code (required)</label> <input class="form-control" id="billing_address_zip" name="billing.address.zip" type="text" data-validate="true" data-required="true" data-error="Please enter postal code" v-model="billing_information.billing_address_zip"> </div> </div> <a href="#" @click.prevent='validateStep("step3", "review")' class="btn btn-primary btn-next mt-3"> Continue </a> <br><br> <a href="#" @click.prevent='validateStep("dummy", "giftOptions")' class="previous-link"> Go Back </a> </div> <div class="col-md-4 offset-md-2 Cart"> <div class="row BG__lightblue"> <div class="col-md-12 text-center pt-3 pb-2"> <h3>Gift Summary</h3> </div> </div> <div class="row" :class="{ 'Cart__edit': (cart.edit === key) }" v-for="(cart_item, key) in cart.items"> <div class="col-6 mt-2 mb-2"> {{ cart_item.designee.name }} </div> <div class="col-4 mt-2 mb-2 text-right"> <span class="Cart__amount" v-if="cart_item.donation_amount"> ${{ parseFloat(cart_item.donation_amount).toFixed(2) }} </span> <input v-if="cart.edit === key" v-model.number="cart_item.donation_amount" type="number" class="form-control-sm w-100" :min="5" min="5" :class="{ 'Cart__editerror': (cart_item.donation_amount < 5) }"> </div> <div class="col-2 mt-2 mb-2 text-center"> <a class="Cart__editlink" @click="cart.edit = key"> <i class="far fa-edit"></i> </a> <a class="Cart__remove" @click="cart.items.splice(key, 1); if(cart.items.length == 0){ go_to_route('home'); }"> <i class="fas fa-times"></i> </a> <a class="Cart__update d-none" v-if="cart_item.donation_amount >= 5" @click="cart.edit = ''"> <i class="fas fa-check"></i> </a> </div> <div class="alert alert-danger w-100 text-center" role="alert" v-if="cart_item.donation_amount < 5"> Minimum donation of $5 is required </div> </div> <div class="row mt-3 pt-3 BG__lightblue"> <div class="col-8 mt-2 mb-2"> <b>Donation Type:</b> </div> <div class="col-4 mt-2 mb-2 text-right" style="text-transform: capitalize; font-weight: bold;"> {{ cart.donation_type }} </div> </div> <div class="row pb-3 BG__lightblue"> <div class="col-8"> <b>Gift Total:</b> </div> <div class="col-4 text-right"> <b>{{ cart_total }}</b> </div> </div> </div> </div> </div> </section>   <section data-route="review" id="step4" name="step4" class="Steps Step4"> <div class="container-fluid Jumbotron text-center"> <div class="container"> <div class="row"> <div class="col-md-10 offset-md-1 Steps__header"> <ul class="Steps__nav"> <li> <a @click.prevent="go_to_route('donorInfo', 1)" href="#" class="progress-step" :class="" id="progress-step-2"> <h4>1. Your Information</h4> </a> </li> <li> <a @click.prevent="go_to_route('giftOptions', 2)" href="#" class="progress-step" :class="" id="progress-step-3"> <h4>2. Gift Options</h4> </a> </li> <li> <a @click.prevent="go_to_route('billing', 3)" href="#" class="progress-step" :class="" id="progress-step-4"> <h4>3. Billing Information</h4> </a> </li> <li> <a @click.prevent="go_to_route('review', 4)" href="#" class="progress-step current" :class="" id="progress-step-5"> <h4>4. Review</h4> </a> </li> </ul> </div> </div> </div> </div> <div class="container-fluid Steps__form"> <div class="container"> <div class="row"> <div class="col-md-6"> <div v-if="review_page.show_error == true" class="alert alert-danger" id="error-processing required-field-error-message" role="alert"> {{ error_message.api_response }} </div> <h2 class="mb-5">Review</h2>  <div class="review-donation-info mt-5"> <h3>Donor Information</h3> <div class="form-group"> <span class="review-label">First name:</span><br> <span class="review-content"> {{ donor_information.donor_name_first }} </span> </div> <div class="form-group"> <span class="review-label">Last name:</span><br> <span class="review-content">{{ donor_information.donor_name_last }}</span> </div> <div class="form-group"> <span class="review-label">U of T affiliation:</span><br> <span class="review-content">{{ donor_information.uoftaffifl }}</span> </div> <div class="form-group"> <span class="review-label">Email address:</span><br> <span class="review-content">{{ donor_information.donor_email }}</span> </div> <div class="form-group"> <span class="review-label">Billing address:</span><br> <span class="review-content"> {{ billing_information.billing_address_street1 }} <br> <span v-if="billing_information.billing_address_street2">{{ billing_information.billing_address_street2 }}</span> {{ billing_information.billing_address_city }}, {{ billing_information.billing_address_state }} <br> {{ billing_information.billing_address_zip }} <br> {{ billing_information.billing_address_country }} </div> <h3>Payment Information</h3> <div class="form-group"> <span class="review-label">Cardholder name:</span> <span class="review-content">{{ billing_information.billing_name_first }} {{ billing_information.billing_name_last }}</span> </div>  <div class="form-group"> <span class="review-label">Expiry:</span> <span class="review-content">{{ billing_information.card_exp_date_month }}/{{ billing_information.card_exp_date_year }}</span> </div> </div> <div class="alert alert-warning" role="alert" v-if="cart.donation_type == 'monthly'"> By completing this step, you authorize the storing of this card account for a payment of {{ cart_total }} per chosen recurring schedule and future, agreed upon payments. </div> <button type="submit" v-if="!processing_donation" :disabled="processing_donation == true" class="mt-3 btn btn-primary donate-submit"> Submit </button> <button type="submit" v-if="processing_donation" :disabled="processing_donation == true" class="mt-3 btn btn-primary donate-submit"> <span v-if="processing_donation"><i class="fas fa-spinner fa-spin"></i></span> </button> <br><br> <a href="#" class="previous-link" @click.prevent='validateStep("dummy", "billing")'>Go Back</a> <br><br> <div class="alert alert-danger" role="alert"> <b>Please note</b>: once you have pressed the submit button, the page may take some time to process your donation. Please do not press the submit again or press the back button on your browser until you reach the confirmation page or receive an error message. For additional assistance, you can contact our Donations Management Office at 416-978-0811 or 1-800-463-6048. </div> </div> <div class="col-md-4 offset-md-2 Cart"> <div class="row BG__lightblue"> <div class="col-md-12 text-center pt-3 pb-2"> <h3>Gift Summary</h3> </div> </div> <div class="row" v-for="cart_item in cart.items"> <div class="col-7 mt-2 mb-2"> {{ cart_item.designee.name }} </div> <div class="col-3 mt-2 mb-2 text-right"> ${{ parseFloat(cart_item.donation_amount).toFixed(2) }} </div> <div class="col-2 mt-2 mb-2 text-center">  </div> </div> <div class="row mt-3 pt-3 BG__lightblue"> <div class="col-8 mt-2 mb-2"> <b>Donation Type:</b> </div> <div class="col-4 mt-2 mb-2 text-right" style="text-transform: capitalize; font-weight: bold;"> {{ cart.donation_type }} </div> </div> <div class="row pb-3 BG__lightblue"> <div class="col-8"> <b>Gift Total:</b> </div> <div class="col-4 text-right"> <b>{{ cart_total }}</b> </div> </div> </div> </div> </div> </div> </section>   <section data-route="thankyou" id="thankyou" name="thankyou" class="Thankyou Category Page__thankyou"> <div class="container-fluid Category__bg"> <div class="container Category__content"> <div class="row"> <div class="col-xl-10 offset-xl-1 col-lg-12"> <p class="text-xs Category__breadcrumb"> <a href="#/home"> <i class="fa-solid fa-chevron-left"></i> HOME </a> </p> <h1> Thank you for your support! </h1> </div> </div> </div> </div> <div class="container"> <div class="row"> <div class="col-xl-9 offset-xl-1 col-lg-12 mt-4 mb-3"> <div class="form-group"> <p class="section__paragraph">  Your gift of {{ successful_donation_response.amount }} will support student success, drive scientific discovery, power entrepreneurship and spark creativity both locally and around the globe. <br><br> In a few moments, you will receive a confirmation email with your charitable tax receipt. If you do not receive this within a few minutes, please check your junk mail. </p> </div> </div> </div> <div class="row"> <div class="col-xl-9 offset-xl-1 col-lg-12 mb-5"> <h3 class="my-auto pb-3">Gift Summary</h3> <p class="mb-2" v-for="(cart_item, index) in thankyoucart.items" :key="index"> {{ cart_item.designee.name }} : ${{ parseFloat(cart_item.donation_amount).toFixed(2) }} </p> <p> Donation type: {{ thankyoucart.donation_type }} </p> </div> </div> </div>  <div class="container-fluid Moments"> <div class="container border-left"> <div id="carouselExampleIndicators" data-ride="carousel" class="carousel slide"> <div class="carousel-inner"> <div class="carousel-item"> <div class="row"> <div class="col-lg-6 col-md-12 col-sm-12 my-auto Moments__content"> <div class="Moments__content--padd"> <img src="https://engage.utoronto.ca/custom/refresh/images/icon-quote.png" width="50" alt=""> <h1>“I think young people have the power to transform their communities and their countries.”</h1> <p class="text-small">—Emmanuela Alimlim (BA 2018 WDW)</p> <p class="text-small"> Emmanuela grew up in rural northern Kenya and was able to come to the University of Toronto courtesy of the Mastercard Foundation Scholars Program. </p> </div> </div> <div class="col-lg-6 col-md-12 col-sm-12 pl-0 pr-0 Moments__image align-self-end"> <img src="https://engage.utoronto.ca/custom/refresh/images/quote.png" alt="" class="img-fluid" width="80%"> </div> </div> </div>  <div class="carousel-item active"> <div class="row"> <div class="col-lg-6 col-md-12 col-sm-12 my-auto Moments__content"> <div class="Moments__content--padd"> <img src="https://engage.utoronto.ca/custom/refresh/images/icon-quote.png" width="50" alt=""> <h1>“I feel lucky that we were successful enough that I can give back to others.” </h1> <p class="text-small">—Judith Schurek (BASc 1958)</p> <p class="text-small"> Judith was one of the first women to earn a degree in mechanical engineering at the University of Toronto, and gave $1 million to establish two Pearson scholarships, in her name and her late husband’s. </p> </div> </div> <div class="col-lg-6 col-md-12 col-sm-12 pl-0 pr-0 Moments__image align-self-end">  <img src="https://engage.utoronto.ca/custom/refresh/images/quote.png" alt="" class="img-fluid" width="80%"> </div> </div> </div> </div> <ol class="carousel-indicators"> <li data-bs-target="#carouselExampleIndicators" data-slide-to="0" class=""></li> <li data-bs-target="#carouselExampleIndicators" data-slide-to="1" class=""></li> <li data-bs-target="#carouselExampleIndicators" data-slide-to="2" class="active"></li> </ol> </div> </div> </div>  <div class="section container mt-5"> <div class="row"> <div class="col-lg-12"> <h2 class="mb-5">Connect with your community today</h2> </div> </div> <div class="row"> <div class="col-lg-6"> <div class="card">  <div class="card-body"><a href="https://alumni.utoronto.ca/index.php/volunteer"> <h4>Help students reach their potential</h4> </a> <p class="card-text text-xs"> When you share your time and expertise, you help students achieve their goals and aspirations, and you prepare the next generation of leaders. Make a difference to our students—and to yourself! </p> <a href="https://alumni.utoronto.ca/index.php/volunteer" class="text-bold"> Browse opportunities <i class="fa-solid fa-chevron-right"></i> </a> </div> </div> </div> <div class="col-lg-6"> <div class="card">  <div class="card-body"><a href="https://alumni.utoronto.ca/hub"> <h4>Learn and share at alumni events</h4> </a> <p class="card-text text-xs"> Our lively events roster connects U of T alumni to fascinating people and ideas around the world. Learn the bold questions we’re asking. Become part of the conversation. </p> <a href="https://alumni.utoronto.ca/hub" class="text-bold"> Browse events <i class="fa-solid fa-chevron-right"></i> </a> </div> </div> </div> <div class="col-lg-6"> <div class="card">  <div class="card-body"><a href="https://secureca.imodules.com/s/731/form-blank/index.aspx?sid=731&gid=1&pgid=18265&cid=30223"> <h4>Get the latest news by email</h4> </a> <p class="card-text text-xs"> Make sure we have your current email to receive the latest news and inspiration from U of T. And alumni, we’ll keep you updated on your alum perks and benefits. </p> <a href="https://secureca.imodules.com/s/731/form-blank/index.aspx?sid=731&gid=1&pgid=18265&cid=30223" class="text-bold"> Update your email <i class="fa-solid fa-chevron-right"></i> </a> </div> </div> </div> <div class="col-lg-6"> <div class="card">  <div class="card-body"> <h4>Stay connected on social media</h4> <h5>Connect with the University of Toronto:</h5> <div class="Footer__social"> <a href="https://www.facebook.com/universitytoronto" target="_blank" class="fa-stack fa-lg BG__trueblue text-white"> <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 320 512"><path d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z"/></svg> </a> <a href="http://twitter.com/uoft" target="_blank" class="fa-stack fa-lg BG__trueblue text-white"> <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"/></svg> </a> <a href="https://www.youtube.com/user/universitytoronto" target="_blank" class="fa-stack fa-lg BG__trueblue text-white"> <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 576 512"><path d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"/></svg> </a> <a href="https://www.linkedin.com/company/university-of-toronto" target="_blank" class="fa-stack fa-lg BG__trueblue text-white"> <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512"><path d="M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z"/></svg> </a> </div> <h5 class="mt-4">Connect with the U of T alumni community:</h5c> <div class="Footer__social mt-2"> <a href="https://www.facebook.com/uoftalumni" target="_blank" class="fa-stack fa-lg BG__trueblue text-white"> <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 320 512"><path d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z"/></svg> </a> <a href="https://twitter.com/uoftalumni" target="_blank" class="fa-stack fa-lg BG__trueblue text-white"> <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"/></svg> </a> <a href="https://www.youtube.com/UniversityToronto" target="_blank" class="fa-stack fa-lg BG__trueblue text-white"> <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 576 512"><path d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"/></svg> </a> <a href="https://www.linkedin.com/school/university-of-toronto/" target="_blank" class="fa-stack fa-lg BG__trueblue text-white"> <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512"><path d="M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z"/></svg> </a> </div> </div> </div> </div> </div> </div> </section>   <section data-route="search" id="search" name="search" class="Search Category Page__search"> <div class="container-fluid Category__bg"> <div class="container Category__content"> <div class="row"> <div class="col-xl-10 offset-xl-1 col-lg-12"> <p class="text-xs Category__breadcrumb"> <a href="#/home"> <i class="fa-solid fa-chevron-left"></i> HOME </a> </p> <h1> Search Giving Opportunities </h1> </div> </div> </div> </div> <div class="container-fluid"> <div class="container"> <div class="row"> <div class="col-md-9 offset-md-1 mb-5"> <div class="form-group"> <input type="search" class="form-control border form-control-lg form-control-rounded mt-4" v-model="search.searchFunds" placeholder="start typing here.."> </div> </div> </div> <div class="row" v-if="search.searchFunds"> <div class="col-md-12 flexMasonryWrapper"> <div class="row flexMasonry"> <div class="col-lg-4 grid-item" v-if="search.searchFunds" v-for="(item, index) in searchFundsByKeyword" :key="index"> <div class="card" v-if="getSearchParentName(item).ptype == 'page'"> <a :href="getSearchParentName(item).purl" class=""> <img v-if="item.image" v-bind:src="item.image" class="w-100 img-fluid Category__results--image" alt=""> </a> <div class="card-header" v-if="getSearchParentName(item).ptype == 'fund'"> <span>{{ getParentName(item.id).pname }}</span> </div> <div class="card-body"> <a :href="getSearchParentName(item).purl"> <h4 class="name">{{ item.name }}</h4> </a> <p class="card-text" class="Vue__description" v-html="item.shortd"></p> <a :href="getSearchParentName(item).purl" class=""> Learn more <i class="fa-solid fa-chevron-right text-boundless"></i> </a> </div> </div> <div class="card" v-if="getSearchParentName(item).ptype !== 'page'"> <a :href="'#/' + getSearchParentName(item).ptype + '/' + item.id" class=""> <img v-if="item.image" v-bind:src="item.image" class="w-100 img-fluid Category__results--image" alt=""> </a> <div class="card-header" v-if="getSearchParentName(item).ptype == 'fund'"> <span>{{ getParentName(item.id).pname }}</span> </div> <div class="card-body"> <a :href="'#/' + getSearchParentName(item).ptype + '/' + item.id"> <h4 class="name">{{ item.name }}</h4> </a> <p class="card-text" class="Vue__description" v-html="getSearchParentName(item).pdescription"></p> <template v-if="getSearchParentName(item).ptype == 'fund'"> <a :href="'#/' + getSearchParentName(item).ptype + '/' + item.id" class="btn btn-primary"> Give now </a> </template> <template v-if="getSearchParentName(item).ptype !== 'fund'"> <a :href="'#/' + getSearchParentName(item).ptype + '/' + item.id" class=""> Browse giving Opportunities <i class="fa-solid fa-chevron-right text-boundless"></i> </a> </template> </div> </div> </div> </div> </div> </div> </div> </div> </section>  <div class="g-recaptcha" data-sitekey="" data-size="invisible"> </div> </form> </div>  <div class="Footer container-fluid"> <div class="container border-left"> <div class="row"> <div class="col" height="125"> </div> </div> </div> </div> <div class="Footer container-fluid bg-navyGradient"> <div class="container"> <div class="row"> <div class="col-md-4 Footer__left"> <img class="Footer__img" src="https://engage.utoronto.ca/custom/refresh/images/footer.png" alt=""> <br> <img class="Footer__wordmark" src="https://defygravitycampaign.utoronto.ca/wp-content/uploads/2021/09/defy-gravity-logo.svg" alt=""> <p class="text-small"> Canadian Charitable Registration <br> #108162330-RR0001 </p> </div> <div class="col-md-8 ps-lg-5 Footer__right"> <div class="row"> <div class="col-lg-6"> <h2>Give Now</h2> </div> </div> <div class="row"> <div class="col-lg-6"> <p class="text-xs">Help U of T address today's most pressing issues—here and around the world.</p> </div> <div class="col-lg-6"> <a href="https://engage.utoronto.ca/site/SPageServer?pagename=donate#makeagift" class="btn btn-primary">Give now</a> </div> </div> <div class="row Footer__info"> <div class="col-lg-6"> <h3>Contact Us</h3> <p class="text-xs"> <span class="icon-phone"></span> 416-978-1221 <br> <span class="icon-phone"></span> 1-800-463-6048 <br> <span class="icon-email"></span> <a href="mailto:donations.management@utoronto.ca" class="text-white">donations.management@utoronto.ca</a> </p> <br> <p class="text-xs"> University of Toronto <br> 21 King's College Circle <br> Toronto, Ontario, Canada <br> M5S 3J3 </p> </div> <div class="col-lg-6"> <h3>FAQ’s</h3> <p class="text-xs"> Get answers to our most-asked questions about giving, including tax implications and how we recognize your generosity. </p> <p> <a href="https://engage.utoronto.ca/site/SPageServer?pagename=faqs" class="btn btn-primary">Read FAQs</a> </p> <div class="footer__social"> <a class="twitter icon" href="https://twitter.com/uoftalumni" rel="noreferrer" target="_blank" style="font-size: 17px;"><svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"/></svg></a> <a class="facebook icon" href="https://www.facebook.com/uoftalumni" rel="noreferrer" target="_blank"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px"><title>Follow on Facebook</title> <path d="M16.403,9H14V7c0-1.032,0.084-1.682,1.563-1.682h0.868c0.552,0,1-0.448,1-1V3.064c0-0.523-0.401-0.97-0.923-1.005 C15.904,2.018,15.299,1.999,14.693,2C11.98,2,10,3.657,10,6.699V9H8c-0.552,0-1,0.448-1,1v2c0,0.552,0.448,1,1,1l2-0.001V21 c0,0.552,0.448,1,1,1h2c0.552,0,1-0.448,1-1v-8.003l2.174-0.001c0.508,0,0.935-0.381,0.993-0.886l0.229-1.996 C17.465,9.521,17.001,9,16.403,9z"></path> </svg></a> <a class="instagram icon" href="https://www.instagram.com/uoftalumni/" rel="noreferrer" target="_blank"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><title>Follow on Instagram</title> <path d="M16 2.881c4.275 0 4.781 0.019 6.462 0.094 1.563 0.069 2.406 0.331 2.969 0.55 0.744 0.288 1.281 0.638 1.837 1.194 0.563 0.563 0.906 1.094 1.2 1.838 0.219 0.563 0.481 1.412 0.55 2.969 0.075 1.688 0.094 2.194 0.094 6.463s-0.019 4.781-0.094 6.463c-0.069 1.563-0.331 2.406-0.55 2.969-0.288 0.744-0.637 1.281-1.194 1.837-0.563 0.563-1.094 0.906-1.837 1.2-0.563 0.219-1.413 0.481-2.969 0.55-1.688 0.075-2.194 0.094-6.463 0.094s-4.781-0.019-6.463-0.094c-1.563-0.069-2.406-0.331-2.969-0.55-0.744-0.288-1.281-0.637-1.838-1.194-0.563-0.563-0.906-1.094-1.2-1.837-0.219-0.563-0.481-1.413-0.55-2.969-0.075-1.688-0.094-2.194-0.094-6.463s0.019-4.781 0.094-6.463c0.069-1.563 0.331-2.406 0.55-2.969 0.288-0.744 0.638-1.281 1.194-1.838 0.563-0.563 1.094-0.906 1.838-1.2 0.563-0.219 1.412-0.481 2.969-0.55 1.681-0.075 2.188-0.094 6.463-0.094zM16 0c-4.344 0-4.887 0.019-6.594 0.094-1.7 0.075-2.869 0.35-3.881 0.744-1.056 0.412-1.95 0.956-2.837 1.85-0.894 0.888-1.438 1.781-1.85 2.831-0.394 1.019-0.669 2.181-0.744 3.881-0.075 1.713-0.094 2.256-0.094 6.6s0.019 4.887 0.094 6.594c0.075 1.7 0.35 2.869 0.744 3.881 0.413 1.056 0.956 1.95 1.85 2.837 0.887 0.887 1.781 1.438 2.831 1.844 1.019 0.394 2.181 0.669 3.881 0.744 1.706 0.075 2.25 0.094 6.594 0.094s4.888-0.019 6.594-0.094c1.7-0.075 2.869-0.35 3.881-0.744 1.050-0.406 1.944-0.956 2.831-1.844s1.438-1.781 1.844-2.831c0.394-1.019 0.669-2.181 0.744-3.881 0.075-1.706 0.094-2.25 0.094-6.594s-0.019-4.887-0.094-6.594c-0.075-1.7-0.35-2.869-0.744-3.881-0.394-1.063-0.938-1.956-1.831-2.844-0.887-0.887-1.781-1.438-2.831-1.844-1.019-0.394-2.181-0.669-3.881-0.744-1.712-0.081-2.256-0.1-6.6-0.1v0z"></path> <path d="M16 7.781c-4.537 0-8.219 3.681-8.219 8.219s3.681 8.219 8.219 8.219 8.219-3.681 8.219-8.219c0-4.537-3.681-8.219-8.219-8.219zM16 21.331c-2.944 0-5.331-2.387-5.331-5.331s2.387-5.331 5.331-5.331c2.944 0 5.331 2.387 5.331 5.331s-2.387 5.331-5.331 5.331z"></path> <path d="M26.462 7.456c0 1.060-0.859 1.919-1.919 1.919s-1.919-0.859-1.919-1.919c0-1.060 0.859-1.919 1.919-1.919s1.919 0.859 1.919 1.919z"></path> </svg></a> <a class="linkdin icon" href="https://www.linkedin.com/school/university-of-toronto" rel="noreferrer" target="_blank"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" width="30px" height="30px"><title>Follow on LinkedIn</title> <path d="M9,25H4V10h5V25z M6.501,8C5.118,8,4,6.879,4,5.499S5.12,3,6.501,3C7.879,3,9,4.121,9,5.499C9,6.879,7.879,8,6.501,8z M27,25h-4.807v-7.3c0-1.741-0.033-3.98-2.499-3.98c-2.503,0-2.888,1.896-2.888,3.854V25H12V9.989h4.614v2.051h0.065 c0.642-1.18,2.211-2.424,4.551-2.424c4.87,0,5.77,3.109,5.77,7.151C27,16.767,27,25,27,25z"></path> </svg></a> <a class="youtube icon" href="https://www.youtube.com/user/universitytoronto" rel="noreferrer" target="_blank"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="50px" height="50px"><title>Follow on YouTube</title> <path d="M 44.898438 14.5 C 44.5 12.300781 42.601563 10.699219 40.398438 10.199219 C 37.101563 9.5 31 9 24.398438 9 C 17.800781 9 11.601563 9.5 8.300781 10.199219 C 6.101563 10.699219 4.199219 12.199219 3.800781 14.5 C 3.398438 17 3 20.5 3 25 C 3 29.5 3.398438 33 3.898438 35.5 C 4.300781 37.699219 6.199219 39.300781 8.398438 39.800781 C 11.898438 40.5 17.898438 41 24.5 41 C 31.101563 41 37.101563 40.5 40.601563 39.800781 C 42.800781 39.300781 44.699219 37.800781 45.101563 35.5 C 45.5 33 46 29.398438 46.101563 25 C 45.898438 20.5 45.398438 17 44.898438 14.5 Z M 19 32 L 19 18 L 31.199219 25 Z"></path> </svg> </a></div> </div> </div> </div> </div> </div> <div class="row Copyright"> <div class="col text-start"> <p class="text-xs"><a class="text-white" href="https://engage.utoronto.ca/site/SPageServer?pagename=privacy">Privacy</a></p> </div> <div class="col text-end"> <p class="text-xs">Copyright 2023 - All rights reserved</p> </div> </div> </div>     <script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"> import 'promise-polyfill/src/polyfill'; </script> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.10.4/polyfill.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/js-signals/1.0.0/js-signals.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/hasher/1.2.0/hasher.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/crossroads/0.12.2/crossroads.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.min.js"></script> <script src="https://engage.utoronto.ca/js/luminateExtend.min.js"></script> <div id="recaptcha-container"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js" integrity="sha512-z4OUqw38qNLpn1libAN9BsoDx6nbNFio5lA6CuTp9NlK83b89hgyCVq+N5FdBJptINztxn1Z3SaKSKUS5UP60Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script src="https://unpkg.com/flexmasonry/dist/flexmasonry.js"></script> <script> var DonationForm = {} if(document.getElementById('donation_form_id')){ var formID = parseInt(document.getElementById('donation_form_id').value); } function getUrlParameter(name) { name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]') var regex = new RegExp('[\\?&]' + name + '=([^&#]*)') var results = regex.exec(location.search) return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' ')) } // Initiating LO luminateExtend.init({ apiKey: 'Q2F8xD8W4qAiXuYn', path: { nonsecure: 'http://uot.convio.net/site/', secure: 'https://engage.utoronto.ca/site/' } }); $('document').ready(function () { var anchor = ""; // var anchored = localStorage.getItem("anchored"); var anchored = 0; if (anchor && anchored < 1) { // localStorage.setItem("anchored", "true"); anchored++ $('html, body').animate({ // scrollTop: $("#").offset().top }); } illuminate.getJSON(); $.ajax({ url: "https://engage.utoronto.ca/site/CRDonationAPI", method: "POST", data: 'method=getDonationFormInfo&v=1.0&api_key=Q2F8xD8W4qAiXuYn&form_id=1620', success: function (result) { console.log("CapCall: " + $(result).find('recaptchaData publicKey').text()); illuminate.recaptchaKey = $(result).find('recaptchaData publicKey').text(); $(".g-recaptcha").attr('data-sitekey', $(result).find('recaptchaData publicKey').text()); $.getScript("https://www.google.com/recaptcha/api.js?render=" + illuminate.recaptchaKey); } }); $(document).keypress( function (event) { if (event.which == '13') { event.preventDefault(); } }); //handling donation levels toggle $('[data-toggle="collapse"]').on('click', function (e) { if ($(this).parentsUntil('.accordion').find('.collapse.show')) { var idx = $(this).index('[data-toggle="collapse"]'); if (idx == $('.collapse.show').index('.collapse')) { e.stopPropagation(); } } }); var showPage = function (newHash) { // console.log("Showing Page for:" + newHash); illuminate.domdom.body = newHash.replace(/[0-9]/g, '').replace(/\s/g, '').replace(/\//g, ''); $("body").attr("data-class", ""); $("body").attr("data-class", newHash); $('section').addClass("d-none"); $('section').each(function () { if ($(this).attr('data-route')) { var route = $(this).attr('data-route'); newHash = newHash.replace(/[0-9]/g, '').replace(/\s/g, '').replace(/\//g, ''); if (newHash.indexOf('&') > -1) { newHash = newHash.substring(0, newHash.indexOf('&')); } // console.log("Cleaned hash for showing page:" + newHash); if (route == newHash) { $(this).removeClass("d-none"); } } }) }; function godspeed(title) { if (window.location.href.indexOf("engage") > -1) { window.dataLayer.push({ 'event': 'virtualPageview', 'pagePath': window.location.href, 'pageTitle': title }); } } var vic = crossroads.addRoute("/vicaf", function () { window.location.href = "https://my.alumni.utoronto.ca/s/731/index.aspx?sid=731&gid=3&pgid=1051&cid=1952&ecid=1952"; }); //HomePage var home = crossroads.addRoute("/home", function () { illuminate.search.searchFunds = ''; illuminate.show.page = 'home'; godspeed('Home'); }); // Hub Pages var faculties = crossroads.addRoute("/faculties-institutes", function () { godspeed('Faculty and Institutes'); illuminate.show.page = 'faculties-institutes'; }); var facultiesDepartments = crossroads.addRoute("/faculty-departments/{id}", function (id) { illuminate.show.facultyDepartment = id; illuminate.show.page = 'faculty-department'; godspeed('Faculty Department'); }); var facultiesClassGiving = crossroads.addRoute("/faculty-class-giving/{id}", function (id) { illuminate.show.facultyClassGiving = id; illuminate.show.page = 'faculties-class-giving'; godspeed('Faculty Class Giving'); }); var facultiesOther = crossroads.addRoute("/other-giving-opportunities/{id}", function (id) { illuminate.show.facultyOther = id; illuminate.show.page = 'other-giving-opportunities'; godspeed('Other Giving Opportunities'); }); var faculties = crossroads.addRoute("/colleges-campuses-communities", function () { illuminate.show.page = 'colleges-campuses-communities'; godspeed('College Campus Communities'); }); var faculties = crossroads.addRoute("/special-projects-initiatives", function () { illuminate.show.page = 'special-projects-initiatives'; godspeed('Special Project Initiatives'); }); var home = crossroads.addRoute("/search", function () { // illuminate.search.searchFunds = ''; illuminate.show.page = 'search'; godspeed('Search'); }); var direct = crossroads.addRoute("/direct", function () { illuminate.direct.category = ''; illuminate.direct.collection = ''; illuminate.direct.department = ''; illuminate.direct.faculty = ''; illuminate.direct.area = ''; illuminate.direct.entity = ''; illuminate.show.faculty = ''; illuminate.direct.fund = ''; godspeed('Direct your Gift'); illuminate.show.page = 'direct'; }); var makeagift = crossroads.addRoute("/makeagift", function () { godspeed('Make a Gift'); illuminate.show.page = 'makeagift'; }); var pressingNeeds = crossroads.addRoute("/pressing-needs", function () { godspeed('Pressing Needs'); illuminate.show.page = 'pressing-needs'; }); // Individual Category Pages var viewCampus = crossroads.addRoute("/campus/{id}", function (id) { illuminate.show.campus = id; godspeed('Campus'); illuminate.show.page = 'campus'; }); var viewCollection = crossroads.addRoute("/collection/{id}", function (id) { illuminate.show.collection = id; godspeed('Collection'); illuminate.show.page = 'collection'; }); var viewCollege = crossroads.addRoute("/college/{id}", function (id) { illuminate.show.college = id; godspeed('College'); illuminate.show.page = 'college'; }); var viewDepartment = crossroads.addRoute("/department/{id}", function (id) { illuminate.show.department = id; godspeed('Department'); illuminate.show.page = 'department'; }); var viewFaculty = crossroads.addRoute("/faculty/{id}", function (id) { illuminate.show.faculty = id; godspeed('Faculty'); illuminate.show.page = 'faculty'; }); var viewInstitute = crossroads.addRoute("/institute/{id}", function (id) { illuminate.show.institute = id; //Adding a manual redirect for HART HOUSE if(id == 3){ window.location.replace("https://engage.utoronto.ca/site/SPageServer?pagename=donate#/campus/4") } godspeed('Institute'); illuminate.show.page = 'institute'; }); var viewInitiative = crossroads.addRoute("/initiative/{id}", function (id) { illuminate.show.initiative = id; godspeed('Initiative'); illuminate.show.page = 'initiative'; }); // Individual Fund Pages var viewFund = crossroads.addRoute("/fund/{id}", function (id) { illuminate.show.fund = id; illuminate.direct.fund = id; godspeed('Fund'); illuminate.show.page = 'fund'; }); var viewCustomFundPage = crossroads.addRoute("/customfundpage/{id}", function (id) { illuminate.show.fund = id; illuminate.direct.fund = id; godspeed('Custom Fund Page'); illuminate.show.page = 'customfundpage'; }); // var viewFund = crossroads.addRoute("/fund/{id}/{slug}", function (id) { // illuminate.show.fund = id; // illuminate.direct.fund = id; // godspeed('Fund'); // }); // var viewFund = crossroads.addRoute("/fund/show/{slug}", function (slug) { // illuminate.show.fund = id; // illuminate.direct.fund = id; // godspeed('Fund'); // }); //Form Routes var viewFund = crossroads.addRoute("/donorInfo", function (id) { godspeed('Donor Information'); if (illuminate.cart.items.length == 0) { illuminate.go_to_route('home'); } }); var viewFund = crossroads.addRoute("/giftOptions", function (id) { godspeed('Gift Options'); if (illuminate.cart.items.length == 0) { illuminate.go_to_route('home'); } }); var viewFund = crossroads.addRoute("/billing", function (id) { godspeed('Billing'); if (illuminate.cart.items.length == 0) { illuminate.go_to_route('home'); } }); var viewFund = crossroads.addRoute("/review", function (id) { godspeed('Review'); if (illuminate.cart.items.length == 0) { illuminate.go_to_route('home'); } }); var thankYou = crossroads.addRoute("/thankyou", function (id) { godspeed('Thank you '); }); function getJsonFromUrl(url) { if (!url) url = decodeURI(location.href).replace(/\s/g, ''); var question = url.indexOf("?"); var hash = url.indexOf("#"); if (hash == -1 && question == -1) return {}; if (hash == -1) hash = url.length; var query = question == -1 || hash == question + 1 ? url.substring(hash) : url.substring(question + 1, hash); var result = {}; query.split("&").forEach(function (part) { if (!part) return; part = part.split("+").join(" "); var eq = part.indexOf("="); var key = eq > -1 ? part.substr(0, eq) : part; var val = eq > -1 ? decodeURIComponent(part.substr(eq + 1)) : ""; var from = key.indexOf("["); if (from == -1) result[decodeURIComponent(key)] = val; else { var to = key.indexOf("]", from); var index = decodeURIComponent(key.substring(from + 1, to)); key = decodeURIComponent(key.substring(0, from)); if (!result[key]) result[key] = []; if (!index) result[key].push(val); else result[key][index] = val; } }); return result; } // setup hasher function parseHash(newHash, oldHash) { if (newHash) { newHash = decodeURI(newHash.replace(/\s/g, '')); } if (oldHash) { oldHash = decodeURI(oldHash.replace(/\s/g, '')); } var hash = decodeURI(window.location.href.split('#')[1]).replace(/\s/g, ''); hash = hash.split('&')[0]; var URLJSON = getJsonFromUrl(hash); //Check if URL has parameters if (Object.keys(URLJSON).length > 0) { // console.log("Routing Case 1"); // console.log("Going to CrossRoads: " + decodeURI(hash.split('?')[0]).replace(/\s/g, '')); crossroads.parse(decodeURI(window.location.hash.split('?')[0]).replace(/\s/g, '')); showPage(hash.split('?')[0]); } else { // console.log("Routing Case 2"); showPage(newHash); crossroads.parse(hash); } document.body.scrollTop = document.documentElement.scrollTop = 0; if (newHash == "") { // console.log("Routing Case 3"); hasher.setHash('home'); showPage("home"); illuminate.show.page = "home"; $("#app").attr("data-show", "home"); crossroads.parse(newHash); } } hasher.initialized.add(parseHash); hasher.changed.add(parseHash); hasher.init(); }); const illuminate = new Vue({ el: '#app', data: { payroll:{ cons_first_name: '', cons_last_name: '', cons_email: '', donor_phone: '', frequency: '1 year (12 deductions)', other: '', personnelnumber: '', giftamount: '', designationname: '', }, domdom: { body: '' }, analytics: { affiliation: '', affiliationType: '', }, recaptchaKey: '', database: { campuses: [], colleges: [], contacts: [], departments: [], collections: [], faculties: [], institutes: [], initiatives: [], funds: [], pages: [ { "id": "1", "name": "Ways to give", "keyword": "Other ways to give", "shortd": "From company matching to legacy giving, there are many ways to make a difference. Your gift will help U of T address today's most pressing issues—here and around the world.", "url": "https://engage.utoronto.ca/site/SPageServer?pagename=ways_to_give", "type": "page" }, { "id": "2", "name": "Gift Planning", "keyword": "Legacy Planning", "shortd": "How do I plan a tax-smart or legacy gift to the University of Toronto?", "url": "https://engage.utoronto.ca/site/SPageServer?pagename=gift_planning", "type": "page" }, { "id": "3", "name": "Contact Us", "keyword": "General Inquiries and Donations", "shortd": "Consult our FAQ or contact us directly if you have questions about giving, including tax implications and how we recognize your generosity", "url": "https://engage.utoronto.ca/site/SPageServer?pagename=contact_us", "type": "page" }, ], }, search: { searchFunds: '', searchFacultyInstitute: '', searchCollegeCampusCommunity: '', searchSpecialProjectInitiative: '', searchFundsByKeyword: '', searchFacultyDepartment: '', searchFacultyClassGiving: '', searchFacultyOther: '' }, show: { campus: '', collection: '', college: '', department: '', faculty: '', institute: '', initiative: '', fund: '', facultyDepartment: '', facultyClassGiving: '', facultyOther: '', page: '', }, global: { designation_types: [], designees: [] }, current_step: 1, current_donation: { designation_type: '', designees: [], designee: { id: '', name: '', arborID: '', description: '', }, donation_amount: '', donation_amount_other: '', donation_type: '' || 'one-time' }, cart: { edit: null, donation_type: '', items: [] }, thankyoucart: { donation_type: '', items: [] }, url_params: { finderNumber: '', sourceCode: '', consID: '', donationAmount: '', donationFrequency: '', designationID: '', divisionName: '', userAffiliation: '' }, donor_information: { is_corporate_gift: false, corporate_name: '', donor_name_first: '', donor_name_last: '', donor_email: '', donor_email_opt_in: true, donor_phone: '', uoftaffifl: '', giftPlanning: '' }, gift_options: { tribute_show_honor_fields: false, tribute_type: '', tribute_honoree_name_full: '', send_card_option: false, send_card_type: 'none', ecard_recipients: '', ecard_id: '', ecard_src: '', ecard_subject: '', ecard_message: '', ecard_copy_sender: '', tribute_notify_name_full: '', tribute_notify_address_street1: '', tribute_notify_address_street2: '', tribute_notify_address_city: '', tribute_notify_address_state: '', tribute_notify_address_zip: '', tribute_notify_address_country: '', printed_card_message: '', joint_donor_option: false, joint_donor_name_first: '', joint_donor_name_last: '', anonymous: false, pledge_payment: false, pledge_id: '', gift_options: '', corporate_matching: false, corporate_matching_employer: '', special_instructions: '' }, billing_information: { billing_name_first: '', billing_name_last: '', card_number: '', card_exp_date_month: '', card_exp_date_year: '', card_cvv: '', billing_address_country: '', billing_address_street1: '', billing_address_street2: '', billing_address_city: '', billing_address_state: '', billing_address_zip: '' }, form_step_1: { show_error: false }, form_step_2: { show_error: false }, form_step_3: { show_error: false }, form_step_4: { show_error: false }, review_page: { show_error: false }, error_message: { api_response: '' }, processing_donation: false, successful_donation: false, successful_donation_response: { amount: '' }, direct: { category: '', department: '', collection: '', entity: '', area: '', faculty: '', fund: 0, facultyInstitute: [], }, metaInfo: { title: 'Donate | University of Toronto', }, customFundPage: { donlevels: '' //donlevels: '100,200,300,400,500' }, }, watch: { 'gift_options.ecard_id': function (newVal, oldVal) { imgSRC = document.getElementById("stationery_layout_id_" + newVal + "_image").src; this.gift_options.ecard_src = imgSRC; }, }, methods: { scrollToElement: function(el){ el = el.replace("#", ""); document.getElementById(el).scrollIntoView(); }, getFacultyNameByID: function (facID) { if(facID){ return _.find(this.database.faculties, ['id', facID]); }else{ return _.find(this.database.faculties, ['id', parseInt(this.show.faculty)]); } }, getDescriptionSubstring: function(description){ var html = description; var div = document.createElement("div"); div.innerHTML = html; if(description.length < 251){ return div.innerText.substring(0,250); }else{ return div.innerText.substring(0,250) + '...' } }, copyECardImage: function (img) { this.gift_options.ecard_src = img.srcElement.src; }, autopopulate_donation_from_url: function () { if (this.url_params.donationAmount !== '' && this.url_params.donationFrequency !== '' && this.url_params.desigationID !== '') { this.cart.donation_type = this.url_params.donationFrequency var add_donation = { designee: { id: this.url_params.designationID }, donation_amount: this.url_params.donationAmount } for (var i = 0; i < this.global.designees.length; i++) { if (this.global.designees[i].id == this.url_params.designationID) { add_donation.designee.name = this.global.designees[i].name } } this.cart.items.push(add_donation) this.go_to_route('donorInfo') } }, continue_to_billing_info: function () { if (this.current_donation.designee === '' || this.current_donation.donation_amount === '') { this.form_step_1.show_error = true // this.scroll_to_top() return } if (this.current_donation.donation_amount === 'other' && parseFloat(this.current_donation.donation_amount_other) < 5) { this.form_step_1.show_error = true // this.scroll_to_top() return } this.form_step_1.show_error = false; this.add_to_cart(); hasher.setHash('donorInfo'); }, add_to_cart: function () { checkIfFundAlreadyAdded = illuminate.cart.items.filter((item) => { return (item.designee.id == this.current_donation.designee.id) }) if (checkIfFundAlreadyAdded.length > 0) { alert("This gift cannot be added to your cart, as a gift to the same fund is already in your cart. If you wish to change the gift amount, you may edit it in the Gift Summary section of checkout."); } else { var designee = this.current_donation.designee var donation_type = this.current_donation.donation_type var donation_amount = this.current_donation.donation_amount if (donation_amount === 'other') { donation_amount = this.current_donation.donation_amount_other } var cart_item = { designee: designee, donation_amount: donation_amount } this.cart.donation_type = donation_type this.cart.items.push(cart_item) this.reset_current_donation(this.current_donation.donation_type) } }, reset_current_donation: function (donation_type) { this.current_donation = { designation_type: '', designees: [], designee: { id: 0, name: '', arborID: '', description: '', }, donation_amount: '', donation_amount_other: '', donation_type: donation_type } }, getJSON: function () { console.log("adam and eve"); $.getJSON('../custom/database/luminate.json', function (data) { // console.log(data); illuminate.database.campuses = data.campuses; illuminate.database.colleges = data.colleges; illuminate.database.contacts = data.contacts; illuminate.database.departments = data.departments; illuminate.database.collections = data.collections; illuminate.database.faculties = data.faculties; illuminate.database.institutes = data.institute; illuminate.database.initiatives = data.initiatives; illuminate.database.funds = data.funds; }); }, getParentName: function (fundID) { var parent = _.find(this.database.funds, ['id', parseInt(fundID)]); if (parent.departments.length > 0) { return { pname: parent.departments[0].name, ptype: "department", pid: parent.departments[0].id }; } if (parent.classgivings.length > 0) { return { pname: parent.classgivings[0].name.replace("Giving", ""), ptype: "faculty-class-giving", pid: parent.classgivings[0].faculty_id }; } if (parent.collections.length > 0) { return { pname: parent.collections[0].name, ptype: "collection", pid: parent.collections[0].id }; } if (parent.faculties.length > 0) { return { pname: parent.faculties[0].name, ptype: "faculty", pid: parent.faculties[0].id }; } if (parent.institutes.length > 0) { return { pname: parent.institutes[0].name, ptype: "institute", pid: parent.institutes[0].id }; } if (parent.initiatives.length > 0) { return { pname: parent.initiatives[0].name, ptype: "initiative", pid: parent.initiatives[0].id }; } if (parent.colleges.length > 0) { return { pname: parent.colleges[0].name, ptype: "college", pid: parent.colleges[0].id }; } if (parent.campuses.length > 0) { return { pname: parent.campuses[0].name, ptype: "campus", pid: parent.campuses[0].id }; } else { return ""; } }, getSearchParentName: function(item){ if (item.type == "page") { return { pname: item.name, ptype: "page", pid: item.id, pshortd: item.shortd, purl: item.url }; } if(item.type == "faculty"){ return { pname: item.name, ptype: "faculty", pid: item.id, pdescription: item.shortd }; } if(item.type == "campus"){ return { pname: item.name, ptype: "campus", pid: item.id, pdescription: item.shortd }; } if(item.type == "college"){ return { pname: item.name, ptype: "college", pid: item.id, pdescription: item.shortd }; } if(item.type == "institute"){ return { pname: item.name, ptype: "institute", pid: item.id, pdescription: item.shortd }; } if(item.type == "initiative"){ return { pname: item.name, ptype: "initiative", pid: item.id, pdescription: item.shortd }; } if(item.type == "department"){ return { pname: item.name, ptype: "department", pid: item.id, pdescription: item.shortd }; } if(item.type == "classgiving"){ return { pname: item.name, ptype: "faculty-class-giving", pid: item.id, pdescription: item.shortd }; } if(item.type == "collection"){ return { pname: item.name, ptype: "collection", pid: item.id, pdescription: item.shortd }; } if(item.luminate_code){ return{ pname: item.name, ptype: "fund", pid: item.id, pdescription: item.description } } }, clear_designation_type: function () { this.current_donation.designation_type = '' this.current_donation.designee = '' this.current_donation.designees = [] this.go_to_route('division') }, clear_designee: function () { this.current_donation.designee = '' this.go_to_route('designation') }, handle_selected_designation_type: function (event) { if (this.current_donation.designation_type === '') return for (var i = 0; i < this.global.designees.length; i++) { if (this.current_donation.designation_type.id === this.global.designees[i].typeId) { this.current_donation.designees.push(this.global.designees[i]) } } this.go_to_route('designation') }, handle_selected_designee: function (event) { if (this.current_donation.designee === '') return this.go_to_route('donationAmount') }, handle_custom_donation_amt: function () { this.current_donation.donation_amount = 'other' }, handle_donation_amt: function () { this.current_donation.donation_amount_other = '' }, eligible_for_designation: function () { if (this.current_donation.designation_type === '') { return false } return true }, eligible_for_donation: function () { if (this.current_donation.designee === '') { return false } return true }, eligible_for_donorInfo: function () { if (this.cart.items.length === 0) { return false } return true }, eligible_for_giftOptions: function () { if (this.donor_information.donor_name_first === '' || this.donor_information.donor_name_last === '' || this.donor_information.donor_email === '' || this.donor_information.uoftaffifl === '') { return false } return true }, eligible_for_billing: function () { if (this.donor_information.donor_name_first === '' || this.donor_information.donor_name_last === '' || this.donor_information.donor_email === '' || this.donor_information.uoftaffifl === '') { return false } return true }, eligible_for_review: function () { if (this.billing_information.billing_name_first === '' || this.billing_information.billing_name_last === '' || this.billing_information.card_number === '' || this.billing_information.card_exp_date_month === '' || this.billing_information.card_exp_date_year === '' || this.billing_information.card_cvv === '' || this.billing_information.billing_address_country === '' || this.billing_information.billing_address_street1 === '' || this.billing_information.billing_address_city === '' || this.billing_information.billing_address_state === '' || this.billing_information.billing_address_zip === '') { return false } return true }, eligible_for_thanks: function () { if (!this.successful_donation) { return false } return true }, autopopulate_donation_from_url: function () { if (this.url_params.donationAmount !== '' && this.url_params.donationFrequency !== '' && this.url_params.desigationID !== '') { this.cart.donation_type = this.url_params.donationFrequency var add_donation = { designee: { id: this.url_params.designationID }, donation_amount: this.url_params.donationAmount } for (var i = 0; i < this.global.designees.length; i++) { if (this.global.designees[i].id == this.url_params.designationID) { add_donation.designee.name = this.global.designees[i].name } } this.cart.items.push(add_donation) this.go_to_route('donorInfo') } }, clear_corporate_name: function () { if (this.donor_information.is_corporate_gift === true) { return } this.donor_information.corporate_name = '' }, reset_tribute_fields: function () { if (this.gift_options.tribute_show_honor_fields === true) { return } this.gift_options.tribute_type = '', this.gift_options.tribute_honoree_name_full = '', this.gift_options.send_card_option = false this.reset_card_tribute_fields() }, reset_card_tribute_fields: function () { if (this.gift_options.send_card_option === true) { return } this.gift_options.send_card_type = 'none', this.gift_options.ecard_recipients = '', this.gift_options.ecard_id = '', this.gift_options.ecard_subject = '', this.gift_options.ecard_message = '', this.gift_options.ecard_copy_sender = '', this.gift_options.tribute_notify_name_full = '', this.gift_options.tribute_notify_address_street1 = '', this.gift_options.tribute_notify_address_street2 = '', this.gift_options.tribute_notify_address_city = '', this.gift_options.tribute_notify_address_state = '', this.gift_options.tribute_notify_address_zip = '', this.gift_options.tribute_notify_address_country = '', this.gift_options.printed_card_message = '' }, clear_tribute_fields: function () { if (this.gift_options.send_card_type === 'printedcard') { this.gift_options.ecard_recipients = '', this.gift_options.ecard_id = '', this.gift_options.ecard_subject = '', this.gift_options.ecard_message = '', this.gift_options.ecard_copy_sender = '' } if (this.gift_options.send_card_type === 'ecard') { //this.gift_options.tribute_notify_name_full = '', this.gift_options.tribute_notify_address_street1 = '', this.gift_options.tribute_notify_address_street2 = '', this.gift_options.tribute_notify_address_city = '', this.gift_options.tribute_notify_address_state = '', this.gift_options.tribute_notify_address_zip = '', this.gift_options.tribute_notify_address_country = '', this.gift_options.printed_card_message = '' } if (this.gift_options.send_card_type === 'none') { this.gift_options.ecard_recipients = '', this.gift_options.ecard_id = '', this.gift_options.ecard_subject = '', this.gift_options.ecard_message = '', this.gift_options.ecard_copy_sender = '', this.gift_options.tribute_notify_name_full = '', this.gift_options.tribute_notify_address_street1 = '', this.gift_options.tribute_notify_address_street2 = '', this.gift_options.tribute_notify_address_city = '', this.gift_options.tribute_notify_address_state = '', this.gift_options.tribute_notify_address_zip = '', this.gift_options.tribute_notify_address_country = '', this.gift_options.printed_card_message = '' } }, clear_joint_donor: function () { if (this.gift_options.joint_donor_option === true) { return } this.gift_options.joint_donor_name_first = '', this.gift_options.joint_donor_name_last = '' }, clear_employer_name: function () { if (this.gift_options.corporate_matching === true) { return } this.gift_options.corporate_matching_employer = '' }, scroll_to_top: function () { window.scrollTo({ top: 0, behavior: 'smooth' }) }, go_to_route: function (route, step) { if (step) { if (step <= this.current_step) { window.location.hash = route; } else { return false; } } else { window.location.hash = route; } }, eCardValidation: function () { console.log("ecard validations") var errors = 0; $("#step2" + ' [data-validateECard~="true"]').each(function (i) { $(this).removeClass("Shake Error" + i); $(this).closest(".form-group").find(".Error__msg").remove(); if ($(this).attr('data-validateECard') == "true") { if ($(this).val() == "" || $(this).val() == null) { errors++; $(this).addClass("Shake Error" + i); var errorMsg = $(this).attr('data-validateECard') ? $(this).attr('data-error') : "This is a required field"; var errorMsgDOM = "<span class='Error__msg'>" + errorMsg + "</span>" $(this).closest(".form-group").find(".Error__msg").remove(); $(this).closest(".form-group").append(errorMsgDOM); $(this).focus(); } } }); if (this.gift_options.ecard_id == 0) { errors++; $("#selectECardOption").removeClass("d-none"); } if (this.gift_options.ecard_id != 0) { $("#selectECardOption").addClass("d-none"); } if (errors < 1) { $("#ecardmodal").modal("show"); } }, validateStep: function (currentStep, target) { //checking the total inputs in the current step //console.log(currentStep + " - " + target); var totalInputs = $("#" + currentStep + ' [data-validate~="true"]').length; var errors = 0; if (totalInputs < 1) { hasher.setHash(target); } //clear previous errors $("#" + currentStep + ' [data-validate~="true"]').each(function (i) { $(this).removeClass("Shake Error Error" + i); $(this).closest(".form-group").find(".Error__msg").remove(); if ($(this).attr('data-required') == "true") { if ($(this).val() == "" || $(this).val() == null) { errors++; $(this).addClass("Shake Error Error" + i); var errorMsg = $(this).attr('data-required') ? $(this).attr('data-error') : "This is a required field"; var errorMsgDOM = "<span class='Error__msg'>" + errorMsg + "</span>" $(this).closest(".form-group").find(".Error__msg").remove(); $(this).closest(".form-group").append(errorMsgDOM); $(this).focus(); } } }); if (errors > 0) { $(".Shake:first")[0].scrollIntoView(); } if (errors < 1) { this.current_step = parseInt(currentStep.replace(/\D/g, '')); hasher.setHash(target); } }, getCaptcha: function () { $.ajax({ url: "https://engage.utoronto.ca/site/CRDonationAPI", method: "POST", data: 'method=getDonationFormInfo&v=1.0&api_key=Q2F8xD8W4qAiXuYn&form_id=1620', success: function (result) { this.recaptchaKey = $(result).find('recaptchaData publicKey').text() $.getScript("https://www.google.com/recaptcha/api.js?render=" + this.recaptchaKey); } }); }, submit_donation: function () { this.processing_donation = true; var payload = { 'billing.name.first': this.billing_information.billing_name_first, 'billing.name.last': this.billing_information.billing_name_last, 'billing.address.street1': this.billing_information.billing_address_street1, 'billing.address.street2': this.billing_information.billing_address_street2, 'billing.address.city': this.billing_information.billing_address_city, 'billing.address.state': this.billing_information.billing_address_state, 'billing.address.zip': this.billing_information.billing_address_zip, 'billing.address.country': this.billing_information.billing_address_country, 'donor.name.first': this.donor_information.donor_name_first, 'donor.name.last': this.donor_information.donor_name_last, 'donor.phone': this.donor_information.donor_phone, 'donor.email': this.donor_information.donor_email, 'donor.email_opt_in': this.donor_information.donor_email_opt_in, 'pledgepaymentv2': this.gift_options.pledge_payment, 'anonymous': this.gift_options.anonymous, 'uoftaffifl': this.donor_information.uoftaffifl, 'corporate_name': this.donor_information.corporate_name.substring(0, 250), 'card_cvv': this.billing_information.card_cvv, 'card_exp_date_month': this.billing_information.card_exp_date_month, 'card_exp_date_year': this.billing_information.card_exp_date_year, 'card_number': this.billing_information.card_number, 'sustaining.frequency': this.cart.donation_type, 'findernum': this.url_params.finderNumber, 'sourcecode': this.url_params.sourceCode, 'specialinstructions': this.gift_options.special_instructions.substring(0, 250) } if (this.gift_options.joint_donor_option) { payload['joint_donor'] = this.gift_options.joint_donor_option payload['joint_donor.name.first'] = this.gift_options.joint_donor_name_first payload['joint_donor.name.last'] = this.gift_options.joint_donor_name_last } if (this.gift_options.tribute_show_honor_fields) { payload['tribute.type'] = this.gift_options.tribute_type payload['tribute.honoree.name.full'] = this.gift_options.tribute_honoree_name_full } if (this.gift_options.send_card_type === 'ecard') { if (this.gift_options.tribute_type == 'tribute') { } if (this.gift_options.tribute_type == 'memorial') { } payload['tribute.notify.name.full'] = this.gift_options.tribute_notify_name_full payload['ecard.copy_sender'] = this.gift_options.ecard_copy_sender payload['ecard.id'] = this.gift_options.ecard_id // payload['ecard.subject'] = this.gift_options.ecard_subject.substring(0, 250) //does not work payload['ecard.subject'] = "Tribute Gift Notification from U of T" payload['ecard.message'] = this.gift_options.ecard_message.substring(0, 250) //does not work payload['ecard.recipients'] = this.gift_options.ecard_recipients.substring(0, 250) //does not work payload['ecard.send'] = true, payload['sendcardtype'] = "eCard" } if (this.gift_options.send_card_type === 'printedcard') { payload['send_printed_card'] = true, payload['sendcardtype'] = "Print Card", payload['printed_card_message'] = this.gift_options.printed_card_message.substring(0, 250) payload['tribute.notify.name.full'] = this.gift_options.tribute_notify_name_full //does not work payload['tribute.notify.address.street1'] = this.gift_options.tribute_notify_address_street1 payload['tribute.notify.address.street2'] = this.gift_options.tribute_notify_address_street2 //does not work payload['tribute.notify.address.city'] = this.gift_options.tribute_notify_address_city //does not work payload['tribute.notify.address.state'] = this.gift_options.tribute_notify_address_state //does not work payload['tribute.notify.address.zip'] = this.gift_options.tribute_notify_address_zip //does not work payload['tribute.notify.address.country'] = this.gift_options.tribute_notify_address_country //does not work } if (this.gift_options.corporate_matching) { payload['corporate_matching'] = this.gift_options.corporate_matching payload['employername'] = this.gift_options.corporate_matching_employer.substring(0, 250) payload['donor.employer'] = this.gift_options.corporate_matching_employer } if (this.gift_options.pledge_id) { payload['pledgeid'] = this.gift_options.pledge_id.substring(0, 250) } if (this.cart.donation_type === 'monthly') { payload['sustaining.duration'] = 0 } //custom S120 String var designeeInformation = []; for (var i = 0; i < this.cart.items.length; i++) { var cart_item = this.cart.items[i] designeeInformation.push(cart_item.designee.name); } payload['designeeinformation'] = designeeInformation.toString(); // Sending some meta data related to fund affiliation if(this.analytics.affiliation == ''){ payload['affiliation'] = 'GEN'; payload['affiliationtype'] = 'GEN'; }else{ payload['affiliation'] = this.analytics.affiliation.substring(0, 250); payload['affiliationtype'] = this.analytics.affiliationType.substring(0, 250); } var splittransaction = []; for (var i = 0; i < this.cart.items.length; i++) { var cart_item = this.cart.items[i] payload['designated.' + (i) + '.id'] = cart_item.designee.id payload['designated.' + (i) + '.amount'] = cart_item.donation_amount splittransaction.push(cart_item.designee.id + "-" + cart_item.designee.arborID + "-" + cart_item.donation_amount); } if (this.cart.items.length > 1) { payload['splittransaction'] = splittransaction.toString().replace(/['"]+/g, '').replace(/[\[\]']+/g, ''); } payload['level_id'] = 2101; grecaptcha.ready(function () { grecaptcha.execute(this.recaptchaKey, { action: 'submit' }).then(function (token) { luminateExtend.api.request({ api: 'donation', data: 'method=donate&form_id=' + formID + '&' + $.param(payload) + '&captcha_text=' + token, callback: illuminate.donation_callback.bind(this), useHTTPS: true, requestType: 'POST' }) }); }); }, donation_callback: function (response) { console.log(response) this.review_page.show_error = false if (response.donationResponse && response.donationResponse.errors) { if (response.donationResponse.errors.code == 101) { this.error_message.api_response = response.donationResponse.errors.message + "(Error Code: " + response.donationResponse.errors.code + " : " + response.donationResponse.errors.reason + ")"; if (response.donationResponse.errors.fieldError) { this.error_message.api_response = this.error_message.api_response + " : " + response.donationResponse.errors.fieldError.toString() + ")"; } if (response.donationResponse.errors.declineUserMessage) { this.error_message.api_response = this.error_message.api_response + " : " + response.donationResponse.errors.declineUserMessage + ")"; } } else { this.error_message.api_response = response.donationResponse.errors.message + "(Error Code: " + response.donationResponse.errors.code + " : " + response.donationResponse.errors.reason + ")" } this.review_page.show_error = true this.processing_donation = false this.go_to_route('billing') this.scroll_to_top() } if (response.donationResponse && response.donationResponse.donation) { this.successful_donation = true; this.successful_donation_response.amount = response.donationResponse.donation.amount.formatted; //Sending Google Analytics for (var i = 0; i < this.cart.items.length; i++) { var cart_item = this.cart.items[i] //console.log(cart_item.designee.name.replace(/[^a-zA-Z ]/g, "")); if (window.location.href.indexOf("engage") > -1 && window.location.href.indexOf("refresh") < 1 ) { if(this.analytics.affiliation == ''){ aff = 'GEN'; affType = 'GEN'; }else{ aff = this.analytics.affiliation.substring(0, 250); affType = this.analytics.affiliationType.substring(0, 250); } dataLayer.push({ 'event': 'purchase', 'ecommerce': { 'currency': 'CAD', 'transaction_id': response.donationResponse.donation.transaction_id, 'affiliation': 'Luminate Online', 'value': response.donationResponse.donation.amount.decimal, 'items': [{ 'item_id': cart_item.designee.id, 'item_name': cart_item.designee.name.replace(/[^a-zA-Z ]/g, ""), 'price': cart_item.donation_amount, 'item_brand': 'UofT', 'quantity': 1 }] }, 'pixelConversionTransactionID': response.donationResponse.donation.transaction_id, 'pixelConversionValue': response.donationResponse.donation.amount.decimal, 'consID': this.url_params.consID, 'consIDLO': response.donationResponse.donation.cons_id, 'sourceCode': this.url_params.sourceCode, 'finderNumber': this.url_params.finderNumber, 'aff': aff, 'affType': affType }); } } if (this.donor_information.giftPlanning) { console.log("Will attempt GPL Survey"); var authToken = document.getElementById('auth').value; luminateExtend.api.request({ api: "survey", data: "method=submitSurvey&survey_id=1904&auth=" + authToken + "&cons_first_name=" + this.donor_information.donor_name_first + "&cons_first_last=" + this.donor_information.donor_name_last + "&cons_email=" + this.donor_information.donor_email + "&cons_phone=" + this.donor_information.donor_phone + "&question_1789=Yes", callback: function () { console.log("Survey submitted successfully"); }, useHTTPS: true, requestType: 'POST' }) } this.processing_donation = false; this.thankyoucart.items = this.cart.items; this.thankyoucart.donation_type = this.cart.donation_type; this.go_to_route('thankyou'); this.scroll_to_top(); this.cart.items = []; } } }, computed: { cart_total: function () { var initial_value = 0 var total_amount = this.cart.items.reduce(function (accumulator, cart_item) { return accumulator + cart_item.donation_amount; }, initial_value) if (total_amount == 0) { // this.go_to_route('home'); } return "$" + parseFloat(total_amount).toFixed(2); }, getSubCategory: function () { if (this.direct.category == "Campuses, Colleges and Communities ") { } if (this.direct.category == "Faculties and Institutes") { } if (this.direct.category == "Special Projects, Initiatives and More") { } }, hide_designation_type_dropdown: function () { return this.current_donation.designation_type !== '' }, hide_empty_designation_type: function () { return this.current_donation.designation_type === '' }, hide_designee_dropdown: function () { return this.current_donation.designation_type !== '' && this.current_donation.designee !== '' }, hide_empty_designee: function () { return this.current_donation.designation_type !== '' && this.current_donation.designee === '' }, hide_donation_amounts: function () { return this.current_donation.designation_type === '' || this.current_donation.designee === '' }, getFacultiesInstitutes: function () { var _this = this; if (this.search.searchFacultyInstitute == "") { return _.orderBy(this.database.faculties.concat(this.database.institutes), 'name'); } else { return this.database.faculties.concat(this.database.institutes).filter(function (facultyInstitute) { return facultyInstitute.name.toLowerCase().indexOf(_this.search.searchFacultyInstitute.toLowerCase()) > -1; }); } }, getCollegesCampusesCommunitites: function () { var _this = this; if (this.search.searchCollegeCampusCommunity == "") { return _.orderBy(this.database.campuses, 'id').concat(this.database.colleges); } else { return this.database.campuses.concat(this.database.colleges).filter(function (collegeCampusCommunity) { return collegeCampusCommunity.name.toLowerCase().indexOf(_this.search.searchCollegeCampusCommunity.toLowerCase()) > -1; }); } }, getSpecialProjectsInitiatives: function () { var _this = this; if (this.search.searchSpecialProjectInitiative == "") { return _.orderBy(this.database.initiatives, 'name'); } else { return this.database.initiatives.filter(function (initiative) { return initiative.name.toLowerCase().indexOf(_this.search.searchSpecialProjectInitiative.toLowerCase()) > -1; }); } }, getDepartmentsByFacultyforDirect: function () { var entityType = this.direct.faculty.replace(/[0-9]/g, ''); var entityID = parseInt(this.direct.faculty.match(/(\d+)/)); return _.chain(this.database.departments) .filter({ faculties: [{ id: parseInt(entityID) }] }) .orderBy(['name']) .value(); }, getCollectionsByFacultyforDirect: function () { var entityType = this.direct.faculty.replace(/[0-9]/g, ''); var entityID = parseInt(this.direct.faculty.match(/(\d+)/)); return _.chain(this.database.collections) .filter({ faculty_id: parseInt(entityID) }) .orderBy(['name']) .value(); }, getDepartmentsByFaculty: function () { var _this = this; if (this.search.searchFacultyDepartment == "") { return _.chain(this.database.departments).filter({ faculties: [{ id: parseInt(this.show.facultyDepartment) }] }).orderBy(['name']).value(); } else { var departments = _.chain(this.database.departments).filter({ faculties: [{ id: parseInt(this.show.facultyDepartment) }] }).orderBy(['name']).value(); return departments.filter(function (department) { return department.name.toLowerCase().indexOf(_this.search.searchFacultyDepartment.toLowerCase()) > -1; }); } return _.find(this.database.faculties, ['id', parseInt(this.show.facultyDepartment)]); }, getCollectionsByFaculty: function () { var _this = this; if (this.search.searchFacultyOther == "") { return _.chain(this.database.collections).filter({ faculty_id: parseInt(this.show.facultyOther) }).orderBy(['name']).value(); } else { return this.database.collections.filter(function (collection) { return collection.name.toLowerCase().indexOf(_this.search.searchFacultyOther.toLowerCase()) > -1; }); } return _.find(this.database.collections, ['faculty_id', parseInt(this.show.facultyOther)]); }, getDesignationName: function(){ var fund = _.find(this.database.funds, ['id', parseInt(this.direct.fund)]) || ''; return fund; }, // Displaying individual Category pages getSpecificFund: function () { this.analytics.affiliationType = ''; this.analytics.affiliation = ''; if (this.show.fund) { var fund = _.find(this.database.funds, ['id', parseInt(this.show.fund)]) || ''; console.log(fund); this.current_donation.designee.id = fund.luminate_code || ''; this.current_donation.designee.arborID = fund.designation_code || ''; this.current_donation.designee.name = fund.name; this.current_donation.designee.description = fund.description; if(fund.departments){ if(fund.departments.length > 0){ var departmentID = fund.departments[0].id; var department = _.find(this.database.departments, ['id', parseInt(departmentID)]) || ''; this.analytics.affiliationType = "Faculty"; this.analytics.affiliation = department.faculties[0].slug; return fund; } } if(fund.classgivings){ if(fund.classgivings.length > 0){ var facultyID = fund.classgivings[0].faculty_id; var faculty = _.find(this.database.faculties, ['id', parseInt(facultyID)]); this.analytics.affiliationType = "Faculty"; this.analytics.affiliation = faculty.slug; return fund; } } if(fund.collections){ if(fund.collections.length > 0){ var facultyID = fund.collections[0].faculty_id; var faculty = _.find(this.database.faculties, ['id', parseInt(facultyID)]); this.analytics.affiliationType = "Faculty"; this.analytics.affiliation = faculty.slug; return fund; } } if(fund.faculties){ if(fund.faculties.length > 0){ var facultySlug = fund.faculties[0].slug; this.analytics.affiliationType = "Faculty"; this.analytics.affiliation = facultySlug; return fund; } } if(fund.campuses){ if(fund.campuses.length > 0){ var campusSlug = fund.campuses[0].slug; this.analytics.affiliationType = "Campus"; this.analytics.affiliation = campusSlug; return fund; } } if(fund.colleges){ if(fund.colleges.length > 0){ var collegeSlug = fund.colleges[0].slug; this.analytics.affiliationType = "College"; this.analytics.affiliation = collegeSlug; return fund; } } if(fund.institutes){ if(fund.institutes.length > 0){ var instituteSlug = fund.institutes[0].slug; this.analytics.affiliationType = "Institute"; this.analytics.affiliation = instituteSlug; return fund; } } if(fund.initiatives){ if(fund.initiatives.length > 0){ var initiativeSlug = fund.initiatives[0].slug; this.analytics.affiliationType = "Initiative"; this.analytics.affiliation = initiativeSlug; return fund; } } else{ this.analytics.affiliationType = "GEN"; this.analytics.affiliation = "GEN"; return fund; } return fund; } }, getSpecificFaculty: function (id) { return _.find(this.database.faculties, ['id', parseInt(this.show.faculty)]); }, getSpecificFacultyForDepartments: function () { return _.find(this.database.faculties, ['id', parseInt(this.show.facultyDepartment)]); }, getSpecificFacultyForOthers: function () { return _.find(this.database.faculties, ['id', parseInt(this.show.facultyOther)]); }, getSpecificFacultyForClassGiving: function () { return _.find(this.database.faculties, ['id', parseInt(this.show.facultyClassGiving)]); }, getSpecificCampus: function () { return _.find(this.database.campuses, ['id', parseInt(this.show.campus)]); }, getSpecificCollege: function () { return _.find(this.database.colleges, ['id', parseInt(this.show.college)]); }, getSpecificDepartment: function () { return _.find(this.database.departments, ['id', parseInt(this.show.department)]); }, getSpecificCollection: function () { return _.find(this.database.collections, ['id', parseInt(this.show.collection)]); }, getSpecificInstitute: function () { return _.find(this.database.institutes, ['id', parseInt(this.show.institute)]); }, getSpecificInitiative: function () { return _.find(this.database.initiatives, ['id', parseInt(this.show.initiative)]); }, getspecificEntityForDirectDepartments: function () { var entityType = this.direct.department.replace(/[0-9]/g, ''); var entityID = parseInt(this.direct.department.match(/(\d+)/)); return _.find(this.database.departments, ['id', entityID]); }, getspecificEntityForDirectCollections: function () { var entityType = this.direct.collection.replace(/[0-9]/g, ''); var entityID = parseInt(this.direct.collection.match(/(\d+)/)); return _.find(this.database.collections, ['id', entityID]); }, getspecificEntity: function () { if (this.direct.entity == '') { var entityType = this.direct.faculty.replace(/[0-9]/g, ''); var entityID = parseInt(this.direct.faculty.match(/(\d+)/)); } else { var entityType = this.direct.entity.replace(/[0-9]/g, ''); var entityID = parseInt(this.direct.entity.match(/(\d+)/)); } if (entityType == 'campus') { return _.find(this.database.campuses, ['id', entityID]); } if (entityType == 'college') { return _.find(this.database.colleges, ['id', entityID]); } if (entityType == 'faculty') { return _.find(this.database.faculties, ['id', entityID]); } if (entityType == 'institute') { return _.find(this.database.institutes, ['id', entityID]); } if (entityType == 'initiative') { return _.find(this.database.initiatives, ['id', entityID]); } if (entityType == 'department') { return _.find(this.database.departments, ['id', entityID]); } }, getspecificEntityFundsForFaculties: function () { var entityType = this.direct.faculty.replace(/[0-9]/g, ''); var entityID = parseInt(this.direct.faculty.match(/(\d+)/)); if (this.direct.area == "Featured Funds") { //console.log("faculty Type: featured"); return _.chain(this.database.funds) .filter({ faculties: [{ id: entityID }] }) .orderBy(['important']) .value(); } else if (this.direct.area == "Departments and Specific Areas") { var entityType = this.direct.department.replace(/[0-9]/g, ''); var entityID = parseInt(this.direct.department.match(/(\d+)/)); return _.chain(this.database.funds) .filter({ departments: [{ id: entityID }] }) .orderBy(['important']) .value(); } else if (this.direct.area == "Class Giving") { //console.log("faculty Type: class giving"); return _.chain(this.database.funds) .filter({ classgivings: [{ faculty_id: entityID }] }) .orderBy(['important']) .value(); } else if (this.direct.area == "Other Giving Opportunities") { var entityType = this.direct.collection.replace(/[0-9]/g, ''); var entityID = parseInt(this.direct.collection.match(/(\d+)/)); return _.chain(this.database.funds) .filter({ collections: [{ id: entityID }] }) .orderBy(['important']) .value(); } else { //console.log("faculty Type: n/a"); return _.chain(this.database.funds) .filter({ institutes: [{ id: entityID }] }) .orderBy(['important']) .value(); } }, getspecificEntityFunds: function () { if (this.direct.entity == '') { var entityType = this.direct.faculty.replace(/[0-9]/g, ''); var entityID = parseInt(this.direct.faculty.match(/(\d+)/)); } else { var entityType = this.direct.entity.replace(/[0-9]/g, ''); var entityID = parseInt(this.direct.entity.match(/(\d+)/)); } if (entityType == 'campus') { return _.chain(this.database.funds) .filter({ campuses: [{ id: entityID }] }) .orderBy(['important']) .value(); } if (entityType == 'college') { return _.chain(this.database.funds) .filter({ colleges: [{ id: entityID }] }) .orderBy(['important']) .value(); } if (entityType == 'institute') { return _.chain(this.database.funds) .filter({ institutes: [{ id: entityID }] }) .orderBy(['important']) .value(); } if (entityType == 'initiative') { return _.chain(this.database.funds) .filter({ initiatives: [{ id: entityID }] }) .orderBy(['important']) .value(); } if (entityType == 'department') { return _.chain(this.database.funds) .filter({ departments: [{ id: entityID }] }) .orderBy(['important']) .value(); } }, getSpecificEntityFund: function () { if (this.direct.fund) { var fund = _.find(this.database.funds, ['id', parseInt(this.direct.fund)]); this.current_donation.designee.id = fund.luminate_code || ''; this.current_donation.designee.name = fund.name; this.current_donation.designee.description = fund.description; return fund; } }, // Fetching funds by specific categories searchFundsByKeyword: function () { var _this = this; if (this.search.searchFunds.length > 2) { var facultiesName = this.database.faculties.filter(function (faculty) { if (faculty.name) { return faculty.name.toLowerCase().indexOf(_this.search.searchFunds.toLowerCase()) > -1; } }); var facultiesDesc = this.database.faculties.filter(function (faculty) { if (faculty.shortd) { return faculty.shortd.toLowerCase().indexOf(_this.search.searchFunds.toLowerCase()) > -1; } }); var campusesName = this.database.campuses.filter(function (campus) { if (campus.name) { return campus.name.toLowerCase().indexOf(_this.search.searchFunds.toLowerCase()) > -1; } }); var campusesDesc = this.database.campuses.filter(function (campus) { if (campus.shortd) { return campus.shortd.toLowerCase().indexOf(_this.search.searchFunds.toLowerCase()) > -1; } }); var collegesName = this.database.colleges.filter(function (college) { if (college.name) { return college.name.toLowerCase().indexOf(_this.search.searchFunds.toLowerCase()) > -1; } }); var collegesDesc = this.database.colleges.filter(function (college) { if (college.shortd) { return college.shortd.toLowerCase().indexOf(_this.search.searchFunds.toLowerCase()) > -1; } }); var institutesName = this.database.institutes.filter(function (institute) { if (institute.name) { return institute.name.toLowerCase().indexOf(_this.search.searchFunds.toLowerCase()) > -1; } }); var institutesDesc = this.database.institutes.filter(function (institute) { if (institute.shortd) { return institute.shortd.toLowerCase().indexOf(_this.search.searchFunds.toLowerCase()) > -1; } }); var initiativesName = this.database.initiatives.filter(function (initiative) { if (initiative.name) { return initiative.name.toLowerCase().indexOf(_this.search.searchFunds.toLowerCase()) > -1; } }); var initiativesDesc = this.database.initiatives.filter(function (initiative) { if (initiative.shortd) { return initiative.shortd.toLowerCase().indexOf(_this.search.searchFunds.toLowerCase()) > -1; } }); var departmentsName = this.database.departments.filter(function (department) { if (department.name) { return department.name.toLowerCase().indexOf(_this.search.searchFunds.toLowerCase()) > -1; } }); var departmentsDesc = this.database.departments.filter(function (department) { if (department.shortd) { return department.shortd.toLowerCase().indexOf(_this.search.searchFunds.toLowerCase()) > -1; } }); var collectionsName = this.database.collections.filter(function (collection) { if (collection.name) { return collection.name.toLowerCase().indexOf(_this.search.searchFunds.toLowerCase()) > -1; } }); var collectionsDesc = this.database.collections.filter(function (collection) { if (collection.shortd) { return collection.shortd.toLowerCase().indexOf(_this.search.searchFunds.toLowerCase()) > -1; } }); // TODO: Make the search work with Faculties and Pages var pagesName = this.database.pages.filter(function (pages) { return pages.name.toLowerCase().indexOf(_this.search.searchFunds.toLowerCase()) > -1; }); var pagesKeyword = this.database.pages.filter(function (pages) { return pages.keyword.toLowerCase().indexOf(_this.search.searchFunds.toLowerCase()) > -1; }); var fundsbyname = this.database.funds.filter(function (fund) { return fund.name.toLowerCase().replace(/-/g, ' ').indexOf(_this.search.searchFunds.toLowerCase().replace(/-/g, ' ')) > -1; }); var fundsbyDesignationID = this.database.funds.filter(function (fund) { return fund.designation_code.toLowerCase().replace(/-/g, ' ').indexOf(_this.search.searchFunds.toLowerCase().replace(/-/g, ' ')) > -1; }); var fundsbyLOID = this.database.funds.filter(function (fund) { return fund.luminate_code.toLowerCase().replace(/-/g, ' ').indexOf(_this.search.searchFunds.toLowerCase().replace(/-/g, ' ')) > -1; }); var fundsbydesc = this.database.funds.filter(function (fund) { if (fund.description) { return fund.description.toLowerCase().indexOf(_this.search.searchFunds.toLowerCase()) > -1; } }); // var pages = this.database.funds.filter(function (fund) { // if (fund.description) { // return fund.description.toLowerCase().indexOf(_this.search.searchFunds.toLowerCase()) > -1; // } // }); return _.union( facultiesName, facultiesDesc, campusesName, campusesDesc, collegesName, collegesDesc, institutesName, institutesDesc, initiativesName, initiativesDesc, departmentsName, departmentsDesc, collectionsName, collectionsDesc, fundsbyname, fundsbydesc, fundsbyDesignationID, fundsbyLOID, pagesName, pagesKeyword ); } }, searchFacultyDepartment: function () { var _this = this; return this.database.departments.filter(function (fund) { return fund.name.toLowerCase().indexOf(_this.search.searchFacultyDepartment.toLowerCase()) > -1; }); }, getFundsByFaculty: function () { var _this = this; if (this.search.searchFacultyFunds == "" || this.search.searchFacultyFunds == undefined) { console.log("SEARCH: default listing"); return _.chain(this.database.funds).filter({ faculties: [{ id: parseInt(this.show.faculty) }] }).orderBy(['faculties[0].pivot.important', 'faculties[0].pivot.sort_order', 'name'], ['asc', 'asc', 'asc']).value(); } else { console.log("SEARCH: keyword search"); var funds = _.chain(this.database.funds).filter({ faculties: [{ id: parseInt(this.show.faculty) }] }).orderBy(['faculties[0].pivot.important', 'faculties[0].pivot.sort_order', 'name'], ['asc', 'asc', 'asc']).value(); return funds.filter(function (fund) { return fund.name.toLowerCase().indexOf(_this.search.searchFacultyFunds.toLowerCase()) > -1; }); } }, getFundsByCampus: function () { // return _.filter(this.database.campuses, { campuses: [ { id: parseInt(this.show.campus) } ]}); var _this = this; if (this.search.searchCampusFunds == "" || this.search.searchCampusFunds == undefined) { return _.chain(this.database.funds).filter({ campuses: [{ id: parseInt(this.show.campus) }] }).orderBy(['campuses[0].pivot.important', 'campuses[0].pivot.sort_order', 'name'], ['asc', 'asc', 'asc']).value(); } else { var funds = _.chain(this.database.funds).filter({ campuses: [{ id: parseInt(this.show.campus) }] }).orderBy(['campuses[0].pivot.important', 'campuses[0].pivot.sort_order', 'name'], ['asc', 'asc', 'asc']).value(); return funds.filter(function (fund) { return fund.name.toLowerCase().indexOf(_this.search.searchCampusFunds.toLowerCase()) > -1; }); } }, getFundsByCollege: function () { // return _.filter(this.database.funds, { colleges: [ { id: parseInt(this.show.college) } ]}); return _.chain(this.database.funds) .filter({ colleges: [{ id: parseInt(this.show.college) }] }) .orderBy(['colleges[0].pivot.important', 'colleges[0].pivot.sort_order', 'name'], ['asc', 'asc', 'asc']) .value(); }, getFundsByDepartment: function () { // return _.filter(this.database.funds, { departments: [ { id: parseInt(this.show.department) } ]}); return _.chain(this.database.funds) .filter({ departments: [{ id: parseInt(this.show.department) }] }) .orderBy(['departments[0].pivot.important', 'departments[0].pivot.sort_order', 'name'], ['asc', 'asc', 'asc']) .value(); }, getFundsByCollection: function () { // return _.filter(this.database.funds, { departments: [ { id: parseInt(this.show.department) } ]}); return _.chain(this.database.funds) .filter({ collections: [{ id: parseInt(this.show.collection) }] }) .orderBy(['collections[0].pivot.important', 'collections[0].pivot.sort_order', 'name'], ['asc', 'asc', 'asc']) .value(); }, getFundsByInstitute: function () { // return _.filter(this.database.funds, { institutes: [ { id: parseInt(this.show.institute) } ]}); return _.chain(this.database.funds) .filter({ institutes: [{ id: parseInt(this.show.institute) }] }) .orderBy(['institutes[0].pivot.important', 'institutes[0].pivot.sort_order', 'name'], ['asc', 'asc', 'asc']) .value(); }, getFundsByInitiative: function () { // return _.filter(this.database.funds, { initiatives: [ { id: parseInt(this.show.initiative) } ]}); return _.chain(this.database.funds) .filter({ initiatives: [{ id: parseInt(this.show.initiative) }] }) .orderBy(['initiatives[0].pivot.important', 'initiatives[0].pivot.sort_order', 'name'], ['asc', 'asc', 'asc']) .value(); }, getFundsByClassGiving: function () { var _this = this; if (this.search.searchFacultyClassGiving == "" || this.search.searchFacultyClassGiving == undefined) { return _.chain(this.database.funds).filter({ classgivings: [{ faculty_id: parseInt(this.show.facultyClassGiving) }] }).orderBy(['classgivings[0].pivot.important', 'classgivings[0].pivot.sort_order', 'name'], ['asc', 'asc', 'asc']).value(); } else { var funds = _.chain(this.database.funds).filter({ classgivings: [{ faculty_id: parseInt(this.show.facultyClassGiving) }] }).orderBy(['faculties[0].pivot.important', 'faculties[0].pivot.sort_order', 'name'], ['asc', 'asc', 'asc']).value(); return funds.filter(function (fund) { return fund.name.toLowerCase().indexOf(_this.search.searchFacultyClassGiving.toLowerCase()) > -1; }); } }, getDonationLevels: function () { var _this = this; return this.customFundPage.donlevels.split(","); }, getUniversalContact: function () { // var universal = ""; // var contact = ""; var fund = _.find(this.database.funds, ['id', parseInt(this.show.fund)]); if (fund.initiatives) { if (fund.initiatives.length > 0) { initiative_id = fund.initiatives[0].id; initiative = _.find(this.database.initiatives, ['id', parseInt(initiative_id)]); return { universal: initiative.contacts, local: fund.contacts }; } } if (fund.institutes) { if (fund.institutes.length > 0) { institute_id = fund.institutes[0].id; institute = _.find(this.database.institutes, ['id', parseInt(institute_id)]); return { universal: institute.contacts, local: fund.contacts }; } } if (fund.colleges) { if (fund.colleges.length > 0) { college_id = fund.colleges[0].id; college = _.find(this.database.colleges, ['id', parseInt(college_id)]); return { universal: college.contacts, local: fund.contacts }; } } if (fund.campuses) { if (fund.campuses.length > 0) { campus_id = fund.campuses[0].id; campus = _.find(this.database.campuses, ['id', parseInt(campus_id)]); return { universal: campus.contacts, local: fund.contacts }; } } if (fund.departments) { if (fund.departments.length > 0) { department_id = fund.departments[0].id; department = _.find(this.database.departments, ['id', parseInt(department_id)]); return { universal: department.contacts, local: fund.contacts }; } } if (fund.classgivings) { if (fund.classgivings.length > 0) { faculty_id = fund.classgivings[0].faculty_id; faculty = _.find(this.database.faculties, ['id', parseInt(faculty_id)]); return { universal: faculty.contacts, local: fund.contacts }; } } if (fund.collections) { if (fund.collections.length > 0) { faculty_id = fund.collections[0].faculty_id; faculty = _.find(this.database.faculties, ['id', parseInt(faculty_id)]); return { universal: faculty.contacts, local: fund.contacts }; } } if (fund.faculties) { if (fund.faculties.length > 0) { faculty_id = fund.faculties[0].id; faculty = _.find(this.database.faculties, ['id', parseInt(faculty_id)]); return { universal: faculty.contacts, local: fund.contacts }; } } if (fund.contacts.length > 0) { return { universal: "", local: fund.contacts } } else { return { universal: "", local: "" } } }, ifFacultyHasDepartments: function () { var facultyID = this.show.faculty; if (facultyID == "") { if (window.location.href.indexOf("faculty-department") > -1) { facultyID = this.show.facultyDepartment; } if (window.location.href.indexOf("faculty-class-giving") > -1) { facultyID = this.show.facultyClassGiving; } if (window.location.href.indexOf("other-giving-opportunities") > -1) { facultyID = this.show.facultyOther; } } if (facultyID) { var faculty = _.find(this.database.faculties, ['id', parseInt(facultyID)]); if (faculty.departments.length) { return faculty.departments.length } else { return 0 } } else { var entityID = parseInt(this.direct.faculty.match(/(\d+)/)); var faculty = _.find(this.database.faculties, ['id', entityID]); if (faculty.departments.length) { return faculty.departments.length } else { return 0 } } }, ifFacultyHasClassGivings: function () { var facultyID = this.show.faculty; if (facultyID == "") { if (window.location.href.indexOf("faculty-department") > -1) { facultyID = this.show.facultyDepartment; } if (window.location.href.indexOf("faculty-class-giving") > -1) { facultyID = this.show.facultyClassGiving; } if (window.location.href.indexOf("other-giving-opportunities") > -1) { facultyID = this.show.facultyOther; } } if (facultyID) { var faculty = _.find(this.database.faculties, ['id', parseInt(facultyID)]); if (faculty.classgivings.length) { return faculty.classgivings.length } else { return 0 } } else { var entityID = parseInt(this.direct.faculty.match(/(\d+)/)); var faculty = _.find(this.database.faculties, ['id', entityID]); if (faculty.classgivings.length) { return faculty.classgivings.length } else { return 0 } } }, ifFacultyHasCollections: function () { var facultyID = this.show.faculty; if (facultyID == "") { if (window.location.href.indexOf("faculty-department") > -1) { facultyID = this.show.facultyDepartment; } if (window.location.href.indexOf("faculty-class-giving") > -1) { facultyID = this.show.facultyClassGiving; } if (window.location.href.indexOf("other-giving-opportunities") > -1) { facultyID = this.show.facultyOther; } } if (facultyID) { var faculty = _.find(this.database.faculties, ['id', parseInt(facultyID)]); if (faculty.collections.length) { return faculty.collections.length } else { return 0 } } else { var entityID = parseInt(this.direct.faculty.match(/(\d+)/)); var faculty = _.find(this.database.faculties, ['id', entityID]); if (faculty.collections.length) { return faculty.collections.length } else { return 0 } } } }, }); </script> </body> </html>

CINXE.COM

University of Toronto