https://www.jhrl.com/sites/all/modules/custom/jhr_packages/tags/jh…/build/jhr_packages_modal.js?tlse4v

1riot.tag2('jhr-packages-modal', '<header> <h2>{title}</h2> <span>Booking Options</span> </header> <ul> <li class="booking-type {activeClass(type.key)}" each="{type in types}"> <div class="divider"><span></span><div>or</div><span></span></div> <label> <input if="{use_radios}" type="radio" name="type" data-type="{type.key}" __checked="{isTypeActive(type.key)}" onclick="{selectType.bind(this)}"> <h3>{type.title}</h3> </label> <p if="{type.intro && !type.na}" class="intro">{type.intro}</p> <p if="{type.desc && !type.na}" class="desc">{type.desc}</p> <p if="{type.na}" class="na">{type.na}</p> <ul> <li each="{option, i in type.options}"> <div class="item-details"> <label> <input data-type="{type.key}" data-action="{option.action}" data-index="{i}" __checked="{isChecked(type.key, i)}" type="radio" name="option" onclick="{selectOption.bind(this)}"> <h4>{option.title}</h4> <a class="option-tooltip" if="{option.tooltip}"><div class="sub-option-tooltip-text">{option.tooltip}</div>{option.tooltip_title}</a> </label> <span class="option-desc" if="{option.desc}">{option.desc}</span> </div> <div class="item-booking"> <span class="option-phone" if="{option.phone}">{option.phone}</span> <span class="option-cta" if="{option.cta}">{option.cta}</span> <span class="option-now" if="{option.now}">now <span>{option.now}</span></span> <span class="option-was" if="{option.was}">was <span>{option.was}</span></span> </div> <ul if="{option.options}"> <li each="{suboption in option.options}"> <h4>{suboption.title}</h4> <a onclick="{toggleTooltip.bind(this)}" if="{suboption.tooltip}" class="sub-option-tooltip"><div class="sub-option-tooltip-text">{suboption.tooltip}</div>{suboption.tooltip_title}</a> <ul if="{suboption.includes}">® <li class="includes {included.class}" each="{included in suboption.includes}"> <p class="includes-desc" if="{suboption.desc}">{suboption.desc}</p> <span class="include-label">{included.label}</span> </li> </ul> </li> </ul> </li> </ul> </li> </ul> <div class="call-to-action"> <div if="{action == \'package_online\'}" class="online-package"> <button onclick="{buyPackage}">Choose Package</button> <p>Click <strong>"Choose Package"</strong> to review package details, select your package, adjust the package settings, & proceed to checkout.</p> </div> <div if="{action == \'package_call\'}" class="callin-package"> <p>Call <strong>{phone}</strong> to complete your booking and set your package details!</p> </div> <div if="{action == \'lodging_online\'}" class="online-lodging"> <button onclick="{buyLodging}">Book Lodging Only</button> <p>Click <strong>"Book Lodging Only"</strong> to proceed to checkout. </div> <div if="{action == \'lodging_call\'}" class="callin-lodging"> <p>Call <strong>{phone}</strong> to complete your booking and redeem this promotion!</p> </div> </div>', '@-webkit-keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } @-moz-keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } @-o-keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } jhr-packages-modal,[riot-tag="jhr-packages-modal"],[data-is="jhr-packages-modal"]{ display: block; } jhr-packages-modal label,[riot-tag="jhr-packages-modal"] label,[data-is="jhr-packages-modal"] label,jhr-packages-modal h3,[riot-tag="jhr-packages-modal"] h3,[data-is="jhr-packages-modal"] h3,jhr-packages-modal h4,[riot-tag="jhr-packages-modal"] h4,[data-is="jhr-packages-modal"] h4{ display: inline; } jhr-packages-modal ul,[riot-tag="jhr-packages-modal"] ul,[data-is="jhr-packages-modal"] ul{ list-style-type: none; } jhr-packages-modal .booking-type.active,[riot-tag="jhr-packages-modal"] .booking-type.active,[data-is="jhr-packages-modal"] .booking-type.active{ opacity: 1; }', '', function(opts) {
2    this.mixin('RCRiotUtils');
3    (function($, tag) {
4      var book = [],
5        packages = [],
6        call = [],
7        online = [];
8
9      tag.phone = '800.443.8613';
10
11      tag.setAction = function() {
12        tag.action = tag.active_type + '_' + tag.active_action;
13      }
14
15      tag.title = tag.opts.price.n;
16
17      book_price = {
18        title: tag.opts.price.dn,
19        desc: tag.opts.price.dd,
20        now: (tag.opts.price.s ? '' : '') + tag.RCRiotUtils.formatPrice(tag.opts.price, 0, 8),
21        action: 'online'
22      };
23
24      if (tag.opts.price.s) {
25        book_price.was = tag.RCRiotUtils.formatOriginalPrice(tag.opts.price, 0, 8);
26      }
27
28      book.push(book_price);
29
30      tag.opts.call_to_book.map(function(package) {
31        book.push({
32          title: package.label,
33          desc: package.field_special_subhead,
34          phone: package.field_call_to_book_number,
35          cta: 'Call for Discount',
36          action: 'call'
37        })
38      });
39
40      tag.opts.callin_packages.map(function(package) {
41        call.push({
42          title: package.label,
43          tooltip_title: 'i',
44          tooltip: package.field_special_subhead
45        });
46      });
47
48      tag.opts.online_packages.map(function(package) {
49        online.push({
50          title: package.label,
51          tooltip: package.field_special_subhead,
52          tooltip_title: 'i',
53          desc: 'Package Includes',
54          includes: package.addons
55        });
56      });
57
58      tag.active_type = 'package';
59      tag.active_action = 'online';
60      tag.active_index = 0;
61
62      if (online.length || call.length) {
63        tag.active_type = 'package';
64        tag.use_radios = true;
65
66        if (online.length) {
67          tag.active_action = 'online';
68
69          packages.push({
70            title: 'Online Package',
71            desc: "Select this option to add one of the following online packages to your stay. You can find full details on each package and make your selection on the next page when you click 'Choose Package'.",
72            options: online,
73            action: 'online'
74          });
75        }
76
77        if (call.length) {
78          if (!online.length) {
79            tag.active_action = 'call';
80          }
81
82          packages.push({
83            title: 'Call-in Package',
84            desc: "Call 800.443.8613 to book one of the following packages:",
85            options: call,
86            action: 'call'
87          });
88        }
89      }
90      else {
91        tag.active_type = 'lodging';
92        tag.active_action = 'online';
93      }
94
95      tag.setAction();
96
97      tag.types = [
98        {
99          key: 'package',
100          title: 'Book Lodging + Package',
101          intro: 'Select this option to add one of our online or call-in packages to your stay!',
102          desc: 'Please select your package type below:',
103          na: tag.use_radios ? '' : 'There are no packages available at this time.',
104          options: packages
105        },
106        {
107          key: 'lodging',
108          title: 'Book Lodging',
109          intro: 'Select this option to book this stay without an additional package.',
110          desc: (tag.opts.price.s || book.length > 1) ? 'Please choose one of the following deals to redeem with your stay!' : '',
111          options: book
112        }
113      ];
114
115      tag.isChecked = function(type, index) {
116        if (type == tag.active_type && index == tag.active_index) {
117          return true;
118        }
119        else {
120          return false;

121        }
122      }
123
124      tag.activeClass = function(type) {
125        if (tag.isTypeActive(type)) {
126          return 'active';
127        }
128      }
129
130      tag.isTypeActive = function(type) {
131        if (type === tag.active_type) {
132          return true;
133        }
134      }
135
136      tag.selectType = function(e) {
137        var type_data = e.target.dataset;
138        if (tag.active_type == type_data.type) {
139          return;
140        }
141
142        tag.active_index = 0;
143        tag.active_type = type_data.type;
144
145        tag.option.map(function(option) {
146          var data = option.dataset;
147          if (data.type == type_data.type && data.index == tag.active_index) {
148            tag.active_action = data.action;
149            option.click();
150          }
151        });
152
153        tag.setAction();
154        tag.update();
155      }
156
157      tag.selectOption = function(e) {
158        var data = e.target.dataset;
159        tag.active_index = data.index;
160        tag.active_type = data.type;
161        tag.active_action = data.action;
162
163        tag.type.map(function(type) {
164          var data = type.dataset;
165          if (data.type == tag.active_type && !type.getAttribute('checked')) {
166            type.click();
167          }
168        });
169
170        tag.setAction();
171        tag.update();
172      }
173
174      tag.toggleTooltip = function(e) {
175        e.target.classList.toggle('active');
176      }
177
178      tag.buyPackage = function() {
179        window.open('/rescms/item/' + opts.price.eid + '/package?' + $.param(opts.price.qp));
180      }
181
182      tag.buyLodging = function() {
183        window.open('/rescms/item/' + opts.price.eid + '/buy?' + $.param(opts.price.qp));
184      }
185
186      tag.buyAddons = function() {
187        window.open('/rescms/item/' + opts.price.eid + '/addon?' + $.param(opts.price.qp));
188      }
189
190    })(jQuery, this);
191});