atlas-anatomy-detail.html 10 KB
<style>
    .canvas-annotationStyle {
        display: none;
        background-color: transparent;
        z-index: 12001;
        position: absolute;
        left: 0;
        right: 0;
    }

    .canvas-annotationStyle1 {
        display: none;
        background-color: transparent;
        z-index: 12000;
        position: absolute;
        left: 0;
        right: 0;
    }

    /*.active {
        margin-left: 15px !important;
    }*/

    .tools1 {
        left: -100px;
    }

    .tooltip-custom + .tooltip > .tooltip-inner {
        background-color: #fff;
        border: 1px solid #000;
        color: #000;
        border-radius: 0;
    }

    .tooltip-custom + .tooltip > .tooltip-arrow {
        display: none;
    }


    .custom-tooltip {
        background-color: #333;
        border: 0 none;
        color: #fff !important;
        left: -52px;
        /*opacity: 0.9;*/
        padding: 7px;
        position: absolute;
        text-align: center;
        top: 45px;
        width: 120px;
        display: none;
        z-index: 10000;
        border: 1px solid #000;
        color: #000;
        border-radius: 0;
    }

    .pad0 {
        padding: 0;
    }
    .disableAnnotationText {
        background: #4b4b4b;
        border-color: #3f3f3f !important;
    }
</style>
<div id="aaDetailPageDiv" class="ng-scope" ng-controller="TileViewListController">
    <div class="tools pull-left" style="top:44px;">
        <div class="toggle-icon toggleBar toggleHeadingButton" id="sideBarToggle" onclick="SideBarToggleAA(event)" data-toggle="tooltip" data-placement="top" title="Show/Hide Sidebar"></div>
        <div class="sprit-icon">
            <div class="col-sm-6"><button onclick="hidePins(event)" id="hidePinBtn" style="background-position: 10px 5px;" class="btn btn-black btn-sm tooltip-custom" data-toggle="tooltip" data-placement="bottom" title="Hide Pins"></button> </div>
            <div class="col-sm-6"><button class="btn btn-black btn-sm pull-right tooltip-custom" id="selectedPin" style="background-position: 15px -24px;"  onclick="showSelectedPins(event)" data-toggle="tooltip" data-placement="bottom" title="Show Selected Pins"></button></div>
            <div class="col-sm-6"><button class="btn btn-primary btn-sm marginTop5 tooltip-custom" id="allPinBtn" style="background-position: 12px -105px;" onclick="showAllPins(event)" data-toggle="tooltip" data-placement="bottom" title="Show All Pins in System(s)"></button></div>
            <div class="col-sm-6">
                <div class="custom-tooltip">Select System</div>
                <button class="btn btn-black btn-sm pull-right marginTop5 dropdown-toggle" type="button" id="dropdownMenu221" style="background-position: 10px -49px;" onclick="systemChange(event)"></button>
                <ul class="tool-dropdown-menu" id="bodySystemList" style="height:270px; overflow:auto;z-index: 100000">
                    <li><a id="0" href="#" title="Current Structure" onclick="showSelectedSystemPins(event)">All</a></li>
                    <li role="separator" class="divider"></li>
                    <li class="disabledSelectedSystem"><a id="1" href="#" title="Cardiovascular" onclick="showSelectedSystemPins(event)">Cardiovascular</a></li>
                    <li class="disabledSelectedSystem"><a id="2" href="#" title="Digestive" onclick="showSelectedSystemPins(event)">Digestive</a></li>
                    <li class="disabledSelectedSystem"><a id="3" href="#" title="Endocrine" onclick="showSelectedSystemPins(event)">Endocrine</a></li>
                    <li class="disabledSelectedSystem"><a id="4" href="#" title="Immune" onclick="showSelectedSystemPins(event)">Immune</a></li>
                    <li class="disabledSelectedSystem"><a id="5" href="#" title="Integumentary" onclick="showSelectedSystemPins(event)">Integumentary</a></li>
                    <li class="disabledSelectedSystem"><a id="6" href="#" title="Lymphatic" onclick="showSelectedSystemPins(event)">Lymphatic</a></li>
                    <li class="disabledSelectedSystem"><a id="7" href="#" title="Muscular" onclick="showSelectedSystemPins(event)">Muscular</a></li>
                    <li class="disabledSelectedSystem"><a id="8" href="#" title="Nervous" onclick="showSelectedSystemPins(event)">Nervous</a></li>
                    <li class="disabledSelectedSystem"><a id="9" href="#" title="Reproductive" onclick="showSelectedSystemPins(event)">Reproductive</a></li>
                    <li class="disabledSelectedSystem"><a id="10" href="#" title="Respiratory" onclick="showSelectedSystemPins(event)">Respiratory</a></li>
                    <li class="disabledSelectedSystem"><a id="11" href="#" title="Skeletal" onclick="showSelectedSystemPins(event)">Skeletal</a></li>
                    <li class="disabledSelectedSystem"><a id="12" href="#" title="Urinary" onclick="showSelectedSystemPins(event)">Urinary</a></li>
                </ul>
               </div>
            <div class="col-sm-12" >
                <button onclick="showHideAnnotation(event)" class="btn btn-primary btn-sm marginTop5 btn-block" id="comment-box" name="showAnnotationText" style="background-position: 28px -73px;width:80px;" title="Show/Hide Structure Name Boxes"></button> 
            </div>
        </div>
        <div class="pips-slider" style="margin-top:125px">
            <h3>Zoom <i class="fa fa-search-plus"></i></h3>
            <div class="slider" id="Vslider" style="margin:40px 0 30px 20px;height:150px"></div>
        </div>
    </div>

    <div class="main2">
        <div class="col-sm-12 stickey-area">
            <div class="breadcrumb">
                <div class="">
                    <div class="input-group col-sm-8 col-xs-7 col-md-10 pull-left">             
                        <input type="text" class="form-control input-sm pull-left" id="selectedTermName" onclick="onSearchAA(event)" ondblclick="onSearchAA(event)" onblur="hideSearchList(event)" ng-model="searchFilter" placeholder=" search...">

                        <div id="backdrop" ng-show="IsSearchVisible">
                            <div id="searchListDivAA" class="col-sm-12 col-xs-12 col-md-12 col-lg-12 pull-left">
                                <ul id="termlistfilter" class="form-control dropdown-menu" style="height:90px;width:100%;overflow-y:scroll;position:absolute;display:none;z-index:60001;"></ul>
                            </div>
                        </div>
                    </div>
                    &nbsp;
                    <!-- Single button -->
                    <div class="btn-group pull-left" style="vertical-align:top;">

                        <button type="button" style="padding: 5px 10px 4px 10px !important;border: none;" class="btn btn-success btn-sm" id=btnSearchAA onclick="onSearchAA(event)" onblur="hideSearchList(event)">
                            <i class="fa fa-caret-down" style="font-size:20px;"></i>
                        </button>
                        </div>
                    <div class="btn-group open" id="da-body-nav">
                        <button id="navigatorBtn" type="button" style="padding:0px 0px 10px 1px !important;background-color:rgba(255,255,255,0.0); border:none;" class="btn btn-primary dropdown-toggle btn-sm">
                            <img src="~/../content/images/DA/navigator-view.png" style="height:30px; width:50px" />
                        </button>

                        <div class="dropdown-menu" id="navigatorDiv" style="min-height: auto; min-width: auto; margin-left: 15px !important;">
                            <div id="containment-wrapper" align="center" style="min-width:auto;height:119px; ">
                                <img id="navimg" alt="" />
                                <div id="draggable1" class="draggable ui-widget-content" ng-mouseup="ScrollCanvasDiv()" ng-style="dragdivposition">
                                </div>
                            </div>

                        </div>
                    </div>


                </div>
            </div>
        </div>
        <div class="col-sm-12">
            <div class="container-fluid">
                <div class="row">

                    <div class=" col-sm-12 img-thumbnail canvasDivClass" id="canvasDiv" style="overflow: scroll;">
                        <canvas id="canvasPaint" ng-click="FreeStylePaint($event)" width="2277" height="725" class="canvas-annotationStyle1"></canvas>
                        <canvas id="canvas"  width="2277" height="725" class="canvas-annotationStyle"></canvas>

                        <img id="modItemImage" alt="" title="" style="left:0px;top:0px;position:absolute">                    
                    </div>
                </div>
            </div>


        </div>

    </div>
