Ryan Carpenter
1b97ca6412
added character paths fixed heraldry & character click events fast-forward button moves to next book/season
283 lines
11 KiB
HTML
283 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.13.1/lodash.min.js'></script>
|
|
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js'></script>
|
|
<script src='https://cdnjs.cloudflare.com/ajax/libs/angularjs-slider/5.4.0/rzslider.min.js'></script>
|
|
<script src='js/angular-simple-logger.min.js'></script>
|
|
<script src='js/angular-google-maps.min.js'></script>
|
|
<script src="js/angular-csv-service.min.js"></script>
|
|
<script src="js/angular-toggle-switch.min.js"></script>
|
|
<script src="js/q-spread.min.js"></script>
|
|
<script src='js/ui-bootstrap-2.0.0.min.js'></script>
|
|
<script src='js/app.js'></script>
|
|
<script src='js/services.js'></script>
|
|
<script src='js/controller.js'></script>
|
|
|
|
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/angularjs-slider/5.4.0/rzslider.min.css" rel="stylesheet">
|
|
<link href="css/angular-toggle-switch.css" rel="stylesheet">
|
|
<link href="css/quartermaester.css" rel="stylesheet">
|
|
|
|
<title>Interactive Game of Thrones Map</title>
|
|
</head>
|
|
<body ng-app="quartermaester" ng-controller="mapCtrl">
|
|
|
|
<ui-gmap-google-map center='map.center' zoom='map.zoom' options='map.options' events='map.events' control='map.control'>
|
|
|
|
<!-- Base map tiles from Ser Mountain Goat -->
|
|
<ui-gmap-map-type options='map.smgMapType'></ui-gmap-map-type>
|
|
|
|
<!-- Location Markers -->
|
|
<ui-gmap-markers
|
|
models='mapModels.towns'
|
|
coords="'coords'"
|
|
click='map.locationClick'
|
|
options="'options'"
|
|
idkey="'key'">
|
|
</ui-gmap-markers>
|
|
|
|
<!-- Heraldry Markers -->
|
|
<ui-gmap-markers
|
|
models='mapModels.heraldry'
|
|
coords="'coords'"
|
|
options="'options'"
|
|
click="map.heraldryClick"
|
|
idkey="'key'">
|
|
</ui-gmap-markers>
|
|
|
|
<!-- Region Polygons -->
|
|
<ui-gmap-polygons
|
|
models="mapModels.regions"
|
|
path="'path'"
|
|
fill="'fill'"
|
|
stroke="'stroke'"
|
|
visible="options.geographicRegions"
|
|
idKey="'key'">
|
|
</ui-gmap-polygons>
|
|
|
|
<!-- Character Markers -->
|
|
<ui-gmap-markers
|
|
models='mapModels.characters'
|
|
coords="'coords'"
|
|
options="'options'"
|
|
click="map.characterClick"
|
|
type="'spider'"
|
|
idkey="'key'">
|
|
</ui-gmap-markers>
|
|
|
|
<!-- Character Paths -->
|
|
<ui-gmap-polylines
|
|
models='mapModels.paths'
|
|
path="'path'"
|
|
stroke="'stroke'"
|
|
static="'static'"
|
|
icons="'icons'"
|
|
idkey="'key'">
|
|
</ui-gmap-polylines>
|
|
|
|
</ui-gmap-google-map>
|
|
|
|
<div id="side" class=".col-xs-12 .col-md-3">
|
|
<!-- <p>{{state}}</p> -->
|
|
<div id="slider" ng-show="state.substring(0,6)=='slider'">
|
|
<h1>
|
|
<span class="glyphicon glyphicon-menu-hamburger" ng-click="toState('menu')"></span>
|
|
<span ng-show="slider.show=='episodes'" ng-bind="episodes[slider.currentEpisode].name" title="{{episodes[slider.currentEpisode].name}}" ng-click="toState('slider-full')"></span>
|
|
<span ng-show="slider.show=='chapters'" ng-bind="chapters[slider.currentChapter].name" title="{{chapters[slider.currentChapter].name}}" ng-click="toState('slider-full')"></span>
|
|
</h1>
|
|
<div id="slider-control" ng-show="state=='slider-full'">
|
|
<div class="btn-group btn-group-2" role="group">
|
|
<button type="button" class="btn" ng-click="slider.show='episodes';" ng-class="{'btn-primary':(slider.show=='episodes'), 'btn-default':(slider.show!='episodes')}">
|
|
<i class="glyphicon glyphicon-facetime-video"></i>
|
|
HBO Show
|
|
</button>
|
|
<button type="button" class="btn" ng-click="slider.show='chapters';" ng-class="{'btn-primary':(slider.show=='chapters'), 'btn-default':(slider.show!='chapters')}">
|
|
<i class="glyphicon glyphicon-book"></i>
|
|
Books
|
|
</button>
|
|
</div>
|
|
<rzslider
|
|
ng-show="slider.show=='episodes'"
|
|
rz-slider-model="slider.currentEpisode"
|
|
rz-slider-options="{floor:0, ceil:episodes.length-1}">
|
|
</rzslider>
|
|
<rzslider
|
|
ng-show="slider.show=='chapters'"
|
|
rz-slider-model="slider.currentChapter"
|
|
rz-slider-options="{floor:0, ceil:chapters.length-1}">
|
|
</rzslider>
|
|
<div class="btn-group btn-group-5" role="group">
|
|
<button type="button" class="btn btn-default" ng-click="slideTo(-10)">
|
|
<i class="glyphicon glyphicon-step-backward"></i>
|
|
</button>
|
|
<button type="button" class="btn btn-default" ng-click="slideTo(-1)">
|
|
<i class="glyphicon glyphicon-chevron-left"></i>
|
|
</button>
|
|
<a role="button" class="btn btn-default" ng-show="slider.show=='episodes'" ng-href="{{episodes[slider.currentEpisode].url}}">
|
|
<i class="glyphicon glyphicon-link"></i>
|
|
</a>
|
|
<a role="button" class="btn btn-default" ng-show="slider.show=='chapters'" ng-href="{{chapters[slider.currentChapter].url}}">
|
|
<i class="glyphicon glyphicon-link"></i>
|
|
</a>
|
|
<button type="button" class="btn btn-default" ng-click="slideTo(1)">
|
|
<i class="glyphicon glyphicon-chevron-right"></i>
|
|
</button>
|
|
<button type="button" class="btn btn-default" ng-click="slideTo(10)">
|
|
<i class="glyphicon glyphicon-step-forward"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="menu" ng-show="state=='menu'" class="list-group">
|
|
<h1>
|
|
<span class="glyphicon glyphicon-menu-left" ng-click="toState('slider')"></span>
|
|
Quartermaester.info
|
|
</h1>
|
|
<div class="list-group">
|
|
<button class="list-group-item btn-clear" ng-click="toState('slider-full')">
|
|
<i class="glyphicon glyphicon-eye-close"></i>
|
|
Spoiler Control
|
|
</button>
|
|
<button class="list-group-item btn-clear" ng-click="toState('characters')">
|
|
<i class="glyphicon glyphicon-user"></i>
|
|
Characters
|
|
</button>
|
|
<button class="list-group-item btn-clear" ng-click="toState('search')">
|
|
<i class="glyphicon glyphicon-search"></i>
|
|
Search
|
|
</button>
|
|
<button class="list-group-item btn-clear" ng-click="toState('options')">
|
|
<i class="glyphicon glyphicon-cog"></i>
|
|
Options
|
|
</button>
|
|
<a href="about.html" role="button" class="list-group-item btn-clear">
|
|
<i class="glyphicon glyphicon-question-sign"></i>
|
|
About
|
|
</a>
|
|
<a href="resources.html" role="button" class="list-group-item btn-clear">
|
|
<i class="glyphicon glyphicon-thumbs-up"></i>
|
|
Other Resources
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="location" ng-show="state=='location'">
|
|
<h1>
|
|
<span class="glyphicon glyphicon-menu-left" ng-click="toState('slider')"></span>
|
|
Location Details
|
|
</h1>
|
|
<div class="list-group">
|
|
<a ng-href="{{locationDetail.url}}" role="button" class="list-group-item btn-clear">
|
|
<i class="glyphicon glyphicon glyphicon-map-marker"></i>
|
|
{{locationDetail.name}}
|
|
<i class="glyphicon glyphicon-menu-right pull-right"></i>
|
|
</a>
|
|
<a ng-href="{{locationDetail.houseUrl}}" role="button" class="list-group-item btn-clear" ng-if="locationDetail.houseUrl">
|
|
<img ng-src="{{locationDetail.houseImg}}">
|
|
{{locationDetail.house}}
|
|
<i class="glyphicon glyphicon-menu-right pull-right"></i>
|
|
</a>
|
|
<a ng-href="{{locationDetail.direct}}" role="button" class="list-group-item btn-clear">
|
|
<i class="glyphicon glyphicon-pushpin"></i>
|
|
Direct Link
|
|
<i class="glyphicon glyphicon-menu-right pull-right"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="characters" ng-show="state=='characters'">
|
|
<h1>
|
|
<span class="glyphicon glyphicon-menu-left" ng-click="toState('slider')"></span>
|
|
Characters
|
|
</h1>
|
|
<ul class="list-group">
|
|
<li ng-repeat="character in characters" class="list-group-item">
|
|
<a ng-href="{{character.house.url}}" ng-if="character.house!=''" class="hasimg">
|
|
<img ng-src="{{character.house.img}}">
|
|
</a>
|
|
<a ng-href="{{character.url}}" ng-class="{noimg:(character.house=='')}">{{character.name}}</a>
|
|
<toggle-switch
|
|
ng-model="options.characters[character.key]"
|
|
on-label="Show"
|
|
off-label="Hide"
|
|
class="pull-right">
|
|
</toggle-switch>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div id="search" ng-show="state=='search'">
|
|
<h1>
|
|
<span class="glyphicon glyphicon-menu-left" ng-click="toState('slider')"></span>
|
|
<div class="input-group pull-right" style="width:250px;">
|
|
<input id="searchInput" ng-model="search" type="text" class="form-control" placeholder="Search towns, houses, characters, titles">
|
|
<span class="input-group-addon">
|
|
<i class="glyphicon glyphicon-search"></i>
|
|
</span>
|
|
</div>
|
|
</h1>
|
|
<div class="list-group" ng-show="search!==''">
|
|
<button
|
|
ng-repeat="result in searchResults | filter:{ title: search }"
|
|
class="list-group-item"
|
|
ng-click="result.click()">
|
|
<i class="glyphicon {{result.icon}}"></i>
|
|
{{result.title}}
|
|
<small>{{result.subtitle}}</small>
|
|
<i class="glyphicon glyphicon-menu-right pull-right"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="options" ng-show="state=='options'">
|
|
<h1>
|
|
<span class="glyphicon glyphicon-menu-left" ng-click="toState('slider')"></span>
|
|
Options
|
|
</h1>
|
|
<ul class="list-group">
|
|
<li class="list-group-item">
|
|
Character Paths
|
|
<toggle-switch
|
|
ng-model="options.characterPaths"
|
|
on-label="Show"
|
|
off-label="Hide"
|
|
class="pull-right">
|
|
</toggle-switch>
|
|
</li>
|
|
<li class="list-group-item">
|
|
House Heraldry
|
|
<toggle-switch
|
|
ng-model="options.houseHeraldry"
|
|
on-label="Show"
|
|
off-label="Hide"
|
|
class="pull-right">
|
|
</toggle-switch>
|
|
</li><li class="list-group-item">
|
|
Geographic Regions
|
|
<toggle-switch
|
|
ng-model="options.geographicRegions"
|
|
on-label="Show"
|
|
off-label="Hide"
|
|
class="pull-right">
|
|
</toggle-switch>
|
|
</li><li class="list-group-item">
|
|
Political Allegiances
|
|
<toggle-switch
|
|
ng-model="options.politicalAllegiances"
|
|
on-label="Show"
|
|
off-label="Hide"
|
|
class="pull-right">
|
|
</toggle-switch>
|
|
</li>
|
|
</ul>
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|