School of History

1<#assign title = themeDisplay.getPortletDisplay().getTitle() /> 

2 

3<#assign filters = '' /> 

4 

5<#assign dept = '' /> 

6<#assign deptfilter = '' /> 

7<#if select_dept.getOptions()??> 

8    <#list select_dept.getOptions() as cur_dept> 

9        <#assign dept = dept + '"' + cur_dept + '"' + ',' /> 

10    </#list> 

11 

12    <#if organdor.getData()??> 

13        <#if organdor.getData() == 'and'> 

14            <#assign deptfilter = 'organisation_acronym' /> 

15        <#else> 

16            <#assign deptfilter = 'orOrganisation_acronym' /> 

17        </#if> 

18    </#if> 

19 

20    <#if dept?has_content> 

21        <#assign filters = filters + deptfilter + ': [' + dept?remove_ending(",") +'],' /> 

22    </#if> 

23</#if> 

24 

25 

26<#assign role = '' /> 

27<#assign rolefilter = '' /> 

28<#if select_role.getOptions??> 

29    <#list select_role.getOptions() as cur_role> 

30        <#assign role = role + '"' + cur_role + '"' + ',' /> 

31    </#list> 

32     

33    <#if roleandor.getData()??> 

34        <#if roleandor.getData() == 'and'> 

35            <#assign rolefilter = 'employmentTypeCode' /> 

36        <#else> 

37            <#assign rolefilter = 'employmentTypeCode' /> 

38        </#if> 

39    </#if> 

40 

41    <#if role?has_content> 

42        <#assign filters = filters + rolefilter + ': [' + role?remove_ending(",") +'],' /> 

43    </#if> 

44</#if> 

45 

46 

47<#assign subject = '' /> 

48<#assign sysfilter = '' />    

49<#if select_systems.getOptions??> 

50    <#list select_systems.getOptions() as cur_subject> 

51        <#assign subject = subject + '"' + cur_subject + '"' + ',' /> 

52    </#list> 

53 

54    <#if sysandor.getData()??> 

55        <#if sysandor.getData() == 'and'> 

56            <#assign sysfilter = 'subject' /> 

57        <#else> 

58            <#assign sysfilter = 'orSubject' /> 

59        </#if> 

60    </#if> 

61 

62    <#if subject?has_content> 

63        <#assign filters = filters + sysfilter + ': [' + subject?remove_ending(",") +'],' /> 

64    </#if> 

65</#if> 

66 

67 

68<#assign keywords = '' /> 

69<#assign keywordsfilter = 'keywords' /> 

70<#if select_keywords.getOptions??> 

71    <#list select_keywords.getOptions() as cur_keywords> 

72        <#assign keywords = keywords + '"' + cur_keywords + '"' + ',' /> 

73    </#list> 

74 

75    <#if keywords?has_content> 

76        <#assign filters = filters + keywordsfilter + ': [' + keywords?remove_ending(",") +'],' /> 

77    </#if> 

78</#if> 

79 

80 

81<#assign params = filters + 'hasActiveAssociatedOrganizations: true, orderBy: [ { column: "known_as_surname" order: ASC }, { column: "surname" order: DESC } ]' /> 

82 

83 

84<#assign colSize = '12_cols' /> 

85<#if containerSize.getData()??> 

86    <#if containerSize.getData() == '8_cols'> 

87        <#assign colSize = '8_cols' /> 

88    </#if> 

89</#if> 

90 

91 

92<#assign accordianOpen =  false  /> 

93<#assign accordianFirst =  true  /> 

94 

95<div class="people-container"> 

96    <#if searchBox.getData() == 'true'> 

97    <header> 

98        <div class="heading"> 

99            <h2>People</h2> 

100        </div> 

101        <div class="search"> 

102            <a href="/search?facet=people" title="Search for people at the University of East Anglia" class="search btn btn-pink btn-big">Search for People <i class="icon-angle-right"></i></a> 

103        </div> 

104    </header> 

105    </#if> 

106    <div class="subHeading"> 

107        <#if subHeading.getData()?has_content> 

