diff --git a/apps/common/embed/lib/view/modals.js b/apps/common/embed/lib/view/modals.js new file mode 100644 index 000000000..ba9aa264c --- /dev/null +++ b/apps/common/embed/lib/view/modals.js @@ -0,0 +1,94 @@ +/* + * + * (c) Copyright Ascensio System Limited 2010-2016 + * + * This program is a free software product. You can redistribute it and/or + * modify it under the terms of the GNU Affero General Public License (AGPL) + * version 3 as published by the Free Software Foundation. In accordance with + * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect + * that Ascensio System SIA expressly excludes the warranty of non-infringement + * of any third-party rights. + * + * This program is distributed WITHOUT ANY WARRANTY; without even the implied + * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. For + * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html + * + * You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia, + * EU, LV-1021. + * + * The interactive user interfaces in modified source and object code versions + * of the Program must display Appropriate Legal Notices, as required under + * Section 5 of the GNU AGPL version 3. + * + * Pursuant to Section 7(b) of the License you must retain the original Product + * logo when distributing the program. Pursuant to Section 7(e) we decline to + * grant you any rights under trademark law for use of our trademarks. + * + * All the Product's GUI elements, including illustrations and icon sets, as + * well as technical writing content are licensed under the terms of the + * Creative Commons Attribution-ShareAlike 4.0 International. See the License + * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode + * +*/ + +!window.utils && (window.utils = {}); +utils.modals = new(function() { + var tplDialog = ''; + + var _tplbody_share = '
' + + '' + + '
' + + '
' + + '' + + '' + + '' + + '' + + '
'; + + var _tplbody_embed = '
' + + 'Width:' + + '' + + '' + + 'Height:' + + '
' + + ''; + + return { + create: function(name, parent) { + !parent && (parent = 'body'); + + var _$dlg; + if (name == 'share') { + _$dlg = $(tplDialog + .replace(/\{title}/, 'Share Link') + .replace(/\{body}/, _tplbody_share) + .replace(/\{footer}/, '')) + .appendTo(parent) + .attr('id', 'dlg-share'); + } else + if (name == 'embed') { + _$dlg = $(tplDialog + .replace(/\{title}/, 'Embed') + .replace(/\{body}/, _tplbody_embed) + .replace(/\{footer}/, '')) + .appendTo(parent) + .attr('id', 'dlg-embed'); + } + + return _$dlg; + } + }; +})(); diff --git a/apps/common/embed/resources/img/icon-menu-sprite.svg b/apps/common/embed/resources/img/icon-menu-sprite.svg new file mode 100644 index 000000000..8b51a6cbe --- /dev/null +++ b/apps/common/embed/resources/img/icon-menu-sprite.svg @@ -0,0 +1,51 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/common/embed/resources/img/icon-social-sprite.svg b/apps/common/embed/resources/img/icon-social-sprite.svg new file mode 100644 index 000000000..8ca5b86be --- /dev/null +++ b/apps/common/embed/resources/img/icon-social-sprite.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + diff --git a/apps/common/embed/resources/img/logo.svg b/apps/common/embed/resources/img/logo.svg new file mode 100644 index 000000000..9ecfa6426 --- /dev/null +++ b/apps/common/embed/resources/img/logo.svg @@ -0,0 +1,44 @@ + + + + + + + + + + + + + + + + + + diff --git a/apps/common/embed/resources/less/common.less b/apps/common/embed/resources/less/common.less index 0622cefa7..4d7d1f497 100644 --- a/apps/common/embed/resources/less/common.less +++ b/apps/common/embed/resources/less/common.less @@ -39,12 +39,13 @@ //@import "list-group.less"; //@import "panels.less"; //@import "wells.less"; -//@import "close.less"; +@import "../../../../../vendor/bootstrap/less/close.less"; // Components w/ JavaScript @import "../../../../../vendor/bootstrap/less/modals.less"; @import "../../../../../vendor/bootstrap/less/tooltip.less"; -@import "../../../../../vendor/bootstrap/less/popovers.less"; +//@import "../../../../../vendor/bootstrap/less/popovers.less"; +@import "../../../../../vendor/bootstrap/less/dropdowns.less"; //@import "carousel.less"; // Utility classes @@ -60,7 +61,9 @@ @toolbarFontSize: 12px; @controlBtnHoverTopColor: #6180C4; @controlBtnHoverBottomColor: #8AACF1; +@btnActiveColor: #7d858c; @iconSpriteCommonPath: "../../../../common/embed/resources/img/glyphicons.png"; +@icon-socnet-size: 40px; .input-xs { .input-size(@input-height-small - 8px; @padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @border-radius-small); @@ -104,7 +107,8 @@ font-size: @toolbarFontSize; min-width: 340px; z-index: 100; - #gradient > .vertical(@toolbarTopColor, @toolbarBottomColor); + //#gradient > .vertical(@toolbarTopColor, @toolbarBottomColor); + background-color: @toolbarTopColor; &.top { top: 0; @@ -128,20 +132,23 @@ box-shadow: inset 0 1px 0 @toolbarBorderColor, inset 0 2px 0 @toolbarBorderShadowColor; } - ul { + .group { position: absolute; + top: 50%; + transform: translateY(-50%); + list-style-type: none; margin: 0; padding: 0; - li { + .item { input { display: inline-block; - width: 25px; + width: 35px; padding: 0; - height: 25px; - margin: 3px; - text-align: center; + //height: 25px; + //margin: 0 3px; + text-align: right; } .text { @@ -151,53 +158,63 @@ &.left { left: 0; + padding-left: 10px; - li { + .item { float: left; } } &.right { right: 0; + padding-right: 10px; - li { + .item { float: left; } } + &.center { + left: 50%; + transform: translate(-50%, -50%); + } + .separator { - height: 24px; - margin: 4px 9px; + height: 22px; + margin: 0 9px; border-right: 1px solid @toolbarBorderShadowColor; border-left: 1px solid @toolbarBorderColor; } } + + .close { + font-size: 28px; + color: #666666; + opacity: 0.8; + display: block; + line-height: 22px; + + &:hover { + opacity: 1; + color: #666666; + } + } + } // Logo // ------------------------- -a.brand-logo { +.brand-logo { display: block; - background-image: url("@{iconSpriteCommonPath}"); - width: 124px; - height: 20px; - margin: 5px 0 0 10px; - background-position: 0 -100px; + width: 100px; + height: 24px; + //background-image: url("@{iconSpriteCommonPath}"); + //background-position: 0 -100px; + background: data-uri('../../../../common/embed/resources/img/logo.svg') no-repeat; } // Sprite icons path // ------------------------- -[class^="control-icon-"], -[class*=" control-icon-"] { - display: inline-block; - width: 20px; - height: 20px; - vertical-align: text-top; - background-image: url("@{iconSpriteCommonPath}"); - background-repeat: no-repeat; - margin-top: -2px; -} - [class^="overlay-icon-"], [class*=" overlay-icon-"] { display: inline-block; @@ -209,12 +226,6 @@ a.brand-logo { opacity: .3; } -.control-icon-share { background-position: 0 0; } -.control-icon-embed { background-position: 0 -20px; } -.control-icon-fullscreen { background-position: 0 -40px; } -.control-icon-close { background-position: 0 -60px; } -.control-icon-save { background-position: 0 -80px; } - .overlay-icon-zoom-in { background-position: 0 -120px; } .overlay-icon-zoom-out { background-position: -32px -120px; } @@ -222,28 +233,20 @@ a.brand-logo { // ------------------------- .control-btn { display: inline-block; - padding: 1px 5px; - font-size: @toolbarFontSize; - line-height: 20px; - text-align: center; + //padding: 1px 5px; + //font-size: @toolbarFontSize; + //line-height: 20px; + //text-align: center; vertical-align: middle; cursor: pointer; background-color: transparent; - background-image: none; + //background-image: none; border: 1px solid transparent; border-radius: 2px; - margin: 4px 5px 0 0; - - i { - margin-right: 5px; - } + //margin: 0; &.no-caption { padding: 1px 2px; - - i { - margin-right: 0; - } } // Hover state @@ -251,12 +254,6 @@ a.brand-logo { color: @toolbarHoverColor; text-decoration: none; text-shadow: 0 1px 0 @toolbarBorderShadowColor; - - .control-icon-share { background-position: -20px 0; } - .control-icon-embed { background-position: -20px -20px; } - .control-icon-fullscreen { background-position: -20px -40px; } - .control-icon-close { background-position: -20px -60px; } - .control-icon-save { background-position: -20px -80px; } } // Focus state for keyboard and accessibility @@ -268,17 +265,11 @@ a.brand-logo { // Active state &.active, &:active { - color: #ffffff; outline: none; - border: 1px solid darken(@controlBtnHoverTopColor, 5%); - #gradient > .vertical(@controlBtnHoverTopColor, @controlBtnHoverBottomColor); - text-shadow: 0 1px 0 darken(@toolbarBorderColor, 20%); - - .control-icon-share { background-position: -40px 0; } - .control-icon-embed { background-position: -40px -20px; } - .control-icon-fullscreen { background-position: -40px -40px; } - .control-icon-close { background-position: -40px -60px; } - .control-icon-save { background-position: -40px -80px; } + border: 1px solid @btnActiveColor; + background-color: @btnActiveColor; + //#gradient > .vertical(@controlBtnHoverTopColor, @controlBtnHoverBottomColor); + //text-shadow: 0 1px 0 darken(@toolbarBorderColor, 20%); } } @@ -313,32 +304,27 @@ a.brand-logo { height: 32px; display: inline-block; - text-align: center; - vertical-align: middle; + //text-align: center; + //vertical-align: middle; cursor: pointer; - background-color: transparent; - background-image: none; - border: none; - padding: 0; - line-height: 0; + background-color: black; + //background-image: none; + border: 5px solid black; + border-radius: 50%; + //padding: 0; + //line-height: 0; outline: none; + opacity: 0.3; &:hover { -[class^="overlay-icon-"], -[class*=" overlay-icon-"] { - opacity: .6; -} - } + opacity: .6; + } -&.active, -&:active { -[class^="overlay-icon-"], -[class*=" overlay-icon-"] { - opacity: .8; + &.active, &:active { + opacity: .8; + } + } } - } - } - } // Error mask // ------------------------- @@ -377,20 +363,6 @@ a.brand-logo { padding: 14px; } - &.hyperlink { - .popover-content { - padding: 5px 10px; - - p { - display: block; - word-wrap: break-word; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - } - } - } - &.share { width: 280px; @@ -426,41 +398,6 @@ a.brand-logo { float: right; } } - - .share-buttons { - ul { - width: 244px; - height: 25px; - list-style-type: none; - margin: 5px 0 0; - overflow: hidden; - - li { - display: inline-block; - float: left; - margin: 1px 5px 0 0; - vertical-align: middle; - - &.share-mail { - float: right; - padding-right: 1px; - margin: 0; - - a { - min-width: 64px; - } - - .glyphicon { - margin-right: 4px; - } - } - - &.share-twitter { - max-width: 93px; - } - } - } - } } &.embed { @@ -492,14 +429,6 @@ a.brand-logo { } } - textarea { - width: 238px; - resize: none; - cursor: auto; - font-size: 1em; - border-radius: 0; - } - button { float: right; margin: 10px 0 15px; @@ -512,10 +441,249 @@ a.brand-logo { // ------------------------- .modal { .modal-header { - padding: 5px 15px; + //padding: 5px 15px; } .modal-footer { - border-top: none; + //border-top: none; + } + + //&.in .modal-dialog { .translate(0, 100%)} +} + +.share-buttons { + ul { + width: 244px; + //height: 25px; + list-style-type: none; + margin: 5px 0 0; + overflow: hidden; + + li { + display: inline-block; + float: left; + margin: 1px 5px 0 0; + vertical-align: middle; + + &.share-mail { + float: right; + padding-right: 1px; + margin: 0; + + a { + min-width: 64px; + } + + .glyphicon { + margin-right: 4px; + } + } + + &.share-twitter { + max-width: 93px; + } + } + } +} + +.size-manual { + margin-bottom: 10px; + + .right { + float: right; + } + + .caption { + margin-top: 2px; + margin-right: 8px; + } + + input { + display: inline-block; + font-size: 1em; + padding: 0 4px; + //border-radius: 0; + margin: 0; + margin-top: -1px; + + &.input-xs { + width: 50px; + } + } +} + +.list-hor-align { + li { + float: left; + + a { + display: block; + } + } +} + +.socnet-btn(@index) { + background-position: -@icon-socnet-size*@index 0; + + &:hover { + background-position: -@icon-socnet-size*@index -@icon-socnet-size; + } +} + +.svg { + background: data-uri('../../../../common/embed/resources/img/icon-social-sprite.svg'); + + width: 40px; + height: 40px; + background-size: @icon-socnet-size*4 @icon-socnet-size*2; + + &.big-facebook:hover { + background-position: 0 -@icon-socnet-size; + } + + &.big-twitter { .socnet-btn(1); } + &.big-gplus { .socnet-btn(2); } + &.big-email { .socnet-btn(3); } +} + +.svg-icon { + background: data-uri('../../../../common/embed/resources/img/icon-menu-sprite.svg') no-repeat; + background-size: 22px*9 22px*2; + + &.download { + background-position: -22px 0; + } + &.share { + background-position: -22px*2 0; + } + &.embed { + background-position: -22px*3 0; + } + &.fullscr { + background-position: -22px*4 0; + } + &.zoom-up { + background-position: -22px*5 -22px; + } + &.zoom-down { + background-position: -22px*6 -22px; + } +} + +.mi-icon { + width: 22px; + height: 22px; + //display: inline-block; + float: left; + margin: -1px 5px 0 -15px; +} + +.btn, button { + &:focus, &:active:focus { + outline: 0 none; + } +} + +.modal-dialog { + .share-buttons { + height: 40px; + text-align: center; + + span { + display: inline-block; + margin: 0 7px; + cursor: pointer; + } + } + + .share-link { + margin: 0 0 15px 0; + } +} + +.modal-header { + padding-bottom: 10px; + text-align: center; + + .close { + margin-top: 0; + } +} + +.modal-body { + padding: 20px; +} + +.modal-footer { + text-align: center; +} + +#dlg-share, #dlg-embed { + .modal-dialog { + width: 330px; + } + + textarea { + width: 288px; + resize: none; + cursor: auto; + font-size: 1em; + border-radius: 0; + } +} + +.dropdown-menu { + > li > a { + &:hover, &:focus { + background-color: #d8dadc; + outline: 0 none; + } + } +} + +.dropdown { + &.open { + > button { + background-color: @btnActiveColor; + background-position: 0 -22px; + } + } +} + +#box-tools { + button { + width: 24px; + height: 22px; + + &:active { + background-position: 0 -22px; + } + } +} + +.masked { + background-color: transparent; + border-color: transparent; + box-shadow: none; +} + +#pages { + cursor: pointer; + display: inline-block; + line-height: 22px; + padding: 0 0 0 3px; +} + +#page-number { + &.masked { + cursor: pointer; + } +} + +.tooltip { + .tooltip-inner { + background-color: #fff; + border: 1px solid #333; + color: #333 } } \ No newline at end of file diff --git a/apps/documenteditor/embed/index.html b/apps/documenteditor/embed/index.html index 6c91ed543..a1cc2b7e2 100644 --- a/apps/documenteditor/embed/index.html +++ b/apps/documenteditor/embed/index.html @@ -273,25 +273,25 @@
- - +
+ +
+
+ +
+
+
of 0
+
+
+
+ + + @@ -335,6 +338,7 @@ + diff --git a/apps/documenteditor/embed/js/ApplicationController.js b/apps/documenteditor/embed/js/ApplicationController.js index b7b9d15c1..41c635df2 100644 --- a/apps/documenteditor/embed/js/ApplicationController.js +++ b/apps/documenteditor/embed/js/ApplicationController.js @@ -38,11 +38,9 @@ var ApplicationController = new(function(){ embedConfig = {}, permissions = {}, maxPages = 0, - minToolbarWidth = 550, minEmbedWidth = 400, minEmbedHeight = 600, embedCode = '', - maxZIndex = 9090, created = false, iframePrint = null; @@ -64,42 +62,10 @@ var ApplicationController = new(function(){ // Utils // ------------------------- - function emptyFn(){} - function htmlEncode(value){ return $('
').text(value).html(); } - 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 // ------------------------- @@ -107,33 +73,14 @@ var ApplicationController = new(function(){ config = $.extend(config, data.config); embedConfig = $.extend(embedConfig, data.config.embedded); - $('#id-short-url').val(embedConfig.shareUrl || 'Unavailable'); - $('#id-textarea-embed').text(embedCode.replace('{embed-url}', embedConfig.embedUrl).replace('{width}', minEmbedWidth).replace('{height}', minEmbedHeight)); + if ( !embedConfig.shareUrl ) + $('#idt-share').hide(); - 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('
    • '); - $('#id-popover-social-container ul').append('
    • '); //data-count="none" - $('#id-popover-social-container ul').append('
  • Email
    • '); - } - } - if (typeof embedConfig.shareUrl === 'undefined') - $('#id-btn-share').hide(); - - if (typeof embedConfig.embedUrl === 'undefined') - $('#id-btn-embed').hide(); + if ( !embedConfig.embedUrl ) + $('#idt-embed').hide(); if (typeof embedConfig.fullscreenUrl === 'undefined') - $('#id-btn-fullscreen').hide(); + $('#idt-fullscr').hide(); if (config.canBackToFolder === false || !(config.customization && config.customization.goback && config.customization.goback.url)) $('#id-btn-close').hide(); @@ -149,7 +96,7 @@ var ApplicationController = new(function(){ } // Hide last separator - if (!$('#id-btn-fullscreen').is(":visible") && !$('#id-btn-close').is(":visible")) { + if (!$('#id-btn-close').is(":visible")) { $('#toolbar .right .separator').hide(); $('#pages').css('margin-right', '12px'); } @@ -177,11 +124,8 @@ var ApplicationController = new(function(){ Common.Analytics.trackEvent('Load', 'Start'); } - if (typeof embedConfig.saveUrl === 'undefined' && permissions.print === false) - $('#id-btn-copy').hide(); - - if (!$('#id-btn-copy').is(":visible") && !$('#id-btn-share').is(":visible") && !$('#id-btn-embed').is(":visible") ) - $('#toolbar .left .separator').hide(); + if ( !embedConfig.saveUrl && permissions.print === false) + $('#idt-copy').hide(); } } @@ -230,32 +174,43 @@ var ApplicationController = new(function(){ function onDocMouseMoveEnd() { if (me.isHideBodyTip) { - var $tipHyperlink = $('#id-tip-hyperlink'); - - if ($tipHyperlink.length > 0) { - $tipHyperlink.hide(); + if ( $tooltip ) { + $tooltip.tooltip('hide'); + $tooltip = false; } } } + var $ttEl, $tooltip; function onDocMouseMove(data) { if (data) { if (data.get_Type() == 1) { // hyperlink me.isHideBodyTip = false; - var $tipHyperlink = $('#id-tip-hyperlink'), - hyperProps = data.get_Hyperlink(), - toolTip = (hyperProps.get_ToolTip()) ? hyperProps.get_ToolTip() : hyperProps.get_Value(); + if ( !$ttEl ) { + $ttEl = $('.hyperlink-tooltip'); + $ttEl.tooltip({'container':'body', 'trigger':'manual'}); + $ttEl.on('shown.bs.tooltip', function(e) { + $tooltip = $ttEl.data('bs.tooltip').tip(); - if ($tipHyperlink.length > 0) { - $tipHyperlink.find('.popover-content p').html(htmlEncode(toolTip) + '
    Press Ctrl and click link'); - $tipHyperlink.show(); + $tooltip.css({ + left: $ttEl.ttpos[0] - 10, + top: $ttEl.ttpos[1] - 5 + }); + + $tooltip.find('.tooltip-arrow').css({left: 10}); + }); } - $tipHyperlink.css({ - left: data.get_X() - 10, - top : data.get_Y() - 25 - }) + if ( !$tooltip ) { + $ttEl.ttpos = [data.get_X(), data.get_Y()]; + $ttEl.tooltip('show'); + } else { + $tooltip.css({ + left:data.get_X() - 10, + top:data.get_Y() - 5 + }); + } } } } @@ -298,13 +253,22 @@ var ApplicationController = new(function(){ } function onDocumentContentReady() { - setVisiblePopover($('#id-popover-share'), false); - setVisiblePopover($('#id-popover-embed'), false); - $('#id-tip-hyperlink').hide(); - - handlerToolbarSize(); hidePreloader(); + ApplicationView.modals.create(embedConfig); + + api.asc_registerCallback('asc_onStartAction', onLongActionBegin); + api.asc_registerCallback('asc_onEndAction', onLongActionEnd); + api.asc_registerCallback('asc_onMouseMoveStart', onDocMouseMoveStart); + api.asc_registerCallback('asc_onMouseMoveEnd', onDocMouseMoveEnd); + api.asc_registerCallback('asc_onMouseMove', onDocMouseMove); + api.asc_registerCallback('asc_onHyperlinkClick', onHyperlinkClick); + api.asc_registerCallback('asc_onDownloadUrl', onDownloadUrl); + api.asc_registerCallback('asc_onPrint', onPrint); + + Common.Gateway.on('processmouse', onProcessMouse); + Common.Gateway.on('downloadas', onDownloadAs); + function _copytext(el, event) { el.select(); if ( !document.execCommand('copy') ) { @@ -312,6 +276,115 @@ var ApplicationController = new(function(){ } } + var m = ApplicationView.modals.get('share'); + m.find('#btn-copyshort').on('click', _copytext.bind(this, m.find('#id-short-url'))); + m.find('.share-buttons > span').on('click', function(e){ + var _url; + switch ($(e.target).attr('data-name')) { + case 'facebook': + _url = 'https://www.facebook.com/sharer/sharer.php?u=' + embedConfig.shareUrl + '&t=' + embedConfig.docTitle; + window.open(_url, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600'); + break; + case 'twitter': + _url = 'https://twitter.com/share?url='+ embedConfig.shareUrl; + !!embedConfig.docTitle && (_url += '&text=' + embedConfig.docTitle); + window.open(_url, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600'); + break; + case 'gplus': + _url = 'https://plus.google.com/share?url=' + embedConfig.shareUrl; + window.open(_url, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes'); + break; + case 'email': + window.open('mailto:?subject=I have shared a document with you: ' + embedConfig.docTitle + '&body=I have shared a document with you: ' + embedConfig.shareUrl + '"', '_self'); + break; + } + }); + + var dlgembed = ApplicationView.modals.get('embed'); + var txtembed = dlgembed.find('#txt-embed-url'); + txtembed.text(embedCode.replace('{embed-url}', embedConfig.embedUrl).replace('{width}', minEmbedWidth).replace('{height}', minEmbedHeight)); + dlgembed.find('#btn-copyembed').on('click', _copytext.bind(this, txtembed)); + dlgembed.find('#txt-embed-width, #txt-embed-height').on({ + 'keypress': function(e){ + if (e.keyCode == 13) + updateEmbedCode(); + } + , 'focusout': function(e){ + updateEmbedCode(); + } + }); + + ApplicationView.tools.get('#idt-fullscreen') + .on('click', function(){ + openLink(embedConfig.fullscreenUrl); + }); + + ApplicationView.tools.get('#idt-download') + .on('click', function(){ + if ( !!embedConfig.saveUrl ){ + openLink(embedConfig.saveUrl); + } else + if (api && permissions.print!==false){ + api.asc_Print($.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', api.zoomIn.bind(this)); + $('#id-btn-zoom-out').on('click', api.zoomOut.bind(this)); + + var $pagenum = $('#page-number'); + $pagenum.on({ + 'keyup': function(e){ + if ( e.keyCode == 13 ){ + var newPage = parseInt($('#page-number').val()); + + if ( newPage > maxPages ) newPage = maxPages; + if (newPage < 2 || isNaN(newPage)) newPage = 1; + + api.goToPage(newPage-1); + $pagenum.blur(); + } + } + , 'focusin' : function(e) { + $pagenum.removeClass('masked'); + } + , 'focusout': function(e){ + !$pagenum.hasClass('masked') && $pagenum.addClass('masked'); + } + }); + + $('#pages').on('click', function(e) { + $pagenum.focus(); + }); + + 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); + } + }); + Common.Analytics.trackEvent('Load', 'Complete'); } @@ -436,95 +509,16 @@ var ApplicationController = new(function(){ // 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) - api.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(); - } + api && api.Resize(); } function updateEmbedCode(){ - var newWidth = parseInt($('#id-input-embed-width').val()), - newHeight = parseInt($('#id-input-embed-height').val()); + var $dlg = ApplicationView.modals.get('emded'); + var $txtwidth = $dlg.find('#txt-embed-width'); + var $txtheight = $dlg.find('#txt-embed-height'); + var newWidth = parseInt($txtwidth.val()), + newHeight = parseInt($txtheight.val()); if (newWidth < minEmbedWidth) newWidth = minEmbedWidth; @@ -532,10 +526,10 @@ var ApplicationController = new(function(){ if (newHeight < minEmbedHeight) newHeight = minEmbedHeight; - $('#id-textarea-embed').text(embedCode.replace('{embed-url}', embedConfig.embedUrl).replace('{width}', newWidth).replace('{height}', newHeight)); + $dlg.find('#txt-embed-url').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'); + $txtwidth.val(newWidth + 'px'); + $txtheight.val(newHeight + 'px'); } function openLink(url){ @@ -551,124 +545,40 @@ var ApplicationController = new(function(){ me = this; created = true; - var documentMoveTimer; - - - // 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($.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); - }); - - $('#page-number').on('keyup', function(e){ - if (e.keyCode == 13){ - var newPage = parseInt($('#page-number').val()); - - if (newPage > maxPages) - newPage = maxPages; - if (newPage < 2 || isNaN(newPage)) - newPage = 1; - - if (api) - api.goToPage(newPage-1); - } - }); - - $('#page-number').on('focusout', function(e){ - 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) - api.zoomIn(); - }); - - $('#id-btn-zoom-out').on('click', function(){ - if (api) - api.zoomOut(); - }); - $(window).resize(function(){ onDocumentResize(); }); - $(document).click(function(event){ - if (event && event.target && $(event.target).closest('.popover').length > 0) - return; + 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); + } + } + } + ); - 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); + $('#editor_sdk').on('click', function(e) { + if ( e.target.localName == 'canvas' ) { + e.currentTarget.focus(); + } }); window["flat_desine"] = true; @@ -680,27 +590,16 @@ var ApplicationController = new(function(){ api.asc_registerCallback('asc_onError', onError); api.asc_registerCallback('asc_onDocumentContentReady', onDocumentContentReady); api.asc_registerCallback('asc_onOpenDocumentProgress', onOpenDocument); + api.asc_registerCallback('asc_onPrintUrl', onPrintUrl); + api.asc_registerCallback('asc_onCountPages', onCountPages); // api.asc_registerCallback('OnCurrentVisiblePage', onCurrentPage); api.asc_registerCallback('asc_onCurrentPage', onCurrentPage); - api.asc_registerCallback('asc_onHyperlinkClick', onHyperlinkClick); - api.asc_registerCallback('asc_onStartAction', onLongActionBegin); - api.asc_registerCallback('asc_onEndAction', onLongActionEnd); - - api.asc_registerCallback('asc_onMouseMoveStart', onDocMouseMoveStart); - api.asc_registerCallback('asc_onMouseMoveEnd', onDocMouseMoveEnd); - api.asc_registerCallback('asc_onMouseMove', onDocMouseMove); - - 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(); } diff --git a/apps/documenteditor/embed/js/ApplicationView.js b/apps/documenteditor/embed/js/ApplicationView.js index a42c5c2cc..d2572f42b 100644 --- a/apps/documenteditor/embed/js/ApplicationView.js +++ b/apps/documenteditor/embed/js/ApplicationView.js @@ -32,49 +32,56 @@ */ var ApplicationView = new(function(){ + var $btnTools; + var $dlgEmbed, + $dlgShare; + // Initialize view function createView(){ - $('#id-btn-share').popover({ - trigger : 'manual', - html : true, - template : '

    ', - content : '
    ' + - 'Link:' + - '' + - '' + - '
    ' + - '
    ' + - '' + - '
    ' - }).popover('show'); + $btnTools = $('#box-tools button'); - $('#id-btn-embed').popover({ - trigger : 'manual', - html : true, - template : '

    ', - content : '
    ' + - 'Width:' + - '' + - '' + - 'Height:' + - '
    ' + - '' + - '' + $btnTools.addClass('dropdown-toggle').attr('data-toggle', 'dropdown').attr('aria-expanded', 'true'); + $btnTools.parent().append( + ''); + } + function getTools(name) { + return $btnTools.parent().find(name); + } - }).popover('show'); - - $('body').popover({ - trigger : 'manual', - html : true, - animation : false, - template : '', - content : '
    Press Ctrl and click link' - }).popover('show'); + function getModal(name) { + switch (name) { + case 'embed': return $dlgEmbed; + case 'share': return $dlgShare; + } } return { create: createView + , tools: { + get: getTools + } + , modals: { + get: getModal + , create: function (config) { + if ( !$dlgShare && !!config.shareUrl ) { + $dlgShare = utils.modals.create('share'); + $btnTools.parent().find('#idt-share').attr('data-target', "#" + $dlgShare.attr('id')); + + $dlgShare.find('#id-short-url').val(config.shareUrl); + } + + if ( !$dlgEmbed && !!config.embedUrl ) { + $dlgEmbed = utils.modals.create('embed'); + $btnTools.parent().find('#idt-embed').attr('data-target', "#"+ $dlgEmbed.attr('id')); + } + } + } } })();