[SSE embed] updated spreadsheet edbed viewer

apps/spreadsheeteditor/embed/index.html

@@ -8,6 +8,7 @@
     <meta name="author" content="">
 
     <!-- debug begin -->
+    <link rel="stylesheet" type="text/css" href="../../../../sdkjs/cell/css/main.css"/>
     <link rel="stylesheet/less" type="text/css" href="resources/less/application.less" />
     <!-- debug end -->
 
@@ -275,23 +276,23 @@
 
       <div class="overlay-controls" style="margin-left: -32px">
           <ul class="left">
-              <li id="id-btn-zoom-in"><button class="overlay"><i class="overlay-icon-zoom-in"></i></button></li>
+              <li id="id-btn-zoom-in"><button class="overlay svg-icon zoom-up"></button></li>
-              <li id="id-btn-zoom-out"><button class="overlay"><i class="overlay-icon-zoom-out"></i></button></li>
+              <li id="id-btn-zoom-out"><button class="overlay svg-icon zoom-down"></button></li>
           </ul>
       </div>
 
       <div class="toolbar" id="toolbar">
-          <ul class="left">
+          <div class="group left">
-              <li><a id="header-logo" class="brand-logo" href="http://www.onlyoffice.com/" target="_blank"></a></li>
+              <div id="box-tools" class="dropdown">
-              <li class="separator"></li>
+                  <button class="control-btn svg-icon tools"></button>
-              <li id="id-btn-copy"><button class="control-btn"><i class="control-icon-save"></i><span>Save Copy</span></button></li>
+              </div>
-              <li id="id-btn-share"><button class="control-btn"><i class="control-icon-share"></i><span>Share</span></button></li>
+          </div>
-              <li id="id-btn-embed"><button class="control-btn"><i class="control-icon-embed"></i><span>Embed</span></button></li>
+          <div class="group center">
-          </ul>
+              <span><a id="header-logo" class="brand-logo" href="http://www.onlyoffice.com/" target="_blank"></a></span>
-          <ul class="right">
+          </div>
-              <li><button id="id-btn-fullscreen" class="control-btn no-caption"><i class="control-icon-fullscreen"></i></button></li>
+          <div class="group right">
-              <li><button id="id-btn-close" class="control-btn no-caption"><i class="control-icon-close"></i></button></li>
+              <div class="item"><button id="id-btn-close" class="control-btn close"><span aria-hidden="true">&times;</span></button></div>
-          </ul>
+          </div>
       </div>
 
       <div class="modal fade error" id="id-critical-error-dialog" tabindex="-1" role="dialog">
@@ -315,11 +316,12 @@
           <div class="cmd-loader-title">Please wait...</div>
       </div>
 
+      <div class="hyperlink-tooltip" data-toggle="tooltip" title="Press Ctrl and click the link" style="display:none;"></div>
+
       <!--vendor-->
       <script type="text/javascript" src="../../../vendor/jquery/jquery.min.js"></script>
       <script type="text/javascript" src="../../../vendor/jquery.browser/dist/jquery.browser.min.js"></script>
       <script type="text/javascript" src="../../../vendor/bootstrap/dist/js/bootstrap.js"></script>
-      <script type="text/javascript" src="../../../vendor/ZeroClipboard/ZeroClipboard.min.js"></script>
       <script type="text/javascript" src="../../../vendor/sockjs/sockjs.min.js"></script>
       <script type="text/javascript" src="../../../vendor/underscore/underscore-min.js"></script>
       <script type="text/javascript" src="../../../vendor/xregexp/xregexp-all-min.js"></script>
@@ -337,6 +339,9 @@
       <!--application-->
       <script type="text/javascript" src="../../common/Gateway.js"></script>
       <script type="text/javascript" src="../../common/Analytics.js"></script>
+      <script type="text/javascript" src="../../common/embed/lib/util/utils.js"></script>
+      <script type="text/javascript" src="../../common/embed/lib/view/modals.js"></script>
+      <script type="text/javascript" src="../../common/embed/lib/controller/modals.js"></script>
       <script type="text/javascript" src="js/ApplicationView.js"></script>
       <script type="text/javascript" src="js/ApplicationController.js"></script>
       <script type="text/javascript" src="js/application.js"></script>