108            <h3 class="person-accordian-container person-accordian__${randomNamespace}"><span class="person-accordian"><i class="icon-angle-up <#if !accordianOpen> icon-angle-down</#if>"></i></span> ${subHeading.getData()}</h3> 

109        </#if> 

110    </div> 

111     

112    <div class="people-slider-container"> 

113        <div id="code-${randomNamespace}" class="people-slider people-slider-${randomNamespace}" <#if !accordianOpen> style="display: none;"</#if>></div> 

114    </div> 

115 

116</div> 

117 

118 

119<style> 

120.owl-nav.disabled { 

121    display:none; 

122} 

123.people-slider-container { 

124    max-width: 1200px; 

125    margin: 0 auto; 

126} 

127.people-slider { 

128    position:relative; 

129    color: #282828 

130} 

131.people-slider button.owl-prev { 

132    position: absolute; 

133    left: 0; 

134    top: 35%; 

135    color: white; 

136    background: #ed61ba; 

137    font-size: 30px; 

138    border: none; 

139    border-radius: 50%; 

140    width: 40px; 

141    height: 40px; 

142    line-height: 0; 

143} 

144.people-slider button.owl-prev span { 

145    display:none; 

146} 

147.people-slider button.owl-prev:after { 

148    content: ''; 

149    height: 15px; 

150    width: 15px; 

151    color: white; 

152    transform: rotate(-45deg); 

153    border-top: 5px solid white; 

154    border-left: 5px solid white; 

155    position: absolute; 

156    right: 10px; 

157    margin-top: -7px; 

158} 

159.people-slider button.owl-next { 

160    position: absolute; 

161    right: 0; 

162    top: 35%; 

163    color:white; 

164    background: #ed61ba; 

165    font-size: 30px; 

166    border: none; 

167    border-radius: 50%; 

168    width: 40px; 

169    height: 40px; 

170    line-height: 0; 

171} 

172.people-slider button.owl-next span { 

173    display:none; 

174} 

175.people-slider button.owl-next:after { 

176    content:''; 

177    height:15px; 

178    width:15px; 

179    color:white; 

180    transform:rotate(45deg); 

181    border-top:5px solid white; 

182    border-right:5px solid white; 

183    position:absolute; 

184    left:10px; 

185    margin-top:-7px; 

186} 

187.people-slider .owl-stage { 

188    display:flex; 

189} 

190.people-slider .owl-stage-outer { 

191    overflow-x:hidden; 

192} 

193#wrapper .owl-stage-outer:before { 

194    background: none; 

195} 

196#wrapper .owl-stage-outer:after { 

197    background: none; 

198} 

199.person-accordian i { 

200    border: 1px #282828 solid; 

201    padding: 1px 5px 2px 5px; 

202    border-radius: 5px; 

203    font-weight: 600; 

204    margin-right: 10px; 

205} 

206.people-container { 

207    margin-bottom: 0; 

208    background-image: url(/o/uea-website-theme/images/concrete.jpg); 

209    padding: 1px 0 0 0; 

210} 

211.people-container header { 

212    margin: 0 auto; 

213    max-width: 1200px; 

214    padding: 0 25px; 

215    display: flex; 

216    align-items:center; 

217    justify-content:space-between; 

218} 

219@media screen and (max-width:540px) { 

220    .people-container header { 

221        display:block; 

222    } 

223} 

224.people-container header h2 { 

225    text-transform: uppercase; 

226    font-weight: 900; 

227    letter-spacing: 0.19em; 

228    font-size: 26px; 

229    margin:40px 0 15px; 

230} 

231 

232.people-container .subHeading { 

233    display: flex; 

234    width: 100%; 

235    max-width:1200px; 

236    padding:0 25px; 

237    margin:20px auto 0; 

238} 

239.people-container .subHeading h3 { 

240    font-weight: 600; 

241    font-size: 20px; 

242    display: inline; 

243    float: left; 

244    margin: 0; 

245} 

246 

247.people-container .search .search { 

248    padding: 8px 0 4px 0; 

249    margin:40px 0 15px; 

250} 

251@media screen and (max-width:540px) { 

252  .people-container .search .search { 

253    margin: 0; 

254  } 

255} 

256.people-container .search i.icon-angle-right { 

257    padding-left: 10px; 

258    font-size: 16px; 

259    font-weight: 600; 

260} 

