Showing objects near Gallery {{gallery}}
'+ 12 | 'Showing Museum Highlights
'+ 16 | 'Showing all ArtStories
'+ 21 | '\[(PR\d+)\]<\/p>/, match = ann.description.match(proverbLinkPattern), proverbId = match && match[1]
14 | ann.proverb = proverbId
15 | ann.trustedAudio = $sce.trustAsResourceUrl($scope.cdn+'goldweights/'+proverbId+'.mp3')
16 | ann.trustedDescription = $sce.trustAsHtml(ann.description.replace(proverbLinkPattern, ''))
17 | angular.forEach(ann.attachments, function(att) {
18 | var mash = att.image_id.split(' ');
19 | att.image_id = mash[0];
20 | att.object_id = mash[1];
21 | att.meta1 = att.metaG = '';
22 | if( objectMeta.isActive ) { // Let's hope it is, because this data does not exist elsewhere
23 | att.title = objectMeta.get( att.object_id, 'gw_title' );
24 | att.meta1 = objectMeta.get( att.object_id, 'meta1' );
25 | att.meta2 = objectMeta.get( att.object_id, 'gw_meta2' );
26 | }
27 | if( objectThumb.isActive ) {
28 | att.thumb = objectThumb.get( att.image_id );
29 | }
30 | })
31 | })
32 | })
33 | $scope.$$phase || $scope.$apply()
34 | }
35 | $scope.$on('viewChanged', loadNotes)
36 | if($scope.mapLoaded) loadNotes()
37 | })
38 |
39 | $scope.play = function(scope, $event) {
40 | $('audio').each(function() { this.pause() })
41 | var audio = $event.target.querySelector('audio')
42 | audio.paused ? audio.play() : audio.pause()
43 | scope.playing = !audio.paused
44 | audio.addEventListener('ended', function() {
45 | scope.playing = false
46 | scope.$apply()
47 | })
48 | }
49 |
50 | $scope.toggle = function(scope) {
51 | $scope.popupWeight = ($scope.popupWeight == scope ? undefined : scope)
52 | }
53 |
54 | $scope.toggleInfo = function(scope) {
55 | $scope.showInfo = !$scope.showInfo
56 | }
57 |
58 | if(window.location.href.match(/west/)) {
59 | $('body').addClass('west')
60 | setTimeout(function() {
61 | window.scrollTo(0, document.body.scrollHeight)
62 | }, 1000)
63 | }
64 |
65 | $scope.home = function() {
66 | angular.forEach($scope.notes[0].annotations, function(note) { note.active = false })
67 | $scope.$$phase || $scope.$apply()
68 | }
69 |
70 | }])
--------------------------------------------------------------------------------
/fonts/fontello/css/griot-ie7.css:
--------------------------------------------------------------------------------
1 | [class^="icon-"], [class*=" icon-"] {
2 | font-family: 'griot';
3 | font-style: normal;
4 | font-weight: normal;
5 |
6 | /* fix buttons height */
7 | line-height: 1em;
8 |
9 | /* you can be more comfortable with increased icons size */
10 | /* font-size: 120%; */
11 | }
12 |
13 | .icon-resize-full { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
14 | .icon-resize-normal { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
15 | .icon-home { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
16 | .icon-menu { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
17 | .icon-left-open { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
18 | .icon-right-open { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
19 | .icon-left { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
20 | .icon-right { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
21 | .icon-left-small { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
22 | .icon-right-small { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
23 | .icon-play { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
24 | .icon-info-circled { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
25 | .icon-info-circled-alt { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
26 | .icon-cancel-circled { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
27 | .icon-cancel-circled-outline { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
28 | .icon-cancel { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
29 | .icon-cancel-outline { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
30 | .icon-pause { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
31 | .icon-back { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
32 | .icon-info { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
33 | .icon-doc-text { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
34 | .icon-plus { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
35 | .icon-minus { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
36 | .icon-resize-vertical { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
37 | .icon-mail { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
--------------------------------------------------------------------------------
/fonts/fontello/README.txt:
--------------------------------------------------------------------------------
1 | This webfont is generated by http://fontello.com open source project.
2 |
3 |
4 | ================================================================================
5 | Please, note, that you should obey original font licences, used to make this
6 | webfont pack. Details available in LICENSE.txt file.
7 |
8 | - Usually, it's enough to publish content of LICENSE.txt file somewhere on your
9 | site in "About" section.
10 |
11 | - If your project is open-source, usually, it will be ok to make LICENSE.txt
12 | file publically available in your repository.
13 |
14 | - Fonts, used in Fontello, don't require to make clickable links on your site.
15 | But any kind of additional authors crediting is welcome.
16 | ================================================================================
17 |
18 |
19 | Comments on archive content
20 | ---------------------------
21 |
22 | - /font/* - fonts in different formats
23 |
24 | - /css/* - different kinds of css, for all situations. Should be ok with
25 | twitter bootstrap. Also, you can skip style and assign icon classes
26 | directly to text elements, if you don't mind about IE7.
27 |
28 | - demo.html - demo file, to show your webfont content
29 |
30 | - LICENSE.txt - license info about source fonts, used to build your one.
31 |
32 | - config.json - keeps your settings. You can import it back to fontello anytime,
33 | to continue your work
34 |
35 |
36 | Why so many CSS files ?
37 | -----------------------
38 |
39 | Because we like to fit all your needs :)
40 |
41 | - basic file, \[(http:\/\/.*)\]<\/p>/, '').trim()
28 | }
29 | page.trustedText = $sce.trustAsHtml(page.text.replace(/ ( )?<\/p>/,''))
30 | }
31 | page.trustedVideo = $sce.trustAsResourceUrl(page.video)
32 | page.poster = $sce.trustAsResourceUrl(page.video + '.jpg')
33 | page.contentMinimized = false;
34 | page.toggleMinimizeContent = function(){
35 | this.contentMinimized = !this.contentMinimized;
36 | setTimeout(Zoomer.windowResized, 100)
37 | }
38 | page.meta = $sce.trustAsHtml( page.meta );
39 | page.metaB = $sce.trustAsHtml( page.metaB );
40 |
41 | if( mediaMeta.isActive ) {
42 | // Identify the key - media URL for videos, media ID for zoomers.
43 | var key = null, keyB = null;
44 | switch( page.type ) {
45 | case 'text':
46 | break;
47 | case 'video':
48 | key = page.video;
49 | break;
50 | case 'image':
51 | key = page.image;
52 | break;
53 | case 'comparison':
54 | key = page.image;
55 | keyB = page.imageB;
56 | break;
57 | }
58 | // Look up in mediaMeta hash or fall back to GriotWP value.
59 | if( key ) {
60 | page.meta = mediaMeta.get( key ) || page.meta;
61 | }
62 | if( keyB ) {
63 | page.metaB = mediaMeta.get( keyB ) || page.metaB;
64 | }
65 | }
66 |
67 | // Glance Text
68 | switch( page.type ){
69 | case 'video':
70 | page.glanceText = 'Tap to play video';
71 | break;
72 | case 'image':
73 | page.glanceText = 'Press to view image';
74 | break;
75 | case 'comparison':
76 | page.glanceText = 'Press to view images';
77 | break;
78 | default:
79 | page.glanceText = 'Press to view';
80 | }
81 |
82 | });
83 |
84 | segmentio.track('Opened a Story', {id: $scope.id, name: $scope.story.title})
85 | })
86 |
87 | setTimeout(Zoomer.windowResized, 100)
88 | $scope.storyMenuOpen = false
89 | $scope.toggleStoryMenu = function(){
90 | $scope.storyMenuOpen = !$scope.storyMenuOpen
91 | }
92 |
93 | $scope.activePage = 0
94 | $scope.updateActivePage = function(newPage){
95 | if((newPage > -1) && (newPage < $scope.story.pages.length)){
96 | $scope.activePage = newPage
97 | segmentio.track('Paged a Story', {id: $scope.id, name: $scope.story.title, page: newPage})
98 | }
99 | setTimeout(Zoomer.windowResized, 200)
100 | }
101 | $scope.backToObject=function(){
102 | $rootScope.nextView = 'more'
103 | if(history.length > 1) {
104 | history.back();
105 | } else {
106 | window.location = window.location.origin + window.location.pathname
107 | }
108 | }
109 | }
110 | ])
--------------------------------------------------------------------------------
/css/goldweights.css:
--------------------------------------------------------------------------------
1 | /* Goldweights
2 | */
3 | #goldweights .flatmap .hint {
4 | display: none;
5 | z-index: -1;
6 | }
7 |
8 | #goldweights #zoomer {
9 | height: 551px;
10 | min-height: 551px;
11 | }
12 |
13 | #goldweights ol {
14 | list-style: none;
15 | padding: 0;
16 | margin: 0;
17 | }
18 |
19 | #goldweights ol > li {
20 | display: none;
21 | }
22 | #goldweights ol > li.active {
23 | display: block;
24 | margin: 0 1em 0 5em;
25 | }
26 | #goldweights li.active ~ li.active {
27 | display: none;
28 | }
29 |
30 | #goldweights h3 {
31 | position: absolute;
32 | top:-60px;
33 | left:55px;
34 | }
35 |
36 | #goldweights .play {
37 | /*width: 2.35em;
38 | height: 2.35em;*/
39 | width:44px;
40 | height:44px;
41 | padding: 1px 0 0 3px;
42 | border: 3px solid #000;
43 | border-radius: 50%;
44 | font-size:1.45em;
45 | background-color:#ededed;
46 | text-align:center;
47 | position: absolute;
48 | top:-55px;
49 | left:2px;
50 | }
51 | #goldweights .play.icon-pause {
52 | padding: 1px 0 0 0px;
53 | }
54 |
55 | #goldweights figure.popup {
56 | position: fixed;
57 | width: 100%;
58 | height: 100vh;
59 | top: 0;
60 | left: 0;
61 | margin: 0;
62 | z-index: 1000;
63 | }
64 | @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
65 | #goldweights figure.popup { height: 748px; }
66 | }
67 | @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
68 | #goldweights figure.popup { height: 1004px; }
69 | }
70 |
71 | #goldweights figure.popup .flatmap {
72 | width: 100%;
73 | height: 100%;
74 | z-index: 10000;
75 | }
76 | #goldweights .popup a.icon, .popup aside {
77 | position: absolute;
78 | bottom: 0;
79 | z-index: 10000000;
80 | padding: 10px;
81 | color: black;
82 | background-color: rgba(250,250,250,0.9);
83 | opacity: 1;
84 | max-height: 748px;
85 | overflow-y: scroll;
86 | }
87 | #goldweights .popup a.back {
88 | left: 0;
89 | }
90 | .popup figcaption > a {
91 | font-size: 1em;
92 | font-weight: bold;
93 | text-transform: uppercase;
94 | white-space: nowrap;
95 | }
96 | .popup figcaption > a:before {
97 | font-size: 1.4em;
98 | }
99 | .popup figcaption a.back {
100 | left: 0;
101 | }
102 | .popup figcaption a.credits {
103 | right: 0;
104 | }
105 | #goldweights figcaption aside {
106 | right: 0;
107 | max-width: 45em;
108 | background-color: rgba(250, 250, 250, 0.9);
109 | text-align: right;
110 | }
111 | #goldweights aside > * {
112 | font-weight: 200;
113 | font-size: 0.8rem;
114 | }
115 |
116 | #goldweights aside {
117 | position: relative;
118 | top: 0;
119 | opacity: 1 !important;
120 | }
121 |
122 | #goldweights div.description p:first-child{
123 | margin-top:65px;
124 | }
125 |
126 | #goldweights div.description {
127 | margin-left:55px;
128 | max-width: 33em;
129 | }
130 |
131 | #goldweights li {
132 | position:relative;
133 | margin-left:55px;
134 | }
135 |
136 | #goldweights li ul{
137 | list-style-type: none;
138 | margin-left: 55px;
139 | }
140 |
141 | #goldweights li ul li{
142 | width:25%;
143 | float:left;
144 | margin: 10px 0 !important;
145 | }
146 | #goldweights li ul li.tombstoned {
147 | width: 50%;
148 | position: relative;
149 | }
150 | #goldweights li.tombstoned img {
151 | width: 50%;
152 | }
153 | #goldweights li.tombstoned aside {
154 | position: absolute;
155 | top: 0;
156 | left: 55%;
157 | }
158 |
159 |
160 | body.west {
161 | transition: -webkit-transform 300ms linear;
162 | -webkit-transform-origin: center bottom;
163 | -webkit-transform: rotate(180deg);
164 | margin-bottom: 200px;
165 | max-height: 700px;
166 | }
167 | .west #goldweights #zoomer {
168 | -webkit-transform: rotate(180deg);
169 | }
170 | .west #goldweights #zoomer .noteMarker span {
171 | -webkit-transform: rotate(180deg);
172 | }
173 | #goldweights hr {
174 | clear: both;
175 | display: none;
176 | }
177 |
178 | #goldweights #home {
179 | position: absolute;
180 | top: 567px;
181 | right: 2em;
182 | text-align: right;
183 | }
184 | #goldweights .icon-home {
185 | color: #222;
186 | }
187 | #goldweights #home p {
188 | margin: 0;
189 | }
190 |
--------------------------------------------------------------------------------
/fonts/fontello/config.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "griot",
3 | "css_prefix_text": "icon-",
4 | "css_use_suffix": false,
5 | "hinting": true,
6 | "units_per_em": 1000,
7 | "ascent": 850,
8 | "glyphs": [
9 | {
10 | "uid": "d3b3f17bc3eb7cd809a07bbd4d178bee",
11 | "css": "resize-vertical",
12 | "code": 59415,
13 | "src": "fontawesome"
14 | },
15 | {
16 | "uid": "e335adbc2d898c7d85d40c507796e7b4",
17 | "css": "mail",
18 | "code": 59416,
19 | "src": "entypo"
20 | },
21 | {
22 | "uid": "3ba4275937db277075fc47d6b5a69a2e",
23 | "css": "back",
24 | "code": 59410,
25 | "src": "entypo"
26 | },
27 | {
28 | "uid": "24aba8757d4a7b49568c98a577a85df3",
29 | "css": "cancel-outline",
30 | "code": 59408,
31 | "src": "typicons"
32 | },
33 | {
34 | "uid": "1dq4tek4k8ea7zlj4kc3w83itnutaxg5",
35 | "css": "cancel",
36 | "code": 59407,
37 | "src": "typicons"
38 | },
39 | {
40 | "uid": "517522647a556192fbc78aa391b7b0c2",
41 | "css": "cancel-circled-outline",
42 | "code": 59406,
43 | "src": "typicons"
44 | },
45 | {
46 | "uid": "3327862df439988139b61814143b7a42",
47 | "css": "cancel-circled",
48 | "code": 59405,
49 | "src": "typicons"
50 | },
51 | {
52 | "uid": "1gf923f9wvaezxmfon515dglxa3drf0e",
53 | "css": "plus",
54 | "code": 59413,
55 | "src": "typicons"
56 | },
57 | {
58 | "uid": "qab5uvjyoc3uu4d2pvt8soshtgkuvpak",
59 | "css": "minus",
60 | "code": 59414,
61 | "src": "typicons"
62 | },
63 | {
64 | "uid": "85fda3129wk4amvn25wrq843sbj3yzl0",
65 | "css": "info",
66 | "code": 59411,
67 | "src": "typicons"
68 | },
69 | {
70 | "uid": "w3nzesrlbezu6f30q7ytyq919p6gdlb6",
71 | "css": "home",
72 | "code": 59394,
73 | "src": "typicons"
74 | },
75 | {
76 | "uid": "6a06892e76b81e023da6ddfb38a26b37",
77 | "css": "doc-text",
78 | "code": 59412,
79 | "src": "typicons"
80 | },
81 | {
82 | "uid": "jh3jpcb1t1bcm80gidkadilh080aq79h",
83 | "css": "menu",
84 | "code": 59395,
85 | "src": "typicons"
86 | },
87 | {
88 | "uid": "cdfalpadi7huwv9ah4fef2gpfpb4c6qm",
89 | "css": "resize-full",
90 | "code": 59392,
91 | "src": "typicons"
92 | },
93 | {
94 | "uid": "8d2bc2d959a55e76466bbef6e84c8373",
95 | "css": "resize-normal",
96 | "code": 59393,
97 | "src": "typicons"
98 | },
99 | {
100 | "uid": "wlri7uftq4zbi82q2xuf08ayd8kpijlk",
101 | "css": "left-open",
102 | "code": 59396,
103 | "src": "typicons"
104 | },
105 | {
106 | "uid": "6zhrgcf3co77hnljttd3b2mrc8z5fiq5",
107 | "css": "right-open",
108 | "code": 59397,
109 | "src": "typicons"
110 | },
111 | {
112 | "uid": "qqsxko9kqxh5g53lz33yonkpc2rpkvkn",
113 | "css": "left",
114 | "code": 59398,
115 | "src": "typicons"
116 | },
117 | {
118 | "uid": "4oaz56fmzfvx7vry2o540n9l4z79fz8t",
119 | "css": "right",
120 | "code": 59399,
121 | "src": "typicons"
122 | },
123 | {
124 | "uid": "58b78b6ca784d5c3db5beefcd9e18061",
125 | "css": "left-small",
126 | "code": 59400,
127 | "src": "typicons"
128 | },
129 | {
130 | "uid": "877a233d7fdca8a1d82615b96ed0d7a2",
131 | "css": "right-small",
132 | "code": 59401,
133 | "src": "typicons"
134 | },
135 | {
136 | "uid": "3e290a111c0f3ee3acbf7b5f17ccc04a",
137 | "css": "play",
138 | "code": 59402,
139 | "src": "typicons"
140 | },
141 | {
142 | "uid": "e44ef09cb81413287d702eefa65dd790",
143 | "css": "pause",
144 | "code": 59409,
145 | "src": "typicons"
146 | },
147 | {
148 | "uid": "8f25d96c5665c84e4403538eef14ec2c",
149 | "css": "info-circled",
150 | "code": 59403,
151 | "src": "mfglabs"
152 | },
153 | {
154 | "uid": "15ba51cbb4d05e6fb88f03a31a7c711c",
155 | "css": "info-circled-alt",
156 | "code": 59404,
157 | "src": "mfglabs"
158 | }
159 | ]
160 | }
--------------------------------------------------------------------------------
/js/factories.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Retrieve external data.
3 | */
4 |
5 | // Tile data
6 | app.factory('tilesaw', ['$http', 'envConfig', function($http, config) {
7 | return { get: function(image) {
8 | return $http.get(config.tilesaw + image + '.tif', {cache: true}).then(function(result) { return result.data; })
9 | }}
10 | }])
11 |
12 | // Application content
13 | app.factory('notes', ['$http', 'envConfig', 'miaThumbnailAdapter', '$sce', '$q', function($http, config, thumbs, $sce, $q) {
14 | window.miaThumbnailAdapter = thumbs // TODO: why isn't this injected below? I can't access inside either of the next functions on L15 and 16
15 | window.$q = $q // again, why!?
16 | return function() {
17 | var d = $q.defer()
18 |
19 | $http.get(config.crashpad, {cache: true}).then(function(result) {
20 | result.data.clusters = require('../clusters/clusters.json') // TODO: PS these shouldn't be hardcoded
21 |
22 | angular.forEach(result.data.objects, function(o) {
23 | o.thumbnail = miaThumbnailAdapter.get(o.views[0].image)
24 | o.title = o.title.replace('&', '&')
25 | })
26 | angular.forEach(result.data.panels, function(panel) {
27 | panel.trustedContent = $sce.trustAsHtml(panel.content)
28 | })
29 |
30 | return result.data;
31 | }).then(function(data) {
32 | // (artstories-image-dimensions.json is 72kb of JSON generated by a makefile task completely dependent on me)
33 | // TODO: compute this hash of image dimensions automatically, codify it into the image server.
34 | // then maybe serve up only the needed images?
35 | var url = "http://cdn.dx.artsmia.org/thumbs/artstories-image-dimensions.json"
36 | return $http.get(url, {cache: true}).then(function(result) {
37 | var allImageDimensions = result.data
38 | data.objects = angular.forEach(data.objects, function(o, id) {
39 | var dimensions = allImageDimensions[o.views[0].image]
40 | if(!dimensions) return console.info('missing dimensions for', id, o.views[0].image)
41 | o.imageWidth = dimensions[0]
42 | o.imageHeight = dimensions[1]
43 | })
44 |
45 | d.resolve(data)
46 | })
47 | })
48 |
49 | return d.promise
50 | }
51 | }])
52 |
53 | app.factory('email', ['$http', 'envConfig', function($http, config) {
54 | return {
55 | share: function(email, params) {
56 | return $http.post(config.emailServer + email, params).success(function(response) {
57 | return response
58 | })
59 | }
60 | }
61 | }])
62 |
63 | app.factory('initIsotope', ['$rootScope', function($rootScope) {
64 | return function() {
65 | if( window.innerWidth < 768 ) {
66 | $rootScope.loaded = true;
67 | return;
68 | }
69 |
70 | var cover = document.querySelector('#cover');
71 |
72 | this.iso = new Isotope( cover, {
73 | itemSelector:'.isotope-item',
74 | layoutMode:'masonryHorizontal',
75 | masonryHorizontal: {
76 | rowHeight: 300,
77 | gutter: 2 // this is only for the vertical space between rows, space each element out with margin-right
78 | },
79 | containerStyle: null,
80 | isInitLayout: false
81 | });
82 |
83 | var centerCover = function(){
84 | // Get height of container
85 | var availableHeight = $('.cover-wrapper').height();
86 |
87 | // Get number of rows - 300px plus 10px gutter.
88 | var rowCount = Math.floor( availableHeight / 302 ) || 1;
89 |
90 | // Get height that will wrap snugly around rows
91 | var newHeight = ( rowCount * 302 ) + 1;
92 |
93 | // Get new top for #cover
94 | var newTop = ( availableHeight - newHeight) / 2;
95 |
96 | // Update cover height and top margin
97 | $('#cover').css({
98 | 'height': newHeight + 'px',
99 | 'top': newTop + 'px'
100 | });
101 |
102 | }
103 |
104 | this.iso.on( 'layoutComplete', function(){
105 |
106 | centerCover();
107 |
108 | $('.cover-item').css({
109 | 'opacity':1
110 | });
111 |
112 | $rootScope.loaded = true;
113 | });
114 |
115 | $(window).on( 'resize', function(){
116 | centerCover();
117 | });
118 |
119 | this.iso.layout();
120 |
121 | };
122 | }])
123 |
--------------------------------------------------------------------------------
/js/directives/note.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Creates and controls annotation markers on a zoomable image (flatmap).
3 | */
4 |
5 | app.directive('note', function(segmentio, $sce) {
6 | var divIcon = L.divIcon({className: 'noteMarker'})
7 | return {
8 | restrict: 'E',
9 | // scope: {note: '=', view: '='},
10 | controller: function($scope) {},
11 | require: '^flatmap',
12 | link: function(scope, element, attrs, flatmapCtrl) {
13 | var jsonToLayer = function(note) {
14 | var geometry, json;
15 | if(note.type == 'FeatureCollection') {
16 | json = {type: 'MultiPolygon', coordinates: [].map.call(note.features, function (f) { return [f.geometry.coordinates[0]] })}
17 | } else {
18 | json = note.geometry
19 | }
20 |
21 | return L.GeoJSON.geometryToLayer(json)
22 | }
23 |
24 | var eachMarker = function(callback) {
25 | angular.forEach(scope.markers, callback)
26 | },
27 | eachLayer = function(layer, callback) {
28 | layer.eachLayer ? layer.eachLayer(callback) : callback(layer)
29 | }
30 |
31 | scope.flatmapCtrl = flatmapCtrl
32 | scope.map = scope.flatmapCtrl.scope.zoom.map
33 | scope.jsonLayer = jsonToLayer(scope.note.geoJSON)
34 | scope.note.index = scope.$parent.$parent.noteCount = (scope.$parent.$parent.noteCount || 0) + 1
35 | divIcon.options.html = "" + scope.note.index + ""
36 | scope.markers = []
37 |
38 | eachLayer(scope.jsonLayer, function(layer) {
39 | scope.markers.push(L.marker(layer.getBounds().getCenter(), {icon: divIcon}))
40 | })
41 |
42 | scope.note.active = false
43 |
44 | var zoomNote = function() {
45 | flatmapCtrl.scope.$broadcast('changeView', scope.view)
46 | flatmapCtrl.scope.$broadcast('changeGeometry', scope.jsonLayer)
47 | scope.note.active = true
48 | scope.$$phase || scope.$apply()
49 | scrollNoteTextIntoView()
50 | }
51 | var scrollNoteTextIntoView = function() { // this is hacky
52 | var noteEl = $('#annotations li.note:nth-child(' + (scope.$index+1) + ')')[0]
53 | if(noteEl) noteEl.scrollIntoViewIfNeeded && noteEl.scrollIntoViewIfNeeded() || noteEl.scrollIntoView()
54 | }
55 | var toggleNoteZoom = function() {
56 | scope.$apply(function() { scope.note.active = !scope.note.active })
57 | }
58 |
59 | scope.$watch('note.active', function(newVal, oldVal) {
60 | var openedOrClosed = undefined
61 | if(!newVal && oldVal && scope.note == flatmapCtrl.scope.lastActiveNote) {
62 | flatmapCtrl.removeJsonLayer()
63 | scope.map.zoomOut(100)
64 | flatmapCtrl.scope.lastActiveNote = null
65 | openedOrClosed = 'Closed'
66 | } else if(newVal && !oldVal) {
67 | var lastNote = flatmapCtrl.scope.lastActiveNote, note = scope.note
68 | if(lastNote) lastNote.active = false
69 | zoomNote()
70 | flatmapCtrl.scope.lastActiveNote = scope.note
71 | openedOrClosed = 'Opened'
72 | scope.$parent.$parent.$parent.glanceText = $sce.trustAsHtml( "Press to view detail " + scope.note.index + "" );
73 | scope.$$phase || scope.$apply()
74 | }
75 | if(openedOrClosed) segmentio.track(openedOrClosed + ' a Detail', {title: scope.note.title, index: scope.note.index, id: flatmapCtrl.scope.$parent.id})
76 |
77 | // The active marker goes to the SW (lower-left) corner of bounds
78 | // inactive markers, center of bounds
79 | var layer = scope.jsonLayer, index = 0
80 | eachLayer(layer, function(_layer) {
81 | scope.markers[index].setLatLng(newVal ? _layer._latlngs[0] : _layer.getBounds().getCenter())
82 | index++
83 | })
84 | })
85 |
86 | flatmapCtrl.scope.$watch('image', function(newVal, oldVal) {
87 | eachMarker(function(marker) {
88 | if(newVal == scope.$parent.view.image) {
89 | marker.setOpacity(1)
90 | marker.on('click', toggleNoteZoom)
91 | } else {
92 | marker.setOpacity(0)
93 | marker.off('click', toggleNoteZoom)
94 | }
95 | })
96 | })
97 |
98 | eachMarker(function(marker) { marker.addTo(scope.map) })
99 | }
100 | }
101 | })
102 |
103 |
--------------------------------------------------------------------------------
/sass/index.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Styles for the cover page.
3 | */
4 |
5 | .cover-wrapper {
6 | position:absolute;
7 | top:0;
8 | right:0;
9 | bottom:3em;
10 | left:0;
11 | list-style:none;
12 | padding:0;
13 | overflow:auto;
14 | -webkit-overflow-scrolling:touch;
15 | }
16 |
17 | #cover {
18 | position:absolute;
19 | top:0;
20 | right:0;
21 | bottom:0;
22 | left:0;
23 | display:block;
24 | padding: 0 10px;
25 | margin:0;
26 | overflow:auto;
27 | -webkit-overflow-scrolling:touch;
28 |
29 | @media #{$medium}{
30 | padding:0 0 0 10px;
31 | }
32 | }
33 |
34 | .cover-item {
35 | @include transition( opacity 300ms ease );
36 | display:block;
37 | vertical-align:top;
38 | margin-right: 2px;
39 | height:auto;
40 | max-height:300px;
41 | max-width:100%;
42 |
43 | @media #{$medium}{
44 | opacity:0;
45 | }
46 |
47 | &.story {
48 | max-width:100%;
49 | width:300px;
50 | height:300px;
51 | padding:15px;
52 | background-color:#fff;
53 | border:1px solid #999;
54 | }
55 |
56 | &.panel{
57 | padding:15px;
58 | background-color:#fff;
59 | border:1px solid #999;
60 | max-width:100%;
61 | max-height:100%;
62 | }
63 |
64 | &.panel-big{
65 | width:610px;
66 | height:610px;
67 | }
68 |
69 | &.panel-portrait{
70 | width:300px;
71 | height:610px;
72 | }
73 |
74 | &.panel-landscape{
75 | width:610px;
76 | height:300px;
77 | }
78 |
79 | &.panel-small{
80 | width:300px;
81 | height:300px;
82 | }
83 |
84 | a {
85 | text-decoration:none;
86 | }
87 |
88 | @media #{$medium} {
89 | height:300px;
90 | margin:0 2px 0 0;
91 | }
92 | }
93 |
94 | .cover-item-image {
95 | display:block;
96 | max-height:100%;
97 | margin:0 auto;
98 | border:1px solid #999;
99 | }
100 |
101 | .cover-item-title {
102 | font-size:1.1em;
103 | color:#222;
104 | text-align:center;
105 | line-height:1.1;
106 | padding:0;
107 | margin:0;
108 |
109 | .object & {
110 | display:none;
111 | }
112 | }
113 |
114 | .cover-item-poster{
115 | width:100%;
116 | height:200px;
117 | background-size:cover;
118 | background-position:50% 50%;
119 | border:1px solid #999;
120 | }
121 |
122 | .cover-item-caption {
123 | position:relative;
124 | height:85px;
125 | margin:0;
126 | padding:10px;
127 | }
128 |
129 | .cover-panel-wrap{
130 | height:100%;
131 | }
132 |
133 | .cover-instructions {
134 | @include box-shadow(0 -3px 5px rgba(0,0,0,0.23));
135 | position:absolute;
136 | display:block;
137 | bottom:0;
138 | font-size:1em;
139 | font-style:italic;
140 | text-align:center;
141 | width:100%;
142 | height:50px;
143 | line-height:50px;
144 | vertical-align:middle;
145 | background-color:#ddd;
146 | }
147 |
148 | .cover-instructions * {
149 | display: inline;
150 | font-size: 100%;
151 | }
152 |
153 | .cover-instructions p {
154 | display: none;
155 | }
156 |
157 | .clusters img {
158 | max-width: 30%;
159 | }
160 |
161 | .clusters li {
162 | display: inline;
163 | list-style: none;
164 | -webkit-columns: 3;
165 | }
166 |
167 | aside.splash.show {
168 | z-index: 10;
169 | opacity: 1;
170 | }
171 |
172 | aside.splash {
173 | z-index: -1;
174 | opacity: 0;
175 | display: block;
176 | -webkit-transition: all 0.5s;
177 | text-align: center;
178 | font-family: MiaGrotesk-Light;
179 | font-size: 234%;
180 | height: 100%;
181 | position: relative;
182 | }
183 |
184 | aside.splash h1 {
185 | text-transform: lowercase;
186 | font-family: MiaGrotesk-Bold, sans-serif;
187 | font-size: 3em;
188 | margin: 0 0 -.25em 0;
189 | color: #333;
190 | }
191 |
192 | aside.splash #placard {
193 | background-color: rgba(255, 255, 255, 0.7);
194 | vertical-align: middle;
195 | padding: 1em;
196 | position: relative;
197 | top: 50%;
198 | transform: translateY(-50%);
199 | -webkit-transform: translateY(-50%);
200 | max-width: 100%;
201 | }
202 | @media #{$medium}{
203 | aside.splash h1 {
204 | font-size: 4em;
205 | }
206 | aside.splash #placard > p {
207 | padding: 0 2em;
208 | }
209 | }
210 |
211 | #ethnio-screener-48826 {
212 | top: auto !important;
213 | bottom: 0;
214 | }
215 | #ethnio-screener-48826 > div:first-child {
216 | padding: 0 !important;
217 | margin: 9px 0;
218 | }
219 | #ethnio-screener-id-48826 {
220 | top: auto !important;
221 | bottom: 0px;
222 | }
223 |
--------------------------------------------------------------------------------
/js/adapters.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Adapters (MIA-specific)
3 | *
4 | * These adapters are specific to the MIA's implementation of Griot. You should
5 | * overwrite them if you'd like to use your own service to pull data. If you'd
6 | * rather pull all data from GriotWP or another service, set
7 | * config.miaMediaMetaActive, config.miaObjectMetaActive, and
8 | * config.miaThumbnailAdapterActive to false in config.js.
9 | */
10 |
11 | /**
12 | * miaMediaMetaAdapter
13 | *
14 | * Grabs media metadata from an external source and provides a method for
15 | * retrieving that metadata by ID.
16 | */
17 | app.service( 'miaMediaMetaAdapter', function( $http, $sce, envConfig ) {
18 |
19 | var _this = this;
20 |
21 | this.isActive = false;
22 |
23 | this.metaHash = {};
24 |
25 | this.get = function( id ) {
26 | return _this.metaHash[ id ] || false;
27 | }
28 |
29 | this.build = function( src ){
30 |
31 | $http.get( src, { cache: true } ).success( function( result ) {
32 |
33 | _this.isActive = true;
34 |
35 | for( var id in result ) {
36 | var description = result[ id ].description ? result[id].description + " {{glanceText}}
6 |
7 |
54 |
55 |
56 |
63 |
64 |
65 |
--------------------------------------------------------------------------------
/views/index.html:
--------------------------------------------------------------------------------
1 |
10 |
11 |
12 |
31 |
32 |
50 |
51 |
13 |
16 |
17 |
18 |
19 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
2 |
40 |
41 |
45 |
46 |
53 |
--------------------------------------------------------------------------------
/js/vendor/angular-route.min.js:
--------------------------------------------------------------------------------
1 | /*
2 | AngularJS v1.2.15
3 | (c) 2010-2014 Google, Inc. http://angularjs.org
4 | License: MIT
5 | */
6 | (function(n,e,A){'use strict';function x(s,g,k){return{restrict:"ECA",terminal:!0,priority:400,transclude:"element",link:function(a,c,b,f,w){function y(){p&&(p.remove(),p=null);h&&(h.$destroy(),h=null);l&&(k.leave(l,function(){p=null}),p=l,l=null)}function v(){var b=s.current&&s.current.locals;if(e.isDefined(b&&b.$template)){var b=a.$new(),d=s.current;l=w(b,function(d){k.enter(d,null,l||c,function(){!e.isDefined(t)||t&&!a.$eval(t)||g()});y()});h=d.scope=b;h.$emit("$viewContentLoaded");h.$eval(u)}else y()}
7 | var h,l,p,t=b.autoscroll,u=b.onload||"";a.$on("$routeChangeSuccess",v);v()}}}function z(e,g,k){return{restrict:"ECA",priority:-400,link:function(a,c){var b=k.current,f=b.locals;c.html(f.$template);var w=e(c.contents());b.controller&&(f.$scope=a,f=g(b.controller,f),b.controllerAs&&(a[b.controllerAs]=f),c.data("$ngControllerController",f),c.children().data("$ngControllerController",f));w(a)}}}n=e.module("ngRoute",["ng"]).provider("$route",function(){function s(a,c){return e.extend(new (e.extend(function(){},
8 | {prototype:a})),c)}function g(a,e){var b=e.caseInsensitiveMatch,f={originalPath:a,regexp:a},k=f.keys=[];a=a.replace(/([().])/g,"\\$1").replace(/(\/)?:(\w+)([\?\*])?/g,function(a,e,b,c){a="?"===c?c:null;c="*"===c?c:null;k.push({name:b,optional:!!a});e=e||"";return""+(a?"":e)+"(?:"+(a?e:"")+(c&&"(.+?)"||"([^/]+)")+(a||"")+")"+(a||"")}).replace(/([\/$\*])/g,"\\$1");f.regexp=RegExp("^"+a+"$",b?"i":"");return f}var k={};this.when=function(a,c){k[a]=e.extend({reloadOnSearch:!0},c,a&&g(a,c));if(a){var b=
9 | "/"==a[a.length-1]?a.substr(0,a.length-1):a+"/";k[b]=e.extend({redirectTo:a},g(b,c))}return this};this.otherwise=function(a){this.when(null,a);return this};this.$get=["$rootScope","$location","$routeParams","$q","$injector","$http","$templateCache","$sce",function(a,c,b,f,g,n,v,h){function l(){var d=p(),m=r.current;if(d&&m&&d.$$route===m.$$route&&e.equals(d.pathParams,m.pathParams)&&!d.reloadOnSearch&&!u)m.params=d.params,e.copy(m.params,b),a.$broadcast("$routeUpdate",m);else if(d||m)u=!1,a.$broadcast("$routeChangeStart",
10 | d,m),(r.current=d)&&d.redirectTo&&(e.isString(d.redirectTo)?c.path(t(d.redirectTo,d.params)).search(d.params).replace():c.url(d.redirectTo(d.pathParams,c.path(),c.search())).replace()),f.when(d).then(function(){if(d){var a=e.extend({},d.resolve),c,b;e.forEach(a,function(d,c){a[c]=e.isString(d)?g.get(d):g.invoke(d)});e.isDefined(c=d.template)?e.isFunction(c)&&(c=c(d.params)):e.isDefined(b=d.templateUrl)&&(e.isFunction(b)&&(b=b(d.params)),b=h.getTrustedResourceUrl(b),e.isDefined(b)&&(d.loadedTemplateUrl=
11 | b,c=n.get(b,{cache:v}).then(function(a){return a.data})));e.isDefined(c)&&(a.$template=c);return f.all(a)}}).then(function(c){d==r.current&&(d&&(d.locals=c,e.copy(d.params,b)),a.$broadcast("$routeChangeSuccess",d,m))},function(c){d==r.current&&a.$broadcast("$routeChangeError",d,m,c)})}function p(){var a,b;e.forEach(k,function(f,k){var q;if(q=!b){var g=c.path();q=f.keys;var l={};if(f.regexp)if(g=f.regexp.exec(g)){for(var h=1,p=g.length;h
3 |
39 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
" : '';
37 | var credit = result[ id ].credit || '';
38 | _this.metaHash[ id ] = $sce.trustAsHtml((description + credit).replace(/\n/g, '
\n'));
39 | }
40 |
41 | });
42 |
43 | }
44 |
45 | });
46 |
47 | /**
48 | * miaObjectMetaAdapter
49 | *
50 | * Grabs object metadata from an external source and provides a method for
51 | * retrieving metadata reformatted into a particular grouping, i.e. to match
52 | * the groups in GriotWP.
53 | */
54 | app.service( 'miaObjectMetaAdapter', function( $http, $sce, envConfig ) {
55 | var _this = this;
56 |
57 | this.isActive = envConfig.miaObjectMetaActive;
58 |
59 | this.metaHash = {};
60 |
61 | this.get = function( id, grouping ) {
62 | try{
63 | if (_this.metaHash[id] !== undefined) {
64 | var hash = _this.metaHash[id] || _this.metaHash[parseInt(id)]
65 | return grouping ? hash[grouping] : hash
66 | } else {
67 | return this.getFromAPI(id, grouping)
68 | }
69 | } catch(e) {
70 | console.log('error in objectMeta.get', e)
71 | return null;
72 | }
73 | }
74 |
75 | this.getFromAPI = function(id, grouping) {
76 | var apiURL = envConfig.miaObjectMetaSrc+id
77 | return $http.get(apiURL, {cache: true}).then(function(result) {
78 | var data = result.data
79 | if(id.match('/')) id = data.id.split('/').reverse()[0]
80 | _this.addObjectToMetaHash(id, data)
81 | return _this.get(id, grouping)
82 | })
83 | }
84 |
85 | this.addObjectToMetaHash = function(id, json) {
86 | var groupings = {},
87 | artist,
88 | culture,
89 | country,
90 | dated,
91 | medium,
92 | dimension,
93 | creditline,
94 | accession_number,
95 | trustedDescription;
96 |
97 | artist = json.artist || 'Artist unknown';
98 | culture = json.culture || '';
99 | country = json.country || '';
100 | dated = json.dated || '';
101 | medium = json.medium || '';
102 | dimension = json.dimension || '';
103 | creditline = json.creditline || '';
104 | accession_number = json.accession_number || '';
105 | trustedDescription = $sce.trustAsHtml( json.description );
106 |
107 | groupings.meta1 = artist + ', ' + ( culture && culture + ', ' ) + country;
108 | groupings.meta2 = dated;
109 | groupings.meta3 = $sce.trustAsHtml( ( medium && medium + "
" ) + ( dimension && dimension + "
" ) + ( creditline && creditline + "
" ) + accession_number );
110 |
111 | // Special editions for goldweights
112 | groupings.gw_title = $sce.trustAsHtml( json.title );
113 | groupings.gw_meta2 = $sce.trustAsHtml( ( creditline && creditline + "
" ) + accession_number );
114 | groupings.location = json.room.replace('G', '')
115 |
116 | this.metaHash[id] = groupings;
117 | return groupings
118 | }
119 |
120 | });
121 |
122 | /**
123 | * miaThumbnailAdapter
124 | *
125 | * Provides a method for retrieving an image thumbnail from an external source,
126 | * given an image ID.
127 | */
128 | app.service( 'miaThumbnailAdapter', function() {
129 |
130 | var _this = this;
131 |
132 | this.isActive = false;
133 |
134 | this.cdn = '';
135 |
136 | this.init = function( cdn ) {
137 | _this.isActive = true;
138 | _this.cdn = cdn;
139 | }
140 |
141 | this.get = function( id ) {
142 | if(id === undefined) return
143 | var trimmed_id = id.replace( '.tif', '' );
144 | return _this.cdn + 'thumbs/tn_' + trimmed_id + '.jpg';
145 | }
146 |
147 | });
148 |
--------------------------------------------------------------------------------
/js/vendor/masonry-horizontal.js:
--------------------------------------------------------------------------------
1 | /*!
2 | * masonryHorizontal layout mode for Isotope
3 | * http://isotope.metafizzy.co
4 | */
5 |
6 | /*jshint browser: true, strict: true, undef: true, unused: true */
7 |
8 | ( function( window ) {
9 |
10 | 'use strict';
11 |
12 | // -------------------------- helpers -------------------------- //
13 |
14 | var indexOf = Array.prototype.indexOf ?
15 | function( items, value ) {
16 | return items.indexOf( value );
17 | } :
18 | function ( items, value ) {
19 | for ( var i=0, len = items.length; i < len; i++ ) {
20 | var item = items[i];
21 | if ( item === value ) {
22 | return i;
23 | }
24 | }
25 | return -1;
26 | };
27 |
28 | // -------------------------- definition -------------------------- //
29 |
30 | function masonryHorizontalDefinition( getSize, LayoutMode ) {
31 | // create an Outlayer layout class
32 | var MasonryHorizontal = LayoutMode.create('masonryHorizontal');
33 |
34 | MasonryHorizontal.prototype._resetLayout = function() {
35 | this.getRowHeight();
36 | this._getMeasurement( 'gutter', 'outerHeight' );
37 |
38 | this.rowHeight += this.gutter;
39 | // measure rows
40 | this.rows = Math.floor( ( this.isotope.size.innerHeight + this.gutter ) / this.rowHeight );
41 | this.rows = Math.max( this.rows, 1 );
42 |
43 | // reset row Xs
44 | var i = this.rows;
45 | this.rowXs = [];
46 | while (i--) {
47 | this.rowXs.push( 0 );
48 | }
49 |
50 | this.maxX = 0;
51 | };
52 |
53 | MasonryHorizontal.prototype._getItemLayoutPosition = function( item ) {
54 | item.getSize();
55 | // how many rows does this brick span
56 | var rowSpan = Math.ceil( item.size.outerHeight / this.rowHeight );
57 | rowSpan = Math.min( rowSpan, this.rows );
58 |
59 | var rowGroup = this._getRowGroup( rowSpan );
60 | // get the minimum X value from the rows
61 | var minimumX = Math.min.apply( Math, rowGroup );
62 | var shortRowIndex = indexOf( rowGroup, minimumX );
63 |
64 | // position the brick
65 | var position = {
66 | x: minimumX,
67 | y: this.rowHeight * shortRowIndex
68 | };
69 |
70 | // apply setHeight to necessary rows
71 | var setWidth = minimumX + item.size.outerWidth;
72 | var setSpan = this.rows + 1 - rowGroup.length;
73 | for ( var i = 0; i < setSpan; i++ ) {
74 | this.rowXs[ shortRowIndex + i ] = setWidth;
75 | }
76 |
77 | return position;
78 | };
79 |
80 | /**
81 | * @param {Number} rowSpan - number of rows the element spans
82 | * @returns {Array} rowGroup
83 | */
84 | MasonryHorizontal.prototype._getRowGroup = function( rowSpan ) {
85 | if ( rowSpan < 2 ) {
86 | // if brick spans only one row, use all the row Xs
87 | return this.rowXs;
88 | }
89 |
90 | var rowGroup = [];
91 | // how many different places could this brick fit horizontally
92 | var groupCount = this.rows + 1 - rowSpan;
93 | // for each group potential horizontal position
94 | for ( var i = 0; i < groupCount; i++ ) {
95 | // make an array of rowX values for that one group
96 | var groupRowXs = this.rowXs.slice( i, i + rowSpan );
97 | // and get the max value of the array
98 | rowGroup[i] = Math.max.apply( Math, groupRowXs );
99 | }
100 | return rowGroup;
101 | };
102 |
103 | MasonryHorizontal.prototype._manageStamp = function( stamp ) {
104 | var stampSize = getSize( stamp );
105 | var offset = this.isotope._getElementOffset( stamp );
106 | // get the rows that this stamp affects
107 | var firstY = this.isotope.options.isOriginTop ? offset.top : offset.bottom;
108 | var lastY = firstY + stampSize.outerHeight;
109 | var firstRow = Math.floor( firstY / this.rowHeight );
110 | firstRow = Math.max( 0, firstRow );
111 | var lastRow = Math.floor( lastY / this.rowHeight );
112 | lastRow = Math.min( this.rows - 1, lastRow );
113 | // set rowXs to outside edge of the stamp
114 | var stampMaxX = ( this.isotope.options.isOriginLeft ? offset.left : offset.right ) +
115 | stampSize.outerWidth;
116 | for ( var i = firstRow; i <= lastRow; i++ ) {
117 | this.rowXs[i] = Math.max( stampMaxX, this.rowXs[i] );
118 | }
119 | };
120 |
121 | MasonryHorizontal.prototype._getContainerSize = function() {
122 | this.maxX = Math.max.apply( Math, this.rowXs );
123 |
124 | return {
125 | width: this.maxX
126 | };
127 | };
128 |
129 | MasonryHorizontal.prototype.needsResizeLayout = function() {
130 | return this.needsVerticalResizeLayout();
131 | };
132 |
133 | return MasonryHorizontal;
134 |
135 | }
136 |
137 | if ( typeof define === 'function' && define.amd ) {
138 | // AMD
139 | define( [
140 | 'get-size/get-size',
141 | 'isotope/js/layout-mode'
142 | ],
143 | masonryHorizontalDefinition );
144 | } else {
145 | // browser global
146 | masonryHorizontalDefinition(
147 | window.getSize,
148 | window.Isotope.LayoutMode
149 | );
150 | }
151 |
152 | })( window );
153 |
--------------------------------------------------------------------------------
/js/directives/flatmap.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Creates a zoomable image element.
3 | */
4 |
5 | app.directive('flatmap', function(tilesaw, envConfig, $rootScope ) {
6 | return {
7 | restrict: 'E',
8 | scope: {
9 | json: '@',
10 | image: '@'
11 | },
12 | replace: true,
13 | transclude: true,
14 | template: '',
15 | controller: function($scope, $element, $attrs ) {
16 | var scope = $scope
17 | scope.$parent.flatmapScope = scope
18 | scope.zoomed = $rootScope.zoomed
19 |
20 | var removeJsonLayer = function() {
21 | if(scope.jsonLayer) scope.zoom.map.removeLayer(scope.jsonLayer)
22 | if(scope.inverseLayer) scope.zoom.map.removeLayer(scope.inverseLayer)
23 | }
24 |
25 | var showJsonLayer = function(fadeAfter, inverse) {
26 | if(!scope.jsonLayer) return
27 | var layerStyle = {stroke: true, fill: false, weight: 2, color: '#eee', opacity: '0.5'},
28 | addLayer = null
29 |
30 | if(inverse) {
31 | var holes = []
32 | scope.jsonLayer._latlngs ? holes.push(scope.jsonLayer._latlngs)
33 | : scope.jsonLayer.eachLayer(function(l) { holes.push(l._latlngs) })
34 | scope.inverseLayer = L.polygon([scope.zoom.imageBounds.toPolygon()._latlngs].concat(holes))
35 | scope.inverseLayer.setStyle({fill: true, fillColor: '#000', fillOpacity: '0.5', stroke: false})
36 | addLayer = scope.inverseLayer
37 | } else {
38 | scope.jsonLayer.setStyle(layerStyle)
39 | addLayer = scope.jsonLayer
40 | }
41 | scope.zoom.map.addLayer(addLayer)
42 | // if(fadeAfter) setTimeout(removeJsonLayer, fadeAfter)
43 | }
44 |
45 | var loadImage = function(image) {
46 | if(image === 'undefined' || image === '') return
47 | scope.viewChanging = true
48 | scope.image = image
49 | removeJsonLayer(); scope.jsonLayer = null
50 | tilesaw.get(image).then(function(tileJson) {
51 | $('#'+scope.container).find('.leaflet-tile-pane').css('visibility', 'visible') // why is this necessary? when I re-init a zoomer it's visibility is hidden.
52 | var tileUrl = envConfig.tileUrlSubdomain(tileJson.tiles[0])
53 | scope.$parent.$parent.tileJson = tileJson
54 | scope.$parent.$parent.imageAspectRatio = tileJson.width / tileJson.height
55 | scope.zoom = Zoomer.zoom_image({container: scope.container, tileURL: tileUrl, imageWidth: tileJson.width, imageHeight: tileJson.height})
56 | scope.$emit('viewChanged')
57 | scope.$parent.mapLoaded = true
58 | var watchForZoom = scope.zoom.map.on('zoomstart', function() {
59 | scope.$emit('zoom');
60 | (scope.$$phase || $rootScope.$$phase) || scope.$apply(function() { $rootScope.zoomed = scope.zoomed = true })
61 | scope.zoom.map.off(watchForZoom)
62 | })
63 | })
64 | }
65 | loadImage(scope.image)
66 |
67 | var annotateAndZoom = function(geometry) {
68 | removeJsonLayer()
69 | if(geometry) {
70 | if(geometry._initHooksCalled) { // it's a leaflet object, probably layer
71 | scope.jsonLayer = geometry
72 | } else {
73 | scope.jsonLayer = L.GeoJSON.geometryToLayer(geometry)
74 | }
75 | }
76 | if(scope.viewChanging) return // hold off until the view changes, resulting in `viewChanged` triggering this again
77 | if(scope.jsonLayer) {
78 | scope.$parent.$broadcast('showAnnotationsPanel', 'annotations')
79 | var map = scope.zoom.map,
80 | mapBounds = map.getBounds(),
81 | jsonLayerBounds = scope.jsonLayer.getBounds(),
82 | delay = 0
83 | if(mapBounds.intersects(jsonLayerBounds) || mapBounds.contains(jsonLayerBounds)) {
84 | } else {
85 | // Zoomer is misbehaving when zooming outside the current bounds, plus the zoom all the way out and back in thing is cool
86 | setTimeout(function() { map.zoomOut(100) }, 300)
87 | delay = 1000
88 | }
89 | setTimeout(function() { showJsonLayer(3000, true) }, delay)
90 | setTimeout(function() { map.fitBounds(scope.jsonLayer.getBounds()) }, delay+250)
91 | }
92 | }
93 |
94 | scope.$on('changeGeometry', function(event, geometry) { annotateAndZoom(geometry) }, true)
95 | scope.$on('viewChanged', function(event, message) { scope.viewChanging = false; annotateAndZoom() }, true)
96 | scope.$on('changeView', function(event, message) {
97 | if(message.image != scope.image) loadImage(message.image)
98 | })
99 |
100 | // TODO: get this working better
101 | scope.$on('viewChanged', function() {
102 | scope.zoom.map.on('zoomedBeyondMin', function(e) {
103 | if(scope.$parent && scope.$parent.notes && scope.$parent.notes.length > 1 && scope.$parent.changeZoomerForViews)
104 | scope.$parent.changeZoomerForViews(this, scope)
105 | })
106 | })
107 |
108 | return {
109 | loadImage: loadImage,
110 | annotateAndZoom: annotateAndZoom,
111 | removeJsonLayer: removeJsonLayer,
112 | showJsonLayer: showJsonLayer,
113 | scope: scope
114 | }
115 | },
116 | link: function(scope, element, attrs) {
117 | scope.container = 'zoom-' + scope.image.replace('+', '-') + '-' + new Date().getUTCMilliseconds()
118 | element.attr('id', scope.container)
119 | }
120 | }
121 | })
122 |
123 |
--------------------------------------------------------------------------------
/js/controllers/main.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Controller for cover page (index template).
3 | */
4 |
5 | app.controller('mainCtrl', ['$scope', '$routeParams', 'segmentio', '$rootScope', '$timeout', 'orderByFilter', 'miaThumbnailAdapter', '$sce', 'resolvedNotes', 'initIsotope', '$location',
6 | function($scope, $routeParams, segmentio, $rootScope, $timeout, orderByFilter, thumbnailAdapter, $sce, notes, initIsotope, $location) {
7 | var dc = $rootScope.defaultCluster
8 | if(dc && dc !== 'highlights') $location.path('/clusters/'+$rootScope.defaultCluster)
9 |
10 | var data = $scope.data = notes
11 | $rootScope.loaded = false
12 |
13 | var cluster = $rootScope.defaultCluster || $routeParams.cluster || 'highlights'
14 | var clusterObjectIds = data.clusters[cluster.replace(/^(g)?(\d+)/i, '$1$2')]
15 | if(clusterObjectIds) {
16 | $scope.cluster = $rootScope.defaultCluster = cluster
17 | $scope.isGallery = cluster.match(/^G\d/i)
18 | $scope.gallery = $scope.cluster.replace('G', '')
19 | $rootScope.showingCluster = $scope.showingCluster =
20 | (typeof $rootScope.showingCluster === 'undefined') ? true : $rootScope.showingCluster
21 | if(!$rootScope.clusterObjects) {
22 | $scope.clusterObjects = clusterObjectIds.map(function(objectId) {
23 | var isStory = objectId.match && objectId.match(/stories\/(\d+)/)
24 | if(isStory) return data.stories[isStory[1]]
25 | return data.objects[objectId]
26 | }).filter(function(o) { return o })
27 | var startPanels = addPanelsToClusterObjects()
28 | $rootScope.clusterObjects = $scope.clusterObjects = orderByFilter($scope.clusterObjects, random)
29 | startPanels.map(function(p) { $scope.clusterObjects.unshift(p) })
30 |
31 | $rootScope.otherObjects = $scope.otherObjects = $rootScope.otherObjects = loadAllObjects()
32 | } else {
33 | $scope.clusterObjects = $rootScope.clusterObjects
34 | $scope.otherObjects = $rootScope.otherObjects
35 | }
36 | } else { // not a valid cluster
37 | $location.path('/')
38 | }
39 |
40 | $scope.toggleSeeAll = function() {
41 | var container = $('.cover-wrapper')[0]
42 | if($scope.showingCluster) $timeout(function() { container.scrollLeft = container.scrollWidth-window.innerWidth }, 0)
43 | $scope.loading = true
44 | $rootScope.showingCluster = $scope.showingCluster = !$scope.showingCluster
45 |
46 | $timeout(function() {
47 | $timeout(initIsotope, 0)
48 | $scope.loading = false
49 | }, 0)
50 | }
51 |
52 | // Maintain the random order of the cluster objects, and add all the others
53 | // in random order. Then any 'end' panels.
54 | function loadAllObjects() {
55 | var c = $scope.clusterObjects
56 | var others = []
57 |
58 | angular.forEach(data.objects, function(o) {
59 | (c.indexOf(o) > -1) || others.push(o)
60 | })
61 | others = orderByFilter(others, random)
62 |
63 | angular.forEach(data.panels, function(p) {
64 | if(c.indexOf(p) == -1 && p.position == 'end') others.push(p)
65 | })
66 |
67 | return others
68 | return angular.copy(c).map(function(o) {
69 | // angular.copy and $sce.trust don't work together. this prevents an sce.unsafe
70 | if(o.recordType == 'panel') o.trustedContent = $sce.trustAsHtml(o.content)
71 | return o
72 | }).concat(others)
73 | }
74 |
75 | // Add the panels that should be randomized to `clusterObjects` and
76 | // return the panels that need to be at the beginning so they can be
77 | // `unshifted` after randomization happens
78 | // TODO: should panels go into the cluster objects or the other objects?
79 | function addPanelsToClusterObjects() {
80 | var panels = []
81 | angular.forEach(data.panels, function(p) { panels.push(p) })
82 | panels.filter(function(p) { return p.position == 'random' })
83 | .map(function(p) { $scope.clusterObjects.push(p) })
84 | return panels.filter(function(p) { return p.position == 'start' })
85 | }
86 |
87 | $rootScope.nextView = undefined
88 |
89 | $timeout(initIsotope, 0)
90 |
91 | function random() { return 0.5 - Math.random() }
92 |
93 | if(!$rootScope.identifier) {
94 | var adjs = ["autumn", "hidden", "bitter", "misty", "silent", "empty", "dry",
95 | "dark", "summer", "icy", "delicate", "quiet", "white", "cool", "spring",
96 | "patient", "twilight", "dawn", "crimson", "wispy", "weathered", "blue"]
97 | , nouns = ["waterfall", "river", "breeze", "moon", "rain", "wind", "sea",
98 | "morning", "snow", "lake", "sunset", "pine", "shadow", "leaf", "dawn",
99 | "glitter", "forest", "hill", "cloud", "meadow", "sun", "glade", "bird",
100 | "brook", "butterfly", "bush", "dew", "dust", "field", "fire", "flower"]
101 | , number = Math.floor(Math.random()*100)
102 | , name = adjs[Math.floor(Math.random()*(adjs.length-1))]+"-"+nouns[Math.floor(Math.random()*(nouns.length-1))]+"-"+number
103 | $rootScope.identifier = name
104 | segmentio.identify(name)
105 | }
106 |
107 | segmentio.track('Landed on the homepage')
108 |
109 | // When returning to the home page from an object page, scroll to
110 | // that object.
111 | $rootScope.$watch('loaded', function(val) {
112 | if(val && $rootScope.lastObjectId) {
113 | var lastObjContainer = $('a[href*='+$rootScope.lastObjectId+']').parent()
114 | lastObjContainer && lastObjContainer[0].scrollIntoView()
115 | }
116 | })
117 |
118 | if(typeof $rootScope.showSplash == 'undefined') $rootScope.showSplash = true
119 | $scope.closeSplashScreen = function() {
120 | $rootScope.showSplash = false
121 | }
122 | }
123 | ])
124 |
--------------------------------------------------------------------------------
/views/object.html:
--------------------------------------------------------------------------------
1 |
19 |
20 |
90 |
91 |
92 |
101 |
102 |
103 |
104 |
21 |
23 |
24 |
25 |
26 |
31 |
32 |
33 |
34 |
89 |
35 |
40 |
41 |
46 |
47 |
87 |
88 | {{wp.meta1}}
36 | {{wp.meta2}}
37 |
38 |
39 |
248 |
256 |
249 | griot
250 | font demo
251 |
252 |
255 |
257 |
297 |
298 |
299 |
--------------------------------------------------------------------------------
/sass/object.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Object template styles.
3 | */
4 |
5 | $sidebarWidth: 23rem;
6 |
7 | /**
8 | * Content - "Above the Fold" (Controls and Meta)
9 | */
10 | .object-content-container{
11 | position:absolute;
12 | top:0;
13 | left:0;
14 | width: $sidebarWidth;
15 | height:100%;
16 | }
17 | .object-content{
18 | @include transition( opacity 500ms ease );
19 | position:absolute;
20 | top:0;
21 | right:0;
22 | bottom:0;
23 | left:0;
24 | margin:0 auto;
25 | background-color:#ededed;
26 | padding:15px;
27 | overflow-x:hidden;
28 | overflow-y:auto;
29 |
30 | &.translucent{
31 | opacity:0;
32 | }
33 |
34 | }
35 |
36 | .object-menu {
37 | display:block;
38 | height:40px;
39 | margin:0;
40 | padding:0;
41 | }
42 | .object-menu > a {
43 | position:relative;
44 | display:block;
45 | float:left;
46 | margin:0 5px 0 0;
47 | }
48 | .object-home-link {
49 | @extend .home-icon;
50 | }
51 | .contentMinimized .object-maximize-content {
52 | background-color: rgba(22, 22, 22, .55);
53 | }
54 |
55 | .object-menu .toggle-meta {
56 | @extend .meta-icon;
57 | }
58 | .object-menu .email {
59 | @extend .meta-icon;
60 | @include icon( '\e818' );
61 | font-size: 21px;
62 | }
63 |
64 | .object-title{
65 | margin:5px 0 0;
66 | }
67 | .meta1{
68 | max-height:0;
69 | margin:0;
70 | overflow:hidden;
71 |
72 | .extended & {
73 | max-height:200px;
74 | }
75 |
76 | @media #{$medium} {
77 | @include transition( max-height 125ms ease );
78 | max-height:none;
79 | }
80 | }
81 | .meta2,
82 | .meta3{
83 | margin:0;
84 | font-size:0.9em;
85 | font-weight:normal;
86 | max-height:0;
87 | overflow:hidden;
88 |
89 | .extended & {
90 | max-height:225px;
91 | }
92 |
93 | @media #{$medium} {
94 | @include transition( max-height 125ms ease );
95 | }
96 | }
97 |
98 |
99 | /**
100 | * Navbar
101 | */
102 | .object-nav {
103 | margin:15px 0 0;
104 | }
105 | .object-nav a {
106 | display:block;
107 | width:33.3%;
108 | float:left;
109 | padding:0.5em 0;
110 | border:1px solid #222;
111 | border-right:none;
112 | color:#222;
113 | text-transform: uppercase;
114 | font-size:0.85em;
115 | font-weight:700;
116 | text-align:center;
117 | background-color: #ededed;
118 | cursor:pointer;
119 |
120 | &.disabled,
121 | &.disabled:hover {
122 | color:#bbb;
123 | background-color:#ededed;
124 | cursor:default;
125 | }
126 |
127 | &:last-child{
128 | border-right:1px solid #222;
129 | }
130 |
131 | &.selected {
132 | color:#ededed;
133 | background-color: #222;
134 | }
135 |
136 | @media #{$medium} {
137 | &:active{
138 | color:#ededed;
139 | background-color: #222;
140 | }
141 | }
142 | }
143 |
144 |
145 | /**
146 | * Content - Container
147 | */
148 | .object-stories{
149 | margin:0;
150 | padding:0;
151 | }
152 |
153 |
154 | /**
155 | * Content - Details/Annotations
156 | */
157 | .object-details{
158 | list-style:none;
159 | padding:0;
160 | }
161 | .annotation{
162 | padding:0 0 15px 0;
163 | position:relative;
164 | }
165 | .annotation-title{
166 | margin:0 0 0 40px;
167 | cursor:pointer;
168 | }
169 | .annotation-title:active {
170 | text-decoration: underline;
171 | }
172 | .annotation-index{
173 | position:absolute;
174 | display:block;
175 | top:0;
176 | left:0;
177 | width:30px;
178 | height:30px;
179 | margin-right:10px;
180 | color:#fff;
181 | background-color:#222;
182 | border-radius:1000px;
183 | border:2px solid #fff;
184 | text-align:center;
185 | line-height:26px;
186 | font-size:1.125rem;
187 |
188 | .glance &{
189 | position:relative;
190 | display:inline-block;
191 | margin:0;
192 | }
193 | }
194 | .annotation-content{
195 | @include transition( max-height 125ms ease );
196 | max-height:0;
197 | overflow:hidden;
198 |
199 | .annotation.active &{
200 | max-height:500px;
201 | }
202 | }
203 | .annotation-content p{
204 | margin:10px 0 0 0;
205 | }
206 |
207 | .annotation-content ul {
208 | margin-top: 10px;
209 | }
210 | .annotation-content ul li {
211 | list-style-type: disc;
212 | margin-left: -1.25em;
213 | }
214 |
215 | /**
216 | * Content - Details/Annotations - Attachments
217 | */
218 | .annotation-attachments{
219 | @include transition( max-height 125ms ease );
220 | max-height:0;
221 | overflow:hidden;
222 | padding:0;
223 | margin:0;
224 |
225 | .annotation.active &{
226 | max-height:500px;
227 | }
228 | }
229 | .annotation-attachments p{
230 | font-size:0.75em;
231 | margin:15px 0 10px;
232 | text-transform:uppercase;
233 | color:#999;
234 | font-weight:bold;
235 | border-top:1px solid #ccc;
236 | }
237 | .attachment-thumb{
238 | display:inline-block;
239 | width:75px;
240 | height:75px;
241 | position:relative;
242 | margin:0 5px 5px 0;
243 | cursor:pointer;
244 | background-size:cover;
245 | }
246 | .attachment-big{
247 | @include transition( left 375ms ease );
248 | display:block;
249 | position:absolute;
250 | width:100%;
251 | height:100%;
252 | left:-300%;
253 | top:0;
254 | background-color:#ddd;
255 | z-index:1000000001;
256 | text-align:center;
257 |
258 | &.active {
259 | left:0;
260 | }
261 | }
262 | .attachment-zoomer{
263 | @include transition( height 125ms ease );
264 | height:100%;
265 |
266 | .showAttachmentMeta & {
267 | height:67%;
268 | }
269 | }
270 | .attachment-big .return-link{
271 | @extend .nav-button;
272 | @extend .nav-button-left;
273 | @extend .return-icon;
274 | position:absolute;
275 | border-top:1px solid #222;
276 | border-right:1px solid #222;
277 | }
278 | .attachment-toggle-meta{
279 | @extend .meta-icon;
280 | position:absolute;
281 | display:block;
282 | right:12px;
283 | bottom:8px;
284 | margin:0;
285 | z-index:4;
286 | }
287 | .attachment-tombstone{
288 | @include transition( bottom 125ms ease );
289 | @include box-shadow( inset 0 5px 5px rgba(0,0,0,0.23));
290 | position:absolute;
291 | right:0;
292 | bottom:-33%;
293 | left:0;
294 | height:33%;
295 | padding:15px 60px;
296 | overflow-y:scroll;
297 | overflow-x:hidden;
298 | font-size:0.9em;
299 | text-align:left;
300 | background-color:#ededed;
301 | color:#444;
302 |
303 | .showAttachmentMeta & {
304 | bottom:0;
305 | }
306 | }
307 | .attachment-content{
308 |
309 | }
310 |
311 |
312 | /**
313 | * Content - Stories/"More"
314 | */
315 | .more-title {
316 | margin:15px 0 0;
317 | text-transform:uppercase;
318 | }
319 |
320 | .object-related{
321 | list-style:none;
322 | padding:0;
323 | }
324 | .object-related a{
325 | color:#222;
326 | width:100%;
327 | border:1px solid #222;
328 | padding:10px 15px;
329 | display:block;
330 | margin:5px 0px;
331 | text-align:left;
332 | font-size:1em;
333 | transition:all 250ms linear;
334 | text-decoration: none;
335 |
336 | @media screen and (min-width:1025px) {
337 | &:hover {
338 | color:#ededed;
339 | background-color:#222;
340 | }
341 | }
342 | &:active {
343 | color:#ededed;
344 | background-color:#222;
345 | }
346 | }
347 |
348 |
349 | /**
350 | * Zoomer
351 | */
352 | .object-zoomer {
353 | @include box-shadow( 0px 3px 5px rgba(0,0,0,0.23) );
354 | @include transition( opacity 125ms ease );
355 | position:absolute;
356 | top:0;
357 | right:0;
358 | bottom:0;
359 | left:0;
360 | background-color:#ccc;
361 | text-align:center;
362 |
363 | @media #{$medium} {
364 | left: $sidebarWidth;
365 | }
366 | }
367 |
368 |
369 | /*
370 | * Zoomer - Markers
371 | */
372 | .leaflet-overlay-pane,
373 | .leaflet-marker-pane{
374 | display:none;
375 |
376 | .object-zoomer.annotations & {
377 | display:block;
378 | }
379 | }
380 | .noteMarker {
381 | @include transition( all 125ms ease );
382 | padding: 3em;
383 | margin: -3em !important;
384 | text-align: center;
385 | font-family: 'MiaGrotesk-Light', sans-serif;
386 | font-weight: bold;
387 | font-size: 1em ;
388 | color: #fff;
389 | z-index:1000000 !important;
390 | }
391 | .noteMarker span {
392 | @include transition( all 125ms ease );
393 | display: block;
394 | height: 30px;
395 | width: 30px;
396 | margin: -15px 0 0 -15px;
397 | padding: 0;
398 | border-radius: 1000px;
399 | border: 2px solid #fff;
400 | font-weight: bold;
401 | text-align: center;
402 | font-size: 1.125rem;
403 | background-color: rgba(22, 22, 22, .55);
404 | line-height:26px;
405 | vertical-align:middle;
406 | }
407 | .noteMarker:hover span, .noteMarker:active span {
408 | width:36px;
409 | height:36px;
410 | margin: -18px 0 0 -18px;
411 | line-height:34px;
412 | }
413 |
414 | // Toggle 'show all views' control
415 | .object-zoomer .flatmap > div:first-child {
416 | z-index: 100;
417 | width: 100%;
418 | margin: 0;
419 | padding: 0;
420 | }
421 | .object-zoomer .flatmap .view {
422 | margin-left: -100em;
423 | @include transition(margin 125ms ease-out);
424 | }
425 | .showAllViews .object-zoomer .flatmap .view {
426 | display: inline;
427 | min-height: 3em;
428 | margin-left: 0;
429 | @include transition(margin 125ms ease);
430 | }
431 | .object-zoomer aside {
432 | display: none;
433 | font-size: 1.25em;
434 | font-weight: bold;
435 | }
436 | .showAllViews aside {
437 | display: block !important;
438 | }
439 |
440 | // Transition the leaflet pane away
441 | .object-zoomer .flatmap .leaflet-map-pane {
442 | @include transition(-webkit-transform 125ms ease-out);
443 | }
444 | .showAllViews .object-zoomer .flatmap .leaflet-map-pane {
445 | -webkit-transform: scale(0.25) translateX(-1234px) !important;
446 | }
447 |
448 | .more-views a, a.view {
449 | height: 8em;
450 | width: 32.8%;
451 | margin: 0.5% 0.5% 0 0;
452 | background-size: cover;
453 | background-position: 50% 15%;
454 | display: block;
455 | float: left;
456 | // margin-bottom: 1px;
457 |
458 | &.open, &:hover {
459 | border: 5px solid rgba(255, 255, 255, 0.6);
460 | }
461 | }
462 | .object-zoomer .flatmap a.view {
463 | height: 17em;
464 | }
465 | .leaflet-control-container *{
466 | @include transition(opacity 125ms ease-out);
467 | }
468 | .showAllViews .object-zoomer .leaflet-control-container .leaflet-right {
469 | opacity: 0;
470 | }
471 |
472 | // Email share form
473 | #share.email form {
474 | margin-top: -0.5em;
475 | max-width: 0;
476 | opacity: 0;
477 | margin-left: 2.5em;
478 | -webkit-transition: all 125ms ease-out;
479 | }
480 |
481 | #share.email.open form {
482 | position: relative;
483 | z-index: 2;
484 | max-width: 33em;
485 | opacity: 1;
486 | }
487 |
488 |
489 | // Hint
490 | .hint-scale{
491 | @include transition( all 300ms ease );
492 | @include transform( scale(1.25) );
493 | position:absolute;
494 | top:50%;
495 | left:50%;
496 | width:250px;
497 | height:250px;
498 | margin-top:-125px;
499 | margin-left:-125px;
500 | padding:25px;
501 | background-color:rgba(0,0,0,0.6);
502 | border-radius:25px;
503 | border:3px solid #fff;
504 | z-index:1;
505 | opacity:0;
506 |
507 | &.visible{
508 | @include transform( scale(1) );
509 | opacity:1;
510 | }
511 | }
512 |
513 | .object-about .galleryLocation {
514 | text-align: center;
515 | border-top: 1px solid #ccc;
516 | margin-top: -0.5em;
517 | padding-top: 0.75em;
518 | }
519 | .galleryLocation img {
520 | border: 1px solid #ccc;
521 | max-width: 279px;
522 | }
523 | .galleryLocation img + p {
524 | margin-top: 0.25em;
525 | }
526 |
--------------------------------------------------------------------------------
/sass/generic.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Site and reusable element styles.
3 | */
4 |
5 | *,
6 | *:before,
7 | *:after {
8 | @include box-sizing( border-box );
9 | }
10 |
11 |
12 | html,
13 | body {
14 | position:fixed;
15 | width:100%;
16 | height:100%;
17 | margin: 0;
18 | padding: 0;
19 | font-size: 100%;
20 | text-rendering:optimizeLegibility;
21 | -moz-font-feature-settings:"kern=0";
22 | -webkit-font-feature-settings:"kern" 0;
23 | -o-font-feature-settings:"kern" 0;
24 | -ms-font-feature-settings:"kern" 0;
25 | font-feature-settings:"kern" 0;
26 | -webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape while allowing user zoom */
27 | }
28 |
29 | /* Container styles */
30 | .container {
31 | @include transition( opacity 150ms ease );
32 | position:absolute;
33 | top:0;
34 | left:0;
35 | width:100%;
36 | height:100%;
37 | overflow:hidden;
38 | }
39 |
40 | /* Fluid images */
41 |
42 | img,
43 | object {
44 | max-width: 100%;
45 | outline:0;
46 | border:0;
47 | margin:0;
48 | padding:0;
49 | }
50 |
51 | /* Remove link highlighting */
52 | a {
53 | -webkit-tap-highlight-color: transparent;
54 | }
55 |
56 | /* Clearfix */
57 |
58 | .clearfix:after {
59 | content: ".";
60 | visibility: hidden;
61 | display: block;
62 | height: 0;
63 | clear: both;
64 | }
65 |
66 | * html .clearfix { zoom: 1; } /* IE6 */
67 | *:first-child+html .clearfix { zoom: 1; } /* IE7 */
68 |
69 | /* Vertical centering */
70 |
71 | .vcenter-table {
72 | display:table;
73 | width:100%;
74 | height:100%;
75 | }
76 | .vcenter-cell {
77 | display:table-cell;
78 | vertical-align:middle;
79 | }
80 |
81 | /* Type */
82 |
83 | html,
84 | body{
85 | font-family: 'MiaGrotesk-Light', sans-serif;
86 | line-height:1.4;
87 | }
88 |
89 | h1 { font-size: 1.6875em; }
90 | h2 { font-size: 1.375em; }
91 | h3 { font-size: 1.375em; }
92 | h4 { font-size: 1.125em; }
93 | h5 { font-size: 1.125em; }
94 | h6 { font-size: 1em; }
95 |
96 | /* Colors */
97 |
98 | html,
99 | body{
100 | background-color:#ededed;
101 | }
102 |
103 | /* Flatmaps */
104 |
105 | .flatmap {
106 | position:absolute;
107 | top:0;
108 | right:0;
109 | bottom:0;
110 | left:0;
111 | }
112 | .flatmap .hint {
113 | @include transition( opacity 250ms linear );
114 | position: absolute;
115 | right:15px;
116 | bottom:15px;
117 | margin: 0;
118 | padding: 10px;
119 | color: #444;
120 | background: rgba(255, 255, 255, 0.75);
121 | font-style:italic;
122 | white-space:nowrap;
123 | opacity:1;
124 | z-index: 3;
125 |
126 | // Override Leaflet font styles
127 | font-family: 'MiaGrotesk-Light', sans-serif !important;
128 | font-size: 16px !important;
129 | line-height:1.4 !important;
130 |
131 | // TODO: Target non-touch devices
132 | @media screen and (min-width:1025px) {
133 | display:none;
134 | }
135 |
136 | }
137 | .flatmap.zoomed .hint {
138 | opacity: 0;
139 | }
140 |
141 | /**
142 | * Button and Icon styles
143 | *
144 | * @extend these and define positioning and special styling.
145 | */
146 |
147 | .home-icon{
148 | @include icon('\e802');
149 | width:40px;
150 | height:40px;
151 | background-color:#222;
152 | border-radius:1000px;
153 | border:2px solid #fff;
154 | cursor:pointer;
155 |
156 | &:before {
157 | color:#fff;
158 | font-size:18px;
159 | margin-top:-9px;
160 | }
161 | }
162 |
163 | .minimize-icon {
164 | @include icon( '\e801' );
165 | @include transition( margin-top 100ms linear );
166 | width:40px;
167 | height:40px;
168 | border-radius:1000px;
169 | background-color:#222;
170 | border:2px solid #fff;
171 | cursor:pointer;
172 |
173 | &:before{
174 | color:#fff;
175 | font-size:20px;
176 | margin-top:-10px;
177 | }
178 |
179 | .contentMinimized &{
180 | @include icon( '\e800' );
181 |
182 | &:before{
183 | font-size:20px;
184 | margin-top:-10px;
185 | }
186 | }
187 | }
188 |
189 | .maximize-icon {
190 | @include icon( '\e800' );
191 | width:40px;
192 | height:40px;
193 | border-radius:1000px;
194 | background-color:#222;
195 | border:2px solid #fff;
196 | cursor:pointer;
197 |
198 | &:before{
199 | color:#fff;
200 | font-size:20px;
201 | margin-top:-10px;
202 | }
203 |
204 | }
205 |
206 | .meta-icon {
207 | @include icon( '\e813' );
208 | @include transition( all 125ms ease );
209 | width:40px;
210 | height:40px;
211 | background-color:#222;
212 | border-radius:1000px;
213 | border:2px solid #fff;
214 |
215 | // Icon
216 | &:before{
217 | color:#fff;
218 | font-size:20px;
219 | margin-top:-10px;
220 | }
221 |
222 | &.open,
223 | .showAttachmentMeta &{
224 | background-color:#fff;
225 | border-color:#222;
226 |
227 | // Icon
228 | &:before{
229 | color:#222;
230 | }
231 | }
232 | }
233 |
234 | .home-icon, .minimize-icon, .maximize-icon, .meta-icon {
235 | &:hover, &:active {
236 | border: 2px solid #222;
237 | }
238 | }
239 |
240 | /**
241 | * Navigation
242 | */
243 | .nav-button {
244 | position:fixed;
245 | margin-top:0;
246 | padding:10px 5px 5px;
247 | background-color:#222;
248 | color:#fff;
249 | font-size:0.7em;
250 | text-transform:uppercase;
251 | text-align:center;
252 | cursor:pointer;
253 | z-index:3;
254 |
255 | // -- rev -- //
256 | // top:50%;
257 | // width:45px;
258 | // height:45px;
259 | padding:0;
260 | width:70px;
261 | height:40px;
262 | border-width:0;
263 |
264 | // Icon
265 | &:before{
266 | top:50%;
267 | font-size:24px;
268 | margin-top:-12px;
269 | }
270 |
271 | @media #{$medium} {
272 | top:50%;
273 | width:60px;
274 | height:80px;
275 | margin-top:-40px;
276 | border:1px solid #222;
277 |
278 | &:before{
279 | margin-top:-24px;
280 | }
281 |
282 | &:after{
283 | position:relative;
284 | display:block;
285 | top:50%;
286 | width:80%;
287 | margin:5px auto 0;
288 | text-align:center;
289 | line-height:12px;
290 | }
291 | }
292 | }
293 | .nav-button-left {
294 | left:0;
295 | bottom:0;
296 | border-left:none;
297 | }
298 | .nav-button-right {
299 | right:0;
300 | bottom:0;
301 | border-right:none;
302 | }
303 | .prev-icon {
304 | @include icon( '\e808' );
305 |
306 | // Icon
307 | &:before{
308 | // -- rev -- //
309 | /*
310 | top:auto;
311 | bottom:10px;
312 | left:0;
313 | */
314 | }
315 |
316 | @media #{$medium} {
317 | // Text
318 | &:after{
319 | content:'Prev Page';
320 | }
321 | }
322 | }
323 | .next-icon {
324 | @include icon( '\e809' );
325 |
326 | // Icon
327 | &:before{
328 | // -- rev -- //
329 | /*
330 | top:auto;
331 | bottom:10px;
332 | left:0;
333 | */
334 | }
335 |
336 | @media #{$medium} {
337 | // Text
338 | &:after{
339 | content:'Next Page';
340 | }
341 | }
342 | }
343 | .return-icon {
344 | @include icon( '\e812' );
345 | background-color:#fff;
346 | color:#000;
347 |
348 | &.nav-button-left {
349 | // -- rev -- //
350 | // border-right:1px solid #ccc;
351 | }
352 |
353 | &.nav-button-right {
354 | // -- rev -- //
355 | // border-left:1px solid #ccc;
356 | }
357 |
358 | // Icon
359 | &:before{
360 | // -- rev -- //
361 | /*
362 | top:auto;
363 | bottom:10px;
364 | left:0;
365 | color:#222;
366 | */
367 | }
368 |
369 | @media #{$medium} {
370 | // Text
371 | &:after{
372 | content:'Back';
373 | }
374 | &.nav-button-left {
375 | border-right:1px solid #222;
376 | }
377 | &.nav-button-right {
378 | border-left:1px solid #222;
379 | }
380 | }
381 |
382 | &:active {
383 | color: #eee;
384 | }
385 | }
386 | .fullscreen-icon {
387 | @include icon('\e800');
388 | position:absolute;
389 | display:block;
390 | top:80px;
391 | right:10px;
392 | width:30px;
393 | height:30px;
394 | background-color:#222;
395 | border:2px solid #fff;
396 | border-radius:1000px;
397 | z-index:1001;
398 |
399 | &:before{
400 | color:#fff;
401 | font-size:16px;
402 | margin-top:-8px;
403 | }
404 |
405 | .contentMinimized &{
406 | background-color:#fff;
407 | border-color:#222;
408 | @include icon('\e801');
409 |
410 | &:before{
411 | color:#222;
412 | font-size:16px;
413 | margin-top:-8px;
414 | }
415 | }
416 | }
417 |
418 | .scrollable{
419 | -webkit-overflow-scrolling: touch;
420 | }
421 |
422 | %drawer{
423 | @include transition( opacity 400ms 200ms ease );
424 | @include box-shadow( 0 -5px 10px rgba(0,0,0,0.13) );
425 | position:absolute;
426 | top:100%;
427 | right:0;
428 | width:100%;
429 | max-width:24rem;
430 | padding:0 15px;
431 | z-index:2;
432 | background-color:#ededed;
433 |
434 | #object &{
435 | bottom:0;
436 | }
437 |
438 | #story &{
439 | bottom:40px;
440 | }
441 |
442 | @media #{$small} {
443 | @include box-shadow( 5px 0 10px rgba(0,0,0,0.13) );
444 | top:0;
445 | right:auto;
446 | left:-24rem;
447 |
448 | #story &{
449 | top:40px;
450 | bottom:0;
451 | }
452 | }
453 |
454 | @media #{$medium} {
455 | top:0;
456 | right:auto;
457 | bottom:0;
458 | left:0;
459 | }
460 | }
461 |
462 | %handle{
463 | // Base styles
464 | @include icon( '\e817' );
465 | display:block;
466 | width:70px;
467 | height:70px;
468 | background-color:rgba(237,237,237,0.4);
469 | &:before{
470 | font-size:30px;
471 | margin-top:-15px;
472 | }
473 |
474 | // Size and positioning
475 | position:fixed;
476 | margin:0;
477 | right:0;
478 | z-index:1;
479 |
480 | #object &{
481 | bottom:0;
482 | }
483 |
484 | #story &{
485 | bottom:40px;
486 | }
487 |
488 | @media #{$smallPortrait}{
489 | &.attached{
490 | position:absolute;
491 | top:0;
492 | bottom:auto;
493 | background-color:transparent;
494 | }
495 | }
496 |
497 | @media #{$small} {
498 | &:before{
499 | @include transform( rotate( 90deg ) );
500 | }
501 |
502 | // Size and positioning
503 | // On landscape and medium screens, button is attached regardless of class
504 | position:absolute;
505 | top:auto;
506 | right:-70px;
507 | bottom:0;
508 | left:auto;
509 | }
510 |
511 | @media #{$medium}{
512 | display:none;
513 | }
514 | }
515 |
516 | .glance {
517 | @include transition( opacity 300ms ease );
518 | @include transform( translate3d( 0, 0, 0 ) );
519 | @include no-select;
520 | @include box-shadow( inset 0 -10px 10px -5px rgba(0,0,0,0.4));
521 | background-color:rgba(255,255,255,0.65);
522 | position:absolute;
523 | display:none;
524 | width:100%;
525 | height:80px;
526 | top:-80px;
527 | left:0;
528 | margin:0;
529 | opacity:0;
530 | z-index:-1000;
531 |
532 | .drawerify-vertical.drawerify-full &{
533 | display:block;
534 | }
535 |
536 | .drawerify-open &{
537 | z-index:1;
538 | opacity:1;
539 | }
540 |
541 | p{
542 | @include no-select;
543 | margin:10px;
544 | border-radius:10px;
545 | line-height:60px;
546 | vertical-align:middle;
547 | font-weight:bold;
548 | font-size:1.25em;
549 | text-align:center;
550 | }
551 |
552 | &.translucent{
553 | opacity:0;
554 | }
555 |
556 | @media #{$small}{
557 | display:none;
558 | }
559 |
560 | &:active {
561 | -webkit-tap-highlight-color: rgba(0,0,0,0);
562 | }
563 |
564 | .drawerify-drawer.drawerify-closed &,
565 | .drawerify-drawer.drawerify-info & {
566 | display: none;
567 | }
568 | }
569 |
570 |
571 |
--------------------------------------------------------------------------------
258 |
259 |
260 |
261 |
262 |
263 |
264 |
265 |
266 |
267 |
268 |
269 |
270 |
271 |
272 |
273 |
274 |
275 |
276 |
277 |
278 |
279 |
280 |
281 |
282 |
283 |
284 |
285 |
286 |
287 |
288 |
289 |
290 |
291 |
292 |
293 |
294 |
295 |
296 |