</div>
<script>
    $(window).load(function () {
        $(".stickey-area").sticky();
    });
</script>
<script>
    $(".tooltip-custom").tooltip({
        tooltipClass: 'customTooltip'
    });
</script>
<script>
    $(function () {
        var $ua = navigator.userAgent;
        if (($ua.match(/(iPod|iPhone|iPad|android)/i))) {

        }
        else
        {
            $("#dropdownMenu221").mouseover(function () {
                $(".custom-tooltip").css("display", "block");
            });
            $("#dropdownMenu221").mouseout(function () {
                $(".custom-tooltip").css("display", "none");
            });
        }
        
    });
</script>

<script>
    //var isSideBarBtnClicked = true;
    $(document).ready(function () {
    
        $("#bodySystemList li:nth-child(1)").addClass("activeAASystemSelect");
        $('[data-toggle="tooltip"]').tooltip();
        // $("#sideBarToggle").click(function () {
        //     if (isSideBarBtnClicked == true) {
        //         $(".main2").addClass("active");
        //         $(".tools").addClass("tools1");
        //         isSideBarBtnClicked = false;

        //     }
        //     else {
        //         $(".main2").removeClass("active");
        //         $(".tools").removeClass("tools1");
        //         isSideBarBtnClicked = true;
        //     }

        // });
    });
</script>


<script>
    $(function () {
        $("#draggable").draggable();
    });
</script>