261.people-container header a.search { 

262    margin: 40px 65px 0 20px; 

263    width: 225px; 

264} 

265.people-card { 

266    padding:25px; 

267    text-align:center; 

268} 

269.people-card--image { 

270    aspect-ratio: 1; 

271    width:300px; 

272    object-fit:cover; 

273    margin:0 auto; 

274    border-radius:8px; 

275} 

276.image { 

277    position:relative; 

278} 

279.image:hover .people-card--jobroles { 

280    height:100%; 

281} 

282.people-card--jobroles { 

283    position:absolute; 

284    top:0; 

285    left:50%; 

286    transform:translate(-50%,0); 

287    height:0; 

288    background:rgba(0,0,0,0.85); 

289    color:white; 

290    width: 300px; 

291    max-width: 100%; 

292    overflow:scroll; 

293    border-radius:8px; 

294    display:flex; 

295    align-items:center; 

296    justify-content:center; 

297    font-weight:700; 

298} 

299.people-card--jobroles ul { 

300    list-style:none; 

301    padding:20px; 

302    color:transparent; 

303    position:relative; 

304    height:100%; 

305    text-align:left; 

306} 

307.people-card--jobroles ul li { 

308    color:white; 

309    border-left: 3px #ec61b9 solid; 

310    padding:0 5px; 

311} 

312.people-card--name { 

313    width:300px; 

314    max-width:100%; 

315    margin:10px auto 0; 

316    font-weight:bold; 

317    font-size:16px; 

318    position:relative; 

319    display:flex; 

320    align-items:center; 

321    padding-right:30px; 

322} 

323.people-card--name:after { 

324    content:''; 

325    height:10px; 

326    width:10px; 

327    transform:rotate(45deg); 

328    border-top:2px solid black; 

329    border-right:2px solid black; 

330    position:absolute; 

331    right:0; 

332    margin-top:-2px; 

333} 

334.people-card--name a { 

335    color:#282828; 

336    text-decoration:none; 

337} 

338.people-card--name a:hover { 

339    color:#ed61ba; 

340} 

341</style> 

342 

343     

344<script> 

