ADAM / AIAHTML5

Commit d1408db5c3fb0ad2367c26f3cfd4254f28d85d2f

Authored by Amrita Vishnoi
1 parent cd0eb9e1

Able to show image dynamically on jsPanel

Inline Side-by-side
Showing 3 changed files with 119 additions and 571 deletions
150-DOCUMENTATION/Scrum/AIA_DailyScrum.xlsx
View file @d1408db
No preview for this file type
400-SOURCECODE/AIAHTML5.Web/app/controllers/TileViewListController.js
  View file @d1408db
@@ -137,8 +137,6 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo @@ -137,8 +137,6 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
137 137
138 $scope.loadForModuleById = function (moduleId) { 138 $scope.loadForModuleById = function (moduleId) {
139 139
140 - alert('hi');  
141 -  
142 $scope.moduleId = moduleId; 140 $scope.moduleId = moduleId;
143 141
144 console.log('loadForModuleById is called') 142 console.log('loadForModuleById is called')
@@ -176,10 +174,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo @@ -176,10 +174,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
176 174
177 $scope.openBodyView = function () 175 $scope.openBodyView = function ()
178 { 176 {
179 - debugger;  
180 - alert('openBodyView is called')  
181 -  
182 - $.jsPanel({ 177 + $.jsPanel({
183 id: 'aaImagePanel', 178 id: 'aaImagePanel',
184 selector: '.aaBodyView', 179 selector: '.aaBodyView',
185 theme: 'success', 180 theme: 'success',
@@ -200,90 +195,50 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo @@ -200,90 +195,50 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
200 }); 195 });
201 196
202 console.log('jsPanel loaded aaImagePanel exist= ' + document.getElementById('aaImagePanel')) 197 console.log('jsPanel loaded aaImagePanel exist= ' + document.getElementById('aaImagePanel'))
203 - //0.1  
204 - // $rootScope.currentSlug = 'da-body-view';  
205 -  
206 - //0.2  
207 - //$rootScope.openViews.push(  
208 - // {  
209 - // "module": $rootScope.currentActiveModuleTitle, "bodyView": tittle, "state": 'max', "BodyViewId": $rootScope.currentBodyViewId,  
210 - // "slug": $rootScope.currentSlug  
211 - // }  
212 - // );  
213 - 198 +
214 //0.3 199 //0.3
215 - var aaViewElement = angular.element(document.getElementById("aaView")); 200 + var aaViewElement = angular.element(document.getElementById("aaDetailPageDiv"));
216 201
217 - debugger;  
218 -  
219 - $timeout(function () {  
220 - $compile(aaViewElement.contents())($scope); 202 + $timeout(function () {
  203 + $compile(aaViewElement.contents())($scope);
221 204
  205 + alert('aaView val: ' + document.getElementById('aaDetailPageDiv'));
222 //console.log('html is compiled' + document.getElementById('daView')) 206 //console.log('html is compiled' + document.getElementById('daView'))
223 - if (document.getElementById('aaView') != null) { 207 + if (document.getElementById('aaDetailPageDiv') != null) {
224 208
225 - alert('inside jsPanel') 209 +
226 ////0.4 added some stylesheets 210 ////0.4 added some stylesheets
227 - //$('#daBodyview').css("height", $(window).outerHeight());  
228 -  
229 - //$('#daBodyview').css("width", $(window).outerWidth()); 211 + $('#aaBodyView').css("height", $(window).outerHeight());
230 212
231 - ////1. load navigator man first  
232 - //console.log('before LoadBodyViewNavigatorImage call')  
233 - // $scope.LoadBodyViewNavigatorImage(); 213 + $('#aaBodyView').css("width", $(window).outerWidth());
234 214
235 - //$scope.loadSearchDataForBodyView();  
236 -  
237 - //$scope.currentTitleFromJson = localStorage.getItem("currentViewTitle");  
238 -  
239 - // $scope.layerNumber = 0;  
240 -  
241 - //2.  
242 -  
243 - // console.log('currentBodyViewId just before sending: ' + currentBodyViewId);  
244 - $scope.loadAAImage($rootScope.OpenItemImagePath); 215 +
  216 + $scope.currentTitleFromJson = localStorage.getItem("currentViewTitle");
245 217
246 - //2. load bodyRegion data  
247 - //$rootScope.isLoading = true;  
248 - ////$rootScope.voId = localStorage.getItem("currentBodyViewId"); 218 + $scope.loadAAImage($rootScope.OpenItemImagePath);
249 219
250 - //$('#daBodyview').css("height", $(window).outerHeight()); 220 + //$('#aaBodyView').css("height", $(window).outerHeight());
251 221
252 - //$('#daBodyview').css("width", $(window).outerWidth()); 222 + //$('#aaBodyView').css("width", $(window).outerWidth());
253 } 223 }
254 }, 250); 224 }, 250);
255 } 225 }
256 226
257 $scope.loadAAImage = function (OpenedModuleItemPath) 227 $scope.loadAAImage = function (OpenedModuleItemPath)
258 { 228 {
  229 + //var imgNode = document.getElementById('modItemImage');
  230 + //imgNode.src = $rootScope.OpenItemImagePath;
259 231
  232 + var imageNode = "'<img id='modItemImage' src=' " + $rootScope.OpenItemImagePath + "'alt='' title='' class='img-responsive'>'";
  233 + $('#imageDiv').append(imageNode);
260 } 234 }
261 235
262 angular.element(document).ready(function (e) { 236 angular.element(document).ready(function (e) {
263 - $("#daImagePanel").resize(function () {  
264 - $("#canvasDiv").scrollLeft($rootScope.CanvasDivLeftPosition);  
265 - $("#canvasDiv").scrollTop($rootScope.CanvasDivTopPosition);  
266 - });  
267 -  
268 - $(document).on("mouseover", "#termList option", function (e) {  
269 - $('#termList option[selected="selected"]').attr("selected", false);  
270 - $(this).attr("selected", true);  
271 - });  
272 -  
273 - $(document).keypress(function (e) {  
274 - if ($('#termList option[selected="selected"]').attr("id") == "undefined") {  
275 - return false;  
276 - }  
277 - else {  
278 - var originator = e.keyCode || e.which;  
279 - // alert($('#termList option[selected="selected"]').attr("id"));  
280 - if ($('#termList option[selected="selected"]').attr("id")) {  
281 - if (e.keyCode == 13) {  
282 - onListManagerTermSelection($('#termList option[selected="selected"]').attr("id"));  
283 - }  
284 - }  
285 - }  
286 - }); 237 + $("#aaImagePanel").resize(function () {
  238 + $("#imageDiv").scrollLeft($rootScope.CanvasDivLeftPosition);
  239 + $("#imageDiv").scrollTop($rootScope.CanvasDivTopPosition);
  240 + });
  241 +
287 }) 242 })
288 243
289 $scope.loadSearchDataForBodyView = function () { 244 $scope.loadSearchDataForBodyView = function () {
400-SOURCECODE/AIAHTML5.Web/app/views/aa/atlas-anatomy-detail.html
  View file @d1408db
1 -๏ปฟ<!--<style>  
2 - .slider label {  
3 - position: absolute;  
4 - width: 20px;  
5 - margin-left: -10px;  
6 - text-align: center;  
7 - margin-top: 20px;  
8 - }  
9 -  
10 - /* below is not necessary, just for style */  
11 - .slider {  
12 - width: 50%;  
13 - margin: 2em auto;  
14 - }  
15 -</style>-->  
16 -<style>  
17 - /*Dated:22-07-2016 Issue#4958:In Open body view, the side buttons are getting disturbed on layer change. */  
18 - .btn-resize {  
19 - padding: 6px 11px;  
20 - border: 0px solid #000;  
21 - border-radius: 1px;  
22 - }  
23 -</style>  
24 -<style>  
25 - /*Dated:22-07-2016 Issue#4958:In Open body view, the side buttons are getting disturbed on layer change. */  
26 - .btn-resize {  
27 - padding: 6px 11px;  
28 - border: 0px solid #000;  
29 - border-radius: 1px;  
30 - }  
31 -</style>  
32 -  
33 -<style>  
34 - #draggable {  
35 - opacity: 0.2;  
36 - border: solid;  
37 - position: absolute;  
38 - }  
39 -  
40 - #wrapper {  
41 - position: relative;  
42 - width: 100%;  
43 - height: 100%;  
44 - margin: 20px auto;  
45 - }  
46 -  
47 - .tooltip-custom + .tooltip > .tooltip-inner {  
48 - background-color: #fff;  
49 - border: 1px solid #000;  
50 - color: #000;  
51 - border-radius: 0;  
52 - }  
53 -  
54 - .tooltip-custom + .tooltip > .tooltip-arrow {  
55 - display: none;  
56 - }  
57 -  
58 -  
59 - .custom-tooltip {  
60 - background-color: #333;  
61 - border: 0 none;  
62 - color: #fff !important;  
63 - left: -52px;  
64 - /*opacity: 0.9;*/  
65 - padding: 7px;  
66 - position: absolute;  
67 - text-align: center;  
68 - top: 45px;  
69 - width: 120px;  
70 - display: none;  
71 - z-index: 10000;  
72 - border: 1px solid #000;  
73 - color: #000;  
74 - border-radius: 0;  
75 - }  
76 -  
77 - .custom-tooltip1 {  
78 - background-color: #333;  
79 - border: 0 none;  
80 - color: #fff !important;  
81 - left: 52px;  
82 - /*opacity: 0.9;*/  
83 - padding: 7px;  
84 - position: absolute;  
85 - text-align: center;  
86 - top: 45px;  
87 - width: 70px;  
88 - display: none;  
89 - z-index: 10000;  
90 - border: 1px solid #000;  
91 - color: #000;  
92 - border-radius: 0;  
93 - }  
94 -  
95 - .custom-tooltip2 {  
96 - background-color: #333;  
97 - border: 0 none;  
98 - color: #fff !important;  
99 - right: 10px;  
100 - /*opacity: 0.9;*/  
101 - padding: 7px;  
102 - position: absolute;  
103 - text-align: center;  
104 - top: 45px;  
105 - width: 60px;  
106 - display: none;  
107 - z-index: 10000;  
108 - border: 1px solid #000;  
109 - color: #000;  
110 - border-radius: 0;  
111 - }  
112 -  
113 - .pad0 {  
114 - padding: 0;  
115 - }  
116 -</style>  
117 -<!--Annotation Toolbar: Jcanvas-->  
118 -<style>  
119 - .canvas-annotationStyle {  
120 - display: none;  
121 - background-color: transparent;  
122 - z-index: 12000;  
123 - position: absolute;  
124 - left: 0;  
125 - right: 0;  
126 - }  
127 -  
128 - .canvas-annotationStyle1 {  
129 - display: none;  
130 - background-color: transparent;  
131 - z-index: 12000;  
132 - position: absolute;  
133 - left: 0;  
134 - right: 0;  
135 - }  
136 -</style>  
137 -<div class=" " id="aaView" ng-controller="TileViewListController" ng-init="alert('hi')">  
138 - <div class="pos-relative leftToolBar tools pull-left">  
139 - <div class="toggle-icon toggleBar toggleHeadingButton" title="Show/Hide Sidebar" style="top:20px;"></div>  
140 - <div class="" style="top:20px">  
141 - <div class="col-xs-6">  
142 - <button id="btnIdentity" onclick="OnIdentityClick()" class="btn btn-primary btn-sm tooltip-custom" data-toggle="tooltip" data-placement="bottom" title="Identify"> <img src="content/images/icon-identity.png" alt=""></button>  
143 - </div>  
144 - <div class="col-xs-6 pull-right">  
145 - <button class="btn btn-black btn-sm pull-right tooltip-custom" ng-click="OnZoom()" id="btnZoom" data-toggle="tooltip" data-placement="bottom" title="Zoom-in/Zoom-out">  
146 - <img src="content/images/icon-zoom.png" alt="">  
147 - </button>  
148 -  
149 - </div>  
150 - <div class="col-xs-12">  
151 - <button id="btnTranparency" class="btn btn-black btn-sm btn-block marginTop5 tooltip-custom" onclick="onTboxCreation()" data-toggle="tooltip" data-placement="bottom" title="Transparency Box"><img src="content/images/icon-transparency.png" alt=""></button>  
152 - </div>  
153 -  
154 - <div class="col-xs-12 pad0">  
155 - <div class="col-xs-6">  
156 - <button id="btnNormalMode" class="btn btn-primary btn-sm marginTop5 tooltip-custom" onclick="OnEnableNormalMode()" data-toggle="tooltip" data-placement="bottom" title="Normal"> <img src="content/images/bulb.png" alt=""></button>  
157 - </div>  
158 - <div class="col-xs-6">  
159 - <button id="btnExtract" class="btn btn-black btn-sm pull-right marginTop5 tooltip-custom" onclick="OnEnableExtract()" data-toggle="tooltip" data-placement="bottom" title="Extract"><img src="content/images/bulb1.png" alt=""></button>  
160 - </div>  
161 - </div>  
162 - <div class="col-xs-12 pad0">  
163 - <div class="col-xs-6">  
164 - <button id="btnHighLight" class="btn btn-black btn-sm marginTop5 tooltip-custom btn-resize" ng-click="OnEnableHighlight()" data-toggle="tooltip" data-placement="bottom" title="Highlight"> <img src="content/images/Highlight-bulb.png" alt=""></button>  
165 - </div>  
166 -  
167 - <div class="col-xs-6 dropdown hover-tool">  
168 - <div class="custom-tooltip">Highlight Options</div>  
169 - <button class="btn btn-black btn-sm pull-right marginTop5 dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" ng-click="LoadBodySystemData()"><img src="content/images/icon-highlight.png" alt="" title=""></button>  
170 - <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">  
171 - <li ng-class="CurrentStructure"><a href="#" title="Current Structure">Current Structure</a></li>  
172 - <li role="separator" class="divider"></li>  
173 - <!--<li ng-class="Cardiovascular"><a href="#" title="Cardiovascular" id="1" ng-click="HighlightBodyByBodySystem($event)">Cardiovascular</a></li>  
174 - <li ng-class="Digestive"><a href="#" title="Digestive" id="2" ng-click="HighlightBodyByBodySystem($event)">Digestive</a></li>  
175 - <li ng-class="Endocrine"><a href="#" title="Endocrine" id="3" ng-click="HighlightBodyByBodySystem($event)">Endocrine</a></li>  
176 - <li ng-class="Immune"><a href="#" title="Immune" id="4" ng-click="HighlightBodyByBodySystem($event)">Immune</a></li>  
177 - <li ng-class="Integumentary"><a href="#" title="Integumentary" id="5" ng-click="HighlightBodyByBodySystem($event)">Integumentary</a></li>  
178 - <li ng-class="Lymphatic"><a href="#" title="Lymphatic" id="6" ng-click="HighlightBodyByBodySystem($event)">Lymphatic</a></li>  
179 - <li ng-class="Muscular"><a href="#" title="Muscular" id="7" ng-click="HighlightBodyByBodySystem($event)">Muscular</a></li>  
180 - <li ng-class="Nervous"><a href="#" title="Nervous" id="8" ng-click="HighlightBodyByBodySystem($event)">Nervous</a></li>  
181 - <li ng-class="Reproductive"><a href="#" title="Reproductive" id="9" ng-click="HighlightBodyByBodySystem($event)">Reproductive</a></li>  
182 - <li ng-class="Respiratory"><a href="#" title="Respiratory" id="10" ng-click="HighlightBodyByBodySystem($event)">Respiratory</a></li>  
183 - <li ng-class="Skeletal"><a href="#" title="Skeletal" id="11" ng-click="HighlightBodyByBodySystem($event)">Skeletal</a></li>  
184 - <li ng-class="Urinary"><a href="#" title="Urinary" id="12" ng-click="HighlightBodyByBodySystem($event)">Urinary</a></li>-->  
185 -  
186 - <li ng-class="Cardiovascular"><a href="#" title="Cardiovascular" id="1" onclick="OnBodySystemSelection(event)">Cardiovascular</a></li>  
187 - <li ng-class="Digestive"><a href="#" title="Digestive" id="2" onclick="OnBodySystemSelection(event)">Digestive</a></li>  
188 - <li ng-class="Endocrine"><a href="#" title="Endocrine" id="3" onclick="OnBodySystemSelection(event)">Endocrine</a></li>  
189 - <li ng-class="Immune"><a href="#" title="Immune" id="4" onclick="OnBodySystemSelection(event)">Immune</a></li>  
190 - <li ng-class="Integumentary"><a href="#" title="Integumentary" id="5" onclick="OnBodySystemSelection(event)">Integumentary</a></li>  
191 - <li ng-class="Lymphatic"><a href="#" title="Lymphatic" id="6" onclick="OnBodySystemSelection(event)">Lymphatic</a></li>  
192 - <li ng-class="Muscular"><a href="#" title="Muscular" id="7" onclick="OnBodySystemSelection(event)">Muscular</a></li>  
193 - <li ng-class="Nervous"><a href="#" title="Nervous" id="8" onclick="OnBodySystemSelection(event)">Nervous</a></li>  
194 - <li ng-class="Reproductive"><a href="#" title="Reproductive" id="9" onclick="OnBodySystemSelection(event)">Reproductive</a></li>  
195 - <li ng-class="Respiratory"><a href="#" title="Respiratory" id="10" onclick="OnBodySystemSelection(event)">Respiratory</a></li>  
196 - <li ng-class="Skeletal"><a href="#" title="Skeletal" id="11" onclick="OnBodySystemSelection(event)">Skeletal</a></li>  
197 - <li ng-class="Urinary"><a href="#" title="Urinary" id="12" onclick="OnBodySystemSelection(event)">Urinary</a></li>  
198 - </ul>  
199 - </div>  
200 - </div>  
201 -  
202 - <div class="col-xs-12 pad0">  
203 - <div class="col-xs-6 hover-gender-tool" ng-init="switchGender()">  
204 - <div class=" custom-tooltip1">Gender</div>  
205 - <button class="btn btn-black btn-sm marginTop5 dropdown-toggle" type="button" id="dropdownMenu4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> <i class=" fa fa-intersex font16"></i></button>  
206 - <ul class="dropdown-menu" aria-labelledby="dropdownMenu3">  
207 - <li ng-class="male">  
208 - <!--<button type="button" id="btnMale" onclick="OnGenderChange('Male')" class="btn btn-link" >Male</button>-->  
209 - <a href="#" title="Male" onclick="OnGenderChange(event)">Male</a>  
210 - </li>  
211 - <li ng-class="female">  
212 -  
213 - <!--<button type="button" id="btnFemale" onclick="OnGenderChange('Female')" class="btn btn-link">Female</button>-->  
214 - <a href="#" title="Female" onclick="OnGenderChange(event)">Female</a>  
215 -  
216 - <!--<a href="javascript:void(0)" title="Male" ng-click="OnGenderChange($event)">Male</a></li>  
217 - <li ng-class="female"><a href="javascript:void(0)" title="Female" ng-click="OnGenderChange($event)">Female</a></li>-->  
218 - </li>  
219 - </ul>  
220 - </div>  
221 -  
222 - <div class="col-xs-6 tooltip-View-custom">  
223 - <div class="custom-tooltip2">View</div>  
224 - <button class="btn btn-black btn-sm pull-right marginTop5 dropdown-toggle" type="button" id="dropdownMenu3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"><img src="content/images/view.png" alt="" title=""></button>  
225 - <ul class="dropdown-menu" aria-labelledby="dropdownMenu3">  
226 - <!--<li ng-class="AnteriorView"><a href="#" title="Anterior" ng-click="OnViewChange($event)">Anterior</a></li>  
227 - <li ng-class="LateralView"><a href="#" title="Lateral" ng-click="OnViewChange($event)">Lateral</a></li>  
228 - <li ng-class="MedialView"><a href="#" title="Medial" ng-click="OnViewChange($event)">Medial</a></li>  
229 - <li ng-class="PosteriorView"><a href="#" title="Posterior" ng-click="OnViewChange($event)">Posterior</a></li>  
230 - <li ng-class="LateralArmView"><a href="#" title="Lateral Arm" ng-click="OnViewChange($event)">Lateral Arm</a></li>  
231 - <li ng-class="MedialArmView"><a href="#" title="Medial Arm" ng-click="OnViewChange($event)">Medial Arm</a></li>-->  
232 -  
233 - <li ng-class="AnteriorView"><a href="#" title="Anterior" onclick="OnViewChange(event)">Anterior</a></li>  
234 - <li ng-class="LateralView"><a href="#" title="Lateral" onclick="OnViewChange(event)">Lateral</a></li>  
235 - <li ng-class="MedialView"><a href="#" title="Medial" onclick="OnViewChange(event)">Medial</a></li>  
236 - <li ng-class="PosteriorView"><a href="#" title="Posterior" onclick="OnViewChange(event)">Posterior</a></li>  
237 - <li ng-class="LateralArmView"><a href="#" title="Lateral Arm" onclick="OnViewChange(event)">Lateral Arm</a></li>  
238 - <li ng-class="MedialArmView"><a href="#" title="Medial Arm" onclick="OnViewChange(event)">Medial Arm</a></li>  
239 - </ul>  
240 - </div>  
241 - </div>  
242 -  
243 - <div class="col-xs-12">  
244 - <button id="btnStrutureBox" onclick="enableShowHideStructureBox()" class="btn btn-primary btn-sm marginTop5 btn-block tooltip-custom" data-toggle="tooltip" data-placement="bottom" title="Show/Hide Structure Name Boxes"> <img src="content/images/comment-box.png" alt=""></button>  
245 - </div>  
246 -  
247 - </div> 1 +๏ปฟ
  2 +<div id="aaDetailPageDiv" class="bodyWrap row" ng-controller="TileViewListController">
  3 +
  4 + <!--<div class="col-sm-12 pageHeading">
  5 + <!--<button type="button" class="btn btn-success pull-left toggleBar btn-sm" data-toggle="tooltip" data-placement="top" title="Show/Hide Sidebar"> <i class="fa fa-bars"></i> </button>-->
  6 + <!--<div class=" pull-left toggleBar toggleHeadingButton" data-toggle="tooltip" data-placement="top" title="Show/Hide Sidebar"> <i class="fa fa-exchange"></i> </div>-->
  7 + <!--<h4 class="pull-left">1<sup>st</sup> &amp; 2<sup>nd</sup> Intercostal Spaces</h4>-->
  8 + <!--<div class="pull-right btn-group paddTop4 hidden-xs"> <a href="#" class="btn btn-xs btn-default"><i class="fa fa-minus"></i></a> <a href="#" class="btn btn-xs btn-default"><i class="fa fa-clone"></i></a> <a href="#" class="btn btn-xs btn-default"><i class="fa fa-close"></i></a> </div>
  9 + <div class="clearfix"></div>-->
  10 + <!--</div>-->
  11 + <div class="tools pull-left" style="top:44px;">
  12 + <div class="toggle-icon toggleBar toggleHeadingButton" data-toggle="tooltip" data-placement="top" title="Show/Hide Sidebar"></div>
248 <div class=""> 13 <div class="">
249 -  
250 -  
251 - <!--'x' button is displaying inside the input box in IE browser.-->  
252 - <div style="width:80px;margin:10px 0 0 15px;display:inline-block;">  
253 - <div style="width: 58px; float: left;">  
254 - <input type="text" class="form-control item" id="txtlayerNumber" value="0" ng-model="layerNumber" ng-keyup="LayerValueChangeBasedOnKeyUp($event)" ng-keydown="LayerChangeBasedOnKeyPressed($event)" style="height:32px;border-radius:0;">  
255 - </div>  
256 - <div style="width: 22px; float: left;">  
257 - <div style="width: 100%; float: left; height: 16px;">  
258 - <button type="button" id="incrmntVal" ng-click="LayerChangeOnMouseUpDown($event)" class="btn btn-default" style="padding:0 5px;border-radius:0;font-size: 10px;vertical-align:top;">  
259 -  
260 - <img style="width:10px;height:10px;" src="~/../content/images/DA/angle-up.png" />  
261 - </button>  
262 - </div>  
263 - <div style="width: 100%; float: left; height: 16px;">  
264 - <button type="button" id="deccrmntVal" ng-click="LayerChangeOnMouseUpDown($event)" class="btn btn-default" style="padding:0 5px;border-radius:0;font-size: 10px;vertical-align:top;">  
265 - <img style="width:10px;height:10px;" src="~/../content/images/DA/angle-down.png" />  
266 - </button>  
267 - </div>  
268 - </div> 14 + <div class="col-sm-6" title="Hide Pins"><button class="btn btn-black btn-sm" ng-click="alert('hi')"> <img src="../../../content/images/aa/LeftMenu/hide-pin.png" alt="" title=""></button> </div>
  15 + <div class="col-sm-6" title="Show Selected Pins"><button class="btn btn-black btn-sm pull-right"><img src="../../../content/images/aa/LeftMenu/draw-pin.png" alt="" title=""></button></div>
  16 + <div class="col-sm-6" title="Show All Pins in System(s)"><button class="btn btn-primary btn-sm marginTop5"><img src="../../../content/images/aa/LeftMenu/all-pin.png" alt="" title=""></button></div>
  17 + <div class="col-sm-6" title="Select System">
  18 + <button class="btn btn-black btn-sm pull-right marginTop5 dropdown-toggle" type="button" id="dropdownMenu221" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"><img src="../../../content/images/aa/LeftMenu/icon-highlight.png" alt="" title=""></button>
  19 + <ul class="dropdown-menu" aria-labelledby="dropdownMenu221">
  20 + <li><a href="#" title="Current Structure">All</a></li>
  21 + <li role="separator" class="divider"></li>
  22 + <li><a href="#" title="Cardiovascular">Cardiovascular</a></li>
  23 + <li><a href="#" title="Digestive">Digestive</a></li>
  24 + <li class="disabled"><a href="#" title="Endocrine">Endocrine</a></li>
  25 + <li class="disabled"><a href="#" title="Immune">Immune</a></li>
  26 + <li class="disabled"><a href="#" title="Integumentary">Integumentary</a></li>
  27 + <li class="disabled"><a href="#" title="Lymphatic">Lymphatic</a></li>
  28 + <li><a href="#" title="Muscular">Muscular</a></li>
  29 + <li class="disabled"><a href="#" title="Nervous">Nervous</a></li>
  30 + <li class="disabled"><a href="#" title="Reproductive">Reproductive</a></li>
  31 + <li class="disabled"><a href="#" title="Respiratory">Respiratory</a></li>
  32 + <li><a href="#" title="Skeletal">Skeletal</a></li>
  33 + <li class="disabled"><a href="#" title="Urinary">Urinary</a></li>
  34 + </ul>
269 35
270 </div> 36 </div>
271 -  
272 -  
273 - <!--<p>  
274 - <input class="item" type="number" id="txtlayerNumber" value="0" step="1" min="0" style="width:80px; margin:10px 0 0 15px;" ng-model="layerNumber" ng-keydown="LayerChangeBasedOnKeyPressed($event)" ng-click="LayerChangeOnMouseUpDown($event)" />  
275 - </p>-->  
276 - <div id="layerChangeSlider" style="height:140px;" class="vert_slider " ng-model="layerNumber"></div> 37 + <div class="col-sm-12" data-toggle="tooltip" data-placement="top" title="Show/Hide Structure Name Boxes"><button class="btn btn-black btn-sm marginTop5 btn-block"> <img src="../../../content/images/aa/LeftMenu/comment-box.png" alt="" title=""></button> </div>
  38 + </div>
  39 + <div class="pips-slider" style="margin-top:125px">
  40 + <h3>Zoom <i class="fa fa-search-plus"></i></h3>
  41 + <div class="slider" id="vertical-slider"></div>
277 </div> 42 </div>
278 </div> 43 </div>
279 44
280 <div class="main2"> 45 <div class="main2">
281 <div class="col-sm-12 stickey-area"> 46 <div class="col-sm-12 stickey-area">
282 - <div class="breadcrumb "> 47 + <div class="breadcrumb">
283 <div class=""> 48 <div class="">
284 <div class="input-group col-sm-8 col-xs-7 col-md-10 pull-left"> 49 <div class="input-group col-sm-8 col-xs-7 col-md-10 pull-left">
285 -  
286 - <input type="text" class="form-control input-sm pull-left" id="typedtermname" ng-blur="HideSearch()" ng-click="OnSearch()" ng-dblclick="OnSearch()" ng-model="searchFilter" ng-change="textChange(searchFilter)" placeholder="Search...">  
287 -  
288 - <div id="backdrop" ng-show="IsSearchVisible">  
289 - <div class="col-sm-12 col-xs-12 col-md-12 col-lg-12 pull-left">  
290 - <!--#Bug 6591-->  
291 - <ul id="termlistfilter" class="form-control dropdown-menu" style="height:90px;width:100%;overflow-y:scroll;position:absolute;display:none;z-index:1000;">  
292 - <li ng-repeat="item in VocabTermTxt| filter:{ _TermText: searchFilter}">  
293 - <!--<a id="{{item._ActualTermNumber}}" href="" ng-click="jumpToTerm($event)">{{item._TermText}}</a>-->  
294 - <a id="{{item._ActualTermNumber}}" href="" onclick="selectTerm(event)">{{item._TermText}}</a>  
295 - </li>  
296 - </ul>  
297 - </div>  
298 - </div>  
299 - <!--</div>-->  
300 - 50 + <input class="form-control input-sm " type="text" ng-click="alert('hi search')" placeholder="Anterior cutaneous branch of first intercostal nerve">
  51 + <!--<select class="form-control input-sm ">
  52 + <option>---Select---</option>
  53 + <option selected>Anterior cutaneous branch of first intercostal nerve</option>
  54 + <option>Anterior cutaneous branch of second intercostal nerve</option>
  55 + <option>Anterior cutaneous branch of third intercostal nerve</option>
  56 + <option>Anterior intercostal artery</option>
  57 + <option>Anterior intercostal vein</option>
  58 + </select>-->
  59 + <!--<div class="input-group-addon btn btn-primary btn-sm"></div>-->
301 </div> 60 </div>
  61 + &nbsp;
  62 + <!-- Single button -->
302 <div class="btn-group"> 63 <div class="btn-group">
303 - <button type="button" style="padding:0px 0px 10px 1px !important;background-color:rgba(255,255,255,0.0); border:none;" class="btn btn-success dropdown-toggle btn-sm" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">  
304 - <img src="~/../content/images/DA/go-to.png" style="height: 30px;width:50px"> 64 + <button type="button" class="btn btn-success dropdown-toggle btn-sm" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  65 + <i class="fa fa-arrow-circle-right"></i>
305 </button> 66 </button>
306 - <ul class="dropdown-menu" style="width:100%;">  
307 - <li><a href="#">{{currentTitleFromJson}}</a></li> 67 + <ul class="dropdown-menu">
  68 + <li><a href="#">1<sup>st</sup> &amp; 2<sup>nd</sup> Intercostal Spaces</a></li>
308 <li role="separator" class="divider"></li> 69 <li role="separator" class="divider"></li>
309 <li><a href="#">All</a></li> 70 <li><a href="#">All</a></li>
310 </ul> 71 </ul>
311 </div> 72 </div>
312 - <div class="btn-group open" id="da-body-nav">  
313 - <button type="button" style="padding:0px 0px 10px 1px !important;background-color:rgba(255,255,255,0.0); border:none;" class="btn btn-primary dropdown-toggle btn-sm" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">  
314 - <img src="~/../content/images/DA/navigator-view.png" style="height:30px; width:50px" /> 73 + <div class="btn-group">
  74 + <button type="button" class="btn btn-primary dropdown-toggle btn-sm" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="navigatorMan" ng-click="alert('hi nav')">
  75 + <i class="fa fa-male"></i>
315 </button> 76 </button>
316 -  
317 - <div class="dropdown-menu active" id="navigatorDiv" style="min-height:auto; min-width:auto; ">  
318 - <div id="containment-wrapper" align="center" style="min-width:auto;height:119px; ">  
319 - <img id="navimg" ng-src="{{navimgsrc}}" alt=""></img>  
320 - <div id="draggable" class="draggable ui-widget-content" ng-mouseup="ScrollCanvasDiv()" ng-style="dragdivposition">  
321 - </div>  
322 - </div>  
323 -  
324 - </div> 77 + <ul class="dropdown-menu" style="min-width:auto;">
  78 + <li><img src="../../../content/images/aa/LeftMenu/position.jpg" class="img-responsive"></li>
  79 + </ul>
325 </div> 80 </div>
  81 +
326 </div> 82 </div>
327 </div> 83 </div>
328 </div> 84 </div>
329 - <div class=" canavsParent col-sm-12 " id="cp"> 85 + <div class="col-sm-12">
330 <div class="container-fluid"> 86 <div class="container-fluid">
331 <div class="row"> 87 <div class="row">
332 - <div id="canvasDiv" class="col-sm-12 img-thumbnail" align="center">  
333 - <canvas id="canvasPaint" ng-click="FreeStylePaint($event)" width="2277" height="3248" class="canvas-annotationStyle1"></canvas>  
334 - <canvas id="canvas" ng-click="BindCanvasDrawingListners($event)" width="2277" height="3248" class="canvas-annotationStyle"></canvas>  
335 - </div>  
336 - <!--<div id="canvasDiv" style=" width: 95% !important;top:0px;overflow:scroll;background-color:white;">-->  
337 - <!--<div id="daLoaderLabel">Loading....</div>-->  
338 88
339 - </div>  
340 - <div class="clearfix"></div>  
341 - </div>  
342 - </div>  
343 - <div class="clearfix"></div>  
344 - </div>  
345 - <div class="clearfix"></div>  
346 - <!--to prevent transparency scale from closing on click anywhere outside set data-backdrop="static" data-keyboard="false" -->  
347 - <!--<div class="modal fade bs-example-modal-sm" tabindex="-1" aria-labelledby="mySmallModalLabel" id="transparencyScale" data-backdrop="static" data-keyboard="false">  
348 - <div class="modal-dialog modal-sm">  
349 - <div class="modal-content">  
350 - <div class="modal-header annotation-modal-header">  
351 - <button type="button" class="close" data-dismiss="modal" aria-label="Close" ng-click="CloseTransparencyBox()"><span aria-hidden="true">&times;</span></button>  
352 - <h4 class="modal-title">Transparency</h4>  
353 - </div>  
354 - <div class="modal-body">  
355 - <div class="row">  
356 - <div class="col-sm-12">  
357 - <div class="padded25">  
358 - <div class="slider"></div>  
359 - </div>  
360 - </div>  
361 - </div>  
362 - </div>  
363 - </div>  
364 - </div>  
365 - </div>-->  
366 - <!--<div class="ui-widget-content" id="transparencyScale" style="width: 350px; height: 130px;visibility:hidden;display:block;float:left">  
367 - <div class="modal-dialog modal-sm">  
368 - <div class="modal-content">  
369 - <div class="modal-header annotation-modal-header">  
370 - <button type="button" class="close" data-dismiss="modal" aria-label="Close" ng-click="CloseTransparencyBox()"><span aria-hidden="true">&times;</span></button>  
371 - <h4>Transparency</h4>  
372 - </div>  
373 - <div>  
374 - <div class="row">  
375 - <div class="col-sm-12">  
376 - <div class="padded25">  
377 - <div class="slider"></div>  
378 - </div>  
379 - </div>  
380 - </div>  
381 - </div>  
382 - </div>  
383 - </div>  
384 - </div>-->  
385 - <div class="ui-widget-content" id="transparencyScale" style="width: 350px; height: 150px;visibility:hidden;display:block;float:left">  
386 - <div>  
387 - <div>  
388 - <div class="modal-header annotation-modal-header">  
389 - <button id="btnTBoxClose" type="button" onclick="onTboxClose()" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>  
390 - <h4>Transparency</h4>  
391 - </div>  
392 - <div>  
393 - <div class="row">  
394 - <div class="col-sm-12">  
395 - <div class="padded25">  
396 - <!--<div class="slider" id="sliderScale"></div>-->  
397 - <div class="slider"></div>  
398 - </div> 89 + <div class=" col-sm-12 img-thumbnail" align="center" id="imageDiv" style="height: 478px; overflow: scroll;">
  90 +
  91 +
  92 + <!--<img id="modItemImage" src="../../../content/images/aa/images/aa_img_3112.jpg" alt="" title="" class="img-responsive">-->
  93 + <div class="clearfix">
  94 + <!--<img id="modItemImage" ng-init="alert('hi')" alt="" title="" class="img-responsive">-->
399 </div> 95 </div>
  96 + <!--<div class="col-sm-1 img-thumbnail pull-right" align="center"><img src="../../content/images/1000x600.jpg" alt="" title="" class="img-responsive"></div>
  97 + <div class="clearfix"></div>-->
400 </div> 98 </div>
401 </div> 99 </div>
402 </div> 100 </div>
  101 +
  102 +
403 </div> 103 </div>
  104 +
404 </div> 105 </div>
405 </div> 106 </div>
406 107
407 -  
408 -<!--<script src="../../../libs/jquery/1.11.4/jquery-ui.js"></script>-->  
409 -<script src="libs/jquery/jquery_plugin/slider-pips/jquery-ui-slider-pips.js"></script>  
410 -  
411 <script> 108 <script>
412 $(window).load(function () { 109 $(window).load(function () {
413 $(".stickey-area").sticky(); 110 $(".stickey-area").sticky();
414 - });</script> 111 + });
  112 +</script>
415 <script> 113 <script>
416 $(function () { 114 $(function () {
417 -  
418 -  
419 - var regExp = /[0-9\.\,]/;  
420 - $('#txtlayerNumber').on('keydown keyup', function (e) {  
421 - var value = String.fromCharCode(e.which) || e.key;  
422 - // Only numbers, dots and commas  
423 - if (!regExp.test(value)  
424 - && e.which != 188 // ,  
425 - && e.which != 190 // .  
426 - && e.which != 8 // backspace  
427 - && e.which != 46 // delete  
428 - && (e.which < 37 // arrow keys  
429 - || e.which > 40)  
430 - && (e.keyCode < 96 // Dissectible Anatomy > Num Lock is not working for enter the layer.  
431 - || e.keyCode > 105)) {  
432 - e.preventDefault();  
433 - return false; 115 + $("#slider-range-min-2").slider({
  116 + range: "min",
  117 + min: 1,
  118 + max: 60,
  119 + value: 10,
  120 + slide: function (event, ui) {
  121 + $("#amount-2").val(ui.value);
434 } 122 }
435 }); 123 });
  124 + $("#amount-2").val($("#slider-vertical-2").slider("value"));
436 125
437 -  
438 - $("#layerChangeSlider").slider({  
439 - orientation: "vertical",  
440 - range: "max", // <--- needed...  
441 - min: 0,  
442 - // max: 100,  
443 - value: 0,  
444 - slide: function (event, ui) {  
445 - // $("#txtlayerNumber").val(100 - ui.value); // basic math operation..  
446 -  
447 - // $("#txtlayerNumber").val($("#layerChangeSlider").slider("value"));  
448 - },  
449 - stop: function (event, ui) {  
450 - var la;  
451 - var rootScope = angular.element(document.getElementById("bo")).scope();  
452 - rootScope.$apply(function () {  
453 - rootScope.isLoading = true;  
454 - })  
455 - var scope = angular.element(document.getElementById("aaView")).scope();  
456 - scope.$apply(function () {  
457 - if (scope.isTransparencyActivated) {  
458 - rootScope.isLoading = false;  
459 - }  
460 - la = parseInt(scope.totalLayers) //- parseInt(scope.layerNumber);  
461 - // $('#layerChangeSlider').slider("option", "value", la - ui.value);  
462 - var slideVal = la - ui.value;  
463 - $("#txtlayerNumber").val(slideVal);  
464 - scope.layerNumber = slideVal;  
465 - scope.LayerChange();  
466 - });  
467 - },  
468 -  
469 - })  
470 }); 126 });
471 -  
472 -</script>  
473 -<!--<script>  
474 - $(function () {  
475 - $('#layerChangeSlider').slider().on('slideStop', function () {  
476 - alert('fjkjksdbgjkgjkfgk')  
477 - })  
478 </script> 127 </script>
479 - });-->  
480 128
481 -<script src="libs/jquery/jquery_plugin/slider-pips/jquery-ui-slider-pips.js"></script>  
482 <script> 129 <script>
483 - $(function () {  
484 - $("#transparencyScale").draggable();  
485 - $("#draggable").draggable({ containment: "#containment-wrapper", scroll: false });  
486 - });  
487 -</script>  
488 -<script>  
489 - $(function () {  
490 -  
491 - $("#dropdownMenu2").mouseover(function () {  
492 - $(".custom-tooltip").css("display", "block");  
493 - });  
494 - $("#dropdownMenu2").mouseout(function () {  
495 - $(".custom-tooltip").css("display", "none");  
496 - });  
497 -  
498 - $("#dropdownMenu4").mouseover(function () {  
499 - $(".custom-tooltip1").css("display", "block");  
500 - });  
501 - $("#dropdownMenu4").mouseout(function () {  
502 - $(".custom-tooltip1").css("display", "none");  
503 - });  
504 -  
505 - $("#dropdownMenu3").mouseover(function () {  
506 - $(".custom-tooltip2").css("display", "block");  
507 - });  
508 - $("#dropdownMenu3").mouseout(function () {  
509 - $(".custom-tooltip2").css("display", "none");  
510 - });  
511 -  
512 -  
513 -  
514 - 130 + $(document).ready(function () {
  131 + $('[data-toggle="tooltip"]').tooltip();
515 }); 132 });
516 </script> 133 </script>
  134 +<script src="js/jquery-ui-slider-pips.js"></script>
517 <script> 135 <script>
518 $(".slider") 136 $(".slider")
  137 +
519 .slider({ 138 .slider({
520 - min: 0, 139 + min: 25,
521 max: 100, 140 max: 100,
522 - value: 50, 141 + value: 100,
523 range: "min", 142 range: "min",
524 - orientation: "horizontal",  
525 - stop: function (event, ui) {  
526 - //alert('trans changed')  
527 - var scope = angular.element(document.getElementById("aaView")).scope();  
528 - scope.$apply(function () {  
529 - scope.onTransparencyChange(event, ui);  
530 - });  
531 - } 143 + orientation: "vertical"
532 }) 144 })
  145 +
533 .slider("pips", { 146 .slider("pips", {
534 rest: "label", 147 rest: "label",
535 - step: "10"  
536 - });  
537 -  
538 -</script>  
539 -<script>  
540 - $(".tooltip-custom").tooltip({  
541 - tooltipClass: 'customTooltip'  
542 - });  
543 -</script>  
544 -<script>  
545 - $(function () {  
546 - $(".modal").draggable(); 148 + step: "15"
547 }); 149 });
548 </script> 150 </script>
  151 +
549 <script> 152 <script>
550 $(function () { 153 $(function () {
551 - "use strict";  
552 - /*** Sidebar Toggle ***/  
553 - var barPos = 0;  
554 - var bar = $('.tools');  
555 - var main = $('.main2');  
556 - $('.toggleBar').click(function () {  
557 -  
558 - bar.toggleClass('active');  
559 - main.toggleClass('active');  
560 - }); 154 + $("#draggable").draggable();
561 }); 155 });
562 </script> 156 </script>
563 157
564 -