Added set next slide dialog and wireup

2017-07-02 20:08:55 -07:00 · 2017-07-02 20:08:55 -07:00 · 6c95480ee0
--- a/Default.aspx
+++ b/Default.aspx
@ -151,11 +151,11 @@
    <script src="sdk/wwtsdk.js"></script>
    <script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap<%=DotMin %>"></script>
-    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular<%=DotMin %>"></script>
-    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular-touch<%=DotMin %>"></script>
-    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular-route<%=DotMin %>"></script>
-    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular-cookies<%=DotMin %>"></script>
-    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular-animate<%=DotMin %>"></script>
+    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular<%=DotMin %>"></script>
+    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular-touch<%=DotMin %>"></script>
+    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular-route<%=DotMin %>"></script>
+    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular-cookies<%=DotMin %>"></script>
+    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular-animate<%=DotMin %>"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular-strap/2.3.8/angular-strap<%=DotMin %>"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular-strap/2.3.8/angular-strap.tpl<%=DotMin %>"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel<%=DotMin %>"></script>
--- a/controllers/tabs/CurrentTourController.js
+++ b/controllers/tabs/CurrentTourController.js
@ -13,6 +13,8 @@
    $scope.init = function (curTour) {
        tourEdit = $scope.tourEdit = wwtlib.WWTControl.singleton.tourEdit;
        $rootScope.currentTour = $scope.tour = tour = tourEdit.get_tour();
+        console.log('looking for a nextSlideCallback!', tourEdit);
+        initSetNextSlideModal();
        tourEdit.tourEditorUI.editTextCallback = function (textObject, onFinished) {
            $scope.editText = { textObject: textObject, onFinished: onFinished };
            $('#editTourText').click();
@ -46,7 +48,7 @@
                showTourSlides();
            }
        });
-        if (mainScope.autoEdit) {
+        if (mainScope.autoEdit || (util.getQSParam('edit') && !!util.getQSParam('debug'))) {
            showSlides();
            tour._editMode = true;
            tourEdit.pauseTour();
@ -57,6 +59,7 @@
                e.returnValue= "You have unsaved changes that will be lost if you proceed. Click cancel to save changes."
            }
        });
+        
    };


@ -272,7 +275,9 @@
        //$('#ribbon,.top-panel,.context-panel,.layer-manager').removeClass('hide').fadeIn(400);
        console.log(tourEdit.playing);
        setTimeout(function () {
-            $rootScope.stopScroller = $('.scroller').jScrollPane({ scrollByY: 155, horizontalDragMinWidth: 155 }).data('jsp');
+          $rootScope.stopScroller = $('.scroller')
+            .css('overflow-x','auto')
+            .jScrollPane({ scrollByY: 155, horizontalDragMinWidth: 155 }).data('jsp');
            $(window).on('resize', function () {
                
                $rootScope.stopScroller.reinitialise();
@ -449,6 +454,64 @@
            }
        }
    };
+    var initSetNextSlideModal = function () {
+      tourEdit.nextSlideCallback = tourEdit.tourEditorUI.nextSlideCallback = function (selectDialog, onFinished) {
+        
+        var okbutton = function (ok) {
+          var dialog = nextSlideModal.dialog;
+          console.log(dialog, selectDialog);
+          if (ok) {            
+            if (dialog._next) {
+              dialog.set_id('Next');
+            }
+            onFinished(selectDialog);
+          } 
+        }
+
+        var nextSlideModal = $scope.$new({});
+        nextSlideModal.dialog= selectDialog;
+        nextSlideModal.dialog_ok = okbutton;
+        nextSlideModal.selectedNextSlide = null;
+        nextSlideModal.tourStops = $scope.tourStops;
+        nextSlideModal.slideClick = function (id) {
+          nextSlideModal.selectedNextSlide = id;
+          nextSlideModal.dialog.set_id(id);
+          nextSlideModal.dialog._linkSlide = true;
+          nextSlideModal.dialog._return = false;
+          nextSlideModal.dialog._next = false;
+        }
+        nextSlideModal.checkChange = function (key) {
+          var setters = {
+            _linkSlide: 'linkToSlide',
+            _next: 'next',
+            _return: 'returnCaller'
+          };
+          console.log(nextSlideModal.tourStops);
+          var v = selectDialog[key];
+          //nextSlideModal.$applyAsync(function () {
+            selectDialog._next = false;
+            selectDialog._return = false;
+            selectDialog._linkSlide = false;
+            selectDialog['set_' + setters[key]](v);
+          
+          //});
+          console.log(key, selectDialog);
+        }
+        var nsModal = $modal({
+          scope: nextSlideModal,
+          templateUrl: 'views/modals/setnextslide.html',
+          show: true,
+          content:'',
+          placement: 'center'
+        });
+        setTimeout(function () {
+          console.log(nextSlideModal);
+          $('.scroller.next-slide').
+            css('overflow-x', 'auto').
+            jScrollPane({ scrollByY: 155, horizontalDragMinWidth: 155 }).data('jsp');
+        }, 400);
+      };
+    };
 }]);


