Commit 31babf748bd7268aef1ff8c3759d8286c540510e

Change UI to link the icons to the backbone router
  • Diff rendering mode:
  • inline
  • side by side

swtr/static/css/swtmaker.css

98 width: 100%;98 width: 100%;
99}99}
100100
101.page {
102 display: none;
103}
104
101105
102/* text-annotation styles */106/* text-annotation styles */
103107

swtr/static/js/swtmaker.js

8 this.appView = new AppView();8 this.appView = new AppView();
9 this.who = 'Guest';9 this.who = 'Guest';
1010
11 this.app_router = new AppRouter();
12 Backbone.history.start();
13 this.app_router.navigate('home');
14
11 $.ajaxSetup({15 $.ajaxSetup({
12 xhrFields: {16 xhrFields: {
13 // we need this to send cookies to cross-domain requests17 // we need this to send cookies to cross-domain requests
……
365 });365 });
366366
367 var AppView = Backbone.View.extend({367 var AppView = Backbone.View.extend({
368 el: $('#swtr-root'),
368 el: $('body'),
369 events: {369 events: {
370 'click #user-input-submit': 'submitUserInput',370 'click #user-input-submit': 'submitUserInput',
371 'click #sweet': 'sweet',371 'click #sweet': 'sweet',
……
496 },496 },
497 userLoggedIn: function(username) {497 userLoggedIn: function(username) {
498 swtr.who = username;498 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>';
500 $('#signinview').html(text);500 $('#signinview').html(text);
501 },501 },
502 userLoggedOut: function() {502 userLoggedOut: function() {
……
736 'home': 'home',736 'home': 'home',
737 'linked-data': 'linkedData',737 'linked-data': 'linkedData',
738 'play': 'play',738 'play': 'play',
739 'search-external': 'search'
739 'search': 'search'
740 },740 },
741 home: function() {741 home: function() {
742 this.hideAll();
743 this.show('home-page');
742 },744 },
743 linkedData: function() {745 linkedData: function() {
746 this.hideAll();
747 this.show('linked-data-page');
744 },748 },
745 play: function() {749 play: function() {
746
750 this.hideAll();
751 this.show('play-page');
747 },752 },
748 search: function() {753 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');
749 }769 }
750 });770 });
751 new AppRouter();
752 Backbone.history.start();
771
753})(swtr);772})(swtr);

swtr/templates/index.html

41 <li> <a href="#/linked-data" title="Linked Data">41 <li> <a href="#/linked-data" title="Linked Data">
42 <span class="glyphicon glyphicon-globe"></span>42 <span class="glyphicon glyphicon-globe"></span>
43 </a></li>43 </a></li>
44 <li> <a href="#/search-external" title="Search External Sources">
44 <li> <a href="#/search" title="Search External Sources">
45 <span class="glyphicon glyphicon-search"></span>45 <span class="glyphicon glyphicon-search"></span>
46 </a></li>46 </a></li>
47 <li> <a href="#/user" title="">
47 <li> <a id="sign-in" href="#" title="">
48 <span class="glyphicon glyphicon-user"></span>48 <span class="glyphicon glyphicon-user"></span>
49 <span id="signinview"> Sign In </span>
49 </a></li>50 </a></li>
50 </ul>51 </ul>
51 </div>52 </div>
……
54 </header>54 </header>
5555
56 <div id="swtr-root" class="container">56 <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>
64 </div>70 </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>
73 </div>85 </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">
116 <form class="form-inline" role="form">92 <form class="form-inline" role="form">
117 <div class="form-group">93 <div class="form-group">
118 <label class="checkbox-inline">94 <label class="checkbox-inline">
119 <input type="checkbox" id="setbox"> Show annotated areas95 <input type="checkbox" id="setbox"> Show annotated areas
120 </label>96 </label>
121 </div>97 </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>
122 </form>106 </form>
123 </div>107 </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>
148 </div>146 </div>
147
149 </div>148 </div>
149
150 <div id="linked-data-page" class="page"></div>
151 <div id="search-page" class="page"></div>
152
150 </div>153 </div>
151 <div id="app-overlay"></div>154 <div id="app-overlay"></div>
152155