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 137  
138 138 $scope.loadForModuleById = function (moduleId) {
139 139  
140   - alert('hi');
141   -
142 140 $scope.moduleId = moduleId;
143 141  
144 142 console.log('loadForModuleById is called')
... ... @@ -176,10 +174,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
176 174  
177 175 $scope.openBodyView = function ()
178 176 {
179   - debugger;
180   - alert('openBodyView is called')
181   -
182   - $.jsPanel({
  177 + $.jsPanel({
183 178 id: 'aaImagePanel',
184 179 selector: '.aaBodyView',
185 180 theme: 'success',
... ... @@ -200,90 +195,50 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
200 195 });
201 196  
202 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 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 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 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 224 }, 250);
255 225 }
256 226  
257 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 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 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 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 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 42 </div>
278 43 </div>
279 44  
280 45 <div class="main2">
281 46 <div class="col-sm-12 stickey-area">
282   - <div class="breadcrumb ">
  47 + <div class="breadcrumb">
283 48 <div class="">
284 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 60 </div>
  61 + &nbsp;
  62 + <!-- Single button -->
302 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 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 69 <li role="separator" class="divider"></li>
309 70 <li><a href="#">All</a></li>
310 71 </ul>
311 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 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 80 </div>
  81 +
326 82 </div>
327 83 </div>
328 84 </div>
329   - <div class=" canavsParent col-sm-12 " id="cp">
  85 + <div class="col-sm-12">
330 86 <div class="container-fluid">
331 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 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 98 </div>
401 99 </div>
402 100 </div>
  101 +
  102 +
403 103 </div>
  104 +
404 105 </div>
405 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 108 <script>
412 109 $(window).load(function () {
413 110 $(".stickey-area").sticky();
414   - });</script>
  111 + });
  112 +</script>
415 113 <script>
416 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 127 </script>
479   - });-->
480 128  
481   -<script src="libs/jquery/jquery_plugin/slider-pips/jquery-ui-slider-pips.js"></script>
482 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 133 </script>
  134 +<script src="js/jquery-ui-slider-pips.js"></script>
517 135 <script>
518 136 $(".slider")
  137 +
519 138 .slider({
520   - min: 0,
  139 + min: 25,
521 140 max: 100,
522   - value: 50,
  141 + value: 100,
523 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 146 .slider("pips", {
534 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 150 </script>
  151 +
549 152 <script>
550 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 156 </script>
563 157  
564   -
... ...