--- a/css/mixins.less
+++ b/css/mixins.less
@ -0,0 +1,22 @@
+
+
+//mixins
+#gradient {
+  .vertical-four-colors(@start-color: #00b3ee; @second-color: #7a43b6; @color-stop2: 33%; @third-color: #7a43b6; @color-stop3: 66.6%; @end-color: #c3325f) {
+    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@start-color), color-stop(@color-stop2, @second-color),color-stop(@color-stop3, @third-color), to(@end-color));
+    background-image: -webkit-linear-gradient(@start-color, @second-color @color-stop2, @third-color @color-stop3, @end-color);
+    background-image: -moz-linear-gradient(top, @start-color, @second-color @color-stop2, @third-color @color-stop3, @end-color);
+    background-image: linear-gradient(@start-color, @second-color @color-stop2, @third-color @color-stop3, @end-color);
+    background-repeat: no-repeat;
+    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@second-color),argb(@end-color)));
+  }
+
+  .ellipse(@startColor: #3778c5, @startPos: 0%, @endColor: #1a2745, @endPos: 100%) {
+    background: -moz-radial-gradient(center, ellipse cover, @startColor @startPos, @endColor @endPos); /* FF3.6+ */
+    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(@startPos, @startColor), color-stop(@endPos,@endColor)); /* Chrome,Safari4+ */
+    background: -webkit-radial-gradient(center, ellipse cover, @startColor @startPos, @endColor @endPos); /* Chrome10+,Safari5.1+ */
+    background: -o-radial-gradient(center, ellipse cover, @startColor @startPos, @endColor @endPos); /* Opera 12+ */
+    background: -ms-radial-gradient(center, ellipse cover, @startColor @startPos, @endColor @endPos); /* IE10+ */
+    background: radial-gradient(ellipse at center, @startColor @startPos, @endColor @endPos);
+  }
+}
--- a/css/tours.less
+++ b/css/tours.less
--- a/css/variables.less
+++ b/css/variables.less
@ -1,3 +1,5 @@
+@import 'mixins.less';
+
@brand-primary:         rgb(3,20,34);
@brand-success:         #3CB521;
@brand-warning:         #D47500;
@ -36,17 +38,6 @@


 // our own custom mixin to make the ribbon look like the windows client ribbon
