Commit 31babf748bd7268aef1ff8c3759d8286c540510e

Change UI to link the icons to the backbone router
swtr/static/css/swtmaker.css
(4 / 0)
  
9898 width: 100%;
9999}
100100
101.page {
102 display: none;
103}
104
101105
102106/* text-annotation styles */
103107
swtr/static/js/swtmaker.js
(29 / 6)
  
88 this.appView = new AppView();
99 this.who = 'Guest';
1010
11 this.app_router = new AppRouter();
12 Backbone.history.start();
13 this.app_router.navigate('home');
14
1115 $.ajaxSetup({
1216 xhrFields: {
1317 // we need this to send cookies to cross-domain requests
……
365365 });
366366
367367 var AppView = Backbone.View.extend({
368 el: $('#swtr-root'),
368 el: $('body'),
369369 events: {
370370 'click #user-input-submit': 'submitUserInput',
371371 'click #sweet': 'sweet',
……
496496 },
497497 userLoggedIn: function(username) {
498498 swtr.who = username;
499 var text = 'You are signed in as <b>' + swtr.who + '</b>';
499 var text = 'Signed in as <b>' + swtr.who + '</b>';
500500 $('#signinview').html(text);
501501 },
502502 userLoggedOut: function() {
……
736736 'home': 'home',
737737 'linked-data': 'linkedData',
738738 'play': 'play',
739 'search-external': 'search'
739 'search': 'search'
740740 },
741741 home: function() {
742 this.hideAll();
743 this.show('home-page');
742744 },
743745 linkedData: function() {
746 this.hideAll();
747 this.show('linked-data-page');
744748 },
745749 play: function() {
746
750 this.hideAll();
751 this.show('play-page');
747752 },
748753 search: function() {
754 this.hideAll();
755 this.show('search-page');
756 },
757 hideAll: function() {
758 $('.page').hide();
759 },
760 show: function(id) {
761 $('#' + id).show();
762 this.highlight(id);
763 },
764 highlight: function(id) {
765 $('#swtr-navbar-collapse li').removeClass('active');
766 var href = id.split('-page')[0];
767 var selector = '#swtr-navbar-collapse a[href="#/' + href + '"]';
768 $(selector).parent('li').addClass('active');
749769 }
750770 });
751 new AppRouter();
752 Backbone.history.start();
771
753772})(swtr);
swtr/templates/index.html
(86 / 82)
  