apps/spreadsheeteditor/embed/js/ApplicationController.js

@@ -38,13 +38,11 @@ var ApplicationController = new(function(){
         embedConfig = {},
         permissions = {},
         maxPages = 0,
-        minToolbarWidth = 550,
-        minEmbedWidth = 400,
-        minEmbedHeight = 600,
-        embedCode = '<iframe allowtransparency="true" frameborder="0" scrolling="no" src="{embed-url}" width="{width}" height="{height}"></iframe>',
-        maxZIndex = 9090,
         created = false,
         iframePrint = null;
+    var $ttEl,
+        $tooltip,
+        ttOffset = [6, -15];
 
     // Initialize analytics
     // -------------------------
@@ -61,50 +59,6 @@ var ApplicationController = new(function(){
     }
 
 
-    // Initialize ZeroClipboard
-    // -------------------------
-
-    ZeroClipboard.setMoviePath('../../../vendor/ZeroClipboard/ZeroClipboard10.swf');
-    var clipShortUrl = new ZeroClipboard.Client();
-    var clipEmbedObj = new ZeroClipboard.Client();
-    clipShortUrl.zIndex = maxZIndex;
-    clipEmbedObj.zIndex = maxZIndex;
-
-
-    // Utils
-    // -------------------------
-
-    function emptyFn(){}
-
-    function createBuffered(fn, buffer, scope, args) {
-        return function(){
-            var timerId;
-            return function() {
-                var me = this;
-                if (timerId) {
-                    clearTimeout(timerId);
-                    timerId = null;
-                }
-                timerId = setTimeout(function(){
-                    fn.apply(scope || me, args || arguments);
-                }, buffer);
-            };
-        }();
-    }
-
-    function updateSocial() {
-        var $socialPanel = $('#id-popover-social-container');
-
-        if ($socialPanel.length > 0) {
-            if ($socialPanel.attr('data-loaded') == 'false') {
-                typeof FB !== 'undefined' && FB.XFBML && FB.XFBML.parse();
-                typeof twttr !== 'undefined' && twttr.widgets && twttr.widgets.load();
-
-                $socialPanel.attr('data-loaded', 'true');
-            }
-        }
-    }
-
     // Handlers
     // -------------------------
 
@@ -112,38 +66,11 @@ var ApplicationController = new(function(){
         config = $.extend(config, data.config);
         embedConfig = $.extend(embedConfig, data.config.embedded);
 
-        $('#id-short-url').val(embedConfig.shareUrl || 'Unavailable');
+        common.controller.modals.init(embedConfig);
-        $('#id-textarea-embed').text(embedCode.replace('{embed-url}', embedConfig.embedUrl).replace('{width}', minEmbedWidth).replace('{height}', minEmbedHeight));
-
-        if (typeof embedConfig.shareUrl !== 'undefined' && embedConfig.shareUrl != ''){
-            (function(d, s, id) {
-                  var js, fjs = d.getElementsByTagName(s)[0];
-                  if (d.getElementById(id)) return;
-                  js = d.createElement(s); js.id = id;
-                  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
-                  fjs.parentNode.insertBefore(js, fjs);
-            }(document, 'script', 'facebook-jssdk'));
-            !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
-
-            if ($('#id-popover-social-container ul')){
-                $('#id-popover-social-container ul').append('<li><div class="fb-like" data-href="' + embedConfig.shareUrl + '" data-send="false" data-layout="button_count" data-width="450" data-show-faces="false"></div></li>');
-                $('#id-popover-social-container ul').append('<li class="share-twitter"><a href="https://twitter.com/share" class="twitter-share-button" data-url="' + embedConfig.shareUrl + '">Tweet</a></li>'); //data-count="none"
-                $('#id-popover-social-container ul').append('<li class="share-mail"><a class="btn btn-xs btn-default" href="mailto:?subject=I have shared a document with you: ' + embedConfig.docTitle + '&body=I have shared a document with you: ' + encodeURIComponent(embedConfig.shareUrl) + '"><span class="glyphicon glyphicon-envelope">Email</a></li>');
-            }
-        }
-        if (typeof embedConfig.shareUrl === 'undefined')
-            $('#id-btn-share').hide();
-
-        if (typeof embedConfig.embedUrl === 'undefined')
-            $('#id-btn-embed').hide();
-
-        if (typeof embedConfig.fullscreenUrl === 'undefined')
-            $('#id-btn-fullscreen').hide();
 
         if (config.canBackToFolder === false || !(config.customization && config.customization.goback && config.customization.goback.url))
             $('#id-btn-close').hide();
 
-
         // Docked toolbar
         if (embedConfig.toolbarDocked === 'top') {
             $('#toolbar').addClass('top');
@@ -151,6 +78,8 @@ var ApplicationController = new(function(){
         } else {
             $('#toolbar').addClass('bottom');
             $('.viewer').addClass('bottom');
+            $('#box-tools').removeClass('dropdown').addClass('dropup');
+            ttOffset[1] = -40;
         }
     }
 
@@ -176,35 +105,25 @@ var ApplicationController = new(function(){
                 Common.Analytics.trackEvent('Load', 'Start');
             }
 
-            if (docConfig.title && !embedConfig.docTitle) {
+            if ( !embedConfig.saveUrl && permissions.print === false)
-                var el = $('#id-popover-social-container ul .share-mail > a');
+                $('#idt-copy').hide();
-                if (el.length) {
-                    el.attr('href', el.attr('href').replace(/:\sundefined&/, ': ' + docConfig.title + '&'));
         }
     }
 
-            if (typeof embedConfig.saveUrl === 'undefined' && permissions.print === false)
+    function setActiveWorkSheet(index) {
-                $('#id-btn-copy').hide();
+        var $box = $('#worksheets');
-            if (!$('#id-btn-copy').is(":visible") && !$('#id-btn-share').is(":visible") && !$('#id-btn-embed').is(":visible") )
+        $box.find('> li').removeClass('active');
-                $('#toolbar .left .separator').hide();
+        $box.find('#worksheet' + index).addClass('active');
-        }
+
+        api.asc_showWorksheet(index);
     }
 
     function onSheetsChanged(){
-        if (api){
         maxPages = api.asc_getWorksheetsCount();
 
-            var setActiveWorkSheet = function(index) {
-                $.each($('#worksheets').children('li'), function(){
-                    $(this).removeClass('active');
-                });
-                $('#worksheet-' + index).addClass('active');
-                api.asc_showWorksheet(index);
-            };
-
             var handleWorksheet = function(e){
                 var $worksheet = $(this);
-                var index = $worksheet.attr('id').match(/\d+/);
+                var index = $worksheet.attr('id').match(/\d+$/);
 
                 if (index.length > 0) {
                     index = parseInt(index[0]);
@@ -214,60 +133,30 @@ var ApplicationController = new(function(){
                 }
             };
 
-            $.each($('#worksheets').children('li'), function(){
+        var $box = $('#worksheets');
-                $(this).unbind('click');
+        $box.find('li').off();
-                $(this).remove();
+        $box.empty();
-            });
 
+        var tpl = '<li id="worksheet{index}">{title}</li>';
         for (var i = 0; i < maxPages; i++) {
-                $('#worksheets').append('<li id="worksheet-' + i + '">' + api.asc_getWorksheetName(i).replace(/\s/g,'&nbsp;') + '</li>');
+            var item = tpl.replace(/\{index}/, i).replace(/\{title}/,api.asc_getWorksheetName(i).replace(/\s/g,'&nbsp;'));
-                var $worksheet = $('#worksheet-' + i);
+            $(item).appendTo($box).on('click', handleWorksheet);
-                $worksheet && $worksheet.bind('click', handleWorksheet)
         }
 
         setActiveWorkSheet(api.asc_getActiveWorksheetIndex());
     }
-    }
-
-    function onHyperlinkClick(url) {
-        if (url) {
-            var newDocumentPage = window.open(url, '_blank');
-            if (newDocumentPage)
-                newDocumentPage.focus();
-        }
-    }
 
     function onDownloadUrl(url) {
         Common.Gateway.downloadAs(url);
     }
 
     function onPrint() {
-        if (api && permissions.print!==false)
+        if ( permissions.print!==false )
             api.asc_Print(undefined, $.browser.chrome || $.browser.safari || $.browser.opera);
     }
 
     function onPrintUrl(url) {
-        if (iframePrint) {
+        common.utils.dialogPrint(url);
-            iframePrint.parentNode.removeChild(iframePrint);
-            iframePrint = null;
-        }
-        if (!iframePrint) {
-            iframePrint = document.createElement("iframe");
-            iframePrint.id = "id-print-frame";
-            iframePrint.style.display = 'none';
-            iframePrint.style.visibility = "hidden";
-            iframePrint.style.position = "fixed";
-            iframePrint.style.right = "0";
-            iframePrint.style.bottom = "0";
-            document.body.appendChild(iframePrint);
-            iframePrint.onload = function() {
-                iframePrint.contentWindow.focus();
-                iframePrint.contentWindow.print();
-                iframePrint.contentWindow.blur();
-                window.focus();
-            };
-        }
-        if (url) iframePrint.src = url;
     }
 
     function hidePreloader() {
@@ -275,12 +164,121 @@ var ApplicationController = new(function(){
     }
 
     function onDocumentContentReady() {
-        setVisiblePopover($('#id-popover-share'), false);
-        setVisiblePopover($('#id-popover-embed'), false);
-
-        handlerToolbarSize();
         hidePreloader();
 
+        if ( !embedConfig.shareUrl )
+            $('#idt-share').hide();
+
+        if ( !embedConfig.embedUrl )
+            $('#idt-embed').hide();
+
+        if ( !embedConfig.fullscreenUrl )
+            $('#idt-fullscr').hide();
+
+        common.controller.modals.attach({
+            share: '#idt-share',
+            embed: '#idt-embed'
+        });
+
+        api.asc_registerCallback('asc_onMouseMove',             onApiMouseMove);
+        api.asc_registerCallback('asc_onHyperlinkClick',        common.utils.openLink);
+        api.asc_registerCallback('asc_onDownloadUrl',           onDownloadUrl);
+        api.asc_registerCallback('asc_onPrint',                 onPrint);
+        api.asc_registerCallback('asc_onPrintUrl',              onPrintUrl);
+
+        Common.Gateway.on('processmouse',       onProcessMouse);
+        Common.Gateway.on('downloadas',         onDownloadAs);
+
+        ApplicationView.tools.get('#idt-fullscreen')
+            .on('click', function(){
+                common.utils.openLink(embedConfig.fullscreenUrl);
+            });
+
+        ApplicationView.tools.get('#idt-download')
+            .on('click', function(){
+                if ( !!embedConfig.saveUrl ){
+                    common.utils.openLink(embedConfig.saveUrl);
+                } else
+                if (permissions.print!==false){
+                    api.asc_Print(undefined, $.browser.chrome || $.browser.safari || $.browser.opera);
+                }
+
+                Common.Analytics.trackEvent('Save');
+            });
+
+        $('#id-btn-close').on('click', function(){
+            if (config.customization && config.customization.goback && config.customization.goback.url)
+                window.parent.location.href = config.customization.goback.url;
+        });
+
+        $('#id-btn-zoom-in').on('click', function () {
+            if (api){
+                var f = Math.floor(api.asc_getZoom() * 10)/10;
+                f += .1;
+                f > 0 && !(f > 2.) && api.asc_setZoom(f);
+            }
+        });
+        $('#id-btn-zoom-out').on('click', function () {
+            if (api){
+                var f = Math.ceil(api.asc_getZoom() * 10)/10;
+                f -= .1;
+                !(f < .5) && api.asc_setZoom(f);
+            }
+        });
+
+        var documentMoveTimer;
+        var ismoved = false;
+        $(document).mousemove(function(event) {
+            $('#id-btn-zoom-in').fadeIn();
+            $('#id-btn-zoom-out').fadeIn();
+
+            ismoved = true;
+            if (!documentMoveTimer) {
+                documentMoveTimer = setInterval(function () {
+                    if (!ismoved) {
+                        $('#id-btn-zoom-in').fadeOut();
+                        $('#id-btn-zoom-out').fadeOut();
+                        clearInterval(documentMoveTimer);
+                        documentMoveTimer = undefined;
+                    }
+
+                    ismoved = false;
+                }, 2000);
+            }
+        });
+
+        var ismodalshown = false;
+        $(document.body).on('show.bs.modal', '.modal',
+            function(e) {
+                ismodalshown = true;
+                api.asc_enableKeyEvents(false);
+            }
+        ).on('hidden.bs.modal', '.modal',
+            function(e) {
+                ismodalshown = false;
+                api.asc_enableKeyEvents(true);
+            }
+        ).on('hidden.bs.dropdown', '.dropdown',
+            function(e) {
+                if ( !ismodalshown )
+                    api.asc_enableKeyEvents(true);
+            }
+        ).on('blur', 'input, textarea',
+            function(e) {
+                if ( !ismodalshown ) {
+                    if (!/area_id/.test(e.target.id) ) {
+                        api.asc_enableKeyEvents(true);
+                    }
+                }
+            }
+        );
+
+        $('#editor_sdk').on('click', function(e) {
+            if ( e.target.localName == 'canvas' ) {
+                e.currentTarget.focus();
+            }
+        });
+
         Common.Analytics.trackEvent('Load', 'Complete');
     }
 
@@ -430,118 +428,58 @@ var ApplicationController = new(function(){
     }
 
     function onDownloadAs() {
-        if (api) api.asc_DownloadAs(Asc.c_oAscFileType.XLSX, true);
+        api.asc_DownloadAs(Asc.c_oAscFileType.XLSX, true);
+    }
+
+    function onApiMouseMove(array) {
+        if ( array.length ) {
+            var ttdata;
+            for (var i = array.length; i > 0; i--) {
+                if (array[i-1].asc_getType() == Asc.c_oAscMouseMoveType.Hyperlink) {
+                    ttdata = array[i - 1];
+                    break;
+                }
+            }
+
+            if ( ttdata ) {
+                if (!$ttEl) {
+                    $ttEl = $('.hyperlink-tooltip');
+                    $ttEl.tooltip({'container': 'body', 'trigger': 'manual'});
+                    $ttEl.on('shown.bs.tooltip', function(e) {
+                        $tooltip = $ttEl.data('bs.tooltip').tip();
+
+                        $tooltip.css({
+                            left: $ttEl.ttpos[0] + ttOffset[0],
+                            top: $ttEl.ttpos[1] + ttOffset[1]
+                        });
+
+                        $tooltip.find('.tooltip-arrow').css({left: 10});
+                    });
+                }
+
+                if (!$tooltip) {
+                    $ttEl.ttpos = [ttdata.asc_getX(), ttdata.asc_getY()];
+                    $ttEl.tooltip('show');
+                } else {
+                    $tooltip.css({
+                        left: ttdata.asc_getX() + ttOffset[0],
+                        top: ttdata.asc_getY() + ttOffset[1]
+                    });
+                }
+            } else {
+                if ( $tooltip ) {
+                    $tooltip.tooltip('hide');
+                    $tooltip = false;
+                }
+            }
+        }
     }
 
     // Helpers
     // -------------------------
 
-    var handlerToolbarSize = createBuffered(function(size){
-        var visibleCaption = function(btn, visible){
-            if (visible){
-                $(btn + ' button').addClass('no-caption');
-                $(btn + ' button span').css('display', 'none');
-            } else {
-                $(btn + ' button').removeClass('no-caption');
-                $(btn + ' button span').css('display', 'inline');
-            }
-        };
-
-        var isMinimize = $('#toolbar').width() < minToolbarWidth;
-
-        visibleCaption('#id-btn-copy',  isMinimize);
-        visibleCaption('#id-btn-share', isMinimize);
-        visibleCaption('#id-btn-embed', isMinimize);
-    }, 10);
-
     function onDocumentResize() {
-        if (api)
+        if (api) api.asc_Resize();
-            api.asc_Resize();
-
-        handlerToolbarSize();
-    }
-
-    function isVisiblePopover(popover){
-        return popover.hasClass('in');
-    }
-
-    function setVisiblePopover(popover, visible, owner){
-        api && api.asc_enableKeyEvents(!visible);
-
-        if (visible){
-            if (owner){
-                popover.css('display', 'block');
-
-                var popoverData     = owner.data('bs.popover'),
-                    $tip            = popoverData.tip(),
-                    pos             = popoverData.getPosition(false),
-                    actualHeight    = $tip[0].offsetHeight,
-                    placement       = (embedConfig.toolbarDocked === 'top') ? 'bottom' : 'top',
-                    tp;
-
-                $tip.removeClass('fade in top bottom left right');
-
-                switch (placement) {
-                    case 'bottom':
-                        tp = {
-                            top : pos.top + pos.height,
-                            left: owner.position().left + (owner.width() - popover.width()) * 0.5
-                        };
-                        break;
-
-                    default:
-                    case 'top':
-                        tp = {
-                            top : pos.top - actualHeight,
-                            left: owner.position().left + (owner.width() - popover.width()) * 0.5
-                        };
-                        break;
-
-                }
-
-                $tip
-                    .css(tp)
-                    .addClass(placement)
-                    .addClass('in')
-            }
-
-            if (popover.hasClass('embed')) {
-                clipEmbedObj.show();
-            }
-
-            if (popover.hasClass('share')) {
-                clipShortUrl.show();
-                updateSocial();
-            }
-        } else {
-            popover.removeClass('in');
-            popover.css('display', 'none');
-
-            popover.hasClass('embed') && clipEmbedObj.hide();
-            popover.hasClass('share') && clipShortUrl.hide();
-        }
-    }
-
-    function updateEmbedCode(){
-        var newWidth  = parseInt($('#id-input-embed-width').val()),
-            newHeight = parseInt($('#id-input-embed-height').val());
-
-        if (newWidth < minEmbedWidth)
-            newWidth = minEmbedWidth;
-
-        if (newHeight < minEmbedHeight)
-            newHeight = minEmbedHeight;
-
-        $('#id-textarea-embed').text(embedCode.replace('{embed-url}', embedConfig.embedUrl).replace('{width}', newWidth).replace('{height}', newHeight));
-
-        $('#id-input-embed-width').val(newWidth + 'px');
-        $('#id-input-embed-height').val(newHeight + 'px');
-    }
-
-    function openLink(url){
-        var newDocumentPage = window.open(url);
-        if (newDocumentPage)
-            newDocumentPage.focus();
     }
 
     function createController(){
@@ -551,149 +489,12 @@ var ApplicationController = new(function(){
         me = this;
         created = true;
 
-        var documentMoveTimer;
-
-        // Initialize clipboard objects
-
-        clipShortUrl.addEventListener('mousedown', function() {
-            if ($('#id-btn-copy-short').hasClass('copied'))
-                return;
-
-            $('#id-btn-copy-short').button('copied');
-            $('#id-btn-copy-short').addClass('copied');
-
-            clipShortUrl.setText($('#id-short-url').val());
-
-            setTimeout(function(){
-                $('#id-btn-copy-short').button('reset');
-                $('#id-btn-copy-short').removeClass('copied');
-            }, 2000);
-        });
-
-        clipEmbedObj.addEventListener('mousedown', function(){
-            if ($('#id-btn-copy-embed').hasClass('copied'))
-                return;
-
-            $('#id-btn-copy-embed').button('copied');
-            $('#id-btn-copy-embed').addClass('copied');
-
-            clipEmbedObj.setText($('#id-textarea-embed').text());
-
-            setTimeout(function(){
-                $('#id-btn-copy-embed').button('reset');
-                $('#id-btn-copy-embed').removeClass('copied');
-            }, 2000);
-        });
-
-        clipShortUrl.glue('id-btn-copy-short');
-        clipEmbedObj.glue('id-btn-copy-embed');
-
-
         // popover ui handlers
 
-        $('#id-btn-copy').on('click', function(){
-            var saveUrl = embedConfig.saveUrl;
-            if (typeof saveUrl !== 'undefined' && saveUrl.length > 0){
-                openLink(saveUrl);
-            } else if (api && permissions.print!==false){
-                api.asc_Print(undefined, $.browser.chrome || $.browser.safari || $.browser.opera);
-            }
-
-            Common.Analytics.trackEvent('Save');
-        });
-
-        $('#id-btn-share').on('click', function(event){
-            setVisiblePopover($('#id-popover-share'), !isVisiblePopover($('#id-popover-share')), $('#id-btn-share'));
-            setVisiblePopover($('#id-popover-embed'), false);
-
-            event.preventDefault();
-            event.stopPropagation();
-        });
-
-        $('#id-btn-embed').on('click', function(event){
-            setVisiblePopover($('#id-popover-embed'), !isVisiblePopover($('#id-popover-embed')), $('#id-btn-embed'));
-            setVisiblePopover($('#id-popover-share'), false);
-
-            event.preventDefault();
-            event.stopPropagation();
-        });
-
-        $('#id-input-embed-width').on('keypress', function(e){
-            if (e.keyCode == 13)
-                updateEmbedCode();
-        });
-
-        $('#id-input-embed-height').on('keypress', function(e){
-            if (e.keyCode == 13)
-                updateEmbedCode();
-        });
-
-        $('#id-input-embed-width').on('focusin', function(e){
-            api && api.asc_enableKeyEvents(false);
-        });
-
-        $('#id-input-embed-height').on('focusin', function(e){
-            api && api.asc_enableKeyEvents(false);
-        });
-
-        $('#id-input-embed-width').on('focusout', function(e){
-            updateEmbedCode();
-            api && api.asc_enableKeyEvents(true);
-        });
-
-        $('#id-input-embed-height').on('focusout', function(e){
-            updateEmbedCode();
-            api && api.asc_enableKeyEvents(true);
-        });
-
-        $('#id-btn-fullscreen').on('click', function(){
-            openLink(embedConfig.fullscreenUrl);
-        });
-
-        $('#id-btn-close').on('click', function(){
-            if (config.customization && config.customization.goback && config.customization.goback.url)
-                window.parent.location.href = config.customization.goback.url;
-        });
-
-        $('#id-btn-zoom-in').on('click', function(){
-            if (api){
-                var f = Math.floor(api.asc_getZoom() * 10)/10;
-                f += .1;
-                f > 0 && !(f > 2.) && api.asc_setZoom(f);
-            }
-        });
-
-        $('#id-btn-zoom-out').on('click', function(){
-            if (api){
-                var f = Math.ceil(api.asc_getZoom() * 10)/10;
-                f -= .1;
-                !(f < .5) && api.asc_setZoom(f);
-            }
-        });
-
         $(window).resize(function(){
             onDocumentResize();
         });
 
-        $(document).click(function(event){
-            if (event && event.target && $(event.target).closest('.popover').length > 0)
-                return;
-
-            setVisiblePopover($('#id-popover-share'), false);
-            setVisiblePopover($('#id-popover-embed'), false);
-        });
-
-        $(document).mousemove(function(event){
-            $('#id-btn-zoom-in').fadeIn();
-            $('#id-btn-zoom-out').fadeIn();
-
-            clearTimeout(documentMoveTimer);
-            documentMoveTimer = setTimeout(function(){
-                $('#id-btn-zoom-in').fadeOut();
-                $('#id-btn-zoom-out').fadeOut();
-            }, 2000);
-        });
-
         api = new Asc.spreadsheet_api({
             'id-view': 'editor_sdk'
         });
@@ -704,17 +505,12 @@ var ApplicationController = new(function(){
             api.asc_registerCallback('asc_onError',                 onError);
             api.asc_registerCallback('asc_onOpenDocumentProgress',  onOpenDocument);
             api.asc_registerCallback('asc_onSheetsChanged',         onSheetsChanged);
-            api.asc_registerCallback('asc_onHyperlinkClick',        onHyperlinkClick);
+            api.asc_registerCallback('asc_onActiveSheetChanged',    setActiveWorkSheet);
-            api.asc_registerCallback('asc_onDownloadUrl',           onDownloadUrl);
-            api.asc_registerCallback('asc_onPrint',                 onPrint);
-            api.asc_registerCallback('asc_onPrintUrl',              onPrintUrl);
 
             // Initialize api gateway
             Common.Gateway.on('init',               loadConfig);
             Common.Gateway.on('opendocument',       loadDocument);
             Common.Gateway.on('showerror',          onExternalError);
-            Common.Gateway.on('processmouse',       onProcessMouse);
-            Common.Gateway.on('downloadas',         onDownloadAs);
             Common.Gateway.ready();
         }
 

apps/spreadsheeteditor/embed/js/ApplicationView.js

@@ -32,41 +32,31 @@
 */
 var ApplicationView = new(function(){
 
+    var $btnTools;
+
     // Initialize view
 
     function createView(){
-        $('#id-btn-share').popover({
+        $btnTools = $('#box-tools button');
-            trigger     : 'manual',
-            html        : true,
-            template    : '<div class="popover share" id="id-popover-share"><div class="arrow"></div><div class="popover-inner"><div class="popover-content"><p></p></div></div></div>',
-            content     : '<div class="share-link">' +
-                              '<span class="caption">Link:</span>' +
-                              '<input id="id-short-url" class="input-xs form-control" readonly/>' +
-                              '<button id="id-btn-copy-short" type="button" class="btn btn-xs btn-primary" style="width: 65px;" data-copied-text="Copied">Copy</button>' +
-                          '</div> ' +
-                              '<div class="share-buttons" style="height: 25px" id="id-popover-social-container" data-loaded="false">' +
-                              '<ul></ul>' +
-                          '</div>'
-        }).popover('show');
 
-        $('#id-btn-embed').popover({
+        $btnTools.addClass('dropdown-toggle').attr('data-toggle', 'dropdown').attr('aria-expanded', 'true');
-            trigger     : 'manual',
+        $btnTools.parent().append(
-            html        : true,
+            '<ul class="dropdown-menu">' +
-            template    : '<div class="popover embed" id="id-popover-embed"><div class="arrow"></div><div class="popover-inner"><div class="popover-content"><p></p></div></div></div>',
+                '<li><a id="idt-download" href="#"><span class="mi-icon svg-icon download"></span>Download</a></li>' +
-            content     : '<div class="size-manual">' +
+                '<li><a id="idt-share" href="#" data-toggle="modal"><span class="mi-icon svg-icon share"></span>Share</a></li>' +
-                              '<span class="caption">Width:</span>' +
+                '<li><a id="idt-embed" href="#" data-toggle="modal"><span class="mi-icon svg-icon embed"></span>Embed</a></li>' +
-                              '<input id="id-input-embed-width" class="form-control input-xs" type="text" value="400px">' +
+                '<li><a id="idt-fullscreen" href="#"><span class="mi-icon svg-icon fullscr"></span>Full Screen</a></li>' +
-                              '<input id="id-input-embed-height" class="form-control input-xs right" type="text" value="600px">' +
+            '</ul>');
-                              '<span class="right caption">Height:</span>' +
+    }
-                          '</div>' +
-                          '<textarea id="id-textarea-embed" rows="4" class="form-control" readonly></textarea>' +
-                          '<button id="id-btn-copy-embed" type="button" class="btn btn-xs btn-primary" data-copied-text="Copied">Copy</button>'
 
-
+    function getTools(name) {
-        }).popover('show');
+        return $btnTools.parent().find(name);
     }
 
     return {
         create: createView
+        , tools: {
+            get: getTools
+        }
     }
 })();