-#gradient{
-    
-  .vertical-four-colors(@start-color: #00b3ee; @second-color: #7a43b6; @color-stop2: 33%; @third-color: #7a43b6; @color-stop3: 66.6%; @end-color: #c3325f) {
-    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@start-color), color-stop(@color-stop2, @second-color),color-stop(@color-stop3, @third-color), to(@end-color));
-    background-image: -webkit-linear-gradient(@start-color, @second-color @color-stop2, @third-color @color-stop3, @end-color);
-    background-image: -moz-linear-gradient(top, @start-color, @second-color @color-stop2, @third-color @color-stop3, @end-color);
-    background-image: linear-gradient(@start-color, @second-color @color-stop2, @third-color @color-stop3, @end-color);
-    background-repeat: no-repeat;
-    
-    } 
-}

 input[type=file]{
    visibility:collapse;height:0;width:0;
@ -70,8 +61,8 @@ input[type=file]{
 }

 .boxhilite {
-	box-shadow: inset 0 1px 4px lighten(#394558, 10%), 0 0 8px lighten(#18526b, 15%);
-	border-color: #62779d;
+  box-shadow: inset 0 1px 4px lighten(#394558, 10%), 0 0 8px rgba(62,157,206,1);
+  border-color: rgba(128,168,220,.99);
 }

 .indent{
--- a/css/webclient.less
+++ b/css/webclient.less
--- a/views/modals/setnextslide.html
+++ b/views/modals/setnextslide.html
@ -0,0 +1,88 @@
+<div class="modal fade" tabindex="-1" role="dialog" id="nextSlideModal">
+    <div class="modal-dialog" >
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 localize="Select Link Navigation"></h5>
+          </div>
+            <div class="modal-body">
+              <div class="row" style="margin:5px 0">
+                <div class="col-md-4 checkbox">
+                  <label data-ng-class="{checked:dialog._linkSlide}">
+                    <input type="checkbox" ng-model="dialog._linkSlide" ng-change="checkChange('_linkSlide')" />
+                    <span localize="Link to Slide (select below)"></span>
+                  </label>
+                </div>
+                <div class="col-md-4 checkbox">
+                  <label data-ng-class="{checked:dialog._next}">
+                    <input type="checkbox" ng-model="dialog._next" ng-change="checkChange('_next')" />
+                    <span localize="Link to Next Slide"></span>
+                  </label>
+                </div>
+                <div class="col-md-3 checkbox">
+                  <label data-ng-class="{checked:dialog._return}">
+                    <input type="checkbox" ng-model="dialog._return" ng-change="checkChange('_return')" />
+                    <span localize="Return to Caller"></span>
+                  </label>
+                </div>
+              </div>
+              <div class="row">
+                <div class="col-md-12" style="padding:15px 0 0 0">
+
+                  <div class="tour-stops">
+                    <div class="scroller next-slide" data-jquery-scrollbar>
+                      <div class="stops-container">
+                        <div class="stop-arrow" ng-repeat="stop in tourStops">
+                          <div class="transition-choice {{stop.transHover ? 'active' : ''}}">
+                            
+                            <div class="right-arrow choice" ng-if="stop.transitionType==0">
+                              <i class="arrow-line"></i><i class="arrow-head"></i>
+                            </div>
+                           
+                            <div class="crossfade choice" ng-if="stop.transitionType==1">
+                              <span class="shape"></span>
+                            </div>
+                            
+                            <div class="abrupt choice" ng-if="stop.transitionType==2">
+                              <span class="shape"></span>
+                            </div>
+                            
+                            <div class="fadeout-in choice" ng-if="stop.transitionType==3">
+                              <span class="shape left"></span>
+                              <span class="shape right"></span>
+                            </div>
+                            
+                            <div class="fadein choice" ng-if="stop.transitionType==4">
+                              <span class="shape"></span>
+                            </div>
+                            
+                            <div class="fadeout choice" ng-if="stop.transitionType==5">
+                              <span class="shape"></span>
+                            </div>
+
+                          </div>
+                          <div class="thumbwrap">
+                            <span class="master-slide" ng-if="stop.isMaster">M</span>
+                            <span class="slide-number">{{$index}}</span>
+                            <div class="stop-thumb thumbnail {{dialog._linkSlide && stop._id == selectedNextSlide ? 'active':''}}" ng-click="slideClick(stop._id)">
+                              <img ng-src="{{stop.thumb.src}}" alt="{{stop.description}}" />
+                              <label class="slide-label" data-title="{{stop.description}}" placement="bottom" container="body"></label>
+                              <label class="duration" contenteditable="false"></label>                              
+                            </div>
+                          </div>
+                        </div>
+                        <div class="stop-arrow">
+                          <div class="transition-choice invisible"></div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="modal-footer" style="border: none">
+               <a class="btn {{dialog._linkSlide && !selectedNextSlide? 'disabled':''}}" ng-click="dialog_ok(true);$hide()" localize="OK" ></a>
+               <a class="btn" ng-click="dialog_ok(false);$hide()" localize="Cancel"></a>
+            </div>
+        </div>
+    </div>
+</div>
--- a/webclient.csproj
+++ b/webclient.csproj
@ -297,6 +297,7 @@
    <Content Include="css\fonts\tinymce.json" />
    <Content Include="css\fonts\tinymce.ttf" />
    <Content Include="css\fonts\tinymce.woff" />
+    <Content Include="css\mixins.less" />
    <None Include="Scripts\jquery-2.1.4.intellisense.js" />
    <Content Include="Scripts\bootstrap.js" />
    <Content Include="Scripts\bootstrap.min.js" />
@ -319,7 +320,7 @@
    <Content Include="views\layer-manager.html" />
    <Content Include="views\modals\finder-scope.html" />
    <Content Include="views\modals\intro.html" />
-    <Content Include="views\modals\tour-uploader.html" />
+    <Content Include="views\modals\setnextslide.html" />
    <Content Include="views\modals\loading.html" />
    <Content Include="views\modals\mobile-explore.html" />
    <Content Include="views\modals\mobile-layer-manager.html" />
@ -329,6 +330,7 @@
    <Content Include="views\modals\mobile-tours.html" />
    <Content Include="views\modals\mobile-view.html" />
    <Content Include="views\modals\open-item.html" />
+    <Content Include="views\modals\tour-uploader.html" />
    <Content Include="views\popovers\observing-time.html" />
    <Content Include="views\popovers\property-panel.html" />
    <Content Include="views\popovers\shareplace.html" />