[SSE embed] updated spreadsheet edbed viewer
This commit is contained in:
Maxim Kadushkin
parent
9cd0dcb9d4
commit
3d18b36c28
|
|
@ -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-out"><button class="overlay"><i class="overlay-icon-zoom-out"></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 svg-icon zoom-down"></button></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="toolbar" id="toolbar">
|
||||
<ul class="left">
|
||||
<li><a id="header-logo" class="brand-logo" href="http://www.onlyoffice.com/" target="_blank"></a></li>
|
||||
<li class="separator"></li>
|
||||
<li id="id-btn-copy"><button class="control-btn"><i class="control-icon-save"></i><span>Save Copy</span></button></li>
|
||||
<li id="id-btn-share"><button class="control-btn"><i class="control-icon-share"></i><span>Share</span></button></li>
|
||||
<li id="id-btn-embed"><button class="control-btn"><i class="control-icon-embed"></i><span>Embed</span></button></li>
|
||||
</ul>
|
||||
<ul class="right">
|
||||
<li><button id="id-btn-fullscreen" class="control-btn no-caption"><i class="control-icon-fullscreen"></i></button></li>
|
||||
<li><button id="id-btn-close" class="control-btn no-caption"><i class="control-icon-close"></i></button></li>
|
||||
</ul>
|
||||
<div class="group left">
|
||||
<div id="box-tools" class="dropdown">
|
||||
<button class="control-btn svg-icon tools"></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="group center">
|
||||
<span><a id="header-logo" class="brand-logo" href="http://www.onlyoffice.com/" target="_blank"></a></span>
|
||||
</div>
|
||||
<div class="group right">
|
||||
<div class="item"><button id="id-btn-close" class="control-btn close"><span aria-hidden="true">×</span></button></div>
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
$('#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();
|
||||
common.controller.modals.init(embedConfig);
|
||||
|
||||
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) {
|
||||
var el = $('#id-popover-social-container ul .share-mail > a');
|
||||
if (el.length) {
|
||||
el.attr('href', el.attr('href').replace(/:\sundefined&/, ': ' + docConfig.title + '&'));
|
||||
}
|
||||
}
|
||||
|
||||
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();
|
||||
}
|
||||
}
|
||||
|
||||
function onSheetsChanged(){
|
||||
if (api){
|
||||
maxPages = api.asc_getWorksheetsCount();
|
||||
function setActiveWorkSheet(index) {
|
||||
var $box = $('#worksheets');
|
||||
$box.find('> li').removeClass('active');
|
||||
$box.find('#worksheet' + index).addClass('active');
|
||||
|
||||
var setActiveWorkSheet = function(index) {
|
||||
$.each($('#worksheets').children('li'), function(){
|
||||
$(this).removeClass('active');
|
||||
});
|
||||
$('#worksheet-' + index).addClass('active');
|
||||
api.asc_showWorksheet(index);
|
||||
};
|
||||
api.asc_showWorksheet(index);
|
||||
}
|
||||
|
||||
function onSheetsChanged(){
|
||||
maxPages = api.asc_getWorksheetsCount();
|
||||
|
||||
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,27 +133,17 @@ var ApplicationController = new(function(){
|
|||
}
|
||||
};
|
||||
|
||||
$.each($('#worksheets').children('li'), function(){
|
||||
$(this).unbind('click');
|
||||
$(this).remove();
|
||||
});
|
||||
var $box = $('#worksheets');
|
||||
$box.find('li').off();
|
||||
$box.empty();
|
||||
|
||||
for (var i = 0; i < maxPages; i++) {
|
||||
$('#worksheets').append('<li id="worksheet-' + i + '">' + api.asc_getWorksheetName(i).replace(/\s/g,' ') + '</li>');
|
||||
var $worksheet = $('#worksheet-' + i);
|
||||
$worksheet && $worksheet.bind('click', handleWorksheet)
|
||||
}
|
||||
|
||||
setActiveWorkSheet(api.asc_getActiveWorksheetIndex());
|
||||
var tpl = '<li id="worksheet{index}">{title}</li>';
|
||||
for (var i = 0; i < maxPages; i++) {
|
||||
var item = tpl.replace(/\{index}/, i).replace(/\{title}/,api.asc_getWorksheetName(i).replace(/\s/g,' '));
|
||||
$(item).appendTo($box).on('click', handleWorksheet);
|
||||
}
|
||||
}
|
||||
|
||||
function onHyperlinkClick(url) {
|
||||
if (url) {
|
||||
var newDocumentPage = window.open(url, '_blank');
|
||||
if (newDocumentPage)
|
||||
newDocumentPage.focus();
|
||||
}
|
||||
setActiveWorkSheet(api.asc_getActiveWorksheetIndex());
|
||||
}
|
||||
|
||||
function onDownloadUrl(url) {
|
||||
|
|
@ -242,32 +151,12 @@ var ApplicationController = new(function(){
|
|||
}
|
||||
|
||||
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) {
|
||||
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;
|
||||
common.utils.dialogPrint(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)
|
||||
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();
|
||||
if (api) api.asc_Resize();
|
||||
}
|
||||
|
||||
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_onDownloadUrl', onDownloadUrl);
|
||||
api.asc_registerCallback('asc_onPrint', onPrint);
|
||||
api.asc_registerCallback('asc_onPrintUrl', onPrintUrl);
|
||||
api.asc_registerCallback('asc_onActiveSheetChanged', setActiveWorkSheet);
|
||||
|
||||
// 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();
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -32,41 +32,31 @@
|
|||
*/
|
||||
var ApplicationView = new(function(){
|
||||
|
||||
var $btnTools;
|
||||
|
||||
// Initialize view
|
||||
|
||||
function createView(){
|
||||
$('#id-btn-share').popover({
|
||||
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');
|
||||
$btnTools = $('#box-tools button');
|
||||
|
||||
$('#id-btn-embed').popover({
|
||||
trigger : 'manual',
|
||||
html : true,
|
||||
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>',
|
||||
content : '<div class="size-manual">' +
|
||||
'<span class="caption">Width:</span>' +
|
||||
'<input id="id-input-embed-width" class="form-control input-xs" type="text" value="400px">' +
|
||||
'<input id="id-input-embed-height" class="form-control input-xs right" type="text" value="600px">' +
|
||||
'<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>'
|
||||
$btnTools.addClass('dropdown-toggle').attr('data-toggle', 'dropdown').attr('aria-expanded', 'true');
|
||||
$btnTools.parent().append(
|
||||
'<ul class="dropdown-menu">' +
|
||||
'<li><a id="idt-download" href="#"><span class="mi-icon svg-icon download"></span>Download</a></li>' +
|
||||
'<li><a id="idt-share" href="#" data-toggle="modal"><span class="mi-icon svg-icon share"></span>Share</a></li>' +
|
||||
'<li><a id="idt-embed" href="#" data-toggle="modal"><span class="mi-icon svg-icon embed"></span>Embed</a></li>' +
|
||||
'<li><a id="idt-fullscreen" href="#"><span class="mi-icon svg-icon fullscr"></span>Full Screen</a></li>' +
|
||||
'</ul>');
|
||||
}
|
||||
|
||||
|
||||
}).popover('show');
|
||||
function getTools(name) {
|
||||
return $btnTools.parent().find(name);
|
||||
}
|
||||
|
||||
return {
|
||||
create: createView
|
||||
, tools: {
|
||||
get: getTools
|
||||
}
|
||||
}
|
||||
})();
|
||||
|
|
|
|||
Loading…
Reference in a new issue