* add modal

module/block/view/guide.html.php

@@ -61,12 +61,18 @@ $(function()
             var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop || 0;
             localStorage.setItem('visionPosition', scrollTop);
         }
+        else
+        {
+            localStorage.getItem('visionPosition') && localStorage.removeItem('visionPosition');
+        }
 
     })
-    if(localStorage.getItem('visionPosition'))
+    if(localStorage.getItem('visionPosition') && Number(localStorage.getItem('visionPosition')))
     {
+        var scrollTopNum = Number(localStorage.getItem('visionPosition'));
+        document.getElementById('guideBody').scrollTo = 0;
         $('#visionSwitch > a').click();
-        localStorage.removeItem('visionPosition');
+        window.scrollTo(0, scrollTopNum);
     }
     else
     {
@@ -74,14 +80,6 @@ $(function()
     }
 
 });
-
-window.onunload  = function () {
-    if(!localStorage.getItem('visionPosition'))
-    {
-        return;
-    }
-    document.getElementById('guideBody').scrollTo = Number(localStorage.getItem('visionPosition'));
-}
 </script>
 
 <div class="panel-body" id="guideBody">

module/block/view/visionswitch.html.php

@@ -9,24 +9,87 @@
 .vision-img {height: 118px; width: 100%; background-size: 100% !important;}
 .vision-title {font-size: 14px; color: #0B0F18; padding: 0 8px;}
 .vision-text {font-size: 12px; color: #5E626D; padding: 8px;}
+#selectProgramModal .modal-dialog {width: 550px}
+#selectProgramModal .modal-header {border-bottom: 0px}
+#selectProgramModal .modal-header h4.modal-title{font-weight: 700}
+#selectProgramModal .modal-footer {border-top: 0px; text-align: center}
+.btn-wide {padding: 6px 85px;}
 </style>
+<?php js::set('changeModeTips', sprintf($lang->custom->changeModeTips, $lang->custom->modeList[$this->config->systemMode == 'light' ? 'ALM' : 'light']));?>
+<?php js::set('hasProgram', !empty($programs));?>
+<?php js::set('systemMode', $this->config->systemMode);?>
+
+<form id='modeForm' class="load-indicator main-form form-ajax"  method='post'>
+  <div class='vision-switch'>
+  <p><?php echo $lang->block->visionTitle;?></p>
+  <div class="vision-switch-container">
+    <?php foreach($lang->block->visions as $vision):?>
+    <?php $active = $this->config->systemMode == $vision->key ? 'active' : '';?>
+    <div class='vision <?php echo $active;?>' data-value="<?php echo $vision->key;?>">
+        <div class='vision-img' id="<?php echo 'vision-' . $vision->key;?>"></div>
+        <div class='vision-title'><?php echo $vision->title;?></div>
+        <div class='vision-text'><?php echo $vision->text;?></div>
+      </div>
+    <?php endforeach;?>
+    </div>
+  </div>
+  <div class='modal fade' id='selectProgramModal'>
+    <div class='modal-dialog'>
+      <div class='modal-content'>
+        <div class='modal-header'>
+          <button type='button' class='close' data-dismiss='modal'><span aria-hidden='true'>×</span><span class='sr-only'><?php echo $this->lang->close;?></span></button>
+          <h4 class='modal-title'><?php echo $lang->custom->selectDefaultProgram;?></h4>
+        </div>
+        <div class='modal-body'>
+          <div class='alert alert-primary'>
+            <p class='text-info'><?php echo $lang->custom->selectProgramTips;?></p>
+          </div>
+          <table class='table table-form'>
+            <tr>
+              <th><?php echo $lang->custom->defaultProgram;?></th>
+              <td><?php echo html::select('program', $programs, $programID, "class='form-control chosen'");?></td>
+            </tr>
+          </table>
+        </div>
+        <div class='modal-footer'>
+          <button type='button' class='btn btn-primary btn-wide btn-save'><?php echo $lang->save;?></button>
+        </div>
+      </div>
+    </div>
+  </div>
+</form>
 
 <script>
-$('.vision-switch .vision').click(function()
+$(function()
 {
-  console.log('vision-switch > .vision');
+    $('.vision-switch .vision').click(function()
+    {
+        var selectedMode = $(this).data('value');
+        if (systemMode == selectedMode) return false;
+        $('#mode').val(selectedMode);
+
+        if(selectedMode == 'light' && hasProgram)
+        {
+            $('#selectProgramModal').modal('show');
+        }
+        else
+        {
+            bootbox.confirm(changeModeTips, function(result)
+            {
+                if(result) $('#modeForm').submit();
+            });
+        }
+
+        return false;
+    })
+
+    $(document).on('click', '.btn-save', function()
+    {
+        setTimeout(function()
+        {
+            $('#selectProgramModal').modal('hide');
+            $('#modeForm').submit();
+        }, 1000);
+    });
 })
 </script>
-<div class='vision-switch'>
-<p><?php echo $lang->block->visionTitle;?></p>
-<div class="vision-switch-container">
-  <?php foreach($lang->block->visions as $vision):?>
-  <?php $active = $this->config->systemMode == $vision->key ? 'active' : '';?>
-  <div class='vision <?php echo $active;?>' data-value="<?php echo $vision->key;?>">
-      <div class='vision-img' id="<?php echo 'vision-' . $vision->key;?>"></div>
-      <div class='vision-title'><?php echo $vision->title;?></div>
-      <div class='vision-text'><?php echo $vision->text;?></div>
-    </div>
-  <?php endforeach;?>
-  </div>
-</div>