diff --git a/400-SOURCECODE/AIAHTML5.Web/app/controllers/TileViewListController.js b/400-SOURCECODE/AIAHTML5.Web/app/controllers/TileViewListController.js index c0f5c8a..2e8f15d 100644 --- a/400-SOURCECODE/AIAHTML5.Web/app/controllers/TileViewListController.js +++ b/400-SOURCECODE/AIAHTML5.Web/app/controllers/TileViewListController.js @@ -1,2043 +1,2042 @@ -'use strict'; - -AIA.controller("TileViewListController", ["$scope", "$window", "$rootScope", "$compile", "$http", "$log", "$location", "$timeout", "DA", "Modules", "$routeParams", "BodyRegions", "BodySystems", "ViewOrientations", "ImageTypes", "DataService", "ModuleService", -function ($scope, $window, $rootScope, $compile, $http, $log, $location, $timeout, DA, Modules, $routeParam, BodyRegions, BodySystems, ViewOrientations, ImageTypes, DataService, ModuleService) { - - - $rootScope.OpenedTileData = []; - var DISSECTIBLE_ANATOMY = 'Dissectible Anatomy'; - var ATLAS_ANATOMY = 'Atlas Anatomy'; - var CLINICAL_ILLUSTRATION = 'Clinical Illustrations'; - var CLINICAL_ANIMATION = 'Clinical Animations'; - $rootScope.closeBtnImgPath = "~/../content/images/speeachBubbleClose.png"; - $rootScope.listArray = []; - //variables to bind Filter by Controls - $scope.searchAAListViewData = []; - $scope.SelectedAAthumbImage = []; - $scope.SelectedAAImage = []; - $scope.SelectedAASummary = []; - $scope.SelectedAAId = []; - $scope.SelectedAATitle = []; - $scope.selectedAAListViewData = []; - $scope.filterstring = false; - $scope.AllBodyRegion = []; - $scope.AllBodySystem = []; - $scope.AllOrientation = []; - $scope.AllImageType = []; - $rootScope.speechBubbleDimaensions = []; - $scope.runningSearchWorkers = []; - $scope.clickedPins = []; - $scope.sliderPercentValue = 1; - $scope.query = { - selectedbodyregion: '', - selectedbodysystem: '', - selectedorientation: '', - selectedimagetype: '', - }; - $scope.activePinArray = []; - $scope.showTabButton = true; - $scope.isListViewDataLoaded = true; - - $scope.setActiveTab = function (tabToSet) { - - $scope.activeTab = tabToSet; - localStorage.setItem("activeTab", $scope.activeTab); - if ($scope.activeTab == 1) { - $('#grid-view').css("display", "block"); - $('#list-view').css("display", "none"); - $("#demoView").remove(); - } - else { - - $('#grid-view').css("display", "none"); - $('#list-view').css("display", "block"); - } - }; - - $scope.loadForModuleById = function (moduleId) { - $rootScope.openModules.push({ "ModuleId": 2 }); - if ($rootScope.refreshcheck == null) { - $location.path('/'); - } - $scope.moduleId = moduleId; - $scope.activeTab = 1; - console.log('loadForModuleById is called') - $rootScope.moduleName = Modules[moduleId].Name; - $rootScope.currentActiveModuleTitle = $rootScope.moduleName; - $scope.AllBodyRegion = BodyRegions; - $scope.AllBodySystem = BodySystems; - $scope.AllOrientation = ViewOrientations; - $scope.AllImageType = ImageTypes; - var promise = ModuleService.loadModuleDataBasedOnModuleName($scope.moduleName) - .then( - function (result) { - - $scope.moduleLandingData = result; - // setTimeout(function () { $('#' + $rootScope.highlightid).find('.thumbnail').addClass('hightlightstate'); }, 100); - setTimeout(function () { - if ($rootScope.getLocalStorageValue('AAGridViewHighlightThumbnail') !== null) { - $('#' + $rootScope.getLocalStorageValue("AAGridViewHighlightThumbnail")).find('.thumbnail').addClass('HightLightThumbnail'); - } - if ($rootScope.getLocalStorageValue('AAGridViewScroll') !== null && $location.url() == "/tile-view-list") { - $('html, body').animate({ scrollTop: $rootScope.getLocalStorageValue('AAGridViewScroll') }, 'slow'); - } - }, 100); - //console.log(JSON.stringify(result, null, 4)); - }, - function (error) { - // handle errors here - console.log(' error: ' + error.statusText); - } - ) - $('#list-view').css('display', 'none'); - } - - //$scope.$on('$viewContentLoaded', function (event) { - - // $scope.loadForModuleById(); - - //}); - $scope.isOpenBtnClicked = false; - $scope.openModuleItemView = function (event) { - $rootScope.MenuModuleName = "AA"; - localStorage.setItem("activeTab", $scope.activeTab); - //0. Get selected Image Id - if ($scope.isListViewButtonClicked == true) { - if ($scope.isOpenBtnClicked == true) { - - var moduleItemDataToBeSaved = $("#demoText").text().trim(); - $scope.isOpenBtnClicked = false; - } - else { - var moduleItemDataToBeSavedID = event.currentTarget.id; - localStorage.setItem("listViewSelectedID", moduleItemDataToBeSavedID); - var moduleItemDataToBeSaved = $("#list-view table tbody #" + moduleItemDataToBeSavedID).find('td:eq(0)').text().trim(); - } - } - else { - var moduleItemDataToBeSaved = event.target.id; - localStorage.setItem("listViewSelectedID", event.currentTarget.id); - $scope.isListViewButtonClicked = false; - } - - //1.Filter selected module ietem data and get the pushed opened moduile array object - $rootScope.OpenedTileData = ModuleService.GetOpenedTileData(moduleItemDataToBeSaved, $scope.moduleLandingData); - - //2. Pick the image name to create a source to open - $rootScope.imageId = $rootScope.OpenedTileData[0]; - $rootScope.imageName = $rootScope.OpenedTileData[3]; - $rootScope.bodySystemName = $rootScope.OpenedTileData[2]; - $rootScope.OpenItemImagePath = "../../../content/images/aa/images/" + $rootScope.OpenedTileData[3]; - $scope.OpenItemImagePath = "../../../content/images/aa/images/" + $rootScope.OpenedTileData[3]; - //$rootScope.listArray = []; - $rootScope.listArray.push({ "imageName": $rootScope.OpenItemImagePath, "text": moduleItemDataToBeSaved }); - //3. set opened module item ti - localStorage.setItem("currentViewTitle", $rootScope.OpenedTileData[6]); - localStorage.setItem("AAGridViewScroll", $($window).scrollTop()); - localStorage.setItem("AAGridViewHighlightThumbnail", $(event.target).parent().parent().parent().attr('id')); - - //3. Navigate to the Module-item-view - var u = $location.url(); - $location.url('/module-item-view'); - } - - - $scope.openListViewModuleItem = function (event) { - $("#demoView").remove(); - var moduleItemDataToBeSavedID = event.currentTarget.id; - $("#list-view table tbody tr").removeClass("active"); - localStorage.setItem("listViewSelectedID", moduleItemDataToBeSavedID); - $("#list-view table tbody #" + moduleItemDataToBeSavedID).addClass("active"); - localStorage.setItem("AAListViewScroll", $("#list-view table tbody").scrollTop()); - var moduleItemDataToBeSaved = $("#list-view table tbody #" + moduleItemDataToBeSavedID).find('td:eq(0)').text().trim(); - $rootScope.OpenedTileData = ModuleService.GetOpenedTileData(moduleItemDataToBeSaved, $scope.moduleLandingData); - $rootScope.OpenItemImagePath = "../../../content/images/aa/images/" + $rootScope.OpenedTileData[3]; - //$rootScope.listArray = []; - $rootScope.listArray.push({ "imageName": $rootScope.OpenItemImagePath, "text": moduleItemDataToBeSaved }); - $("#viewList").append("
" + moduleItemDataToBeSaved + "
Open
"); - } - - - $scope.openModuleItem = function () { - if ($rootScope.refreshcheck == null) { - $location.path('/'); - } - var jsContentURL; - var moduleItemViewDivId; - - //1. create a jsPanel and load the module item view - if ($rootScope.moduleName == ATLAS_ANATOMY) { - - jsContentURL = 'app/views/aa/atlas-anatomy-detail.html'; - moduleItemViewDivId = 'aaDetailPageDiv'; - } - else if ($rootScope.moduleName == CLINICAL_ANIMATION) { - //to do, in next phase of project - - } - else if ($rootScope.moduleName == CLINICAL_ILLUSTRATION) { - //to do, in next phase of project - - } - - //1. create a jsPanel and load the module item view - if ($rootScope.moduleName == ATLAS_ANATOMY) { - $.jsPanel({ - id: 'ImagePanel', - selector: '.aaBodyView', - theme: 'success', - currentController: 'TileViewListController', - parentSlug: 'tile-view-list', - ajax: { - url: jsContentURL - }, - title: $rootScope.getLocalStorageValue("currentViewTitle"), - - position: { - top: 70, - left: 1, - }, - - size: { width: $(window).outerWidth() - 10, height: $(window).outerHeight() - 125 }, - - }); - - console.log('jsPanel loaded ImagePanel exist= ' + document.getElementById('ImagePanel')) - - //0.3 - var aaViewElement = angular.element(document.getElementById(moduleItemViewDivId)); - - //0.4 for Opening module item, load it into image - $rootScope.isLoading = true; - $('#spinner').css('visibility', 'visible'); - var openedImage = new Image(); - openedImage.id = 'modItemImage'; - openedImage.name = $rootScope.OpenItemImagePath; - - openedImage.onload = function () { - $scope.imageWidth = this.width; - $scope.imageHeight = this.height; - - - $timeout(function () { - $compile(aaViewElement.contents())($scope); - - //if (document.getElementById('aaDetailPageDiv') != null) { - if (document.getElementById('aaBodyView') != null) { - - //0.4 added some stylesheets - $('#aaBodyView').css("height", $(window).outerHeight() - 65); - - $('#aaBodyView').css("width", $(window).outerWidth() - 15); - - $rootScope.canvasDivHeight = $('.jsPanel-content').height() - $('.main2 .stickey-area').height(); - - $('.canvasDivClass').css("height", $rootScope.canvasDivHeight); - - $scope.currentTitleFromJson = $rootScope.getLocalStorageValue("currentViewTitle"); - $("#modItemImage").attr('src', $rootScope.OpenItemImagePath); - - - $rootScope.ViewImageWidth = $("#modItemImage").width(); - $scope.ViewImageWidth = $("#modItemImage").width(); - $scope.ViewImageHeight = $("#modItemImage").height(); - - $scope.relativeDimesion = 0; - $("#modItemImage").css("width", $rootScope.ViewImageWidth + "px"); - //0.5 create canvas on the top of image so that I can draw a line over the canvas. - var canvas = document.createElement('canvas'); - canvas.id = 'aaDetailViewCanvas'; - canvas.className = '.aaCanvas' - canvas.height = parseInt(($scope.imageHeight)); - canvas.width = parseInt($scope.imageWidth); - canvas.style.left = '0px'; - canvas.style.top = '0px'; - canvas.style.position = "absolute"; - $("#canvasDiv").append(canvas); - $scope.context = canvas.getContext("2d") - //6. Show all pins on AA opened item - $scope.showAllPins(); - //7. Highlight all system body list in left side - $scope.highlightBodySystemList(); - } - $(".slider").slider({ - min: 25, - max: 100, - value: 100, - range: "min", - orientation: "vertical", - slide: function (event, ui) { - var scope = angular.element(document.getElementById("aaDetailPageDiv")).scope(); - scope.$apply(function () { - scope.sliderVal = ui.value; - scope.removeSpeechBubble(); - var relativeWidth = 0; - var relativeHeight = 0; - if (ui.value == 25 || ui.value == 40 || ui.value == 55 || ui.value == 70 || ui.value == 85 || ui.value == 100) { - if (ui.value == 100) { - relativeWidth = scope.ViewImageWidth; - relativeHeight = scope.ViewImageHeight - scope.sliderPercentValue = 1.0; - } - else if (ui.value == 85) { - relativeWidth = scope.ViewImageWidth * 0.85; - relativeHeight = scope.ViewImageHeight * 0.85; - scope.sliderPercentValue = 0.85; - - } else if (ui.value == 70) { - relativeWidth = scope.ViewImageWidth * 0.70; - relativeHeight = scope.ViewImageHeight * 0.70; - scope.sliderPercentValue = 0.70; - } else if (ui.value == 55) { - - relativeWidth = scope.ViewImageWidth * 0.55; - relativeHeight = scope.ViewImageHeight * 0.55; - scope.sliderPercentValue = 0.55; - - } else if (ui.value == 40) { - - relativeWidth = scope.ViewImageWidth * 0.40; - relativeHeight = scope.ViewImageHeight * 0.40; - scope.sliderPercentValue = 0.40; - - } else if (ui.value == 25) { - - relativeWidth = scope.ViewImageWidth * 0.25; - relativeHeight = scope.ViewImageHeight * 0.25; - scope.sliderPercentValue = 0.25; - - } - } - - if (ui.value == 25 || ui.value == 40 || ui.value == 55 || ui.value == 70 || ui.value == 85 || ui.value == 100) { - $("#modItemImage").css("width", relativeWidth + "px"); - $("#modItemImage").css("height", relativeHeight + "px"); - $("#aaDetailViewCanvas").css("width", relativeWidth + "px"); - $("#modItemImage").css("height", relativeHeight + "px"); - - $("#modItemImage").attr('src', ''); - - - $("#aaDetailViewCanvas").remove(); - //0.5 create canvas on the top of image so that I can draw a line over the canvas. - var canvas = document.createElement('canvas'); - canvas.id = 'aaDetailViewCanvas'; - canvas.className = 'aaCanvas'; - canvas.height = relativeHeight; - canvas.width = relativeWidth; - canvas.style.left = '0px'; - canvas.style.top = '0px'; - canvas.style.position = "absolute"; - - $("#canvasDiv").append(canvas); - scope.context = canvas.getContext("2d") - $("#modItemImage").attr('src', scope.OpenItemImagePath); - scope.isSliderChange = true; - var btnID = ''; - $("div.tools div:eq(1) div").each(function () { - if ($(this).find("button").hasClass("btn-primary")) { - btnID = $(this).find("button").attr("id"); - $('#' + btnID).removeClass("btn-black"); - $('#' + btnID).addClass("btn-primary"); - } - }); - scope.isSelectedPinBtnClickedAftrSliderCange = true; - switch (btnID) { - - case "hidePinBtn": - break; - case "allPinBtn": - scope.showAllPins(); - break; - case "selectedPin": - scope.showAllPins(); - setTimeout(function () { - console.log(scope.allPinDataArray); - scope.activePinOnSliderChange(); - }, 1000); - break; - } - } - - }); - } - }) - .slider("pips", { - rest: "label", - step: "15" - }); - }, 500); - } - - openedImage.onerror = loadFailure; - openedImage.src = $rootScope.OpenItemImagePath; - } - - } - - $scope.highlightBodySystemList = function () { - $rootScope.bodySystemNames = $rootScope.bodySystemName.trim().split(/\s*,\s*/); - var bodySystemListObj = document.getElementById("bodySystemList").getElementsByTagName("a"); - var bodySystemListlength = bodySystemListObj.length; - for (var i = 0; i < bodySystemListlength; i++) { - //var boldTag = lis[i]; - for (var j = 0; j < $rootScope.bodySystemNames.length; j++) { - if ((bodySystemListObj[i].innerHTML) == ($rootScope.bodySystemNames[j])) { - $("#" + i).parent().removeClass("disabledSelectedSystem"); - - } - } - - } - } - function loadFailure() { - console.log('unable to load opened module ietem'); - return true; - } - - - angular.element(document).ready(function (e) { - $("#ImagePanel").resize(function () { - $("#canvasDiv").scrollLeft($rootScope.CanvasDivLeftPosition); - $("#canvasDiv").scrollTop($rootScope.CanvasDivTopPosition); - }); - $(document).on("click", "#ImagePanel .jsPanel-hdr .jsPanel-hdr-r .jsPanel-btn-close .jsglyph-remove", function () { - $scope.setActiveTab(parseInt($rootScope.getLocalStorageValue("activeTab"))); - $(".tools").css("z-index", "15000"); - $rootScope.selectedBodySystemName = 'All'; - $rootScope.selectedBodySystemId = 0; - $rootScope.searchSelectedText = ''; - - }); - - $(document).on("click", "#dvPrintPreview .jsPanel-hdr .jsPanel-hdr-r .jsPanel-btn-close .jsglyph-remove", function () { - - if ($rootScope.isShowAllPinBtnActiveInPrintPreviewMode == true) { - $("#allPinBtn").trigger("click"); - $rootScope.isShowAllPinBtnActiveInPrintPreviewMode = false; - } - if ($rootScope.isHidePinBtnActiveInPrintPreview == true) { - $("#hidePinBtn").trigger("click"); - $rootScope.isHidePinBtnActiveInPrintPreview = false; - } - if($rootScope.isShowSelectedPinActiveInPrintPrevMode == true) - { - $("#selectedPin").trigger("click"); - $rootScope.isShowSelectedPinActiveInPrintPrevMode = false; - } - }); - - }) - $rootScope.aaPinDataArray = []; - $scope.showAllPins = function () { - - $scope.allPinDataArray = []; - var promise = ModuleService.getPinDataForImage($rootScope.imageName) - - .then( - function (result) { - - //load navigator image - if (result.data.Root._NavigatorImage != undefined) { - document.getElementById('navimg').src = '~/../content/images/aa/images/navigator/' + result.data.Root._NavigatorImage; - } - else { - document.getElementById('navimg').style.visibility = 'hidden'; - document.getElementById('navigatorBtn').style.visibility = 'hidden'; - document.getElementById('navigatorDiv').style.visibility = 'hidden'; - - } - - //draw pins - $scope.aaPinData = result.data.Root.Item; - if ($scope.aaPinData != null && $scope.aaPinData.length > 0) { - $rootScope.aaPinDataArray = $scope.aaPinData - angular.forEach($scope.aaPinData, function (value, key) { - $scope.allPinDataArray.push(value._PinId); - $scope.drawStaticPinsOnImage('aaDetailViewCanvas', value._PinId, value._PinX, value._PinY, value._HeadX, value._HeadY) - }) - - - - //load search/vocab data - $rootScope.loadSearchData(); - } - }, - function (error) { - - console.log(' error in showAllPins: ' + error.statusText); - } - ) - if ($scope.isSliderChange == true) { - $timeout(function () { - $scope.activePinOnLayerChange(); - }, 1000); - - } - - } - - - $scope.FilterByImage = function (moduleId, query) { - $scope.moduleId = moduleId; - $scope.filterstring = true; - - console.log('loadForModuleById is called'); - - $rootScope.moduleName = Modules[moduleId].Name; - while ($scope.searchAAListViewData.length) { - $scope.searchAAListViewData.pop(); - } - - var filtercount = 0; - if (typeof (query.selectedbodyregion) !== "undefined" && (query.selectedbodyregion !== null && query.selectedbodyregion !== "")) { - filtercount = filtercount + 1; - localStorage.setItem("CurrentBodyRegion", query.selectedbodyregion); - } - else { - localStorage.setItem("CurrentBodyRegion", ''); - } - - if (typeof (query.selectedbodysystem) !== "undefined" && (query.selectedbodysystem !== null && query.selectedbodysystem !== "")) { - filtercount = filtercount + 1; - localStorage.setItem("CurrentBodySystem", query.selectedbodysystem); - } - else { - localStorage.setItem("CurrentBodySystem", ''); - } - - if (typeof (query.selectedorientation) !== "undefined" && (query.selectedorientation !== null && query.selectedorientation !== '')) { - filtercount = filtercount + 1; - localStorage.setItem("CurrentOrientation", query.selectedorientation); - } - else { - localStorage.setItem("CurrentOrientation", ''); - } - - if (typeof (query.selectedimagetype) !== "undefined" && (query.selectedimagetype !== null && query.selectedimagetype !== '')) { - filtercount = filtercount + 1; - localStorage.setItem("CurrentImageType", query.selectedimagetype); - } - else { - localStorage.setItem("CurrentImageType", ''); - } - - var promise = ModuleService.loadModuleDataBasedOnModuleName($scope.moduleName) - .then( - function (result) { - // alert(JSON.stringify($scope.moduleLandingData)); - $scope.moduleLandingData = result; - $scope.selectedAAListViewData = new jinqJs() - .from($scope.moduleLandingData.data.root.Item) - .orderBy([{ field: '_Title', sort: 'asc' }]) - .select(); - - $('#grid-view').empty(); - //alert(JSON.stringify($scope.selectedAAListViewData)) - angular.forEach($scope.selectedAAListViewData, function (value, key) { - - var selectimg = true; - var count = 0; - - - if (typeof (query.selectedbodyregion) !== "undefined" && (query.selectedbodyregion !== null && query.selectedbodyregion !== "")) { - var posbodyregion = value._BodyRegion.indexOf((query.selectedbodyregion.trim())); - if (posbodyregion > -1) { - selectimg = true; - count = count + 1; - } - else { - selectimg = false; - count = count - 1; - } - - } - - if (typeof (query.selectedbodysystem) !== "undefined" && (query.selectedbodysystem !== null && query.selectedbodysystem !== "")) { - var posbodysystem = value._BodySystem.indexOf(query.selectedbodysystem); - if (posbodysystem > -1) { - count = count + 1; - selectimg = true; - } else { - selectimg = false; - count = count - 1; - } - } - - if (typeof (query.selectedorientation) !== "undefined" && (query.selectedorientation !== null && query.selectedorientation !== "")) { - var posorientation = value._ViewOrientation.indexOf(query.selectedorientation); - if (posorientation > -1) { - count = count + 1; - selectimg = true; - - } else { - selectimg = false; - count = count - 1; - } - - } - - if (typeof (query.selectedimagetype) !== "undefined" && (query.selectedimagetype !== null && query.selectedimagetype !== "")) { - var posimagetype = value._ImageType.indexOf(query.selectedimagetype); - if (posimagetype > -1) { - count = count + 1; - selectimg = true; - - } else { - selectimg = false; - count = count - 1; - } - - } - - if (selectimg === true && count >= filtercount) { - - $scope.imagePath = "../content/images/aa/thumbnails/" + value._TileImageName; - - - var $el = $('
' - + '
' - + '' - + '

' + value._Title + '

').appendTo('#grid-view'); - - - $compile($el)($scope); - - $(".sidebar").mCustomScrollbar({ - autoHideScrollbar: true, - //theme:"rounded" - }); - - - $scope.searchAAListViewData.push( - { - "_Id": value._Id, - "_ImageId": value._ImageId, - "_Title": value._Title, - "_ImageName": value._contentImage, - "_TileImageName": value._ThumbnailImage, - "_BodySystem": value._BodySystem, - "_BodyRegion": value._BodyRegion, - "_ViewOrientation": value._ViewOrientation, - "_ImageType": value._ImageType - //"$$hashKey": value._Summary - - }); - console.log($scope.searchAAListViewData); - if ($('#searchItem').length > 0) - $('#searchItem').remove(); - } - }); - - //Show Error Message in case of gridview/ ListView [if no data is found] - if ($scope.searchAAListViewData.length == 0) { - var $el = $('
No illustration found for the selected search criteria!
').appendTo('#grid-view'); - $compile($el)($scope); - $('table > #ListViewDiv > #searchItem').remove(); - - $('#ListViewDiv').append('No illustration found for the selected search criteria!'); - } - //console.log(JSON.stringify(result, null, 4)); - console.log('SearchAAListViewData--' + $scope.searchAAListViewData); - }, - function (error) { - // handle errors here - console.log(' error: ' + error.statusText); - } - ) - } - - $scope.Reset = function (moduleId, query) { - - query.selectedbodyregion = ""; - query.selectedbodysystem = ""; - query.selectedorientation = ""; - query.selectedimagetype = ""; - query.selectedspecialty = ""; - - - //set localstorage values - localStorage.setItem("CurrentBodyRegion", ''); - localStorage.setItem("CurrentBodySystem", ''); - localStorage.setItem("CurrentOrientation", ''); - localStorage.setItem("CurrentImageType", ''); - //localStorage.setItem("CISelectedRowId", ""); - //localStorage.setItem("CIListViewScroll", ''); - - if ($('.selected').hasClass("selected")) { $('.selected').removeClass("selected"); } - - $('#ListViewDiv').scrollTop(0); - - if ($('#demoView').length > 0) - $('#demoView').remove(); - // $scope.HideListViewDiv(); - - $scope.filterstring = false; - //while ($scope.searchCIListViewData.length) { - // $scope.searchCIListViewData.pop(); - //} - - $scope.FilterByImage(1, query); - - } - - $scope.showSelectedSystemPins = function (event) { - var bodySystemListObj = document.getElementById("bodySystemList").getElementsByTagName("a"); - var bodySystemListlength = bodySystemListObj.length; - for (var i = 0; i < bodySystemListlength; i++) { - - $("#" + i).parent().removeClass("activeAASystemSelect"); - } - $("#" + event.currentTarget.id).parent().addClass("activeAASystemSelect"); - - $rootScope.isLoading = true; - $('#spinner').css('visibility', 'visible'); - - $scope.removeSpeechBubble(); - if (event.currentTarget.id == "0") { - - $scope.selectedSystemName = null; - if ($scope.isHidePinBtnClicked) { - - // $scope.showAllPinsAfterHide($scope.aaPinData); - $scope.showAllPinsAfterHide(); - } - else { - $scope.showAllPins(); - } - } - else { - - $scope.selectedSystemName = event.currentTarget.title; - // get termText info - var promise = ModuleService.getTermTextDataForPin($scope.moduleName) - .then( - function (response) { - - $scope.TermInfo = response.data.Terms.Term; - - //on gettng all required data, draw pins - if ($scope.aaPinData != null && $scope.aaPinData.length > 0) { - - $scope.selectedSystemPinData = new jinqJs() - .from($scope.aaPinData) - .where("_BodySystemName == " + $scope.selectedSystemName) - .select(); - if ($scope.isHidePinBtnClicked) { - // $scope.showAllPinsAfterHide($scope.selectedSystemPinData); - $scope.showAllPinsAfterHide(); - - } - else { - //remove other system pins - if ($scope.selectedSystemPinData != null && $scope.selectedSystemPinData.length > 0) { - - angular.forEach($scope.aaPinData, function (aaPinDataValue, aaPinDataKey) { - - if (aaPinDataValue._BodySystemName != $scope.selectedSystemName) - $scope.removePin('aaDetailViewCanvas', aaPinDataValue._PinId); - }) - - angular.forEach($scope.selectedSystemPinData, function (value, key) { - - - $scope.drawStaticPinsOnImage('aaDetailViewCanvas', value._PinId, value._PinX, value._PinY, value._HeadX, value._HeadY) - - }) - //show annotation on first pin of the sysyem - $scope.showAnnotation($scope.selectedSystemPinData, false, false, false); - } - } - } - }, - function (error) { - // handle errors here - console.log(' error: ' + error.statusText); - } - ) - - } - } - - $scope.showAnnotation = function (selectedPinData, isCtrlPressed, isPinClicked, isItemSearched) { - $scope.clickedPins = []; - $scope.selectedPin = []; - var isSameTermWithMultiPin = false; - var firstPinId = selectedPinData[0]._PinId; - var pinTermNumber = selectedPinData[0]._TermId; - - //check if other pin have same termNumber - if ($scope.aaPinData != null && $scope.aaPinData.length > 0) { - - var pinDataWithFirstTermNumber = new jinqJs() - .from($scope.aaPinData) - .where("_TermId == " + pinTermNumber) - .select(); - - $scope.MultiLanguageAnnationArray = []; - - $scope.GetAnnotationBasedOnActualTermNo(pinTermNumber); - - if (isCtrlPressed) { - - } - else { - if (isPinClicked || isItemSearched) { - var existingSpeechBubble = $("div[id*='speechBubble']"); - for (var i = 0; i < existingSpeechBubble.length; i++) { - existingSpeechBubble[i].parentNode.removeChild(existingSpeechBubble[i]); - - //make all pin heads grey - var radial = $('#aaDetailViewCanvas').createGradient({ - x1: 50, y1: 50, - x2: 50, y2: 50, - r1: 10, r2: 30, - c1: 'rgba(100, 50, 0,0)', - c2: 'rgb(216, 216, 216)' - }); - - - $('#aaDetailViewCanvas').setLayers({ - fillStyle: radial, - }).drawLayers(); - } - - var existingSpeechBubbleLine = $("div[id*='speechBubbleLine']"); - for (var i = 0; i < existingSpeechBubbleLine.length; i++) { - existingSpeechBubbleLine[i].parentNode.removeChild(existingSpeechBubbleLine[i]); - } - var speechBubbleDraggedLine = $("div[id*='speechBubbleDraggedLine']"); - for (var i = 0; i < speechBubbleDraggedLine.length; i++) { - speechBubbleDraggedLine[i].parentNode.removeChild(speechBubbleDraggedLine[i]); - } - } - } - if (pinDataWithFirstTermNumber.length > 1) { - isSameTermWithMultiPin = true; - } - - angular.forEach(pinDataWithFirstTermNumber, function (value, key) { - $scope.selectedPin.push(value._PinId); - $scope.clickedPins.push({ 'id': value._PinId }); - var headX = (parseInt(value._HeadX)); - var headY = (parseInt(value._HeadY)); - $scope.createSpeechBubble(parseInt(headX) + 10, parseInt(headY) + 10, value._PinId, isCtrlPressed, isPinClicked, isSameTermWithMultiPin); - }) - - } - - $rootScope.isLoading = false; - $('#spinner').css('visibility', 'hidden'); - // $scope.MultiLanguageAnnationArray.push($rootScope.annotationText[i]) - } - - $scope.removeSpeechBubble = function () { - - - //clear speech bubbles - var speechBubbles = $("div[id*='speechBubble']"); - if (speechBubbles != null || speechBubbles != undefined && speechBubbles.length > 0) { - for (var j = 0; j < speechBubbles.length; j++) { - - speechBubbles[j].parentNode.removeChild(speechBubbles[j]); - } - } - var speechBubbleLines = $("div[id*='speechBubbleLine']"); - if (speechBubbleLines != null || speechBubbleLines != undefined && speechBubbleLines.length > 0) { - for (var j = 0; j < speechBubbleLines.length; j++) { - - speechBubbleLines[j].parentNode.removeChild(speechBubbleLines[j]); - } - } - - var speechBubbleDraggedLines = $("div[id*='speechBubbleDraggedLine']"); - if (speechBubbleDraggedLines != null || speechBubbleDraggedLines != undefined && speechBubbleDraggedLines.length > 0) { - for (var j = 0; j < speechBubbleDraggedLines.length; j++) { - - speechBubbleDraggedLines[j].parentNode.removeChild(speechBubbleDraggedLines[j]); - } - } - }; - - $scope.showSpeechBubble = function () { - - - //clear speech bubbles - var speechBubbles = $("div[id*='speechBubble']"); - if (speechBubbles != null || speechBubbles != undefined && speechBubbles.length > 0) { - for (var j = 0; j < speechBubbles.length; j++) { - - document.getElementById(speechBubbles[j].id).style.visibility = 'visible'; - } - } - var speechBubbleLines = $("div[id*='speechBubbleLine']"); - if (speechBubbleLines != null || speechBubbleLines != undefined && speechBubbleLines.length > 0) { - for (var j = 0; j < speechBubbleLines.length; j++) { - - document.getElementById(speechBubbleLines[j].id).style.visibility = 'visible'; - } - } - - var speechBubbleDraggedLines = $("div[id*='speechBubbleDraggedLine']"); - if (speechBubbleDraggedLines != null || speechBubbleDraggedLines != undefined && speechBubbleDraggedLines.length > 0) { - for (var j = 0; j < speechBubbleDraggedLines.length; j++) { - - document.getElementById(speechBubbleDraggedLines[j].id).style.visibility = 'visible'; - } - } - }; - - $scope.hideSpeechBubble = function () { - - - //clear speech bubbles - var speechBubbles = $("div[id*='speechBubble']"); - if (speechBubbles != null || speechBubbles != undefined && speechBubbles.length > 0) { - for (var j = 0; j < speechBubbles.length; j++) { - - document.getElementById(speechBubbles[j].id).style.visibility = 'hidden'; - } - } - var speechBubbleLines = $("div[id*='speechBubbleLine']"); - if (speechBubbleLines != null || speechBubbleLines != undefined && speechBubbleLines.length > 0) { - for (var j = 0; j < speechBubbleLines.length; j++) { - - document.getElementById(speechBubbleLines[j].id).style.visibility = 'hidden'; - } - } - - var speechBubbleDraggedLines = $("div[id*='speechBubbleDraggedLine']"); - if (speechBubbleDraggedLines != null || speechBubbleDraggedLines != undefined && speechBubbleDraggedLines.length > 0) { - for (var j = 0; j < speechBubbleDraggedLines.length; j++) { - - document.getElementById(speechBubbleDraggedLines[j].id).style.visibility = 'hidden'; - } - } - }; - - - $scope.createSpeechBubble = function (x, y, PinId, isCtrlPressed, isPinClicked, isSameTermWithMultiPin) { - - $scope.longestAnnotation = $scope.MultiLanguageAnnationArray.reduce(function (firstAnnotation, seconAnnotation) { return firstAnnotation.length > seconAnnotation.length ? firstAnnotation : seconAnnotation; }); - - $scope.createSpeechBubbleBasedOnAnnotationLength(x, y, PinId); - - $('#speechBubble').draggable( - { - drag: function (evt) { - $("#dot").css("visibility", "hidden"); - var verticalScrollPosition = canvasDiv.scrollTop; - var horizontlScrollPosition = canvasDiv.scrollLeft; - $scope.angle(x * $scope.sliderPercentValue, y * $scope.sliderPercentValue, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top, true); - }, - }); - - } - $scope.sliderVal = 100; - $scope.createSpeechBubbleBasedOnAnnotationLength = function (x, y, PinId) { - - x = x * $scope.sliderPercentValue; - y = y * $scope.sliderPercentValue; - - var speechBubbleHTML = '' - + '
' - + '' - + '
' - - + ''; - - //Issue #7286 :Undefined annotation should not appear - for (var i = 0; i <= $scope.MultiLanguageAnnationArray.length - 1; i++) { - var MultipleLanguage = $scope.MultiLanguageAnnationArray[i]; - } - - if (MultipleLanguage == undefined) { - console.log("No text is found"); - } else { - $('#canvasDiv').append(speechBubbleHTML); - - if ($scope.MultiLanguageAnnationArray.length > 0) { - for (var i = 0; i <= $scope.MultiLanguageAnnationArray.length - 1; i++) { - var MultipleLanguage = $scope.MultiLanguageAnnationArray[i]; - $rootScope.clickedPinAnnotation = $scope.MultiLanguageAnnationArray[0]; - $("#speechBubble" + PinId).append("

" + MultipleLanguage + "

"); - } - } - else { - console.log('MultiLanguageAnnationArray.length is :' + $scope.MultiLanguageAnnationArray.length) - } - - - - - - if ($scope.longestAnnotation != null || $scope.longestAnnotation != undefined) { - if ($scope.longestAnnotation.length <= 10) { - - - $("#speechBubble").css("width", "100px"); - - } - - else if ($scope.longestAnnotation.length > 10 && $scope.longestAnnotation.length <= 17) { - - - - $("#speechBubble").css("width", "140px"); - - } - else if ($scope.longestAnnotation.length > 17 && $scope.longestAnnotation.length <= 26) { - - - $("#speechBubble").css("width", "195px"); - - } - else if ($scope.longestAnnotation.length > 26 && $scope.longestAnnotation.length <= 34) { - - $("#speechBubble").css("width", "248px"); - - } - else if ($scope.longestAnnotation.length > 34 && $scope.longestAnnotation.length <= 44) { - - - $("#speechBubble").css("width", "300px"); - } - - else if ($scope.longestAnnotation.length > 44 && $scope.longestAnnotation.length <= 54) { - - $("#speechBubble").css("width", "370px"); - } - - else if ($scope.longestAnnotation.length > 54 && $scope.longestAnnotation.length <= 69) { - $("#speechBubble").css("width", "450px"); - } - else if ($scope.longestAnnotation.length > 69 && $scope.longestAnnotation.length <= 75) { - $("#speechBubble").css("width", "510px"); - } - else { - $("#speechBubble").css("width", ($scope.longestAnnotation.length) + "%"); - } - } - } - var speechBubbleDims = []; - - $rootScope.speechBubbleDimaensions.push({ "currentX": x, "currentY": y, "id": PinId }); - speechBubbleDims.push({ currentX: x, currentY: y }); - document.getElementById('speechBubbleLine' + PinId + '').style.display = 'block'; - document.getElementById('speechBubbleLine' + PinId + '').style.left = ((speechBubbleDims[0].currentX - 12)) + 'px'; - if ($scope.sliderVal == 25) { - document.getElementById('speechBubbleLine' + PinId + '').style.top = ((speechBubbleDims[0].currentY + 5)) + 'px'; - } - else { - document.getElementById('speechBubbleLine' + PinId + '').style.top = ((speechBubbleDims[0].currentY)) + 'px'; - } - document.getElementById('speechBubble' + PinId + '').style.display = 'block'; - document.getElementById('speechBubble' + PinId + '').style.left = (speechBubbleDims[0].currentX - 4) + 'px'; - document.getElementById('speechBubble' + PinId + '').style.top = (speechBubbleDims[0].currentY) + 'px'; - $('.common-drag').draggable( - { - - drag: function (evt) { - - var verticalScrollPosition = document.getElementById('canvasDiv').scrollTop; - var horizontlScrollPosition = document.getElementById('canvasDiv').scrollLeft; - var clickedSpeechBubbleId = $(this).attr("id"); - - var clickedPinId = clickedSpeechBubbleId.substring(12, clickedSpeechBubbleId.length); - - $("#speechBubbleLine" + clickedPinId).css("visibility", "hidden"); - $("#speechBubbleLine" + clickedPinId).css("display", "none"); - - for (var i = 0; i <= $rootScope.speechBubbleDimaensions.length - 1; i++) { - if ($rootScope.speechBubbleDimaensions[i].id == clickedPinId) { - $scope.angle(clickedPinId, $rootScope.speechBubbleDimaensions[i].currentX, $rootScope.speechBubbleDimaensions[i].currentY, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top, true); - } - } - - }, - }); - $('.crossDiv_temp').on('click', function (evt) { - - var imgId = $(this).attr("id"); - var pinId = imgId.substring(8, imgId.length); - $('#speechBubble' + pinId).remove(); - $("#speechBubbleDraggedLine" + pinId).remove(); - $("#speechBubbleLine" + pinId).remove(); - - //make all pin heads grey - var pinHeadName = 'PinArc_' + pinId; - var radial = $('#aaDetailViewCanvas').createGradient({ - x1: 50, y1: 50, - x2: 50, y2: 50, - r1: 10, r2: 30, - c1: 'rgba(100, 50, 0,0)', - c2: 'rgb(216, 216, 216)' - }); - - - $('#aaDetailViewCanvas').setLayer(pinHeadName, { - fillStyle: radial, - }).drawLayers(); - }); - - //make the head green - var radialAfterClick = $('#aaDetailViewCanvas').createGradient({ - x1: 50, y1: 50, - x2: 50, y2: 50, - r1: 10, r2: 30, - c1: 'rgba(100, 50, 0,0)', - c2: 'rgb(126, 187, 83)' - }); - var pinHeadName = 'PinArc_' + PinId; - var pin = $('#aaDetailViewCanvas').getLayer(pinHeadName); - // pin.fillStyle = radialAfterClick; - - $('#aaDetailViewCanvas').setLayer(pinHeadName, { - fillStyle: radialAfterClick, - }).drawLayers(); - } - - - $scope.angle = function (id, cx, cy, ex, ey, BoolValues) { - - var dy = ey - cy; - var dx = ex - cx; - var theta = 0; - if (dx < 0) { - theta = Math.atan(dy / dx) * (180 / Math.PI); - theta = theta + 180; - - } - else if (dy < 0) { - theta = Math.atan(dy / dx) * (180 / Math.PI); - theta = theta + 360; - - } - else { - theta = Math.atan(dy / dx) * (180 / Math.PI); - } - - var d = Math.sqrt((cx - ex) * (cx - ex) + (cy - ey) * (cy - ey)); - var e = cy; - var f = cx; - - if (BoolValues == true) { - if ($scope.sliderVal == 40) { - $("#speechBubbleDraggedLine" + id).css({ 'display': 'block', 'width': d + 'px', 'top': (e - 5) + 'px', 'left': (f - 5) + 'px', 'transform': 'rotate(' + theta + 'deg)', '-moz-transform': 'rotate(' + theta + 'deg)', '-webkit-transform': 'rotate(' + theta + 'deg)', 'transform-origin': '0% 0%' }); - } - else if ($scope.sliderVal == 25) { - $("#speechBubbleDraggedLine" + id).css({ 'display': 'block', 'width': d + 'px', 'top': (e - 2) + 'px', 'left': (f - 2) + 'px', 'transform': 'rotate(' + theta + 'deg)', '-moz-transform': 'rotate(' + theta + 'deg)', '-webkit-transform': 'rotate(' + theta + 'deg)', 'transform-origin': '0% 0%' }); - } - else { - $("#speechBubbleDraggedLine" + id).css({ 'display': 'block', 'width': d + 'px', 'top': (e - 10) + 'px', 'left': (f - 5) + 'px', 'transform': 'rotate(' + theta + 'deg)', '-moz-transform': 'rotate(' + theta + 'deg)', '-webkit-transform': 'rotate(' + theta + 'deg)', 'transform-origin': '0% 0%' }); - } - - } - else { - $("#bord_annotation").css({ 'display': 'block', 'width': d + 'px', 'top': e + 'px', 'left': f + 'px', 'transform': 'rotate(' + theta + 'deg)', '-moz-transform': 'rotate(' + theta + 'deg)', '-webkit-transform': 'rotate(' + theta + 'deg)', 'transform-origin': '0% 0%' }); - } - - - - } - - - $scope.drawStaticPinsOnImage = function (canvasId, PinId, offsetX1, offsetY1, x, y) { - $scope.clickedPins = []; - // if ($scope.isSliderChange == true) { - console.log('isSliderrChange') - var radial = $('#' + canvasId).createGradient({ - x1: 50, y1: 50, - x2: 50, y2: 50, - r1: 10, r2: 30, - c1: 'rgba(100, 50, 0,0)', - c2: 'rgb(216, 216, 216)' - }); - $('#' + canvasId).drawLine({ - layer: true, - name: "Pin_" + PinId, - groups: ["Pin_" + PinId], - strokeStyle: '#565656', - strokeWidth: 2, - visible: true, - x1: offsetX1 * $scope.sliderPercentValue, y1: offsetY1 * $scope.sliderPercentValue, - x2: x * $scope.sliderPercentValue, y2: y * $scope.sliderPercentValue, - - - }).drawArc({ - name: "PinArc_" + PinId, - layer: true, - groups: ["Pin_" + PinId], - strokeStyle: 'grey', - strokeWidth: 2, - visible: true, - fillStyle: radial, - x: x * $scope.sliderPercentValue, y: y * $scope.sliderPercentValue, - radius: 5 * $scope.sliderPercentValue, - - click: function (clickedPin) { - if (clickedPin.event.ctrlKey == false) { - $scope.clickedPins = []; - } - var pinID = (clickedPin.name).substring(7, (clickedPin.name).length); - var pinData = new jinqJs() - .from($scope.aaPinData) - .where("_PinId == " + pinID) - .select(); - - - var pinTermNumber = pinData[0]._TermId; - - var pinWithSameTerm = new jinqJs() - - .from($scope.aaPinData) - .where("_TermId == " + pinTermNumber) - .select(); - - - if (pinWithSameTerm != undefined && pinWithSameTerm != null && pinWithSameTerm.length > 0) { - - for (var i = 0; i < pinWithSameTerm.length; i++) { - - $scope.clickedPins.push({ 'id': pinWithSameTerm[i]._PinId }) - } - - } - $scope.isSelectedPinBtnClickedAftrSliderCange = false; - var selectedPinData = new jinqJs() - .from($scope.aaPinData) - .where("_PinId == " + pinID) - .select(); - if (clickedPin.event.ctrlKey == true) { - - $scope.activePinArray.push(clickedPin.name); - var radialAfterClick = $('#aaDetailViewCanvas').createGradient({ - x1: 50, y1: 50, - x2: 50, y2: 50, - r1: 10, r2: 30, - c1: 'rgba(100, 50, 0,0)', - c2: 'rgb(126, 187, 83)' - }); - clickedPin.fillStyle = radialAfterClick; - $scope.showAnnotation(selectedPinData, true, true, false); - } - else { - $scope.activePinArray = []; - $scope.activePinArray.push(clickedPin.name); - var radial = $('#aaDetailViewCanvas').createGradient({ - x1: 50, y1: 50, - x2: 50, y2: 50, - r1: 10, r2: 30, - c1: 'rgba(100, 50, 0,0)', - c2: 'rgb(216, 216, 216)' - }); - - - $('#aaDetailViewCanvas').setLayers({ - fillStyle: radial, - }).drawLayers(); - - //change the head color to green - var radialAfterClick = $('#aaDetailViewCanvas').createGradient({ - x1: 50, y1: 50, - x2: 50, y2: 50, - r1: 10, r2: 30, - c1: 'rgba(100, 50, 0,0)', - c2: 'rgb(126, 187, 83)' - }); - - clickedPin.fillStyle = radialAfterClick; - $scope.showAnnotation(selectedPinData, false, true, false); - - } - - } - - }).drawLayers(); - } - - - $scope.getMousePos = function (evt) { - - return { - x: Math.round(evt.pageX - $('#canvasDiv').offset().left), - y: Math.round(evt.pageY - $('#canvasDiv').offset().top) - } - } - - $scope.removePin = function (canvasId, pinId) { - - var pinName = 'Pin_' + pinId; - var pinArcName = 'PinArc_' + pinId; - $('#' + canvasId).removeLayer(pinName).drawLayers(); - $('#' + canvasId).removeLayer(pinArcName).drawLayers(); - - $scope.removeSpeechBubble(); - - //$rootScope.isSliderChanged = true; - //$('#aaDetailViewCanvas').removeLayers(); - } - - $rootScope.$on('annotationToolEvent', function (event, data) { - $('#editstylebackgroundcolor .minicolors >.minicolors-swatch > .minicolors-swatch-color').css("background-color", "rgb(255,255,255)") - $('#editstylebackgroundcolor .minicolors >.minicolors-panel > .minicolors-grid >.minicolors-picker').css({ "top": "145px", "left": "4px" }); - $('#outlineColor .minicolors >.minicolors-swatch > .minicolors-swatch-color').css("background-color", "rgb(0,0,0)") - $('#outlineColor .minicolors >.minicolors-panel > .minicolors-grid >.minicolors-picker').css({ "top": "145px", "left": "4px" }); - - $("#canvas").css("display", "block"); - $("#canvasPaint").css("display", "block"); - $rootScope.onDrawingCanvasClick(); - $rootScope.FreeStylePaint(); - }); - - $rootScope.loadSearchData = function () { - - //$("#termList").find("option").css({ "background-color": "#ffffff", "color": "#000000" }); - var imageId = $rootScope.imageId; - var promise = ModuleService.getTermTextDataForAAImage(imageId) - .then( - function (response) { - - $scope.AAPinTermData = response.data.PinTermData.TermData; - - $rootScope.isLoading = false; - $('#setting-spinner').css('visibility', 'hidden'); - - $scope.pinTermData = []; - var primaryLexicon = $rootScope.lexiconLanguageArray[0].id; - $scope.matchedLanguageTermData = new jinqJs() - .from($scope.AAPinTermData) - .where('_LanguageId == ' + primaryLexicon) - .select(); - var sortedTermTextArray = []; - for (var i = 0; i < $scope.matchedLanguageTermData.length; i++) { - sortedTermTextArray.push($scope.matchedLanguageTermData[i]._TermText); - sortedTermTextArray.sort(); - } - - for (var i = 0; i <= sortedTermTextArray.length - 1; i++) { - for (var j = 0; j <= $scope.matchedLanguageTermData.length - 1; j++) { - if ($scope.matchedLanguageTermData[j]._TermText == sortedTermTextArray[i]) { - $scope.pinTermData.push({ "LanguageId": $scope.matchedLanguageTermData[j]._LanguageId, "TermNumber": $scope.matchedLanguageTermData[j]._TermNumber, "TermTxt": $scope.matchedLanguageTermData[j]._TermText }); - break; - } - } - } - - - $scope.$watch('$scope.pinTermData', function (newValue, oldValue, scope) { - - if (($('#termlistfilter').html() != "")) - - $('#termlistfilter').empty(); - if ($scope.pinTermData.length > 0) { - $timeout(function () { - console.log('pinTermData= ' + $scope.pinTermData.length); - $('#termList').empty(); - $('#termlistfilter').empty(); - for (var j = 0; j < $scope.pinTermData.length; j++) { - var $el = $('
  • ' + $scope.pinTermData[j].TermTxt + '
    • ').appendTo('#termlistfilter') - //var $el = $('
  • ' + $scope.pinTermData[j].TermTxt + '
    • ').appendTo('#termlistfilter') - $compile($el)($scope); - var $selectedOptions = $('').appendTo("#termList") - - $compile($selectedOptions)($scope); - - $("#AABodySystems").empty(); - $("#bodySystems").css("display", "none"); - $("#AABodySystems").css("display", "block"); - $("#bodySystemList li a").each(function (key, value) { - var $systemOptions = $('').appendTo("#AABodySystems") - $compile($systemOptions)($scope); - }); - } - }, 500); - } - }) - }, - function (error) { - // handle errors here - console.log(' error: ' + error.statusText); - } - ) - } - - - - - $scope.$on('listManagerEvent', function (event, data) { - - $("#viewName").empty(); - - var currentView = $rootScope.getLocalStorageValue("currentViewTitle"); - var viewNmeHtml = '' - $('#viewName').append(viewNmeHtml); - //$("#viewName").append(""); - $rootScope.isLoading = false; - $('#spinner').css('visibility', 'hidden'); - - if ($rootScope.bodySystemSeletedId == null) { - - $rootScope.loadSearchData(); - } - else { - - $rootScope.refreshTermListOnAASystemSelection($rootScope.bodySystemSeletedId); - } - $timeout(function () { - $("#totalTerms").empty(); - $("#totalTerms").html("" + $("#termList option").length + " Structures"); - }, 1000); - }); - - - - $rootScope.refreshTermListOnAASystemSelection = function (bodySystemId) { - $rootScope.bodySystemSeletedId = bodySystemId; - $('#termList').empty(); - var bodySystemName = $("#AABodySystems #" + bodySystemId).val(); - if (bodySystemName == "All") { - for (var j = 0; j <= $scope.pinTermData.length - 1; j++) { - var $selectedOptions = $('').appendTo("#termList") - - $compile($selectedOptions)($scope); - } - $("#totalTerms").empty(); - $("#totalTerms").html("" + $("#termList option").length + " Structures"); - } - else { - var imageId = $rootScope.imageId; - $scope.pinDataUrl = "aa_dat_pinterm_" + imageId; - $rootScope.bodySystemTermArray = []; - $rootScope.sortedListArray = []; - $rootScope.duplicateListArray = []; - $.ajax({ - url: '~/../content/data/json/aa/aa_pinterm/' + $scope.pinDataUrl + '.json', - type: 'GET', - dataType: "json", - async: false, - success: function (result) { - $(result.PinTermData.TermData).each(function (key, value) { - $rootScope.bodySystemTermArray.push({ "termNumbr": result.PinTermData.TermData[key]._TermNumber, "text": result.PinTermData.TermData[key]._TermText, "language": result.PinTermData.TermData[key]._LanguageId }); - }); - for (var i = 0; i <= $scope.aaPinData.length - 1; i++) { - if ($scope.aaPinData[i]._BodySystemName.toLowerCase() == bodySystemName.toLowerCase()) { - for (var j = 0 ; j <= $rootScope.bodySystemTermArray.length - 1; j++) { - if ($scope.aaPinData[i]._TermId == $rootScope.bodySystemTermArray[j].termNumbr) { - if ($rootScope.bodySystemTermArray[j].language == $rootScope.lexiconLanguageArray[0].id) { - console.log($rootScope.bodySystemTermArray[j].text); - $rootScope.duplicateListArray.push({ "title": $rootScope.bodySystemTermArray[j].text, "id": $rootScope.bodySystemTermArray[j].termNumbr }); - } - } - } - } - } - var temp = []; - for (var i = 0; i <= $rootScope.duplicateListArray.length - 1; i++) { - var termID = $rootScope.duplicateListArray[i].id; - if ($.inArray(termID, temp) == -1) { - temp.push(termID); - $rootScope.sortedListArray.push({ "title": $rootScope.duplicateListArray[i].title, "id": termID }); - } - } - - for (var i = 0; i <= $rootScope.sortedListArray.length - 1; i++) { - - for (j = i + 1; j <= $rootScope.sortedListArray.length - 1; j++) { - - if ($rootScope.sortedListArray[i].title.substr(0, 1) > $rootScope.sortedListArray[j].title.substr(0, 1)) { - - var termText = $rootScope.sortedListArray[i].title; - var termNumbr = $rootScope.sortedListArray[i].termNumbr; - var termLanguage = $rootScope.sortedListArray[i].language; - - $rootScope.sortedListArray[i].title = $rootScope.sortedListArray[j].title; - $rootScope.sortedListArray[i].termNumbr = $rootScope.sortedListArray[j].termNumbr; - $rootScope.sortedListArray[i].language = $rootScope.sortedListArray[j].language; - - $rootScope.sortedListArray[j].title = termText; - $rootScope.sortedListArray[j].termNumbr = termNumbr; - $rootScope.sortedListArray[j].language = termLanguage; - } - } - } - - for (var j = 0; j <= $rootScope.sortedListArray.length - 1; j++) { - var $selectedOptions = $('').appendTo("#termList") - $compile($selectedOptions)($scope); - } - } - }); - $("#totalTerms").empty(); - $("#totalTerms").html("" + $("#termList option").length + " Structures"); - } - } - $scope.GetAnnotationBasedOnActualTermNo = function (actualTermNo) { - - - var languageArray = $rootScope.lexiconLanguageArray; - - if ($scope.AAPinTermData != null || $scope.AAPinTermData != undefined) { - - $scope.matchedTermNoData = new jinqJs() - .from($scope.AAPinTermData) - .where('_TermNumber == ' + actualTermNo) - .select(); - - if ($scope.matchedTermNoData != null || $scope.matchedTermNoData != undefined) { - - for (var j = 0; j <= languageArray.length - 1; j++) { - - $scope.matchedLanguageTermNoData = new jinqJs() - .from($scope.matchedTermNoData) - .where('_LanguageId == ' + languageArray[j].id) - .select(); - var termText = $scope.matchedLanguageTermNoData[0]._TermText; - $scope.MultiLanguageAnnationArray.push(termText); - }; - } - } - } - - $rootScope.hidePins = function () { - $("#dropdownMenu221").addClass("aaSystemDisable"); - $rootScope.isLoading = true; - $('#spinner').css('visibility', 'visible'); - $scope.hideSpeechBubble(); - - $scope.isHidePinBtnClicked = true; - angular.forEach($scope.aaPinData, function (aaPinDataValue, aaPinDataKey) { - - var pinName = 'Pin_' + aaPinDataValue._PinId; - var pinArcName = 'PinArc_' + aaPinDataValue._PinId; - - $('#aaDetailViewCanvas').setLayer(pinName, { - visible: false // set to true instead to show the layer again - }).drawLayers(); - - $('#aaDetailViewCanvas').setLayer(pinArcName, { - visible: false // set to true instead to show the layer again - }).drawLayers(); - }) - - $rootScope.isLoading = false; - $('#spinner').css('visibility', 'hidden'); - $(".tooltip-custom").removeClass("btn-primary"); - $(".tooltip-custom").addClass("btn-black"); - $("#hidePinBtn").addClass("btn-primary"); - $("#hidePinBtn").removeClass("btn-black"); - } - - $scope.showAllPinsAfterHide = function (event) { - if ($("#dropdownMenu221").hasClass("aaSystemDisable")) { - $("#dropdownMenu221").removeClass("aaSystemDisable"); - } - $rootScope.isLoading = true; - $('#spinner').css('visibility', 'visible'); - $scope.isHidePinBtnClicked = false; - $rootScope.isshowAllPinsBtnAfterHideClicked = true; - if ($scope.selectedSystemName != null && $scope.selectedSystemName != undefined) { - - $scope.showSystemPins($scope.selectedSystemPinData, false); - - } else { - - $scope.showSystemPins($scope.aaPinData, false); - } - $scope.showSpeechBubble(); - $(".tooltip-custom").removeClass("btn-primary"); - $(".tooltip-custom").addClass("btn-black"); - $("#allPinBtn").addClass("btn-primary"); - $("#allPinBtn").removeClass("btn-black"); - if ($scope.isSliderChange == true) { - $scope.isSliderChange = false; - $scope.showAllPins(); - - } - }; - - - $scope.showSelectedPins = function () { - $("#dropdownMenu221").addClass("aaSystemDisable"); - $rootScope.isLoading = true; - $('#spinner').css('visibility', 'visible'); - - $scope.isHidePinBtnClicked = false; - - if ($scope.selectedSystemName != null && $scope.selectedSystemName != undefined) { - - $scope.showSystemPins($scope.selectedSystemPinData, true); - - } - else { - $scope.showSystemPins($scope.aaPinData, true); - - } - $scope.showSpeechBubble(); - $(".tooltip-custom").removeClass("btn-primary"); - $(".tooltip-custom").addClass("btn-black"); - $("#selectedPin").addClass("btn-primary"); - $("#selectedPin").removeClass("btn-black"); - - if ($scope.isSelectedPinBtnClickedAftrSliderCange == true) { - - for (var i = 0; i <= $scope.activePinArray.length - 1; i++) { - var pinName = $scope.activePinArray[i].split("_"); - var activePinName = 'Pin_' + pinName[1]; - var pinArcName = 'PinArc_' + pinName[1]; - $('#aaDetailViewCanvas').setLayer(activePinName, { - visible: true // set to true instead to show the layer again - }).drawLayers(); - $('#aaDetailViewCanvas').setLayer(pinArcName, { - visible: true // set to true instead to show the layer again - }).drawLayers(); - } - - } - - }; - - - $scope.showSystemPins = function (seletedSystemPinData, isShowSelectedPins) { - - if (isShowSelectedPins) { - - angular.forEach($scope.clickedPins, function (value, key) { - - seletedSystemPinData = new jinqJs() - .from(seletedSystemPinData) - .where('_PinId != ' + value.id) - .select(); - }) - angular.forEach($scope.clickedPins, function (value1, key1) { - - // if (aaPinDataValue._PinId != value.id) { - var pinName = 'Pin_' + value1.id; - var pinArcName = 'PinArc_' + value1.id; - - $('#aaDetailViewCanvas').setLayer(pinName, { - visible: true // set to true instead to show the layer again - }).drawLayers(); - - $('#aaDetailViewCanvas').setLayer(pinArcName, { - visible: true // set to true instead to show the layer again - }).drawLayers(); - // } - }) - - angular.forEach(seletedSystemPinData, function (aaPinDataValue, aaPinDataKey) { - - var pinName = 'Pin_' + aaPinDataValue._PinId; - var pinArcName = 'PinArc_' + aaPinDataValue._PinId; - - $('#aaDetailViewCanvas').setLayer(pinName, { - visible: false // set to true instead to show the layer again - }).drawLayers(); - - $('#aaDetailViewCanvas').setLayer(pinArcName, { - visible: false // set to true instead to show the layer again - }).drawLayers(); - }) - - } - - else { - angular.forEach(seletedSystemPinData, function (aaPinDataValue, aaPinDataKey) { - - var pinName = 'Pin_' + aaPinDataValue._PinId; - var pinArcName = 'PinArc_' + aaPinDataValue._PinId; - - $('#aaDetailViewCanvas').setLayer(pinName, { - visible: true // set to true instead to show the layer again - }).drawLayers(); - - $('#aaDetailViewCanvas').setLayer(pinArcName, { - visible: true // set to true instead to show the layer again - }).drawLayers(); - }) - } - - $rootScope.isLoading = false; - $('#spinner').css('visibility', 'hidden'); - - - } - $rootScope.isshowAllPinsBtnAfterHideClicked = true; - $scope.showItemsForSearch = function () { - if($rootScope.isshowAllPinsBtnAfterHideClicked == true){ - console.log('showItemsForSearch is called'); - //this check is for log only because we are writing length so need to check if its not null or undefined - - - $timeout(function () { - if (($scope.AAPinTermData != null || $scope.AAPinTermData != undefined) && ($scope.AAPinTermData.length > 0)) { - - $scope.IsSearchVisible = true; - document.getElementById("termlistfilter").style.display = "block"; - } - else { - $rootScope.loadSearchData(); - if ($scope.AAPinTermData.length > 0) { - $scope.showItemsForSearch(); - } - } - - if ($rootScope.isSearchInputClicked == true) { - $rootScope.isSearchInputClicked = false; - $rootScope.searchListArray = []; - $("#backdrop > #searchListDivAA > #termlistfilter > li").each(function (key, value) { - $rootScope.searchListArray.push({ "name": $(this).find("a").html(), "id": $(this).find("a").attr("id") }); - }); - - } - - }, 500); - } - } - - - $scope.HideSearchList = function () { - - $timeout(function () { - - $("#termlistfilter").css("display", "none"); - - - }, 1000); - - } - - $scope.highlightPinBasedOnSerachItem = function (id) { - $scope.searchItemId = id; - $scope.searchItemText = $("#" + id).text(); - $rootScope.searchSelectedText = $("#" + id).text(); - $('#termList option[selected="selected"]').prop("selected", false); - $('#termList option[value="' + $rootScope.searchSelectedText + '"]').prop("selected", true); - $("#termList").find("option").css({ "background-color": "#ffffff", "color": "#000000" }); - $('#termList option[value="' + $rootScope.searchSelectedText + '"]').css({ "background-color": "#3399FF", "color": "#ffffff" }); - - $("#termlistfilter li a").css({ "background-color": "#ffffff", "color": "#000000" }); - $("#termlistfilter li #" + $scope.searchItemId).css({ "background-color": "#3399FF", "color": "#ffffff" }); - $scope.searchFilter = $("#" + id).text(); - //selectedTermName.placeholder = $("#" + id).text(); - selectedTermName.value = $("#" + id).text(); - selectedTermName.placeholder = "search... "; - - //get data from pindata for this trem - - var pinDataForTerm = new jinqJs() - .from($scope.aaPinData) - .where("_TermId == " + $scope.searchItemId) - .select(); - - $scope.showAnnotation(pinDataForTerm, false, false, true); - // maintaing scroll position on selection of options in list manager. - var annotationTopPos = $(".common-drag").css("top").split("p"); - $("#canvasDiv").scrollTop(annotationTopPos[0]); - - $scope.IsSearchVisible = false; - } - - $rootScope.isShowHideButtonClicked = true; - $scope.ShowHideAnnotation = function () { - if ($rootScope.isShowHideButtonClicked == true) { - $rootScope.annotationArray = []; - $("#canvasDiv").find(".common-drag").each(function () { - var speechBubbleID = $(this).attr("id"); - var sppechBubbleId = $(this).attr("id").substring(12); - var b = $("#speechBubbleDraggedLine" + sppechBubbleId).css("display"); - var speechBubbleLineDispProp = $("#speechBubbleLine" + sppechBubbleId).css("display"); - var speechBubbleLineID = "speechBubbleLine" + sppechBubbleId; - var speechBubbleDraggedLineID = "speechBubbleDraggedLine" + sppechBubbleId; - $("#comment-box").addClass("btn-primary"); - $("#comment-box").removeClass("btn-black"); - - if (speechBubbleLineDispProp == "block") { - $rootScope.annotationArray.push({ "speechBuubleId": speechBubbleID, "speechBubbleLineId": speechBubbleLineID }); - } - else { - $rootScope.annotationArray.push({ "speechBuubleId": speechBubbleID, "speechBubbleLineId": speechBubbleDraggedLineID }); - } - }); - $rootScope.isShowHideButtonClicked = false; - for (var i = 0; i <= $rootScope.annotationArray.length - 1; i++) { - $("#" + $rootScope.annotationArray[i].speechBuubleId).css("display", "none"); - $("#" + $rootScope.annotationArray[i].speechBubbleLineId).css("display", "none"); - } - } - else { - $rootScope.isShowHideButtonClicked = true; - for (var i = 0; i <= $rootScope.annotationArray.length - 1; i++) { - $("#" + $rootScope.annotationArray[i].speechBuubleId).css("display", "block"); - $("#" + $rootScope.annotationArray[i].speechBubbleLineId).css("display", "block"); - } - - $("#comment-box").removeClass("btn-primary"); - $("#comment-box").addClass("btn-black"); - - } - } - $scope.activePinOnLayerChange = function () { - for (var i = 0; i <= $scope.activePinArray.length - 1; i++) { - var radialAfterClick = $('#aaDetailViewCanvas').createGradient({ - x1: 50, y1: 50, - x2: 50, y2: 50, - r1: 10, r2: 30, - c1: 'rgba(100, 50, 0,0)', - c2: 'rgb(126, 187, 83)' - }); - var clickedPin = $scope.activePinArray[i]; - $('#aaDetailViewCanvas').setLayer(clickedPin, { - fillStyle: radialAfterClick - }).drawLayers(); - - } - } - - $scope.activePinOnSliderChange = function () { - if ($scope.activePinArray.length == 1) { - for (var i = 0; i <= $scope.allPinDataArray.length - 1; i++) { - var activeArc = $scope.activePinArray[0].split("_"); - if ($scope.allPinDataArray[i] == activeArc[1]) { - var pinName = 'Pin_' + $scope.allPinDataArray[i]; - var pinArcName = 'PinArc_' + $scope.allPinDataArray[i]; - $('#aaDetailViewCanvas').setLayer(pinName, { - visible: true // set to true instead to show the layer again - }).drawLayers(); - $('#aaDetailViewCanvas').setLayer(pinArcName, { - visible: true // set to true instead to show the layer again - }).drawLayers(); - } - else { - var pinName = 'Pin_' + $scope.allPinDataArray[i]; - var pinArcName = 'PinArc_' + $scope.allPinDataArray[i]; - $('#aaDetailViewCanvas').setLayer(pinName, { - visible: false // set to true instead to show the layer again - }).drawLayers(); - $('#aaDetailViewCanvas').setLayer(pinArcName, { - visible: false // set to true instead to show the layer again - }).drawLayers(); - } - } - } - else { - var seletedSystemPinData; - angular.forEach($scope.activePinArray, function (value, key) { - var pinID = value.split("_"); - seletedSystemPinData = new jinqJs() - .from($scope.allPinDataArray) - .where('_PinId != ' + pinID[1]) - .select(); - }) - - angular.forEach(seletedSystemPinData, function (aaPinDataValue, aaPinDataKey) { - - var pinName = 'Pin_' + aaPinDataValue; - var pinArcName = 'PinArc_' + aaPinDataValue; - - $('#aaDetailViewCanvas').setLayer(pinName, { - visible: false // set to true instead to show the layer again - }).drawLayers(); - - $('#aaDetailViewCanvas').setLayer(pinArcName, { - visible: false // set to true instead to show the layer again - }).drawLayers(); - - }) - for (var i = 0; i <= $scope.activePinArray.length - 1; i++) { - var pinName = $scope.activePinArray[i].split("_"); - var activePinName = 'Pin_' + pinName[1]; - var pinArcName = 'PinArc_' + pinName[1]; - $('#aaDetailViewCanvas').setLayer(activePinName, { - visible: true // set to true instead to show the layer again - }).drawLayers(); - $('#aaDetailViewCanvas').setLayer(pinArcName, { - visible: true // set to true instead to show the layer again - }).drawLayers(); - } - } - } - $(document).ready(function () { - var $ua = navigator.userAgent; - if (($ua.match(/(iPod|iPhone|iPad|android)/i))) { - - var jspanelContainerWidth = $(".jsPanel-content").css("width"); - $(".jsPanel-content").css({ "width": "100%", "min-width": jspanelContainerWidth }); - $("#ImagePanel").css("width", "100%"); - - //hide pin button clicked - $("#hidePinBtn").removeAttr("onclick"); - $("#hidePinBtn").on("touchstart", function () { - var rootScope = angular.element(document.getElementById("aaDetailPageDiv")).scope(); - rootScope.$apply(function () { - rootScope.hidePins(event); - }); - }); - //selected pin button clicked - $("#selectedPin").removeAttr("onclick"); - $("#selectedPin").on("touchstart", function () { - console.log('showSelectedPins is called') - var scope = angular.element(document.getElementById("aaDetailPageDiv")).scope(); - scope.$apply(function () { - scope.showSelectedPins(event); - }); - }); - //all pin button clicked - $("#allPinBtn").removeAttr("onclick"); - $("#allPinBtn").on("touchstart", function () { - var scope = angular.element(document.getElementById("aaDetailPageDiv")).scope(); - scope.$apply(function () { - scope.showAllPinsAfterHide(event); - }); - }); - //comment-box button clicked - $("#comment-box").removeAttr("onclick"); - $("#comment-box").on("touchstart", function () { - var scope = angular.element(document.getElementById("aaDetailPageDiv")).scope(); - scope.$apply(function () { - scope.ShowHideAnnotation(event); - }); - }); - - } - - }); -}]); - - -function refreshTermListOnSystemSel(bodySystemId) { - var rootScope = angular.element(document.getElementById("aaDetailPageDiv")).scope(); - rootScope.$apply(function () { - rootScope.refreshTermListOnAASystemSelection(bodySystemId); - }); -} - - -function showSelectedSystemPins(event) { - console.log('OnBodySystem chnaged is called outside '); - var scope = angular.element(document.getElementById("aaDetailPageDiv")).scope(); - scope.$apply(function () { - scope.showSelectedSystemPins(event); - }); -} - -function hidePins(event) { - - var rootScope = angular.element(document.getElementById("aaDetailPageDiv")).scope(); - rootScope.$apply(function () { - rootScope.hidePins(event); - }); -} - -function showAllPins(event) { - - var scope = angular.element(document.getElementById("aaDetailPageDiv")).scope(); - scope.$apply(function () { - scope.showAllPinsAfterHide(event); - }); -} - -function onSearchAA(event) { - console.log('AA search is called') - var scope = angular.element(document.getElementById("aaDetailPageDiv")).scope(); - scope.$apply(function () { - scope.showItemsForSearch(); - }); -} - -function hideSearchList(event) { - console.log('AA hide search is called') - var scope = angular.element(document.getElementById("aaDetailPageDiv")).scope(); - scope.$apply(function () { - scope.HideSearchList(); - }); -} - -function onSearchItemSelection(id) { - - console.log('AA hide search is called'); - var scope = angular.element(document.getElementById("aaDetailPageDiv")).scope(); - scope.$apply(function () { - scope.highlightPinBasedOnSerachItem(id); - }); -} - -//function onListManagerTermSelection(event) { -// var scope = angular.element(document.getElementById("aaDetailPageDiv")).scope(); -// scope.isTermListOptionClicked = true; -// scope.$apply(function () { -// scope.highlightPinBasedOnSerachItem1(event); -// }); - -//} - - -function showHideAnnotation(event) { - - var scope = angular.element(document.getElementById("aaDetailPageDiv")).scope(); - scope.$apply(function () { - scope.ShowHideAnnotation(event); - }); -} - -function showSelectedPins(event) { - - console.log('showSelectedPins is called') - var scope = angular.element(document.getElementById("aaDetailPageDiv")).scope(); - scope.$apply(function () { - scope.showSelectedPins(event); - }); -} - - -function openModuleItemView(event) { - var scope = angular.element(document.getElementById("list-view")).scope(); - scope.isListViewButtonClicked = true; - scope.$apply(function () { - scope.openModuleItemView(event); - }); -} - -function openListViewModuleItem(event) { - - var scope = angular.element(document.getElementById("list-view")).scope(); - scope.isListViewButtonClicked = true; - scope.$apply(function () { - scope.openListViewModuleItem(event); - }); -} - -function openCurrentView(event) { - var scope = angular.element(document.getElementById("list-view")).scope(); - scope.isListViewButtonClicked = true; - scope.isOpenBtnClicked = true; - scope.$apply(function () { - scope.openModuleItemView(event); - }); - -} - -function onZoom(scope) { - - //$(".common-drag").remove(); - //$(".commonDot").remove(); - //$(".commonDraggedLine").remove(); - //var radial = $('#aaDetailViewCanvas').createGradient({ - // x1: 50, y1: 50, - // x2: 50, y2: 50, - // r1: 10, r2: 30, - // c1: 'rgba(100, 50, 0,0)', - // c2: 'rgb(216, 216, 216)' - //}); - //$('#aaDetailViewCanvas').setLayers({ - // fillStyle: radial, - //}).drawLayers(); - // scope.removePin(); - // scope.showAllPins(); - - - //6. Show all pins on AA opened item -} - - +'use strict'; + +AIA.controller("TileViewListController", ["$scope", "$window", "$rootScope", "$compile", "$http", "$log", "$location", "$timeout", "DA", "Modules", "$routeParams", "BodyRegions", "BodySystems", "ViewOrientations", "ImageTypes", "DataService", "ModuleService", +function ($scope, $window, $rootScope, $compile, $http, $log, $location, $timeout, DA, Modules, $routeParam, BodyRegions, BodySystems, ViewOrientations, ImageTypes, DataService, ModuleService) { + + + $rootScope.OpenedTileData = []; + var DISSECTIBLE_ANATOMY = 'Dissectible Anatomy'; + var ATLAS_ANATOMY = 'Atlas Anatomy'; + var CLINICAL_ILLUSTRATION = 'Clinical Illustrations'; + var CLINICAL_ANIMATION = 'Clinical Animations'; + $rootScope.closeBtnImgPath = "~/../content/images/speeachBubbleClose.png"; + $rootScope.listArray = []; + //variables to bind Filter by Controls + $scope.searchAAListViewData = []; + $scope.SelectedAAthumbImage = []; + $scope.SelectedAAImage = []; + $scope.SelectedAASummary = []; + $scope.SelectedAAId = []; + $scope.SelectedAATitle = []; + $scope.selectedAAListViewData = []; + $scope.filterstring = false; + $scope.AllBodyRegion = []; + $scope.AllBodySystem = []; + $scope.AllOrientation = []; + $scope.AllImageType = []; + $rootScope.speechBubbleDimaensions = []; + $scope.runningSearchWorkers = []; + $scope.clickedPins = []; + $scope.sliderPercentValue = 1; + $scope.query = { + selectedbodyregion: '', + selectedbodysystem: '', + selectedorientation: '', + selectedimagetype: '', + }; + $scope.activePinArray = []; + $scope.showTabButton = true; + $scope.isListViewDataLoaded = true; + + $scope.setActiveTab = function (tabToSet) { + + $scope.activeTab = tabToSet; + localStorage.setItem("activeTab", $scope.activeTab); + if ($scope.activeTab == 1) { + $('#grid-view').css("display", "block"); + $('#list-view').css("display", "none"); + $("#demoView").remove(); + } + else { + + $('#grid-view').css("display", "none"); + $('#list-view').css("display", "block"); + } + }; + + $scope.loadForModuleById = function (moduleId) { + $rootScope.openModules.push({ "ModuleId": 2 }); + if ($rootScope.refreshcheck == null) { + $location.path('/'); + } + $scope.moduleId = moduleId; + $scope.activeTab = 1; + console.log('loadForModuleById is called') + $rootScope.moduleName = Modules[moduleId].Name; + $rootScope.currentActiveModuleTitle = $rootScope.moduleName; + $scope.AllBodyRegion = BodyRegions; + $scope.AllBodySystem = BodySystems; + $scope.AllOrientation = ViewOrientations; + $scope.AllImageType = ImageTypes; + var promise = ModuleService.loadModuleDataBasedOnModuleName($scope.moduleName) + .then( + function (result) { + + $scope.moduleLandingData = result; + // setTimeout(function () { $('#' + $rootScope.highlightid).find('.thumbnail').addClass('hightlightstate'); }, 100); + setTimeout(function () { + if ($rootScope.getLocalStorageValue('AAGridViewHighlightThumbnail') !== null) { + $('#' + $rootScope.getLocalStorageValue("AAGridViewHighlightThumbnail")).find('.thumbnail').addClass('HightLightThumbnail'); + } + if ($rootScope.getLocalStorageValue('AAGridViewScroll') !== null && $location.url() == "/tile-view-list") { + $('html, body').animate({ scrollTop: $rootScope.getLocalStorageValue('AAGridViewScroll') }, 'slow'); + } + }, 100); + //console.log(JSON.stringify(result, null, 4)); + }, + function (error) { + // handle errors here + console.log(' error: ' + error.statusText); + } + ) + $('#list-view').css('display', 'none'); + } + + //$scope.$on('$viewContentLoaded', function (event) { + + // $scope.loadForModuleById(); + + //}); + $scope.isOpenBtnClicked = false; + $scope.openModuleItemView = function (event) { + $rootScope.MenuModuleName = "AA"; + localStorage.setItem("activeTab", $scope.activeTab); + //0. Get selected Image Id + if ($scope.isListViewButtonClicked == true) { + if ($scope.isOpenBtnClicked == true) { + + var moduleItemDataToBeSaved = $("#demoText").text().trim(); + $scope.isOpenBtnClicked = false; + } + else { + var moduleItemDataToBeSavedID = event.currentTarget.id; + localStorage.setItem("listViewSelectedID", moduleItemDataToBeSavedID); + var moduleItemDataToBeSaved = $("#list-view table tbody #" + moduleItemDataToBeSavedID).find('td:eq(0)').text().trim(); + } + } + else { + var moduleItemDataToBeSaved = event.target.id; + localStorage.setItem("listViewSelectedID", event.currentTarget.id); + $scope.isListViewButtonClicked = false; + } + + //1.Filter selected module ietem data and get the pushed opened moduile array object + $rootScope.OpenedTileData = ModuleService.GetOpenedTileData(moduleItemDataToBeSaved, $scope.moduleLandingData); + + //2. Pick the image name to create a source to open + $rootScope.imageId = $rootScope.OpenedTileData[0]; + $rootScope.imageName = $rootScope.OpenedTileData[3]; + $rootScope.bodySystemName = $rootScope.OpenedTileData[2]; + $rootScope.OpenItemImagePath = "../../../content/images/aa/images/" + $rootScope.OpenedTileData[3]; + $scope.OpenItemImagePath = "../../../content/images/aa/images/" + $rootScope.OpenedTileData[3]; + //$rootScope.listArray = []; + $rootScope.listArray.push({ "imageName": $rootScope.OpenItemImagePath, "text": moduleItemDataToBeSaved }); + //3. set opened module item ti + localStorage.setItem("currentViewTitle", $rootScope.OpenedTileData[6]); + localStorage.setItem("AAGridViewScroll", $($window).scrollTop()); + localStorage.setItem("AAGridViewHighlightThumbnail", $(event.target).parent().parent().parent().attr('id')); + + //3. Navigate to the Module-item-view + var u = $location.url(); + $location.url('/module-item-view'); + } + + + $scope.openListViewModuleItem = function (event) { + $("#demoView").remove(); + var moduleItemDataToBeSavedID = event.currentTarget.id; + $("#list-view table tbody tr").removeClass("active"); + localStorage.setItem("listViewSelectedID", moduleItemDataToBeSavedID); + $("#list-view table tbody #" + moduleItemDataToBeSavedID).addClass("active"); + localStorage.setItem("AAListViewScroll", $("#list-view table tbody").scrollTop()); + var moduleItemDataToBeSaved = $("#list-view table tbody #" + moduleItemDataToBeSavedID).find('td:eq(0)').text().trim(); + $rootScope.OpenedTileData = ModuleService.GetOpenedTileData(moduleItemDataToBeSaved, $scope.moduleLandingData); + $rootScope.OpenItemImagePath = "../../../content/images/aa/images/" + $rootScope.OpenedTileData[3]; + //$rootScope.listArray = []; + $rootScope.listArray.push({ "imageName": $rootScope.OpenItemImagePath, "text": moduleItemDataToBeSaved }); + $("#viewList").append("
    " + moduleItemDataToBeSaved + "
    Open
    "); + } + + + $scope.openModuleItem = function () { + if ($rootScope.refreshcheck == null) { + $location.path('/'); + } + var jsContentURL; + var moduleItemViewDivId; + + //1. create a jsPanel and load the module item view + if ($rootScope.moduleName == ATLAS_ANATOMY) { + + jsContentURL = 'app/views/aa/atlas-anatomy-detail.html'; + moduleItemViewDivId = 'aaDetailPageDiv'; + } + else if ($rootScope.moduleName == CLINICAL_ANIMATION) { + //to do, in next phase of project + + } + else if ($rootScope.moduleName == CLINICAL_ILLUSTRATION) { + //to do, in next phase of project + + } + + //1. create a jsPanel and load the module item view + if ($rootScope.moduleName == ATLAS_ANATOMY) { + $.jsPanel({ + id: 'ImagePanel', + selector: '.aaBodyView', + theme: 'success', + currentController: 'TileViewListController', + parentSlug: 'tile-view-list', + ajax: { + url: jsContentURL + }, + title: $rootScope.getLocalStorageValue("currentViewTitle"), + + position: { + top: 70, + left: 1, + }, + + size: { width: $(window).outerWidth() - 10, height: $(window).outerHeight() - 125 }, + + }); + + console.log('jsPanel loaded ImagePanel exist= ' + document.getElementById('ImagePanel')) + + //0.3 + var aaViewElement = angular.element(document.getElementById(moduleItemViewDivId)); + + //0.4 for Opening module item, load it into image + $rootScope.isLoading = true; + $('#spinner').css('visibility', 'visible'); + var openedImage = new Image(); + openedImage.id = 'modItemImage'; + openedImage.name = $rootScope.OpenItemImagePath; + + openedImage.onload = function () { + $scope.imageWidth = this.width; + $scope.imageHeight = this.height; + + + $timeout(function () { + $compile(aaViewElement.contents())($scope); + + //if (document.getElementById('aaDetailPageDiv') != null) { + if (document.getElementById('aaBodyView') != null) { + + //0.4 added some stylesheets + $('#aaBodyView').css("height", $(window).outerHeight() - 65); + + $('#aaBodyView').css("width", $(window).outerWidth() - 15); + + $rootScope.canvasDivHeight = $('.jsPanel-content').height() - $('.main2 .stickey-area').height(); + + $('.canvasDivClass').css("height", $rootScope.canvasDivHeight); + + $scope.currentTitleFromJson = $rootScope.getLocalStorageValue("currentViewTitle"); + $("#modItemImage").attr('src', $rootScope.OpenItemImagePath); + + + $rootScope.ViewImageWidth = $("#modItemImage").width(); + $scope.ViewImageWidth = $("#modItemImage").width(); + $scope.ViewImageHeight = $("#modItemImage").height(); + + $scope.relativeDimesion = 0; + $("#modItemImage").css("width", $rootScope.ViewImageWidth + "px"); + //0.5 create canvas on the top of image so that I can draw a line over the canvas. + var canvas = document.createElement('canvas'); + canvas.id = 'aaDetailViewCanvas'; + canvas.className = '.aaCanvas' + canvas.height = parseInt(($scope.imageHeight)); + canvas.width = parseInt($scope.imageWidth); + canvas.style.left = '0px'; + canvas.style.top = '0px'; + canvas.style.position = "absolute"; + $("#canvasDiv").append(canvas); + $scope.context = canvas.getContext("2d") + //6. Show all pins on AA opened item + $scope.showAllPins(); + //7. Highlight all system body list in left side + $scope.highlightBodySystemList(); + } + $(".slider").slider({ + min: 25, + max: 100, + value: 100, + range: "min", + orientation: "vertical", + slide: function (event, ui) { + var scope = angular.element(document.getElementById("aaDetailPageDiv")).scope(); + scope.$apply(function () { + scope.sliderVal = ui.value; + scope.removeSpeechBubble(); + var relativeWidth = 0; + var relativeHeight = 0; + if (ui.value == 25 || ui.value == 40 || ui.value == 55 || ui.value == 70 || ui.value == 85 || ui.value == 100) { + if (ui.value == 100) { + relativeWidth = scope.ViewImageWidth; + relativeHeight = scope.ViewImageHeight + scope.sliderPercentValue = 1.0; + } + else if (ui.value == 85) { + relativeWidth = scope.ViewImageWidth * 0.85; + relativeHeight = scope.ViewImageHeight * 0.85; + scope.sliderPercentValue = 0.85; + + } else if (ui.value == 70) { + relativeWidth = scope.ViewImageWidth * 0.70; + relativeHeight = scope.ViewImageHeight * 0.70; + scope.sliderPercentValue = 0.70; + } else if (ui.value == 55) { + + relativeWidth = scope.ViewImageWidth * 0.55; + relativeHeight = scope.ViewImageHeight * 0.55; + scope.sliderPercentValue = 0.55; + + } else if (ui.value == 40) { + + relativeWidth = scope.ViewImageWidth * 0.40; + relativeHeight = scope.ViewImageHeight * 0.40; + scope.sliderPercentValue = 0.40; + + } else if (ui.value == 25) { + + relativeWidth = scope.ViewImageWidth * 0.25; + relativeHeight = scope.ViewImageHeight * 0.25; + scope.sliderPercentValue = 0.25; + + } + } + + if (ui.value == 25 || ui.value == 40 || ui.value == 55 || ui.value == 70 || ui.value == 85 || ui.value == 100) { + $("#modItemImage").css("width", relativeWidth + "px"); + $("#modItemImage").css("height", relativeHeight + "px"); + $("#aaDetailViewCanvas").css("width", relativeWidth + "px"); + $("#modItemImage").css("height", relativeHeight + "px"); + + $("#modItemImage").attr('src', ''); + + + $("#aaDetailViewCanvas").remove(); + //0.5 create canvas on the top of image so that I can draw a line over the canvas. + var canvas = document.createElement('canvas'); + canvas.id = 'aaDetailViewCanvas'; + canvas.className = 'aaCanvas'; + canvas.height = relativeHeight; + canvas.width = relativeWidth; + canvas.style.left = '0px'; + canvas.style.top = '0px'; + canvas.style.position = "absolute"; + + $("#canvasDiv").append(canvas); + scope.context = canvas.getContext("2d") + $("#modItemImage").attr('src', scope.OpenItemImagePath); + scope.isSliderChange = true; + var btnID = ''; + $("div.tools div:eq(1) div").each(function () { + if ($(this).find("button").hasClass("btn-primary")) { + btnID = $(this).find("button").attr("id"); + $('#' + btnID).removeClass("btn-black"); + $('#' + btnID).addClass("btn-primary"); + } + }); + scope.isSelectedPinBtnClickedAftrSliderCange = true; + switch (btnID) { + + case "hidePinBtn": + break; + case "allPinBtn": + scope.showAllPins(); + break; + case "selectedPin": + scope.showAllPins(); + setTimeout(function () { + console.log(scope.allPinDataArray); + scope.activePinOnSliderChange(); + }, 1000); + break; + } + } + + }); + } + }) + .slider("pips", { + rest: "label", + step: "15" + }); + }, 500); + } + + openedImage.onerror = loadFailure; + openedImage.src = $rootScope.OpenItemImagePath; + } + + } + + $scope.highlightBodySystemList = function () { + $rootScope.bodySystemNames = $rootScope.bodySystemName.trim().split(/\s*,\s*/); + var bodySystemListObj = document.getElementById("bodySystemList").getElementsByTagName("a"); + var bodySystemListlength = bodySystemListObj.length; + for (var i = 0; i < bodySystemListlength; i++) { + //var boldTag = lis[i]; + for (var j = 0; j < $rootScope.bodySystemNames.length; j++) { + if ((bodySystemListObj[i].innerHTML) == ($rootScope.bodySystemNames[j])) { + $("#" + i).parent().removeClass("disabledSelectedSystem"); + + } + } + + } + } + function loadFailure() { + console.log('unable to load opened module ietem'); + return true; + } + + + angular.element(document).ready(function (e) { + $("#ImagePanel").resize(function () { + $("#canvasDiv").scrollLeft($rootScope.CanvasDivLeftPosition); + $("#canvasDiv").scrollTop($rootScope.CanvasDivTopPosition); + }); + $(document).on("click", "#ImagePanel .jsPanel-hdr .jsPanel-hdr-r .jsPanel-btn-close .jsglyph-remove", function () { + $scope.setActiveTab(parseInt($rootScope.getLocalStorageValue("activeTab"))); + $(".tools").css("z-index", "15000"); + $rootScope.selectedBodySystemName = 'All'; + $rootScope.selectedBodySystemId = 0; + $rootScope.searchSelectedText = ''; + + }); + + $(document).on("click", "#dvPrintPreview .jsPanel-hdr .jsPanel-hdr-r .jsPanel-btn-close .jsglyph-remove", function () { + + if ($rootScope.isShowAllPinBtnActiveInPrintPreviewMode == true) { + $("#allPinBtn").trigger("click"); + $rootScope.isShowAllPinBtnActiveInPrintPreviewMode = false; + } + if ($rootScope.isHidePinBtnActiveInPrintPreview == true) { + $("#hidePinBtn").trigger("click"); + $rootScope.isHidePinBtnActiveInPrintPreview = false; + } + if($rootScope.isShowSelectedPinActiveInPrintPrevMode == true) + { + $("#selectedPin").trigger("click"); + $rootScope.isShowSelectedPinActiveInPrintPrevMode = false; + } + }); + + }) + $rootScope.aaPinDataArray = []; + $scope.showAllPins = function () { + + $scope.allPinDataArray = []; + var promise = ModuleService.getPinDataForImage($rootScope.imageName) + + .then( + function (result) { + + //load navigator image + if (result.data.Root._NavigatorImage != undefined) { + document.getElementById('navimg').src = '~/../content/images/aa/images/navigator/' + result.data.Root._NavigatorImage; + } + else { + document.getElementById('navimg').style.visibility = 'hidden'; + document.getElementById('navigatorBtn').style.visibility = 'hidden'; + document.getElementById('navigatorDiv').style.visibility = 'hidden'; + + } + + //draw pins + $scope.aaPinData = result.data.Root.Item; + if ($scope.aaPinData != null && $scope.aaPinData.length > 0) { + $rootScope.aaPinDataArray = $scope.aaPinData + angular.forEach($scope.aaPinData, function (value, key) { + $scope.allPinDataArray.push(value._PinId); + $scope.drawStaticPinsOnImage('aaDetailViewCanvas', value._PinId, value._PinX, value._PinY, value._HeadX, value._HeadY) + }) + + + + //load search/vocab data + $rootScope.loadSearchData(); + } + }, + function (error) { + + console.log(' error in showAllPins: ' + error.statusText); + } + ) + if ($scope.isSliderChange == true) { + $timeout(function () { + $scope.activePinOnLayerChange(); + }, 1000); + + } + + } + + + $scope.FilterByImage = function (moduleId, query) { + $scope.moduleId = moduleId; + $scope.filterstring = true; + + console.log('loadForModuleById is called'); + + $rootScope.moduleName = Modules[moduleId].Name; + while ($scope.searchAAListViewData.length) { + $scope.searchAAListViewData.pop(); + } + + var filtercount = 0; + if (typeof (query.selectedbodyregion) !== "undefined" && (query.selectedbodyregion !== null && query.selectedbodyregion !== "")) { + filtercount = filtercount + 1; + localStorage.setItem("CurrentBodyRegion", query.selectedbodyregion); + } + else { + localStorage.setItem("CurrentBodyRegion", ''); + } + + if (typeof (query.selectedbodysystem) !== "undefined" && (query.selectedbodysystem !== null && query.selectedbodysystem !== "")) { + filtercount = filtercount + 1; + localStorage.setItem("CurrentBodySystem", query.selectedbodysystem); + } + else { + localStorage.setItem("CurrentBodySystem", ''); + } + + if (typeof (query.selectedorientation) !== "undefined" && (query.selectedorientation !== null && query.selectedorientation !== '')) { + filtercount = filtercount + 1; + localStorage.setItem("CurrentOrientation", query.selectedorientation); + } + else { + localStorage.setItem("CurrentOrientation", ''); + } + + if (typeof (query.selectedimagetype) !== "undefined" && (query.selectedimagetype !== null && query.selectedimagetype !== '')) { + filtercount = filtercount + 1; + localStorage.setItem("CurrentImageType", query.selectedimagetype); + } + else { + localStorage.setItem("CurrentImageType", ''); + } + + var promise = ModuleService.loadModuleDataBasedOnModuleName($scope.moduleName) + .then( + function (result) { + // alert(JSON.stringify($scope.moduleLandingData)); + $scope.moduleLandingData = result; + $scope.selectedAAListViewData = new jinqJs() + .from($scope.moduleLandingData.data.root.Item) + .orderBy([{ field: '_Title', sort: 'asc' }]) + .select(); + + $('#grid-view').empty(); + //alert(JSON.stringify($scope.selectedAAListViewData)) + angular.forEach($scope.selectedAAListViewData, function (value, key) { + + var selectimg = true; + var count = 0; + + + if (typeof (query.selectedbodyregion) !== "undefined" && (query.selectedbodyregion !== null && query.selectedbodyregion !== "")) { + var posbodyregion = value._BodyRegion.indexOf((query.selectedbodyregion.trim())); + if (posbodyregion > -1) { + selectimg = true; + count = count + 1; + } + else { + selectimg = false; + count = count - 1; + } + + } + + if (typeof (query.selectedbodysystem) !== "undefined" && (query.selectedbodysystem !== null && query.selectedbodysystem !== "")) { + var posbodysystem = value._BodySystem.indexOf(query.selectedbodysystem); + if (posbodysystem > -1) { + count = count + 1; + selectimg = true; + } else { + selectimg = false; + count = count - 1; + } + } + + if (typeof (query.selectedorientation) !== "undefined" && (query.selectedorientation !== null && query.selectedorientation !== "")) { + var posorientation = value._ViewOrientation.indexOf(query.selectedorientation); + if (posorientation > -1) { + count = count + 1; + selectimg = true; + + } else { + selectimg = false; + count = count - 1; + } + + } + + if (typeof (query.selectedimagetype) !== "undefined" && (query.selectedimagetype !== null && query.selectedimagetype !== "")) { + var posimagetype = value._ImageType.indexOf(query.selectedimagetype); + if (posimagetype > -1) { + count = count + 1; + selectimg = true; + + } else { + selectimg = false; + count = count - 1; + } + + } + + if (selectimg === true && count >= filtercount) { + + $scope.imagePath = "../content/images/aa/thumbnails/" + value._TileImageName; + + + var $el = $('
    ' + + '
    ' + + '' + + '

    ' + value._Title + '

    ').appendTo('#grid-view'); + + + $compile($el)($scope); + + $(".sidebar").mCustomScrollbar({ + autoHideScrollbar: true, + //theme:"rounded" + }); + + + $scope.searchAAListViewData.push( + { + "_Id": value._Id, + "_ImageId": value._ImageId, + "_Title": value._Title, + "_ImageName": value._contentImage, + "_TileImageName": value._ThumbnailImage, + "_BodySystem": value._BodySystem, + "_BodyRegion": value._BodyRegion, + "_ViewOrientation": value._ViewOrientation, + "_ImageType": value._ImageType + //"$$hashKey": value._Summary + + }); + console.log($scope.searchAAListViewData); + if ($('#searchItem').length > 0) + $('#searchItem').remove(); + } + }); + + //Show Error Message in case of gridview/ ListView [if no data is found] + if ($scope.searchAAListViewData.length == 0) { + var $el = $('
    No illustration found for the selected search criteria!
    ').appendTo('#grid-view'); + $compile($el)($scope); + $('table > #ListViewDiv > #searchItem').remove(); + + $('#ListViewDiv').append('No illustration found for the selected search criteria!'); + } + //console.log(JSON.stringify(result, null, 4)); + console.log('SearchAAListViewData--' + $scope.searchAAListViewData); + }, + function (error) { + // handle errors here + console.log(' error: ' + error.statusText); + } + ) + } + + $scope.Reset = function (moduleId, query) { + + query.selectedbodyregion = ""; + query.selectedbodysystem = ""; + query.selectedorientation = ""; + query.selectedimagetype = ""; + query.selectedspecialty = ""; + + + //set localstorage values + localStorage.setItem("CurrentBodyRegion", ''); + localStorage.setItem("CurrentBodySystem", ''); + localStorage.setItem("CurrentOrientation", ''); + localStorage.setItem("CurrentImageType", ''); + //localStorage.setItem("CISelectedRowId", ""); + //localStorage.setItem("CIListViewScroll", ''); + + if ($('.selected').hasClass("selected")) { $('.selected').removeClass("selected"); } + + $('#ListViewDiv').scrollTop(0); + + if ($('#demoView').length > 0) + $('#demoView').remove(); + // $scope.HideListViewDiv(); + + $scope.filterstring = false; + //while ($scope.searchCIListViewData.length) { + // $scope.searchCIListViewData.pop(); + //} + + $scope.FilterByImage(1, query); + + } + + $scope.showSelectedSystemPins = function (event) { + var bodySystemListObj = document.getElementById("bodySystemList").getElementsByTagName("a"); + var bodySystemListlength = bodySystemListObj.length; + for (var i = 0; i < bodySystemListlength; i++) { + + $("#" + i).parent().removeClass("activeAASystemSelect"); + } + $("#" + event.currentTarget.id).parent().addClass("activeAASystemSelect"); + + $rootScope.isLoading = true; + $('#spinner').css('visibility', 'visible'); + + $scope.removeSpeechBubble(); + if (event.currentTarget.id == "0") { + + $scope.selectedSystemName = null; + if ($scope.isHidePinBtnClicked) { + + // $scope.showAllPinsAfterHide($scope.aaPinData); + $scope.showAllPinsAfterHide(); + } + else { + $scope.showAllPins(); + } + } + else { + + $scope.selectedSystemName = event.currentTarget.title; + // get termText info + var promise = ModuleService.getTermTextDataForPin($scope.moduleName) + .then( + function (response) { + + $scope.TermInfo = response.data.Terms.Term; + + //on gettng all required data, draw pins + if ($scope.aaPinData != null && $scope.aaPinData.length > 0) { + + $scope.selectedSystemPinData = new jinqJs() + .from($scope.aaPinData) + .where("_BodySystemName == " + $scope.selectedSystemName) + .select(); + if ($scope.isHidePinBtnClicked) { + // $scope.showAllPinsAfterHide($scope.selectedSystemPinData); + $scope.showAllPinsAfterHide(); + + } + else { + //remove other system pins + if ($scope.selectedSystemPinData != null && $scope.selectedSystemPinData.length > 0) { + + angular.forEach($scope.aaPinData, function (aaPinDataValue, aaPinDataKey) { + + if (aaPinDataValue._BodySystemName != $scope.selectedSystemName) + $scope.removePin('aaDetailViewCanvas', aaPinDataValue._PinId); + }) + + angular.forEach($scope.selectedSystemPinData, function (value, key) { + + + $scope.drawStaticPinsOnImage('aaDetailViewCanvas', value._PinId, value._PinX, value._PinY, value._HeadX, value._HeadY) + + }) + //show annotation on first pin of the sysyem + $scope.showAnnotation($scope.selectedSystemPinData, false, false, false); + } + } + } + }, + function (error) { + // handle errors here + console.log(' error: ' + error.statusText); + } + ) + + } + } + + $scope.showAnnotation = function (selectedPinData, isCtrlPressed, isPinClicked, isItemSearched) { + $scope.clickedPins = []; + $scope.selectedPin = []; + var isSameTermWithMultiPin = false; + var firstPinId = selectedPinData[0]._PinId; + var pinTermNumber = selectedPinData[0]._TermId; + + //check if other pin have same termNumber + if ($scope.aaPinData != null && $scope.aaPinData.length > 0) { + + var pinDataWithFirstTermNumber = new jinqJs() + .from($scope.aaPinData) + .where("_TermId == " + pinTermNumber) + .select(); + + $scope.MultiLanguageAnnationArray = []; + + $scope.GetAnnotationBasedOnActualTermNo(pinTermNumber); + + if (isCtrlPressed) { + + } + else { + if (isPinClicked || isItemSearched) { + var existingSpeechBubble = $("div[id*='speechBubble']"); + for (var i = 0; i < existingSpeechBubble.length; i++) { + existingSpeechBubble[i].parentNode.removeChild(existingSpeechBubble[i]); + + //make all pin heads grey + var radial = $('#aaDetailViewCanvas').createGradient({ + x1: 50, y1: 50, + x2: 50, y2: 50, + r1: 10, r2: 30, + c1: 'rgba(100, 50, 0,0)', + c2: 'rgb(216, 216, 216)' + }); + + + $('#aaDetailViewCanvas').setLayers({ + fillStyle: radial, + }).drawLayers(); + } + + var existingSpeechBubbleLine = $("div[id*='speechBubbleLine']"); + for (var i = 0; i < existingSpeechBubbleLine.length; i++) { + existingSpeechBubbleLine[i].parentNode.removeChild(existingSpeechBubbleLine[i]); + } + var speechBubbleDraggedLine = $("div[id*='speechBubbleDraggedLine']"); + for (var i = 0; i < speechBubbleDraggedLine.length; i++) { + speechBubbleDraggedLine[i].parentNode.removeChild(speechBubbleDraggedLine[i]); + } + } + } + if (pinDataWithFirstTermNumber.length > 1) { + isSameTermWithMultiPin = true; + } + + angular.forEach(pinDataWithFirstTermNumber, function (value, key) { + $scope.selectedPin.push(value._PinId); + $scope.clickedPins.push({ 'id': value._PinId }); + var headX = (parseInt(value._HeadX)); + var headY = (parseInt(value._HeadY)); + $scope.createSpeechBubble(parseInt(headX) + 10, parseInt(headY) + 10, value._PinId, isCtrlPressed, isPinClicked, isSameTermWithMultiPin); + }) + + } + + $rootScope.isLoading = false; + $('#spinner').css('visibility', 'hidden'); + // $scope.MultiLanguageAnnationArray.push($rootScope.annotationText[i]) + } + + $scope.removeSpeechBubble = function () { + + + //clear speech bubbles + var speechBubbles = $("div[id*='speechBubble']"); + if (speechBubbles != null || speechBubbles != undefined && speechBubbles.length > 0) { + for (var j = 0; j < speechBubbles.length; j++) { + + speechBubbles[j].parentNode.removeChild(speechBubbles[j]); + } + } + var speechBubbleLines = $("div[id*='speechBubbleLine']"); + if (speechBubbleLines != null || speechBubbleLines != undefined && speechBubbleLines.length > 0) { + for (var j = 0; j < speechBubbleLines.length; j++) { + + speechBubbleLines[j].parentNode.removeChild(speechBubbleLines[j]); + } + } + + var speechBubbleDraggedLines = $("div[id*='speechBubbleDraggedLine']"); + if (speechBubbleDraggedLines != null || speechBubbleDraggedLines != undefined && speechBubbleDraggedLines.length > 0) { + for (var j = 0; j < speechBubbleDraggedLines.length; j++) { + + speechBubbleDraggedLines[j].parentNode.removeChild(speechBubbleDraggedLines[j]); + } + } + }; + + $scope.showSpeechBubble = function () { + + + //clear speech bubbles + var speechBubbles = $("div[id*='speechBubble']"); + if (speechBubbles != null || speechBubbles != undefined && speechBubbles.length > 0) { + for (var j = 0; j < speechBubbles.length; j++) { + + document.getElementById(speechBubbles[j].id).style.visibility = 'visible'; + } + } + var speechBubbleLines = $("div[id*='speechBubbleLine']"); + if (speechBubbleLines != null || speechBubbleLines != undefined && speechBubbleLines.length > 0) { + for (var j = 0; j < speechBubbleLines.length; j++) { + + document.getElementById(speechBubbleLines[j].id).style.visibility = 'visible'; + } + } + + var speechBubbleDraggedLines = $("div[id*='speechBubbleDraggedLine']"); + if (speechBubbleDraggedLines != null || speechBubbleDraggedLines != undefined && speechBubbleDraggedLines.length > 0) { + for (var j = 0; j < speechBubbleDraggedLines.length; j++) { + + document.getElementById(speechBubbleDraggedLines[j].id).style.visibility = 'visible'; + } + } + }; + + $scope.hideSpeechBubble = function () { + + + //clear speech bubbles + var speechBubbles = $("div[id*='speechBubble']"); + if (speechBubbles != null || speechBubbles != undefined && speechBubbles.length > 0) { + for (var j = 0; j < speechBubbles.length; j++) { + + document.getElementById(speechBubbles[j].id).style.visibility = 'hidden'; + } + } + var speechBubbleLines = $("div[id*='speechBubbleLine']"); + if (speechBubbleLines != null || speechBubbleLines != undefined && speechBubbleLines.length > 0) { + for (var j = 0; j < speechBubbleLines.length; j++) { + + document.getElementById(speechBubbleLines[j].id).style.visibility = 'hidden'; + } + } + + var speechBubbleDraggedLines = $("div[id*='speechBubbleDraggedLine']"); + if (speechBubbleDraggedLines != null || speechBubbleDraggedLines != undefined && speechBubbleDraggedLines.length > 0) { + for (var j = 0; j < speechBubbleDraggedLines.length; j++) { + + document.getElementById(speechBubbleDraggedLines[j].id).style.visibility = 'hidden'; + } + } + }; + + + $scope.createSpeechBubble = function (x, y, PinId, isCtrlPressed, isPinClicked, isSameTermWithMultiPin) { + + $scope.longestAnnotation = $scope.MultiLanguageAnnationArray.reduce(function (firstAnnotation, seconAnnotation) { return firstAnnotation.length > seconAnnotation.length ? firstAnnotation : seconAnnotation; }); + + $scope.createSpeechBubbleBasedOnAnnotationLength(x, y, PinId); + + $('#speechBubble').draggable( + { + drag: function (evt) { + $("#dot").css("visibility", "hidden"); + var verticalScrollPosition = canvasDiv.scrollTop; + var horizontlScrollPosition = canvasDiv.scrollLeft; + $scope.angle(x * $scope.sliderPercentValue, y * $scope.sliderPercentValue, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top, true); + }, + }); + + } + $scope.sliderVal = 100; + $scope.createSpeechBubbleBasedOnAnnotationLength = function (x, y, PinId) { + + x = x * $scope.sliderPercentValue; + y = y * $scope.sliderPercentValue; + + var speechBubbleHTML = '' + + '
    ' + + '' + + '
    ' + + + ''; + + //Issue #7286 :Undefined annotation should not appear + for (var i = 0; i <= $scope.MultiLanguageAnnationArray.length - 1; i++) { + var MultipleLanguage = $scope.MultiLanguageAnnationArray[i]; + } + + if (MultipleLanguage == undefined) { + console.log("No text is found"); + } else { + $('#canvasDiv').append(speechBubbleHTML); + + if ($scope.MultiLanguageAnnationArray.length > 0) { + for (var i = 0; i <= $scope.MultiLanguageAnnationArray.length - 1; i++) { + var MultipleLanguage = $scope.MultiLanguageAnnationArray[i]; + $rootScope.clickedPinAnnotation = $scope.MultiLanguageAnnationArray[0]; + $("#speechBubble" + PinId).append("

    " + MultipleLanguage + "

    "); + } + } + else { + console.log('MultiLanguageAnnationArray.length is :' + $scope.MultiLanguageAnnationArray.length) + } + + + + + + if ($scope.longestAnnotation != null || $scope.longestAnnotation != undefined) { + if ($scope.longestAnnotation.length <= 10) { + + + $("#speechBubble").css("width", "100px"); + + } + + else if ($scope.longestAnnotation.length > 10 && $scope.longestAnnotation.length <= 17) { + + + + $("#speechBubble").css("width", "140px"); + + } + else if ($scope.longestAnnotation.length > 17 && $scope.longestAnnotation.length <= 26) { + + + $("#speechBubble").css("width", "195px"); + + } + else if ($scope.longestAnnotation.length > 26 && $scope.longestAnnotation.length <= 34) { + + $("#speechBubble").css("width", "248px"); + + } + else if ($scope.longestAnnotation.length > 34 && $scope.longestAnnotation.length <= 44) { + + + $("#speechBubble").css("width", "300px"); + } + + else if ($scope.longestAnnotation.length > 44 && $scope.longestAnnotation.length <= 54) { + + $("#speechBubble").css("width", "370px"); + } + + else if ($scope.longestAnnotation.length > 54 && $scope.longestAnnotation.length <= 69) { + $("#speechBubble").css("width", "450px"); + } + else if ($scope.longestAnnotation.length > 69 && $scope.longestAnnotation.length <= 75) { + $("#speechBubble").css("width", "510px"); + } + else { + $("#speechBubble").css("width", ($scope.longestAnnotation.length) + "%"); + } + } + } + var speechBubbleDims = []; + + $rootScope.speechBubbleDimaensions.push({ "currentX": x, "currentY": y, "id": PinId }); + speechBubbleDims.push({ currentX: x, currentY: y }); + document.getElementById('speechBubbleLine' + PinId + '').style.display = 'block'; + document.getElementById('speechBubbleLine' + PinId + '').style.left = ((speechBubbleDims[0].currentX - 12)) + 'px'; + if ($scope.sliderVal == 25) { + document.getElementById('speechBubbleLine' + PinId + '').style.top = ((speechBubbleDims[0].currentY + 5)) + 'px'; + } + else { + document.getElementById('speechBubbleLine' + PinId + '').style.top = ((speechBubbleDims[0].currentY)) + 'px'; + } + document.getElementById('speechBubble' + PinId + '').style.display = 'block'; + document.getElementById('speechBubble' + PinId + '').style.left = (speechBubbleDims[0].currentX - 4) + 'px'; + document.getElementById('speechBubble' + PinId + '').style.top = (speechBubbleDims[0].currentY) + 'px'; + $('.common-drag').draggable( + { + + drag: function (evt) { + + var verticalScrollPosition = document.getElementById('canvasDiv').scrollTop; + var horizontlScrollPosition = document.getElementById('canvasDiv').scrollLeft; + var clickedSpeechBubbleId = $(this).attr("id"); + + var clickedPinId = clickedSpeechBubbleId.substring(12, clickedSpeechBubbleId.length); + + $("#speechBubbleLine" + clickedPinId).css("visibility", "hidden"); + $("#speechBubbleLine" + clickedPinId).css("display", "none"); + + for (var i = 0; i <= $rootScope.speechBubbleDimaensions.length - 1; i++) { + if ($rootScope.speechBubbleDimaensions[i].id == clickedPinId) { + $scope.angle(clickedPinId, $rootScope.speechBubbleDimaensions[i].currentX, $rootScope.speechBubbleDimaensions[i].currentY, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top, true); + } + } + + }, + }); + $('.crossDiv_temp').on('click', function (evt) { + + var imgId = $(this).attr("id"); + var pinId = imgId.substring(8, imgId.length); + $('#speechBubble' + pinId).remove(); + $("#speechBubbleDraggedLine" + pinId).remove(); + $("#speechBubbleLine" + pinId).remove(); + + //make all pin heads grey + var pinHeadName = 'PinArc_' + pinId; + var radial = $('#aaDetailViewCanvas').createGradient({ + x1: 50, y1: 50, + x2: 50, y2: 50, + r1: 10, r2: 30, + c1: 'rgba(100, 50, 0,0)', + c2: 'rgb(216, 216, 216)' + }); + + + $('#aaDetailViewCanvas').setLayer(pinHeadName, { + fillStyle: radial, + }).drawLayers(); + }); + + //make the head green + var radialAfterClick = $('#aaDetailViewCanvas').createGradient({ + x1: 50, y1: 50, + x2: 50, y2: 50, + r1: 10, r2: 30, + c1: 'rgba(100, 50, 0,0)', + c2: 'rgb(126, 187, 83)' + }); + var pinHeadName = 'PinArc_' + PinId; + var pin = $('#aaDetailViewCanvas').getLayer(pinHeadName); + // pin.fillStyle = radialAfterClick; + + $('#aaDetailViewCanvas').setLayer(pinHeadName, { + fillStyle: radialAfterClick, + }).drawLayers(); + } + + + $scope.angle = function (id, cx, cy, ex, ey, BoolValues) { + + var dy = ey - cy; + var dx = ex - cx; + var theta = 0; + if (dx < 0) { + theta = Math.atan(dy / dx) * (180 / Math.PI); + theta = theta + 180; + + } + else if (dy < 0) { + theta = Math.atan(dy / dx) * (180 / Math.PI); + theta = theta + 360; + + } + else { + theta = Math.atan(dy / dx) * (180 / Math.PI); + } + + var d = Math.sqrt((cx - ex) * (cx - ex) + (cy - ey) * (cy - ey)); + var e = cy; + var f = cx; + + if (BoolValues == true) { + if ($scope.sliderVal == 40) { + $("#speechBubbleDraggedLine" + id).css({ 'display': 'block', 'width': d + 'px', 'top': (e - 5) + 'px', 'left': (f - 5) + 'px', 'transform': 'rotate(' + theta + 'deg)', '-moz-transform': 'rotate(' + theta + 'deg)', '-webkit-transform': 'rotate(' + theta + 'deg)', 'transform-origin': '0% 0%' }); + } + else if ($scope.sliderVal == 25) { + $("#speechBubbleDraggedLine" + id).css({ 'display': 'block', 'width': d + 'px', 'top': (e - 2) + 'px', 'left': (f - 2) + 'px', 'transform': 'rotate(' + theta + 'deg)', '-moz-transform': 'rotate(' + theta + 'deg)', '-webkit-transform': 'rotate(' + theta + 'deg)', 'transform-origin': '0% 0%' }); + } + else { + $("#speechBubbleDraggedLine" + id).css({ 'display': 'block', 'width': d + 'px', 'top': (e - 10) + 'px', 'left': (f - 5) + 'px', 'transform': 'rotate(' + theta + 'deg)', '-moz-transform': 'rotate(' + theta + 'deg)', '-webkit-transform': 'rotate(' + theta + 'deg)', 'transform-origin': '0% 0%' }); + } + + } + else { + $("#bord_annotation").css({ 'display': 'block', 'width': d + 'px', 'top': e + 'px', 'left': f + 'px', 'transform': 'rotate(' + theta + 'deg)', '-moz-transform': 'rotate(' + theta + 'deg)', '-webkit-transform': 'rotate(' + theta + 'deg)', 'transform-origin': '0% 0%' }); + } + + + + } + + + $scope.drawStaticPinsOnImage = function (canvasId, PinId, offsetX1, offsetY1, x, y) { + $scope.clickedPins = []; + // if ($scope.isSliderChange == true) { + console.log('isSliderrChange') + var radial = $('#' + canvasId).createGradient({ + x1: 50, y1: 50, + x2: 50, y2: 50, + r1: 10, r2: 30, + c1: 'rgba(100, 50, 0,0)', + c2: 'rgb(216, 216, 216)' + }); + $('#' + canvasId).drawLine({ + layer: true, + name: "Pin_" + PinId, + groups: ["Pin_" + PinId], + strokeStyle: '#565656', + strokeWidth: 2, + visible: true, + x1: offsetX1 * $scope.sliderPercentValue, y1: offsetY1 * $scope.sliderPercentValue, + x2: x * $scope.sliderPercentValue, y2: y * $scope.sliderPercentValue, + + + }).drawArc({ + name: "PinArc_" + PinId, + layer: true, + groups: ["Pin_" + PinId], + strokeStyle: 'grey', + strokeWidth: 2, + visible: true, + fillStyle: radial, + x: x * $scope.sliderPercentValue, y: y * $scope.sliderPercentValue, + radius: 5 * $scope.sliderPercentValue, + + click: function (clickedPin) { + if (clickedPin.event.ctrlKey == false) { + $scope.clickedPins = []; + } + var pinID = (clickedPin.name).substring(7, (clickedPin.name).length); + var pinData = new jinqJs() + .from($scope.aaPinData) + .where("_PinId == " + pinID) + .select(); + + + var pinTermNumber = pinData[0]._TermId; + + var pinWithSameTerm = new jinqJs() + + .from($scope.aaPinData) + .where("_TermId == " + pinTermNumber) + .select(); + + + if (pinWithSameTerm != undefined && pinWithSameTerm != null && pinWithSameTerm.length > 0) { + + for (var i = 0; i < pinWithSameTerm.length; i++) { + + $scope.clickedPins.push({ 'id': pinWithSameTerm[i]._PinId }) + } + + } + $scope.isSelectedPinBtnClickedAftrSliderCange = false; + var selectedPinData = new jinqJs() + .from($scope.aaPinData) + .where("_PinId == " + pinID) + .select(); + if (clickedPin.event.ctrlKey == true) { + + $scope.activePinArray.push(clickedPin.name); + var radialAfterClick = $('#aaDetailViewCanvas').createGradient({ + x1: 50, y1: 50, + x2: 50, y2: 50, + r1: 10, r2: 30, + c1: 'rgba(100, 50, 0,0)', + c2: 'rgb(126, 187, 83)' + }); + clickedPin.fillStyle = radialAfterClick; + $scope.showAnnotation(selectedPinData, true, true, false); + } + else { + $scope.activePinArray = []; + $scope.activePinArray.push(clickedPin.name); + var radial = $('#aaDetailViewCanvas').createGradient({ + x1: 50, y1: 50, + x2: 50, y2: 50, + r1: 10, r2: 30, + c1: 'rgba(100, 50, 0,0)', + c2: 'rgb(216, 216, 216)' + }); + + + $('#aaDetailViewCanvas').setLayers({ + fillStyle: radial, + }).drawLayers(); + + //change the head color to green + var radialAfterClick = $('#aaDetailViewCanvas').createGradient({ + x1: 50, y1: 50, + x2: 50, y2: 50, + r1: 10, r2: 30, + c1: 'rgba(100, 50, 0,0)', + c2: 'rgb(126, 187, 83)' + }); + + clickedPin.fillStyle = radialAfterClick; + $scope.showAnnotation(selectedPinData, false, true, false); + + } + + } + + }).drawLayers(); + } + + + $scope.getMousePos = function (evt) { + + return { + x: Math.round(evt.pageX - $('#canvasDiv').offset().left), + y: Math.round(evt.pageY - $('#canvasDiv').offset().top) + } + } + + $scope.removePin = function (canvasId, pinId) { + + var pinName = 'Pin_' + pinId; + var pinArcName = 'PinArc_' + pinId; + $('#' + canvasId).removeLayer(pinName).drawLayers(); + $('#' + canvasId).removeLayer(pinArcName).drawLayers(); + + $scope.removeSpeechBubble(); + + //$rootScope.isSliderChanged = true; + //$('#aaDetailViewCanvas').removeLayers(); + } + + $rootScope.$on('annotationToolEvent', function (event, data) { + $('#editstylebackgroundcolor .minicolors >.minicolors-swatch > .minicolors-swatch-color').css("background-color", "rgb(255,255,255)") + $('#editstylebackgroundcolor .minicolors >.minicolors-panel > .minicolors-grid >.minicolors-picker').css({ "top": "145px", "left": "4px" }); + $('#outlineColor .minicolors >.minicolors-swatch > .minicolors-swatch-color').css("background-color", "rgb(0,0,0)") + $('#outlineColor .minicolors >.minicolors-panel > .minicolors-grid >.minicolors-picker').css({ "top": "145px", "left": "4px" }); + + $("#canvas").css("display", "block"); + $("#canvasPaint").css("display", "block"); + $rootScope.onDrawingCanvasClick(); + $rootScope.FreeStylePaint(); + }); + + $rootScope.loadSearchData = function () { + + //$("#termList").find("option").css({ "background-color": "#ffffff", "color": "#000000" }); + var imageId = $rootScope.imageId; + var promise = ModuleService.getTermTextDataForAAImage(imageId) + .then( + function (response) { + + $scope.AAPinTermData = response.data.PinTermData.TermData; + + $rootScope.isLoading = false; + $('#setting-spinner').css('visibility', 'hidden'); + + $scope.pinTermData = []; + var primaryLexicon = $rootScope.lexiconLanguageArray[0].id; + $scope.matchedLanguageTermData = new jinqJs() + .from($scope.AAPinTermData) + .where('_LanguageId == ' + primaryLexicon) + .select(); + var sortedTermTextArray = []; + for (var i = 0; i < $scope.matchedLanguageTermData.length; i++) { + sortedTermTextArray.push($scope.matchedLanguageTermData[i]._TermText); + sortedTermTextArray.sort(); + } + + for (var i = 0; i <= sortedTermTextArray.length - 1; i++) { + for (var j = 0; j <= $scope.matchedLanguageTermData.length - 1; j++) { + if ($scope.matchedLanguageTermData[j]._TermText == sortedTermTextArray[i]) { + $scope.pinTermData.push({ "LanguageId": $scope.matchedLanguageTermData[j]._LanguageId, "TermNumber": $scope.matchedLanguageTermData[j]._TermNumber, "TermTxt": $scope.matchedLanguageTermData[j]._TermText }); + break; + } + } + } + + + $scope.$watch('$scope.pinTermData', function (newValue, oldValue, scope) { + + if (($('#termlistfilter').html() != "")) + + $('#termlistfilter').empty(); + if ($scope.pinTermData.length > 0) { + $timeout(function () { + console.log('pinTermData= ' + $scope.pinTermData.length); + $('#termList').empty(); + $('#termlistfilter').empty(); + for (var j = 0; j < $scope.pinTermData.length; j++) { + var $el = $('
  • ' + $scope.pinTermData[j].TermTxt + '
    • ').appendTo('#termlistfilter') + //var $el = $('
  • ' + $scope.pinTermData[j].TermTxt + '
    • ').appendTo('#termlistfilter') + $compile($el)($scope); + var $selectedOptions = $('').appendTo("#termList") + + $compile($selectedOptions)($scope); + + $("#AABodySystems").empty(); + $("#bodySystems").css("display", "none"); + $("#AABodySystems").css("display", "block"); + $("#bodySystemList li a").each(function (key, value) { + var $systemOptions = $('').appendTo("#AABodySystems") + $compile($systemOptions)($scope); + }); + } + }, 500); + } + }) + }, + function (error) { + // handle errors here + console.log(' error: ' + error.statusText); + } + ) + } + + + + + $scope.$on('listManagerEvent', function (event, data) { + + $("#viewName").empty(); + + var currentView = $rootScope.getLocalStorageValue("currentViewTitle"); + var viewNmeHtml = '' + $('#viewName').append(viewNmeHtml); + //$("#viewName").append(""); + $rootScope.isLoading = false; + $('#spinner').css('visibility', 'hidden'); + + if ($rootScope.bodySystemSeletedId == null) { + + $rootScope.loadSearchData(); + } + else { + + $rootScope.refreshTermListOnAASystemSelection($rootScope.bodySystemSeletedId); + } + $timeout(function () { + $("#totalTerms").empty(); + $("#totalTerms").html("" + $("#termList option").length + " Structures"); + }, 1000); + }); + + + + $rootScope.refreshTermListOnAASystemSelection = function (bodySystemId) { + $rootScope.bodySystemSeletedId = bodySystemId; + $('#termList').empty(); + var bodySystemName = $("#AABodySystems #" + bodySystemId).val(); + if (bodySystemName == "All") { + for (var j = 0; j <= $scope.pinTermData.length - 1; j++) { + var $selectedOptions = $('').appendTo("#termList") + + $compile($selectedOptions)($scope); + } + $("#totalTerms").empty(); + $("#totalTerms").html("" + $("#termList option").length + " Structures"); + } + else { + var imageId = $rootScope.imageId; + $scope.pinDataUrl = "aa_dat_pinterm_" + imageId; + $rootScope.bodySystemTermArray = []; + $rootScope.sortedListArray = []; + $rootScope.duplicateListArray = []; + $.ajax({ + url: '~/../content/data/json/aa/aa_pinterm/' + $scope.pinDataUrl + '.json', + type: 'GET', + dataType: "json", + async: false, + success: function (result) { + $(result.PinTermData.TermData).each(function (key, value) { + $rootScope.bodySystemTermArray.push({ "termNumbr": result.PinTermData.TermData[key]._TermNumber, "text": result.PinTermData.TermData[key]._TermText, "language": result.PinTermData.TermData[key]._LanguageId }); + }); + for (var i = 0; i <= $scope.aaPinData.length - 1; i++) { + if ($scope.aaPinData[i]._BodySystemName.toLowerCase() == bodySystemName.toLowerCase()) { + for (var j = 0 ; j <= $rootScope.bodySystemTermArray.length - 1; j++) { + if ($scope.aaPinData[i]._TermId == $rootScope.bodySystemTermArray[j].termNumbr) { + if ($rootScope.bodySystemTermArray[j].language == $rootScope.lexiconLanguageArray[0].id) { + console.log($rootScope.bodySystemTermArray[j].text); + $rootScope.duplicateListArray.push({ "title": $rootScope.bodySystemTermArray[j].text, "id": $rootScope.bodySystemTermArray[j].termNumbr }); + } + } + } + } + } + var temp = []; + for (var i = 0; i <= $rootScope.duplicateListArray.length - 1; i++) { + var termID = $rootScope.duplicateListArray[i].id; + if ($.inArray(termID, temp) == -1) { + temp.push(termID); + $rootScope.sortedListArray.push({ "title": $rootScope.duplicateListArray[i].title, "id": termID }); + } + } + + for (var i = 0; i <= $rootScope.sortedListArray.length - 1; i++) { + + for (j = i + 1; j <= $rootScope.sortedListArray.length - 1; j++) { + + if ($rootScope.sortedListArray[i].title.substr(0, 1) > $rootScope.sortedListArray[j].title.substr(0, 1)) { + + var termText = $rootScope.sortedListArray[i].title; + var termNumbr = $rootScope.sortedListArray[i].termNumbr; + var termLanguage = $rootScope.sortedListArray[i].language; + + $rootScope.sortedListArray[i].title = $rootScope.sortedListArray[j].title; + $rootScope.sortedListArray[i].termNumbr = $rootScope.sortedListArray[j].termNumbr; + $rootScope.sortedListArray[i].language = $rootScope.sortedListArray[j].language; + + $rootScope.sortedListArray[j].title = termText; + $rootScope.sortedListArray[j].termNumbr = termNumbr; + $rootScope.sortedListArray[j].language = termLanguage; + } + } + } + + for (var j = 0; j <= $rootScope.sortedListArray.length - 1; j++) { + var $selectedOptions = $('').appendTo("#termList") + $compile($selectedOptions)($scope); + } + } + }); + $("#totalTerms").empty(); + $("#totalTerms").html("" + $("#termList option").length + " Structures"); + } + } + $scope.GetAnnotationBasedOnActualTermNo = function (actualTermNo) { + + + var languageArray = $rootScope.lexiconLanguageArray; + + if ($scope.AAPinTermData != null || $scope.AAPinTermData != undefined) { + + $scope.matchedTermNoData = new jinqJs() + .from($scope.AAPinTermData) + .where('_TermNumber == ' + actualTermNo) + .select(); + + if ($scope.matchedTermNoData != null || $scope.matchedTermNoData != undefined) { + + for (var j = 0; j <= languageArray.length - 1; j++) { + + $scope.matchedLanguageTermNoData = new jinqJs() + .from($scope.matchedTermNoData) + .where('_LanguageId == ' + languageArray[j].id) + .select(); + var termText = $scope.matchedLanguageTermNoData[0]._TermText; + $scope.MultiLanguageAnnationArray.push(termText); + }; + } + } + } + + $rootScope.hidePins = function () { + $("#dropdownMenu221").addClass("aaSystemDisable"); + $rootScope.isLoading = true; + $('#spinner').css('visibility', 'visible'); + $scope.hideSpeechBubble(); + + $scope.isHidePinBtnClicked = true; + angular.forEach($scope.aaPinData, function (aaPinDataValue, aaPinDataKey) { + + var pinName = 'Pin_' + aaPinDataValue._PinId; + var pinArcName = 'PinArc_' + aaPinDataValue._PinId; + + $('#aaDetailViewCanvas').setLayer(pinName, { + visible: false // set to true instead to show the layer again + }).drawLayers(); + + $('#aaDetailViewCanvas').setLayer(pinArcName, { + visible: false // set to true instead to show the layer again + }).drawLayers(); + }) + + $rootScope.isLoading = false; + $('#spinner').css('visibility', 'hidden'); + $(".tooltip-custom").removeClass("btn-primary"); + $(".tooltip-custom").addClass("btn-black"); + $("#hidePinBtn").addClass("btn-primary"); + $("#hidePinBtn").removeClass("btn-black"); + } + + $scope.showAllPinsAfterHide = function (event) { + if ($("#dropdownMenu221").hasClass("aaSystemDisable")) { + $("#dropdownMenu221").removeClass("aaSystemDisable"); + } + $rootScope.isLoading = true; + $('#spinner').css('visibility', 'visible'); + $scope.isHidePinBtnClicked = false; + $rootScope.isshowAllPinsBtnAfterHideClicked = true; + if ($scope.selectedSystemName != null && $scope.selectedSystemName != undefined) { + + $scope.showSystemPins($scope.selectedSystemPinData, false); + + } else { + + $scope.showSystemPins($scope.aaPinData, false); + } + $scope.showSpeechBubble(); + $(".tooltip-custom").removeClass("btn-primary"); + $(".tooltip-custom").addClass("btn-black"); + $("#allPinBtn").addClass("btn-primary"); + $("#allPinBtn").removeClass("btn-black"); + if ($scope.isSliderChange == true) { + $scope.isSliderChange = false; + $scope.showAllPins(); + + } + }; + + + $scope.showSelectedPins = function () { + $("#dropdownMenu221").addClass("aaSystemDisable"); + $rootScope.isLoading = true; + $('#spinner').css('visibility', 'visible'); + + $scope.isHidePinBtnClicked = false; + + if ($scope.selectedSystemName != null && $scope.selectedSystemName != undefined) { + + $scope.showSystemPins($scope.selectedSystemPinData, true); + + } + else { + $scope.showSystemPins($scope.aaPinData, true); + + } + $scope.showSpeechBubble(); + $(".tooltip-custom").removeClass("btn-primary"); + $(".tooltip-custom").addClass("btn-black"); + $("#selectedPin").addClass("btn-primary"); + $("#selectedPin").removeClass("btn-black"); + + if ($scope.isSelectedPinBtnClickedAftrSliderCange == true) { + + for (var i = 0; i <= $scope.activePinArray.length - 1; i++) { + var pinName = $scope.activePinArray[i].split("_"); + var activePinName = 'Pin_' + pinName[1]; + var pinArcName = 'PinArc_' + pinName[1]; + $('#aaDetailViewCanvas').setLayer(activePinName, { + visible: true // set to true instead to show the layer again + }).drawLayers(); + $('#aaDetailViewCanvas').setLayer(pinArcName, { + visible: true // set to true instead to show the layer again + }).drawLayers(); + } + + } + + }; + + + $scope.showSystemPins = function (seletedSystemPinData, isShowSelectedPins) { + + if (isShowSelectedPins) { + + angular.forEach($scope.clickedPins, function (value, key) { + + seletedSystemPinData = new jinqJs() + .from(seletedSystemPinData) + .where('_PinId != ' + value.id) + .select(); + }) + angular.forEach($scope.clickedPins, function (value1, key1) { + + // if (aaPinDataValue._PinId != value.id) { + var pinName = 'Pin_' + value1.id; + var pinArcName = 'PinArc_' + value1.id; + + $('#aaDetailViewCanvas').setLayer(pinName, { + visible: true // set to true instead to show the layer again + }).drawLayers(); + + $('#aaDetailViewCanvas').setLayer(pinArcName, { + visible: true // set to true instead to show the layer again + }).drawLayers(); + // } + }) + + angular.forEach(seletedSystemPinData, function (aaPinDataValue, aaPinDataKey) { + + var pinName = 'Pin_' + aaPinDataValue._PinId; + var pinArcName = 'PinArc_' + aaPinDataValue._PinId; + + $('#aaDetailViewCanvas').setLayer(pinName, { + visible: false // set to true instead to show the layer again + }).drawLayers(); + + $('#aaDetailViewCanvas').setLayer(pinArcName, { + visible: false // set to true instead to show the layer again + }).drawLayers(); + }) + + } + + else { + angular.forEach(seletedSystemPinData, function (aaPinDataValue, aaPinDataKey) { + + var pinName = 'Pin_' + aaPinDataValue._PinId; + var pinArcName = 'PinArc_' + aaPinDataValue._PinId; + + $('#aaDetailViewCanvas').setLayer(pinName, { + visible: true // set to true instead to show the layer again + }).drawLayers(); + + $('#aaDetailViewCanvas').setLayer(pinArcName, { + visible: true // set to true instead to show the layer again + }).drawLayers(); + }) + } + + $rootScope.isLoading = false; + $('#spinner').css('visibility', 'hidden'); + + + } + $rootScope.isshowAllPinsBtnAfterHideClicked = true; + $scope.showItemsForSearch = function () { + if($rootScope.isshowAllPinsBtnAfterHideClicked == true){ + console.log('showItemsForSearch is called'); + //this check is for log only because we are writing length so need to check if its not null or undefined + + + $timeout(function () { + if (($scope.AAPinTermData != null || $scope.AAPinTermData != undefined) && ($scope.AAPinTermData.length > 0)) { + + $scope.IsSearchVisible = true; + document.getElementById("termlistfilter").style.display = "block"; + } + else { + $rootScope.loadSearchData(); + if ($scope.AAPinTermData.length > 0) { + $scope.showItemsForSearch(); + } + } + + if ($rootScope.isSearchInputClicked == true) { + $rootScope.isSearchInputClicked = false; + $rootScope.searchListArray = []; + $("#backdrop > #searchListDivAA > #termlistfilter > li").each(function (key, value) { + $rootScope.searchListArray.push({ "name": $(this).find("a").html(), "id": $(this).find("a").attr("id") }); + }); + + } + + }, 500); + } + } + + + $scope.HideSearchList = function () { + + $timeout(function () { + + $("#termlistfilter").css("display", "none"); + + + }, 1000); + + } + + $scope.highlightPinBasedOnSerachItem = function (id) { + $scope.searchItemId = id; + $scope.searchItemText = $("#" + id).text(); + $rootScope.searchSelectedText = $("#" + id).text(); + $('#termList option[selected="selected"]').prop("selected", false); + $('#termList option[value="' + $rootScope.searchSelectedText + '"]').prop("selected", true); + $("#termList").find("option").css({ "background-color": "#ffffff", "color": "#000000" }); + $('#termList option[value="' + $rootScope.searchSelectedText + '"]').css({ "background-color": "#3399FF", "color": "#ffffff" }); + + $("#termlistfilter li a").css({ "background-color": "#ffffff", "color": "#000000" }); + $("#termlistfilter li #" + $scope.searchItemId).css({ "background-color": "#3399FF", "color": "#ffffff" }); + $scope.searchFilter = $("#" + id).text(); + //selectedTermName.placeholder = $("#" + id).text(); + selectedTermName.value = $("#" + id).text(); + selectedTermName.placeholder = "search... "; + + //get data from pindata for this trem + + var pinDataForTerm = new jinqJs() + .from($scope.aaPinData) + .where("_TermId == " + $scope.searchItemId) + .select(); + + $scope.showAnnotation(pinDataForTerm, false, false, true); + // maintaing scroll position on selection of options in list manager. + var annotationTopPos = $(".common-drag").css("top").split("p"); + $("#canvasDiv").scrollTop(annotationTopPos[0]); + + $scope.IsSearchVisible = false; + } + + $rootScope.isShowHideButtonClicked = true; + $scope.ShowHideAnnotation = function () { + if ($rootScope.isShowHideButtonClicked == true) { + $rootScope.annotationArray = []; + $("#canvasDiv").find(".common-drag").each(function () { + var speechBubbleID = $(this).attr("id"); + var sppechBubbleId = $(this).attr("id").substring(12); + var b = $("#speechBubbleDraggedLine" + sppechBubbleId).css("display"); + var speechBubbleLineDispProp = $("#speechBubbleLine" + sppechBubbleId).css("display"); + var speechBubbleLineID = "speechBubbleLine" + sppechBubbleId; + var speechBubbleDraggedLineID = "speechBubbleDraggedLine" + sppechBubbleId; + $("#comment-box").addClass("btn-primary"); + $("#comment-box").removeClass("btn-black"); + + if (speechBubbleLineDispProp == "block") { + $rootScope.annotationArray.push({ "speechBuubleId": speechBubbleID, "speechBubbleLineId": speechBubbleLineID }); + } + else { + $rootScope.annotationArray.push({ "speechBuubleId": speechBubbleID, "speechBubbleLineId": speechBubbleDraggedLineID }); + } + }); + $rootScope.isShowHideButtonClicked = false; + for (var i = 0; i <= $rootScope.annotationArray.length - 1; i++) { + $("#" + $rootScope.annotationArray[i].speechBuubleId).css("display", "none"); + $("#" + $rootScope.annotationArray[i].speechBubbleLineId).css("display", "none"); + } + } + else { + $rootScope.isShowHideButtonClicked = true; + for (var i = 0; i <= $rootScope.annotationArray.length - 1; i++) { + $("#" + $rootScope.annotationArray[i].speechBuubleId).css("display", "block"); + $("#" + $rootScope.annotationArray[i].speechBubbleLineId).css("display", "block"); + } + + $("#comment-box").removeClass("btn-primary"); + $("#comment-box").addClass("btn-black"); + + } + } + $scope.activePinOnLayerChange = function () { + for (var i = 0; i <= $scope.activePinArray.length - 1; i++) { + var radialAfterClick = $('#aaDetailViewCanvas').createGradient({ + x1: 50, y1: 50, + x2: 50, y2: 50, + r1: 10, r2: 30, + c1: 'rgba(100, 50, 0,0)', + c2: 'rgb(126, 187, 83)' + }); + var clickedPin = $scope.activePinArray[i]; + $('#aaDetailViewCanvas').setLayer(clickedPin, { + fillStyle: radialAfterClick + }).drawLayers(); + + } + } + + $scope.activePinOnSliderChange = function () { + if ($scope.activePinArray.length == 1) { + for (var i = 0; i <= $scope.allPinDataArray.length - 1; i++) { + var activeArc = $scope.activePinArray[0].split("_"); + if ($scope.allPinDataArray[i] == activeArc[1]) { + var pinName = 'Pin_' + $scope.allPinDataArray[i]; + var pinArcName = 'PinArc_' + $scope.allPinDataArray[i]; + $('#aaDetailViewCanvas').setLayer(pinName, { + visible: true // set to true instead to show the layer again + }).drawLayers(); + $('#aaDetailViewCanvas').setLayer(pinArcName, { + visible: true // set to true instead to show the layer again + }).drawLayers(); + } + else { + var pinName = 'Pin_' + $scope.allPinDataArray[i]; + var pinArcName = 'PinArc_' + $scope.allPinDataArray[i]; + $('#aaDetailViewCanvas').setLayer(pinName, { + visible: false // set to true instead to show the layer again + }).drawLayers(); + $('#aaDetailViewCanvas').setLayer(pinArcName, { + visible: false // set to true instead to show the layer again + }).drawLayers(); + } + } + } + else { + var seletedSystemPinData; + angular.forEach($scope.activePinArray, function (value, key) { + var pinID = value.split("_"); + seletedSystemPinData = new jinqJs() + .from($scope.allPinDataArray) + .where('_PinId != ' + pinID[1]) + .select(); + }) + + angular.forEach(seletedSystemPinData, function (aaPinDataValue, aaPinDataKey) { + + var pinName = 'Pin_' + aaPinDataValue; + var pinArcName = 'PinArc_' + aaPinDataValue; + + $('#aaDetailViewCanvas').setLayer(pinName, { + visible: false // set to true instead to show the layer again + }).drawLayers(); + + $('#aaDetailViewCanvas').setLayer(pinArcName, { + visible: false // set to true instead to show the layer again + }).drawLayers(); + + }) + for (var i = 0; i <= $scope.activePinArray.length - 1; i++) { + var pinName = $scope.activePinArray[i].split("_"); + var activePinName = 'Pin_' + pinName[1]; + var pinArcName = 'PinArc_' + pinName[1]; + $('#aaDetailViewCanvas').setLayer(activePinName, { + visible: true // set to true instead to show the layer again + }).drawLayers(); + $('#aaDetailViewCanvas').setLayer(pinArcName, { + visible: true // set to true instead to show the layer again + }).drawLayers(); + } + } + } + $(document).ready(function () { + var $ua = navigator.userAgent; + if (($ua.match(/(iPod|iPhone|iPad|android)/i))) { + + var jspanelContainerWidth = $(".jsPanel-content").css("width"); + $(".jsPanel-content").css({ "width": "100%", "min-width": jspanelContainerWidth }); + $("#ImagePanel").css("width", "100%"); + + //hide pin button clicked + $("#hidePinBtn").removeAttr("onclick"); + $("#hidePinBtn").on("touchstart", function () { + var rootScope = angular.element(document.getElementById("aaDetailPageDiv")).scope(); + rootScope.$apply(function () { + rootScope.hidePins(event); + }); + }); + //selected pin button clicked + $("#selectedPin").removeAttr("onclick"); + $("#selectedPin").on("touchstart", function () { + console.log('showSelectedPins is called') + var scope = angular.element(document.getElementById("aaDetailPageDiv")).scope(); + scope.$apply(function () { + scope.showSelectedPins(event); + }); + }); + //all pin button clicked + $("#allPinBtn").removeAttr("onclick"); + $("#allPinBtn").on("touchstart", function () { + var scope = angular.element(document.getElementById("aaDetailPageDiv")).scope(); + scope.$apply(function () { + scope.showAllPinsAfterHide(event); + }); + }); + //comment-box button clicked + $("#comment-box").removeAttr("onclick"); + $("#comment-box").on("touchstart", function () { + var scope = angular.element(document.getElementById("aaDetailPageDiv")).scope(); + scope.$apply(function () { + scope.ShowHideAnnotation(event); + }); + }); + + } + + }); +}]); + + +function refreshTermListOnSystemSel(bodySystemId) { + var rootScope = angular.element(document.getElementById("aaDetailPageDiv")).scope(); + rootScope.$apply(function () { + rootScope.refreshTermListOnAASystemSelection(bodySystemId); + }); +} + + +function showSelectedSystemPins(event) { + console.log('OnBodySystem chnaged is called outside '); + var scope = angular.element(document.getElementById("aaDetailPageDiv")).scope(); + scope.$apply(function () { + scope.showSelectedSystemPins(event); + }); +} + +function hidePins(event) { + + var rootScope = angular.element(document.getElementById("aaDetailPageDiv")).scope(); + rootScope.$apply(function () { + rootScope.hidePins(event); + }); +} + +function showAllPins(event) { + + var scope = angular.element(document.getElementById("aaDetailPageDiv")).scope(); + scope.$apply(function () { + scope.showAllPinsAfterHide(event); + }); +} + +function onSearchAA(event) { + console.log('AA search is called') + var scope = angular.element(document.getElementById("aaDetailPageDiv")).scope(); + scope.$apply(function () { + scope.showItemsForSearch(); + }); +} + +function hideSearchList(event) { + console.log('AA hide search is called') + var scope = angular.element(document.getElementById("aaDetailPageDiv")).scope(); + scope.$apply(function () { + scope.HideSearchList(); + }); +} + +function onSearchItemSelection(id) { + + console.log('AA hide search is called'); + var scope = angular.element(document.getElementById("aaDetailPageDiv")).scope(); + scope.$apply(function () { + scope.highlightPinBasedOnSerachItem(id); + }); +} + +//function onListManagerTermSelection(event) { +// var scope = angular.element(document.getElementById("aaDetailPageDiv")).scope(); +// scope.isTermListOptionClicked = true; +// scope.$apply(function () { +// scope.highlightPinBasedOnSerachItem1(event); +// }); + +//} + + +function showHideAnnotation(event) { + + var scope = angular.element(document.getElementById("aaDetailPageDiv")).scope(); + scope.$apply(function () { + scope.ShowHideAnnotation(event); + }); +} + +function showSelectedPins(event) { + + console.log('showSelectedPins is called') + var scope = angular.element(document.getElementById("aaDetailPageDiv")).scope(); + scope.$apply(function () { + scope.showSelectedPins(event); + }); +} + + +function openModuleItemView(event) { + var scope = angular.element(document.getElementById("list-view")).scope(); + scope.isListViewButtonClicked = true; + scope.$apply(function () { + scope.openModuleItemView(event); + }); +} + +function openListViewModuleItem(event) { + + var scope = angular.element(document.getElementById("list-view")).scope(); + scope.isListViewButtonClicked = true; + scope.$apply(function () { + scope.openListViewModuleItem(event); + }); +} + +function openCurrentView(event) { + var scope = angular.element(document.getElementById("list-view")).scope(); + scope.isListViewButtonClicked = true; + scope.isOpenBtnClicked = true; + scope.$apply(function () { + scope.openModuleItemView(event); + }); + +} + +function onZoom(scope) { + + //$(".common-drag").remove(); + //$(".commonDot").remove(); + //$(".commonDraggedLine").remove(); + //var radial = $('#aaDetailViewCanvas').createGradient({ + // x1: 50, y1: 50, + // x2: 50, y2: 50, + // r1: 10, r2: 30, + // c1: 'rgba(100, 50, 0,0)', + // c2: 'rgb(216, 216, 216)' + //}); + //$('#aaDetailViewCanvas').setLayers({ + // fillStyle: radial, + //}).drawLayers(); + // scope.removePin(); + // scope.showAllPins(); + + + //6. Show all pins on AA opened item +} + diff --git a/400-SOURCECODE/AIAHTML5.Web/app/views/da/da-view.html b/400-SOURCECODE/AIAHTML5.Web/app/views/da/da-view.html index ee7a5c3..415dcc9 100644 --- a/400-SOURCECODE/AIAHTML5.Web/app/views/da/da-view.html +++ b/400-SOURCECODE/AIAHTML5.Web/app/views/da/da-view.html @@ -1,572 +1,571 @@ - - - - - - - -
    -
    -
    -
    -
    - -
    -
    - - -
    -
    - -
    - -
    -
    - -
    -
    - -
    -
    -
    -
    - -
    - -
    -
    Highlight Options
    - - -
    -
    - -
    -
    -
    Gender
    - - -
    - -
    -
    View
    - - -
    -
    - -
    - -
    - -
    -
    - - - -
    - - - - - -
    - - - -
    -
    -
    - -
    -
    -
    -
    -
    - - - -
    -
    - -
    -
    - -
    -
    - - -
    -
    - - - -
    -
    -
    -
    -
    -
    -
    -
    - - -
    - - - -
    -
    -
    -
    -
    -
    - - - - - - - - -
    - - - - - - - - - - - - - - - - + + + + + + + +
    +
    +
    +
    +
    + +
    +
    + + +
    +
    + +
    + +
    +
    + +
    +
    + +
    +
    +
    +
    + +
    + +
    +
    Highlight Options
    + + +
    +
    + +
    +
    +
    Gender
    + + +
    + +
    +
    View
    + + +
    +
    + +
    + +
    + +
    +
    + + + +
    + + + + + +
    + + + +
    +
    +
    + +
    +
    +
    +
    +
    + + + +
    +
    + +
    +
    + +
    +
    + + +
    +
    + + + +
    +
    +
    +
    +
    +
    +
    +
    + + +
    + + + +
    +
    +
    +
    +
    +
    + + + + + + + + +
    + + + + + + + + + + + + + + +