Skip to content

W
web-apps
Commit 960d5850 authored by Maxim Kadushkin's avatar Maxim Kadushkin
Browse files
Options

[PE embed] updated embed viewer

parent 83a9f5ee
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 352 additions and 519 deletions
apps/common/embed/resources/img/icon-menu-sprite.svg
View file @ 960d5850
<?xml version="1.0" encoding="utf-8"?>
<!-- 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"
viewBox="44 0 198 44" style="enable-background:new 0 0 198 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>
viewBox="88 -11 242 44" style="enable-background:new 88 -11 242 44;" xml:space="preserve">
<style type="text/css">
.st0{fill:#010202;}
.st1{fill:#1E1E1C;}
.st0{fill:#fff;}
.st2{fill-rule:evenodd;clip-rule:evenodd;}
</style>
<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_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
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
c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4L76.1,14.6z"/>
<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_" 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,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.4L120.1,3.6z"/>
</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
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
<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.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
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>
<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="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"/>
<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
C129.9,10.8,129.9,11.5,129.4,12z"/>
<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"/>
<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
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 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
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"/>
<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
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
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"/>
<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
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
l2.6-2.6c0.4-0.4,0.4-1,0-1.4C141.4,11.8,140.8,11.8,140.4,12.2z"/>
<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.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.8V-7C195-7.1,195-7.2,194.9-7.3z"/>
<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.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
c0.4-0.4,0.4-1,0-1.4C185.4,0.8,184.8,0.8,184.4,1.2z"/>
</g>
</g>
<g>
<path d="M237.9,11L224,3v16L237.9,11z"/>
</g>
<g>
<path d="M216,19V3l-13.9,8L216,19z"/>
<path id="imgtools" d="M90-6v2h18v-2H90z M90,1h18v-2H90V1z M90,6h18V4H90V6z"/>
<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>
<use xlink:href="#imgtools" fill="#010202"></use>
<use xlink:href="#imgtools" fill="#fff" y="22"></use>
<use xlink:href="#imgplus"></use>
<use xlink:href="#imgplus" fill="#fff" y="22"></use>
<use xlink:href="#imgminus"></use>
<use xlink:href="#imgminus" fill="#fff" y="22"></use>
<use xlink:href="#imgtools" class="st0" y="22"></use>
<use xlink:href="#imgplus" class="st0" y="22"></use>
<use xlink:href="#imgminus" class="st0" y="22"></use>
<use xlink:href="#play" class="st0" y="22" x="2"></use>
<use xlink:href="#pause" class="st0" y="22"></use>
<use xlink:href="#rmove" class="st0" x="1" y="22"></use>
<use xlink:href="#lmove" class="st0" x="-1" y="22"></use>
</svg>
apps/common/embed/resources/less/common.less
View file @ 960d5850
......@@ -548,7 +548,7 @@
.svg-icon {
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 {
background-position: -22px 0;
......@@ -568,6 +568,20 @@
&.zoom-down {
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 {
......
apps/presentationeditor/embed/index.html
View file @ 960d5850
......@@ -192,11 +192,6 @@
<script src="../../../vendor/less/dist/less-1.5.1.js" type="text/javascript"></script>
<!-- debug end -->
<!--facebook button-->
<div id="fb-root"></div>
<!--twitter button-->
<script>
var userAgent = navigator.userAgent.toLowerCase(),
check = function(regex){ return regex.test(userAgent); };
......@@ -268,29 +263,33 @@
'</div>');
</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">
<ul class="left">
<li id="id-btn-move-left"><button class="overlay"><i class="overlay-icon-move-left"></i></button></li>
<li id="id-btn-move-right"><button class="overlay"><i class="overlay-icon-move-right"></i></button></li>
<li id="btn-left"><button class="overlay svg-icon slide-prev"></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>
</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><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>
<li class="separator"></li>
<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"><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>
<div class="item separator"></div>
<div class="item"><button id="id-btn-close" class="control-btn close"><span aria-hidden="true">&times;</span></button></div>
</div>
</div>
<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>
<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/xregexp/xregexp-all-min.js"></script>
<script type="text/javascript" src="../../../vendor/jszip/jszip.min.js"></script>
......@@ -335,6 +335,9 @@
<!--application-->
<script type="text/javascript" src="../../common/Gateway.js"></script>
<script type="text/javascript" src="../../common/Analytics.js"></script>
<script type="text/javascript" src="../../common/embed/lib/util/utils.js"></script>
<script type="text/javascript" src="../../common/embed/lib/view/modals.js"></script>
<script type="text/javascript" src="../../common/embed/lib/controller/modals.js"></script>
<script type="text/javascript" src="js/ApplicationView.js"></script>
<script type="text/javascript" src="js/ApplicationController.js"></script>
<script type="text/javascript" src="js/application.js"></script>
......
apps/presentationeditor/embed/js/ApplicationView.js
View file @ 960d5850
......@@ -31,50 +31,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>'
}).popover('show');
$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>');
}
$('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');
function getTools(name) {
return $btnTools.parent().find(name);
}
return {
create: createView
, tools: {
get: getTools
}
}
})();
apps/presentationeditor/embed/js/application.js
View file @ 960d5850
......@@ -32,9 +32,7 @@
*/
(function ($) {
$(function(){
ApplicationView.create();
ApplicationController.create();
})
ApplicationView.create();
ApplicationController.create();
})(window.jQuery);
apps/presentationeditor/embed/resources/less/application.less
View file @ 960d5850
......@@ -2,8 +2,33 @@
@import "../../../../common/embed/resources/less/common.less";
.overlay-controls {
bottom: 15px;
/*bottom: 15px;*/
}
.overlay-icon-move-left { background-position: -64px -120px; }
.overlay-icon-move-right { background-position: -96px -120px; }
\ No newline at end of file
.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;
}
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7