Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

[PE embed] updated embed viewer

Browse source
This commit is contained in:
Maxim Kadushkin 2016-11-03 18:22:26 +03:00
parent 83a9f5ee5d
commit 960d5850d4
7 changed files with 353 additions and 520 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

73
apps/common/embed/resources/img/icon-menu-sprite.svg
View file

@ -1,51 +1,50 @@
<?xml version="1.0" encoding="utf-8"?> <?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="44 0 198 44" style="enable-background:new 0 0 198 44;" xml:space="preserve"> viewBox="88 -11 242 44" style="enable-background:new 88 -11 242 44;" xml:space="preserve">
<defs>
<path id="imgtools" class="_st0" d="M46,5v2h18V5H46z M46,12h18v-2H46V12z M46,17h18v-2H46V17z"/>
<path id="imgplus" d="M166,3h-2v7h-7v2h7v7h2v-7h7v-2h-7V3z"/>
<rect id="imgminus" x="179" y="10" width="16" height="2"/>
</defs>
<style type="text/css"> <style type="text/css">
.st0{fill:#010202;} .st0{fill:#fff;}
.st1{fill:#1E1E1C;} .st2{fill-rule:evenodd;clip-rule:evenodd;}
</style> </style>
<g id="XMLID_7_"> <g id="XMLID_7_">
<path id="XMLID_9_" class="st1" d="M84,17H70c-0.6,0-1,0.4-1,1s0.4,1,1,1h14c0.6,0,1-0.4,1-1S84.6,17,84,17z"/> <path id="XMLID_9_" d="M128,6h-14c-0.6,0-1,0.4-1,1s0.4,1,1,1h14c0.6,0,1-0.4,1-1S128.6,6,128,6z"/>
<path id="XMLID_8_" class="st1" d="M76.1,14.6c0.1,0.1,0.2,0.2,0.4,0.2c0.1,0.1,0.3,0.1,0.5,0.1s0.3-0.1,0.5-0.1 <path id="XMLID_8_" d="M120.1,3.6c0.1,0.1,0.2,0.2,0.4,0.2c0.1,0.1,0.3,0.1,0.5,0.1s0.3-0.1,0.5-0.1
c0.1,0,0.3-0.1,0.4-0.2l3.5-3.5c0.4-0.4,0.4-1,0-1.4s-1-0.4-1.4,0l-2,2V4c0-0.6-0.4-1-1-1s-1,0.4-1,1v7.7l-2-2 c0.1,0,0.3-0.1,0.4-0.2l3.5-3.5c0.4-0.4,0.4-1,0-1.4s-1-0.4-1.4,0l-2,2V-7c0-0.6-0.4-1-1-1s-1,0.4-1,1v7.7l-2-2
c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4L76.1,14.6z"/> c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4L120.1,3.6z"/>
</g> </g>
<path id="XMLID_14_" d="M103.3,14c-0.8,0-1.5,0.3-2.1,0.8l-4.7-2.7c0.1-0.3,0.2-0.7,0.2-1.1s-0.1-0.8-0.2-1.1l4.7-2.7 <path id="XMLID_14_" d="M147.3,3c-0.8,0-1.5,0.3-2.1,0.8l-4.7-2.7c0.1-0.3,0.2-0.7,0.2-1.1s-0.1-0.8-0.2-1.1l4.7-2.7
c0.6,0.5,1.3,0.8,2.1,0.8c1.7,0,3.1-1.4,3.1-3.1s-1.4-3.1-3.1-3.1c-1.7,0-3.1,1.4-3.1,3.1c0,0.3,0,0.5,0.1,0.8l-4.9,2.8 c0.6,0.5,1.3,0.8,2.1,0.8c1.7,0,3.1-1.4,3.1-3.1s-1.4-3.1-3.1-3.1s-3.1,1.4-3.1,3.1c0,0.3,0,0.5,0.1,0.8l-4.9,2.8
c-0.5-0.4-1.1-0.6-1.8-0.6c-1.7,0-3.1,1.4-3.1,3.1s1.4,3.1,3.1,3.1c0.7,0,1.3-0.2,1.8-0.6l4.8,2.8c-0.1,0.3-0.1,0.5-0.1,0.8 c-0.5-0.4-1.1-0.6-1.8-0.6c-1.7,0-3.1,1.4-3.1,3.1s1.4,3.1,3.1,3.1c0.7,0,1.3-0.2,1.8-0.6l4.8,2.8c-0.1,0.3-0.1,0.5-0.1,0.8
c0,1.7,1.4,3.1,3.1,3.1s3.1-1.4,3.1-3.1C106.4,15.4,105,14,103.3,14z"/> c0,1.7,1.4,3.1,3.1,3.1c1.7,0,3.1-1.4,3.1-3.1C150.4,4.4,149,3,147.3,3z"/>
<g> <g>
<path d="M112.6,10c0.5-0.5,1.2-0.5,1.7,0l5,5c0.5,0.5,0.5,1.2,0,1.7s-1.2,0.5-1.7,0l-5-5C112.1,11.2,112.1,10.5,112.6,10z"/> <path d="M159.3,0l4-4c0.5-0.5,0.5-1.2,0-1.7s-1.2-0.5-1.7,0l-4.4,4.4c-0.2,0-0.4,0.1-0.6,0.3c-0.3,0.3-0.4,0.7-0.3,1
<path d="M112.6,12c0.5,0.5,1.2,0.5,1.7,0l5-5c0.5-0.5,0.5-1.2,0-1.7s-1.2-0.5-1.7,0l-5,5C112.1,10.8,112.1,11.5,112.6,12z"/> c0,0.3,0.1,0.7,0.3,1c0.2,0.2,0.4,0.3,0.6,0.3l4.4,4.4c0.5,0.5,1.2,0.5,1.7,0s0.5-1.2,0-1.7L159.3,0z"/>
<path id="XMLID_13_" d="M129.4,12c-0.5,0.5-1.2,0.5-1.7,0l-5-5c-0.5-0.5-0.5-1.2,0-1.7s1.2-0.5,1.7,0l5,5 <path d="M173.4-1c-0.2-0.2-0.4-0.3-0.6-0.3l-4.4-4.4c-0.5-0.5-1.2-0.5-1.7,0s-0.5,1.2,0,1.7l4,4l-4,4c-0.5,0.5-0.5,1.2,0,1.7
C129.9,10.8,129.9,11.5,129.4,12z"/> s1.2,0.5,1.7,0l4.4-4.4c0.2,0,0.4-0.1,0.6-0.3c0.3-0.3,0.4-0.7,0.3-1C173.8-0.3,173.7-0.7,173.4-1z"/>
<path d="M129.4,10c-0.5-0.5-1.2-0.5-1.7,0l-5,5c-0.5,0.5-0.5,1.2,0,1.7s1.2,0.5,1.7,0l5-5C129.9,11.2,129.9,10.5,129.4,10z"/>
<g id="XMLID_4_"> <g id="XMLID_4_">
<path id="XMLID_21_" d="M150.9,3.7c0-0.1-0.1-0.2-0.2-0.3c-0.1-0.1-0.2-0.2-0.3-0.2C150.2,3,150.1,3,150,3h-4.2 <path id="XMLID_21_" d="M194.9-7.3c0-0.1-0.1-0.2-0.2-0.3c-0.1-0.1-0.2-0.2-0.3-0.2C194.2-8,194.1-8,194-8h-4.2
c-0.5,0-0.8,0.4-0.8,0.8c0,0.5,1,1.2,1,1.2l0.8,0.8l-2.6,2.6c-0.4,0.4-0.4,1,0,1.4c0.4,0.4,1,0.4,1.4,0l2.6-2.6l1.3,1.4 c-0.5,0-0.8,0.4-0.8,0.8c0,0.5,1,1.2,1,1.2l0.8,0.8l-2.6,2.6c-0.4,0.4-0.4,1,0,1.4s1,0.4,1.4,0l2.6-2.6l1.3,1.4
c0.1,0.2,0.4,0.4,0.7,0.4c0.5,0,0.8-0.4,0.8-0.8V4C151,3.9,151,3.8,150.9,3.7z"/> c0.1,0.2,0.4,0.4,0.7,0.4c0.5,0,0.8-0.4,0.8-0.8V-7C195-7.1,195-7.2,194.9-7.3z"/>
<path id="XMLID_22_" d="M140.4,12.2l-2.6,2.6l-1.3-1.4c-0.1-0.2-0.4-0.4-0.7-0.4c-0.5,0-0.8,0.4-0.8,0.8V18c0,0.1,0,0.3,0.1,0.4 <path id="XMLID_22_" d="M184.4,1.2l-2.6,2.6l-1.3-1.4c-0.1-0.2-0.4-0.4-0.7-0.4c-0.5,0-0.8,0.4-0.8,0.8V7c0,0.1,0,0.3,0.1,0.4
c0,0.1,0.1,0.2,0.2,0.3c0.1,0.1,0.2,0.2,0.3,0.2c0.2,0.1,0.3,0.1,0.4,0.1h4.2c0.5,0,0.8-0.4,0.8-0.8s-1-1.2-1-1.2l-0.8-0.8 c0,0.1,0.1,0.2,0.2,0.3c0.1,0.1,0.2,0.2,0.3,0.2C179.8,8,179.9,8,180,8h4.2c0.5,0,0.8-0.4,0.8-0.8S184,6,184,6l-0.8-0.8l2.6-2.6
l2.6-2.6c0.4-0.4,0.4-1,0-1.4C141.4,11.8,140.8,11.8,140.4,12.2z"/> c0.4-0.4,0.4-1,0-1.4C185.4,0.8,184.8,0.8,184.4,1.2z"/>
</g> </g>
</g> </g>
<g> <path id="imgtools" d="M90-6v2h18v-2H90z M90,1h18v-2H90V1z M90,6h18V4H90V6z"/>
<path d="M237.9,11L224,3v16L237.9,11z"/> <path id="imgplus" d="M210-8h-2v7h-7v2h7v7h2V1h7v-2h-7V-8z"/>
<rect id="imgminus" x="223" y="-1" width="16" height="2"/>
<path id="play" d="M305,0l-16-7V6.9L305,0z"/>
<polygon id="rmove" class="st2" points="279.9,-0.2 272.1,-8 270,-5.9 275.8,-0.1 270,5.8 272.1,7.9 279.9,0.1 280,-0.1"/>
<polygon id="lmove" class="st2" points="258,-5.8 255.9,-7.9 248.1,-0.1 248,0.1 248.1,0.2 255.9,8 258,5.9 252.2,0.1 "/>
<g id="pause">
<rect x="313" y="-7" width="4" height="14"/>
<rect x="321" y="-7" width="4" height="14"/>
</g> </g>
<g> <use xlink:href="#imgtools" class="st0" y="22"></use>
<path d="M216,19V3l-13.9,8L216,19z"/> <use xlink:href="#imgplus" class="st0" y="22"></use>
</g> <use xlink:href="#imgminus" class="st0" y="22"></use>
<use xlink:href="#imgtools" fill="#010202"></use> <use xlink:href="#play" class="st0" y="22" x="2"></use>
<use xlink:href="#imgtools" fill="#fff" y="22"></use> <use xlink:href="#pause" class="st0" y="22"></use>
<use xlink:href="#imgplus"></use> <use xlink:href="#rmove" class="st0" x="1" y="22"></use>
<use xlink:href="#imgplus" fill="#fff" y="22"></use> <use xlink:href="#lmove" class="st0" x="-1" y="22"></use>
<use xlink:href="#imgminus"></use>
<use xlink:href="#imgminus" fill="#fff" y="22"></use>
</svg> </svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3 KiB

After

Width:  |  Height:  |  Size: 3.3 KiB

16
apps/common/embed/resources/less/common.less
View file

@ -548,7 +548,7 @@
.svg-icon { .svg-icon {
background: data-uri('../../../../common/embed/resources/img/icon-menu-sprite.svg') no-repeat; background: data-uri('../../../../common/embed/resources/img/icon-menu-sprite.svg') no-repeat;
background-size: 22px*9 22px*2; background-size: 22px*11 22px*2;
&.download { &.download {
background-position: -22px 0; background-position: -22px 0;
@ -568,6 +568,20 @@
&.zoom-down { &.zoom-down {
background-position: -22px*6 -22px; background-position: -22px*6 -22px;
} }
&.slide-prev {
background-position: -22px*7 -22px;
}
&.slide-next {
background-position: -22px*8 -22px;
}
&.play {
background-position: -22px*9 -22px;
}
&.pause {
background-position: -22px*10 -22px;
}
} }
.mi-icon { .mi-icon {

47
apps/presentationeditor/embed/index.html
View file

@ -192,11 +192,6 @@
<script src="../../../vendor/less/dist/less-1.5.1.js" type="text/javascript"></script> <script src="../../../vendor/less/dist/less-1.5.1.js" type="text/javascript"></script>
<!-- debug end --> <!-- debug end -->
<!--facebook button-->
<div id="fb-root"></div>
<!--twitter button-->
<script> <script>
var userAgent = navigator.userAgent.toLowerCase(), var userAgent = navigator.userAgent.toLowerCase(),
check = function(regex){ return regex.test(userAgent); }; check = function(regex){ return regex.test(userAgent); };
@ -268,29 +263,33 @@
'</div>'); '</div>');
</script> </script>
<div id="editor_sdk" class="viewer" style="overflow: hidden;"></div> <div id="box-preview">
<div id="id-preview" tabindex="-1"></div>
</div>
<div id="editor_sdk" class="viewer" style="overflow: hidden;" tabindex="-1"></div>
<div class="overlay-controls" style="margin-left: -32px"> <div class="overlay-controls" style="margin-left: -32px">
<ul class="left"> <ul class="left">
<li id="id-btn-move-left"><button class="overlay"><i class="overlay-icon-move-left"></i></button></li> <li id="btn-left"><button class="overlay svg-icon slide-prev"></button></li>
<li id="id-btn-move-right"><button class="overlay"><i class="overlay-icon-move-right"></i></button></li> <li id="btn-play"><button class="overlay svg-icon play"></button></li>
<li id="btn-right"><button class="overlay svg-icon slide-next"></button></li>
</ul> </ul>
</div> </div>
<div class="toolbar" id="toolbar"> <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><input id="page-number" class="form-control input-sm" style="width: 25px;" type="text" value="0"><span class="text" id="pages">of 0</span></li> <div class="group right">
<li class="separator"></li> <div class="item"><input id="page-number" class="form-control input-xs masked" type="text" value="0"><span class="text" id="pages" tabindex="-1">of 0</span></div>
<li><button id="id-btn-fullscreen" class="control-btn no-caption"><i class="control-icon-fullscreen"></i></button></li> <div class="item separator"></div>
<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>
<div class="error modal fade" id="id-critical-error-dialog" tabindex="-1" role="dialog"> <div class="error modal fade" id="id-critical-error-dialog" tabindex="-1" role="dialog">
@ -314,11 +313,12 @@
<div class="cmd-loader-title">Please wait...</div> <div class="cmd-loader-title">Please wait...</div>
</div> </div>
<div class="hyperlink-tooltip" data-toggle="tooltip" title="Press Ctrl and click the link" style="display:none;"></div>
<!--vendor--> <!--vendor-->
<script type="text/javascript" src="../../../vendor/jquery/jquery.min.js"></script> <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/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/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/sockjs/sockjs.min.js"></script>
<script type="text/javascript" src="../../../vendor/xregexp/xregexp-all-min.js"></script> <script type="text/javascript" src="../../../vendor/xregexp/xregexp-all-min.js"></script>
<script type="text/javascript" src="../../../vendor/jszip/jszip.min.js"></script> <script type="text/javascript" src="../../../vendor/jszip/jszip.min.js"></script>
@ -335,6 +335,9 @@
<!--application--> <!--application-->
<script type="text/javascript" src="../../common/Gateway.js"></script> <script type="text/javascript" src="../../common/Gateway.js"></script>
<script type="text/javascript" src="../../common/Analytics.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/ApplicationView.js"></script>
<script type="text/javascript" src="js/ApplicationController.js"></script> <script type="text/javascript" src="js/ApplicationController.js"></script>
<script type="text/javascript" src="js/application.js"></script> <script type="text/javascript" src="js/application.js"></script>

645
apps/presentationeditor/embed/js/ApplicationController.js
View file

@ -38,14 +38,9 @@ var ApplicationController = new(function(){
embedConfig = {}, embedConfig = {},
permissions = {}, permissions = {},
maxPages = 0, 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, created = false,
currentPage = 0, currentPage = 0,
iframePrint = null; ttOffset = [0, -10];
// Initialize analytics // Initialize analytics
// ------------------------- // -------------------------
@ -61,52 +56,6 @@ var ApplicationController = new(function(){
return; return;
} }
// 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 // Handlers
// ------------------------- // -------------------------
@ -114,37 +63,7 @@ var ApplicationController = new(function(){
config = $.extend(config, data.config); config = $.extend(config, data.config);
embedConfig = $.extend(embedConfig, data.config.embedded); 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: ' + embedConfig.shareUrl + '"><span class="glyphicon glyphicon-envelope"></span>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 // Docked toolbar
if (embedConfig.toolbarDocked === 'top') { if (embedConfig.toolbarDocked === 'top') {
@ -153,10 +72,14 @@ var ApplicationController = new(function(){
} else { } else {
$('#toolbar').addClass('bottom'); $('#toolbar').addClass('bottom');
$('#editor_sdk').addClass('bottom'); $('#editor_sdk').addClass('bottom');
$('#box-tools').removeClass('dropdown').addClass('dropup');
ttOffset[1] = -40;
} }
if (config.canBackToFolder === false || !(config.customization && config.customization.goback && config.customization.goback.url)) {
$('#id-btn-close').hide();
// Hide last separator // Hide last separator
if (!$('#id-btn-fullscreen').is(":visible") && !$('#id-btn-close').is(":visible")) {
$('#toolbar .right .separator').hide(); $('#toolbar .right .separator').hide();
$('#pages').css('margin-right', '12px'); $('#pages').css('margin-right', '12px');
} }
@ -184,11 +107,8 @@ var ApplicationController = new(function(){
Common.Analytics.trackEvent('Load', 'Start'); Common.Analytics.trackEvent('Load', 'Start');
} }
if (typeof embedConfig.saveUrl === 'undefined' && permissions.print === false) if (!embedConfig.saveUrl && permissions.print === false)
$('#id-btn-copy').hide(); $('#idt-copy').hide();
if (!$('#id-btn-copy').is(":visible") && !$('#id-btn-share').is(":visible") && !$('#id-btn-embed').is(":visible") )
$('#toolbar .left .separator').hide();
} }
} }
@ -202,14 +122,6 @@ var ApplicationController = new(function(){
currentPage = number; currentPage = number;
} }
function onHyperlinkClick(url) {
if (url) {
var newDocumentPage = window.open(url, '_blank');
if (newDocumentPage)
newDocumentPage.focus();
}
}
function onLongActionBegin(type, id) { function onLongActionBegin(type, id) {
var text = ''; var text = '';
switch (id) switch (id)
@ -236,12 +148,12 @@ var ApplicationController = new(function(){
me.isHideBodyTip = true; me.isHideBodyTip = true;
} }
var $ttEl, $tooltip;
function onDocMouseMoveEnd() { function onDocMouseMoveEnd() {
if (me.isHideBodyTip) { if (me.isHideBodyTip) {
var $tipHyperlink = $('#id-tip-hyperlink'); if ( $tooltip ) {
$tooltip.tooltip('hide');
if ($tipHyperlink.length > 0) { $tooltip = false;
$tipHyperlink.hide();
} }
} }
} }
@ -251,19 +163,30 @@ var ApplicationController = new(function(){
if (data.get_Type() == 1) { // hyperlink if (data.get_Type() == 1) { // hyperlink
me.isHideBodyTip = false; me.isHideBodyTip = false;
var $tipHyperlink = $('#id-tip-hyperlink'), if ( !$ttEl ) {
hyperProps = data.get_Hyperlink(), $ttEl = $('.hyperlink-tooltip');
toolTip = (hyperProps.get_ToolTip()) ? hyperProps.get_ToolTip() : hyperProps.get_Value(); $ttEl.tooltip({'container':'body', 'trigger':'manual'});
$ttEl.on('shown.bs.tooltip', function(e) {
$tooltip = $ttEl.data('bs.tooltip').tip();
if ($tipHyperlink.length > 0) { $tooltip.css({
$tipHyperlink.find('.popover-content p').html(htmlEncode(toolTip) + '<br><b>Press Ctrl and click link</b>'); left: $ttEl.ttpos[0] + ttOffset[0],
$tipHyperlink.show(); top: $ttEl.ttpos[1] + ttOffset[1]
});
$tooltip.find('.tooltip-arrow').css({left: 10});
});
} }
$tipHyperlink.css({ if ( !$tooltip ) {
left: data.get_X() - 10, $ttEl.ttpos = [data.get_X(), data.get_Y()];
top : data.get_Y() - 25 $ttEl.tooltip('show');
}) } else {
$tooltip.css({
left:data.get_X() + ttOffset[0],
top:data.get_Y() + ttOffset[1]
});
}
} }
} }
} }
@ -273,32 +196,12 @@ var ApplicationController = new(function(){
} }
function onPrint() { function onPrint() {
if (api && permissions.print!==false) if (permissions.print!==false)
api.asc_Print($.browser.chrome || $.browser.safari || $.browser.opera); api.asc_Print($.browser.chrome || $.browser.safari || $.browser.opera);
} }
function onPrintUrl(url) { 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() { function hidePreloader() {
@ -306,19 +209,170 @@ var ApplicationController = new(function(){
} }
function onDocumentContentReady() { function onDocumentContentReady() {
setVisiblePopover($('#id-popover-share'), false);
setVisiblePopover($('#id-popover-embed'), false);
$('#id-tip-hyperlink').hide();
handlerToolbarSize();
if (api) {
api.ShowThumbnails(false); api.ShowThumbnails(false);
api.asc_DeleteVerticalScroll(); api.asc_DeleteVerticalScroll();
}
hidePreloader(); 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_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);
api.asc_registerCallback('asc_onHyperlinkClick', common.utils.openLink);
api.asc_registerCallback('asc_onStartAction', onLongActionBegin);
api.asc_registerCallback('asc_onEndAction', onLongActionEnd);
api.asc_registerCallback('asc_onEndDemonstration', onPlayStop);
api.asc_registerCallback('asc_onDemonstrationSlideChanged', onPlaySlideChanged);
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 (api && permissions.print!==false){
api.asc_Print($.browser.chrome || $.browser.safari || $.browser.opera);
}
Common.Analytics.trackEvent('Save');
});
var $pagenum = $('#page-number');
$pagenum.on({
'keyup': function(e){
if ( e.keyCode == 13 ){
var newPage = parseInt($('#page-number').val());
if ( newPage > maxPages ) newPage = maxPages; else
if ( newPage < 2 || isNaN(newPage) ) newPage = 1;
if ( isplaymode )
api.DemonstrationGoToSlide(newPage-1); else
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();
});
$('#id-btn-close').on('click', function(){
if (config.customization && config.customization.goback && config.customization.goback.url)
window.parent.location.href = config.customization.goback.url;
});
$('#btn-left').on('click', function(){
if ( isplaymode ) {
api.DemonstrationPrevSlide();
} else
if (currentPage > 0) {
api.goToPage(currentPage - 1);
}
});
$('#btn-right').on('click', function(){
if ( isplaymode ) {
api.DemonstrationNextSlide();
} else
if (currentPage < maxPages - 1) {
api.goToPage(currentPage + 1);
}
});
var documentMoveTimer;
var ismoved = false;
$(document).on({
'click': function(e) {
clearTimeout(documentMoveTimer);
documentMoveTimer = undefined;
},
'mousemove': function (e) {
$('#btn-left').fadeIn();
$('#btn-right').fadeIn();
ismoved = true;
if ( !documentMoveTimer ) {
documentMoveTimer = setInterval(function(){
if ( !ismoved ) {
// $('#btn-left').fadeOut();
// $('#btn-right').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();
}
});
$('#btn-play').on('click', onPlayStart);
Common.Analytics.trackEvent('Load', 'Complete'); Common.Analytics.trackEvent('Load', 'Complete');
} }
@ -342,6 +396,40 @@ var ApplicationController = new(function(){
api.zoomFitToPage(); api.zoomFitToPage();
} }
function onOpenDocument(progress) {
var proc = (progress.asc_getCurrentFont() + progress.asc_getCurrentImage())/(progress.asc_getFontsCount() + progress.asc_getImagesCount());
$('#loadmask-text').html('Loading document: ' + Math.min(Math.round(proc * 100), 100) + '%');
}
var isplaymode;
function onPlayStart(e) {
if ( !isplaymode ) {
if ( isplaymode === undefined ) {
$('#box-preview').show();
api.StartDemonstration('id-preview', currentPage);
} else
api.DemonstrationPlay();
$('#btn-play button').addClass('pause');
} else {
$('#btn-play button').removeClass('pause');
api.DemonstrationPause();
}
isplaymode = !isplaymode;
}
function onPlayStop() {
isplaymode = undefined;
$('#page-number').val(currentPage + 1);
$('#btn-play button').removeClass('pause');
$('#box-preview').hide();
}
function onPlaySlideChanged(number) {
if ( number++ < maxPages)
$('#page-number').val(number);
}
function showMask() { function showMask() {
$('#id-loadmask').modal({ $('#id-loadmask').modal({
backdrop: 'static', backdrop: 'static',
@ -353,11 +441,6 @@ var ApplicationController = new(function(){
$('#id-loadmask').modal('hide'); $('#id-loadmask').modal('hide');
} }
function onOpenDocument(progress) {
var proc = (progress.asc_getCurrentFont() + progress.asc_getCurrentImage())/(progress.asc_getFontsCount() + progress.asc_getImagesCount());
$('#loadmask-text').html('Loading document: ' + Math.min(Math.round(proc * 100), 100) + '%');
}
function onError(id, level, errData) { function onError(id, level, errData) {
hidePreloader(); hidePreloader();
@ -442,114 +525,11 @@ var ApplicationController = new(function(){
// Helpers // 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() { function onDocumentResize() {
if (api) { if (api) {
api.Resize(); api.Resize();
api.zoomFitToPage(); api.zoomFitToPage();
} }
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(){ function createController(){
@ -559,165 +539,12 @@ var ApplicationController = new(function(){
me = this; me = this;
created = true; 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 // 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('keypress', 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);
}
});
$('#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-move-left').on('click', function(){
if (api) {
if (currentPage > 0) {
api.goToPage(currentPage - 1);
}
}
});
$('#id-btn-move-right').on('click', function(){
if (api) {
if (currentPage < maxPages - 1) {
api.goToPage(currentPage + 1);
}
}
});
$(window).resize(function(){ $(window).resize(function(){
onDocumentResize(); 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);
clearTimeout(documentMoveTimer);
});
$(document).mousemove(function(event){
$('#id-btn-move-left').fadeIn();
$('#id-btn-move-right').fadeIn();
clearTimeout(documentMoveTimer);
documentMoveTimer = setTimeout(function(){
$('#id-btn-move-left').fadeOut();
$('#id-btn-move-right').fadeOut();
}, 2000);
});
api = new Asc.asc_docs_api({ api = new Asc.asc_docs_api({
'id-view' : 'editor_sdk' 'id-view' : 'editor_sdk'
}); });
@ -729,26 +556,12 @@ var ApplicationController = new(function(){
api.asc_registerCallback('asc_onDocumentContentReady', onDocumentContentReady); api.asc_registerCallback('asc_onDocumentContentReady', onDocumentContentReady);
api.asc_registerCallback('asc_onOpenDocumentProgress', onOpenDocument); api.asc_registerCallback('asc_onOpenDocumentProgress', onOpenDocument);
api.asc_registerCallback('asc_onCountPages', onCountPages); api.asc_registerCallback('asc_onCountPages', onCountPages);
// api.asc_registerCallback('OnCurrentVisiblePage', onCurrentPage);
api.asc_registerCallback('asc_onCurrentPage', 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 // Initialize api gateway
Common.Gateway.on('init', loadConfig); Common.Gateway.on('init', loadConfig);
Common.Gateway.on('opendocument', loadDocument); Common.Gateway.on('opendocument', loadDocument);
Common.Gateway.on('showerror', onExternalError); Common.Gateway.on('showerror', onExternalError);
Common.Gateway.on('processmouse', onProcessMouse);
Common.Gateway.on('downloadas', onDownloadAs);
Common.Gateway.ready(); Common.Gateway.ready();
} }

51
apps/presentationeditor/embed/js/ApplicationView.js
View file

@ -31,50 +31,31 @@
* *
*/ */
var ApplicationView = new(function(){ var ApplicationView = new(function(){
var $btnTools;
// Initialize view // Initialize view
function createView(){ 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);
$('body').popover({
trigger : 'manual',
html : true,
animation : false,
template : '<div class="popover hyperlink" id="id-tip-hyperlink"><div class="popover-inner"><div class="popover-content"><p></p></div></div></div>',
content : '<br><b>Press Ctrl and click link</b>'
}).popover('show');
} }
return { return {
create: createView create: createView
, tools: {
get: getTools
}
} }
})(); })();

2
apps/presentationeditor/embed/js/application.js
View file

@ -32,9 +32,7 @@
*/ */
(function ($) { (function ($) {
$(function(){
ApplicationView.create(); ApplicationView.create();
ApplicationController.create(); ApplicationController.create();
})
})(window.jQuery); })(window.jQuery);

27
apps/presentationeditor/embed/resources/less/application.less
View file

@ -2,8 +2,33 @@
@import "../../../../common/embed/resources/less/common.less"; @import "../../../../common/embed/resources/less/common.less";
.overlay-controls { .overlay-controls {
bottom: 15px; /*bottom: 15px;*/
} }
.overlay-icon-move-left { background-position: -64px -120px; } .overlay-icon-move-left { background-position: -64px -120px; }
.overlay-icon-move-right { background-position: -96px -120px; } .overlay-icon-move-right { background-position: -96px -120px; }
#box-preview {
position:absolute;
left: 0;
top: 0;
display:none;
width:100%;
height:100%;
z-index: 10;
padding: 32px 0 0 0;
}
#id-preview {
width:100%;
height:100%;
position: relative;
}
.svg-icon {
&.play {
&.pause {
background-position: -22px*10 -22px;
}
}
}