345    $(document).ready(function () { 

346        (async function () { 

347            const data = JSON.stringify({ 

348                query: ` 

349                    query peopleFilter { 

350                        peopleFilter(${params}) { 

351                            title 

352                            forename 

353                            surname 

354                            known_as_forename 

355                            known_as_surname 

356                            profile_photo 

357                            uea_pretty_url 

358                            activeAssociatedOrganizations { 

359                                data { 

360                                    jobRole { 

361                                        name 

362                                    } 

363                                    organization { 

364                                        name 

365                                    } 

366                                } 

367                            }  

368                        } 

369                    } 

370                `, 

371            }); 

372            const domain = window.location.hostname; 

373            let env; 

374            if(domain.includes("test")) { 

375                env = "https://testwave.uea.ac.uk/graphql"; 

376            } else if(domain.includes("uat")) { 

377                env = "https://uatwave.uea.ac.uk/graphql"; 

378            } else { 

379                env = "https://wave.uea.ac.uk/graphql"; 

380            } 

381            const response = await fetch(env, { 

382                method: "POST", 

383                body: data, 

384                headers: { 

385                    "Content-Type": "application/json", 

386                    "Content-Length": data.length, 

387                }, 

388            }); 

389             

390            const json = await response.json(); 

391            let text = ""; 

392            const people = json.data.peopleFilter; 

393            let peopleArray = []; 

394            let peopleKeys = []; 

395 

396            if (people.length == 0 ) { 

397                $('.people-container').remove(); 

398            } else { 

399                people.forEach( 

400                (person) => { 

401                    if(!peopleKeys.includes(person.uea_pretty_url)) 

402                    { 

403                        peopleArray.push(person); 

404                        peopleKeys.push(person.uea_pretty_url); 

405                    } 

406                    } 

407                ) 

408                peopleArray.forEach(createCard); 

409             

410                function createCard(item) { 

411                    let jobs; 

412                    if(item.activeAssociatedOrganizations && item.activeAssociatedOrganizations.data) { 

413                    jobs = item.activeAssociatedOrganizations.data.map((role) => role); 

414                    } 

415                    let addRoles; 

416                    let jobTitles 

417                    if (jobs.length > 0) { 

418                        jobTitles = jobs.map((job) => "<li>" + (job.jobRole ? job.jobRole.name  + ", " : '') + job.organization.name + "</li>");  

419                        jobTitles = jobTitles.toString(); 

420                        jobTitles.replace("','",""); 

421                        addRoles = "<div class='people-card--jobroles'><ul>" + jobTitles + "</ul></div>"; 

422                    } else { 

423                        addRoles = "" 

424                    } 

425                    text += 

426                        "<div class='item'><div class='people-card'><div class='image'><img class='owl-lazy people-card--image' data-src='" +  

427                        item.profile_photo + 

428                        "' alt='" + 

429                        item.known_as_forename +  

430                        " " +  

431                        item.known_as_surname +  

432                        "'/>" + 

433                        addRoles +  

434                        "</div><a href='https://research-portal.uea.ac.uk/en/persons/" + 

435                        item.uea_pretty_url + 

436                        "' target='_blank' rel='nofollow noreferrer' class='people-card--name'>" +  

437                        (item.title ? item.title : '') +  

438                        " " +  

439                        item.known_as_forename +  

440                        " " +  

441                        item.known_as_surname +  

442                        "</a></div></div>"; 

443                } 

444 

445                document.getElementById("code-${randomNamespace}").innerHTML = text; 

446             

447                let owl = $(".people-slider-${randomNamespace}"); 

448 

449                let colSize = '${colSize}'; 

450                let responsive = []; 

451 

452                if (colSize == '8_cols'){ 

453                    responsive = [1,1,2,2,2] 

454                } else { 

455                    responsive = [1,1,2,3,4] 

456                } 

457 

458                owl.owlCarousel({ 

459                    dots:false, 

460                    loop:$('.owl-carousel .item').size() > 1 ? true:false, 

461                    nav: $('.owl-carousel .item').size() > 1 ? false:true, 

462                    autoplayHoverPause: true, 

463                    lazyLoad: "ondemand", 

464                    responsive: { 

465                        0: { 

466                        items: responsive[0] 

467                        }, 

468                        320: { 

469                        items: responsive[1] 

470                        }, 

471                        640: { 

472                        items: responsive[2] 

473                        }, 

474                        960: { 

475                        items: responsive[3] 

476                        }, 

477                        1280: { 

478                        items: responsive[4] 

479                        }, 

480                    }, 

481                }); 

482 

483                owl.on('translated.owl.carousel', function(e){ 

484                    let items = e.item.count; 

485                    let item = e.item.index; 

486                    let last = e.item.count - e.page.size; 

487 

488                    if (item < 1) { 

489                        $('.people-slider-${randomNamespace} button.owl-prev').hide(); 

490                    } else { 

491                        $('.people-slider-${randomNamespace} button.owl-prev').show(); 

492                    } 

493 

494                    if (item > last-1) { 

495                        $('.people-slider-${randomNamespace} button.owl-next').hide(); 

496                    } else { 

497                        $('.people-slider-${randomNamespace} button.owl-next').show(); 

498                    } 

499                }); 

500 

501                $('.people-slider-${randomNamespace} button.owl-next, .people-slider-${randomNamespace} button.owl-prev').click(function(){ 

502                    owl.trigger('play.owl.autoplay',[2000]); 

503                }); 

504 

505                $('.people-slider').first().css( 'display', 'block'); 

506 

507                $('.person-accordian i').first().removeClass('icon-angle-down'); 

508                $('.people-slider-${randomNamespace} button.owl-prev').hide(); 

509 

510                $('.person-accordian__${randomNamespace}').click(function() { 

511                    $('.person-accordian__${randomNamespace} i').toggleClass('icon-angle-down'); 

512                    $('.people-slider-${randomNamespace}').slideToggle(); 

513                    $('.people-slider').css( "font-family", "'Brandon Text', 'brandon-grotesque', sans-serif" ); 

514                }); 

515                 

516            } 

517        })(); 

518    }); 

519</script>