4141 <li> <a href="#/linked-data" title="Linked Data">
4242 <span class="glyphicon glyphicon-globe"></span>
4343 </a></li>
44 <li> <a href="#/search-external" title="Search External Sources">
44 <li> <a href="#/search" title="Search External Sources">
4545 <span class="glyphicon glyphicon-search"></span>
4646 </a></li>
47 <li> <a href="#/user" title="">
47 <li> <a id="sign-in" href="#" title="">
4848 <span class="glyphicon glyphicon-user"></span>
49 <span id="signinview"> Sign In </span>
4950 </a></li>
5051 </ul>
5152 </div>
……
5454 </header>
5555
5656 <div id="swtr-root" class="container">
57 <!-- first row: helpview and sign in button -->
58 <div class="row">
59 <!-- helpview column of width md-8 -->
60 <div class="col-md-8">
61 <div id="helpview" class="bg-info">
62 <span class="label label-default">Heads Up</span>
63 <span id="helpview-text"></span>
57 <div id="home-page" class="page">
58 Lorem Ipsum
59 </div>
60
61 <div id="play-page" class="page">
62 <!-- first row: helpview and sign in button -->
63 <div class="row">
64 <!-- helpview column of width md-8 -->
65 <div class="col-md-8">
66 <div id="helpview" class="bg-info">
67 <span class="label label-default">Heads Up</span>
68 <span id="helpview-text"></span>
69 </div>
6470 </div>
65 </div>
66 <!-- signin view column of width md-4 -->
67 <div class="col-md-4">
68 <div id="signinview">
69 <span id="signin-msg">You are not signed in.</span>
70 <button class="btn btn-sm btn-primary" id="sign-in">
71 Sign In
72 </button>
71 <!-- signin view column of width md-4 -->
72 <div class="col-md-4"></div>
73 </div> <!-- end first row -->
74 <!-- second row: image URL input box and Load button -->
75 <div class="row" id="user-input-row">
76 <div class="col-md-8">
77 <form class="form-inline" role="form">
78 <div class="form-group col-md-11">
79 <label class="sr-only" for="user-input">Enter URL of an image or web page</label>
80 <input class="form-control" type="text"
81 placeholder="Enter URL of an image or web page" id="user-input">
82 </div>
83 <button type="submit" class="btn btn-primary" id="user-input-submit">Load</button>
84 </form>
7385 </div>
74 </div>
75 </div> <!-- end first row -->
76 <!-- second row: image URL input box and Load button -->
77 <div class="row" id="user-input-row">
78 <div class="col-md-8">
79 <form class="form-inline" role="form">
80 <div class="form-group col-md-11">
81 <label class="sr-only" for="user-input">Enter URL of an image or web page</label>
82 <input class="form-control" type="text"
83 placeholder="Enter URL of an image or web page" id="user-input">
84 </div>
85 <button type="submit" class="btn btn-primary" id="user-input-submit">Load</button>
86 </form>
87 </div>
88 <div class="col-md-4">
89 </div>
90 </div> <!-- end second row -->
91 <!-- third row - control panel? -->
92 <div class="row" id="control-panel">
93 <div class="col-md-8">
94 <form class="form-inline" role="form">
95 <div class="form-group">
96 <label class="checkbox-inline">
97 <input type="checkbox" id="setbox"> Show annotated areas
98 </label>
99 </div>
100 <div class="form-group">
101 <label class="checkbox-inline">
102 <input type="checkbox" id="ocd-source"> Search in Open Cuultur Data
103 </label>
104 </div>
105 <div class="form-group">
106 <button class="btn btn-default" id="sweet">Sweet</button>
107 </div>
108 </form>
109 </div>
110 <div class="col-md-4"></div>
111 </div> <!-- end third row -- >
112 <!-- fourth row: the image annotation window -->
113 <div class="row">
114 <div id="img-annotation-wrapper" class="col-md-12 col-xs-12 col-lg-12 col-sm-12 well">
115 <div id="img-anno-controls">
86 <div class="col-md-4">
87 </div>
88 </div> <!-- end second row -->
89 <!-- third row - control panel? -->
90 <div class="row" id="control-panel">
91 <div class="col-md-8">
11692 <form class="form-inline" role="form">
11793 <div class="form-group">
11894 <label class="checkbox-inline">
11995 <input type="checkbox" id="setbox"> Show annotated areas
12096 </label>
12197 </div>
98 <div class="form-group">
99 <label class="checkbox-inline">
100 <input type="checkbox" id="ocd-source"> Search in Open Cuultur Data
101 </label>
102 </div>
103 <div class="form-group">
104 <button class="btn btn-default" id="sweet">Sweet</button>
105 </div>
122106 </form>
123107 </div>
124 {% if url %}
125 <img src="{{ url }}" id="annotatable-img" class="img-responsive" alt="Annotation Workbench">
126 {% else %}
127 <img src="" id="annotatable-img" class="img-responsive" alt="Annotation Workbench">
128 {% endif %}
129 </div>
130 <div id="ocd-view"></div>
131 </div> <!-- end fourth row -->
132 <!-- <\!-- fifth row: options for filter -\-> -->
133 <!-- <div id="filter-div" class="row"> -->
134 <!-- <div id="filter-user-div"> -->
135 <!-- <p><span>SWeeTs by</span></p> -->
136 <!-- </div> -->
137 <!-- <div id="filter-tags-div"> -->
138 <!-- <p><span>Tags</span></p> -->
139 <!-- </div> -->
140 <!-- </div> <\!-- end fifth row -\-> -->
108 <div class="col-md-4"></div>
109 </div> <!-- end third row -- >
110 <!-- fourth row: the image annotation window -->
111 <div class="row">
112 <div id="img-annotation-wrapper" class="col-md-12 col-xs-12 col-lg-12 col-sm-12 well">
113 <div id="img-anno-controls">
114 <form class="form-inline" role="form">
115 <div class="form-group">
116 <label class="checkbox-inline">
117 <input type="checkbox" id="setbox"> Show annotated areas
118 </label>
119 </div>
120 </form>
121 </div>
122 {% if url %}
123 <img src="{{ url }}" id="annotatable-img" class="img-responsive" alt="Annotation Workbench">
124 {% else %}
125 <img src="" id="annotatable-img" class="img-responsive" alt="Annotation Workbench">
126 {% endif %}
127 </div>
128 <div id="ocd-view"></div>
129 </div> <!-- end fourth row -->
130 <!-- <\!-- fifth row: options for filter -\-> -->
131 <!-- <div id="filter-div" class="row"> -->
132 <!-- <div id="filter-user-div"> -->
133 <!-- <p><span>SWeeTs by</span></p> -->
134 <!-- </div> -->
135 <!-- <div id="filter-tags-div"> -->
136 <!-- <p><span>Tags</span></p> -->
137 <!-- </div> -->
138 <!-- </div> <\!-- end fifth row -\-> -->
141139
142
143 <div id="sweet-list-wrapper">
144 <ul id="sweet-list"></ul>
145 <div class="btn-grp">
146 <button class="btn btn-default" id="sweet-cancel">Cancel</button>
147 <button class="btn btn-primary" id="post-sweet">Sweet</button>
140 <div id="sweet-list-wrapper">
141 <ul id="sweet-list"></ul>
142 <div class="btn-grp">
143 <button class="btn btn-default" id="sweet-cancel">Cancel</button>
144 <button class="btn btn-primary" id="post-sweet">Sweet</button>
145 </div>
148146 </div>
147
149148 </div>
149
150 <div id="linked-data-page" class="page"></div>
151 <div id="search-page" class="page"></div>
152
150153 </div>
151154 <div id="app-overlay"></div>
152155