Added support of print and unselectable styles, updated vimeo and youtube parsing method for this

This commit is contained in:
Wu Cheng-Han 2015-09-25 18:55:56 +08:00
parent 2493c8f986
commit bb8a0da71f
6 changed files with 58 additions and 26 deletions

View file

@ -2,6 +2,7 @@
.vimeo, .vimeo,
.youtube { .youtube {
position: relative;
cursor: pointer; cursor: pointer;
display: table; display: table;
max-width: 540px; max-width: 540px;
@ -11,17 +12,28 @@
background-size: contain; background-size: contain;
background-color: black; background-color: black;
} }
.vimeo img,
.youtube img {
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.vimeo .icon, .vimeo .icon,
.youtube .icon { .youtube .icon {
opacity: 0.3; position: absolute;
display: table-cell; height: auto;
vertical-align: middle; width: auto;
height: inherit; top: 50%;
margin: 0 auto; left: 50%;
margin-top: -40px;
margin-left: -40px;
color: white; color: white;
opacity: 0.3;
-webkit-transition: opacity 0.2s; /* Safari */ -webkit-transition: opacity 0.2s; /* Safari */
transition: opacity 0.2s; transition: opacity 0.2s;
} }
.vimeo:hover .icon, .vimeo:hover .icon,
.youtube:hover .icon { .youtube:hover .icon {
@ -214,4 +226,21 @@ small .dropdown {
small .dropdown a:focus, small .dropdown a:hover { small .dropdown a:focus, small .dropdown a:hover {
text-decoration: none; text-decoration: none;
}
.unselectable {
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
user-select: none;
}
@media print {
div, table, img, pre, blockquote {
page-break-inside: avoid !important;
}
a[href]:after {
font-size: 12px !important;
}
} }

View file

@ -209,13 +209,6 @@ div[contenteditable]:empty:not(:focus):before{
.CodeMirror-scrollbar-filler { .CodeMirror-scrollbar-filler {
background: inherit; background: inherit;
} }
.unselectable {
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
user-select: none;
}
.btn-file { .btn-file {
position: relative; position: relative;
@ -295,4 +288,12 @@ div[contenteditable]:empty:not(:focus):before{
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
@media print {
body {
padding-top: 0 !important;
}
.CodeMirror {
height: auto !important;
}
} }

View file

@ -117,7 +117,8 @@ function finishView(view) {
dataType: 'jsonp', dataType: 'jsonp',
success: function (data) { success: function (data) {
var thumbnail_src = data[0].thumbnail_large; var thumbnail_src = data[0].thumbnail_large;
$(value).css('background-image', 'url(' + thumbnail_src + ')'); var image = '<img src="' + thumbnail_src + '" />';
$(value).prepend(image);
} }
}); });
}); });
@ -496,10 +497,11 @@ var youtubePlugin = new Plugin(
var div = $('<div class="youtube raw"></div>'); var div = $('<div class="youtube raw"></div>');
setSizebyAttr(div, div); setSizebyAttr(div, div);
div.attr('videoid', videoid); div.attr('videoid', videoid);
var thumbnail_src = '//img.youtube.com/vi/' + videoid + '/hqdefault.jpg';
var image = '<img src="' + thumbnail_src + '" />';
div.append(image);
var icon = '<i class="icon fa fa-youtube-play fa-5x"></i>'; var icon = '<i class="icon fa fa-youtube-play fa-5x"></i>';
div.append(icon); div.append(icon);
var thumbnail_src = '//img.youtube.com/vi/' + videoid + '/hqdefault.jpg';
div.css('background-image', 'url(' + thumbnail_src + ')');
return div[0].outerHTML; return div[0].outerHTML;
} }
); );

View file

@ -1,9 +1,9 @@
<div class="row ui-content" style="display: none;"> <div class="row ui-content" style="display: none;">
<div class="ui-edit-area"> <div class="ui-edit-area unselectable">
<textarea id="textit"></textarea> <textarea id="textit"></textarea>
</div> </div>
<div class="ui-view-area"> <div class="ui-view-area">
<div class="ui-infobar container-fluid"> <div class="ui-infobar container-fluid unselectable hidden-print">
<small> <small>
<span class="ui-lastchange text-uppercase"></span> <span class="ui-lastchange text-uppercase"></span>
<span class="ui-permission dropdown pull-right"> <span class="ui-permission dropdown pull-right">
@ -18,7 +18,7 @@
</small> </small>
</div> </div>
<div id="doc" class="markdown-body container-fluid"></div> <div id="doc" class="markdown-body container-fluid"></div>
<div class="ui-toc dropup" style="display:none;"> <div class="ui-toc dropup unselectable hidden-print" style="display:none;">
<div class="pull-right dropdown"> <div class="pull-right dropdown">
<a id="tocLabel" class="ui-toc-label btn btn-default" data-target="#" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false" title="Table of content"> <a id="tocLabel" class="ui-toc-label btn btn-default" data-target="#" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false" title="Table of content">
<i class="fa fa-bars"></i> <i class="fa fa-bars"></i>
@ -27,7 +27,7 @@
</ul> </ul>
</div> </div>
</div> </div>
<div id="toc-affix" class="ui-affix-toc ui-toc-dropdown" data-spy="affix" style="top:50px;display:none;"></div> <div id="toc-affix" class="ui-affix-toc ui-toc-dropdown unselectable hidden-print" data-spy="affix" style="top:51px;display:none;"></div>
</div> </div>
</div> </div>
<div class="modal fade" id="clipboardModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal fade" id="clipboardModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

View file

@ -1,7 +1,7 @@
<nav class="hidden-print navbar navbar-default navbar-fixed-top unselectable"> <nav class="navbar navbar-default navbar-fixed-top unselectable hidden-print">
<!-- Brand and toggle get grouped for better mobile display --> <!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header"> <div class="navbar-header">
<span class="pull-right" style="margin-top: 17px; color: #777;"> <span class="pull-right" style="margin-top: 17px; color: #777;">
<div class="visible-xs">&nbsp;</div> <div class="visible-xs">&nbsp;</div>
<div class="visible-sm">&nbsp;</div> <div class="visible-sm">&nbsp;</div>
<div class="visible-md">&nbsp;</div> <div class="visible-md">&nbsp;</div>
@ -110,4 +110,4 @@
</ul> </ul>
</div> </div>
</nav> </nav>
<div class="ui-spinner"></div> <div class="ui-spinner unselectable hidden-print"></div>

View file

@ -28,7 +28,7 @@
</head> </head>
<body style="display:none;"> <body style="display:none;">
<div class="ui-infobar container-fluid"> <div class="ui-infobar container-fluid unselectable hidden-print">
<small> <small>
<span class="ui-lastchange text-uppercase"><%- updatetime %></span> <span class="ui-lastchange text-uppercase"><%- updatetime %></span>
<span class="pull-right"><%- viewcount %> views <a href="#" class="ui-edit" title="Edit this note"><i class="fa fa-pencil"></i></a></span> <span class="pull-right"><%- viewcount %> views <a href="#" class="ui-edit" title="Edit this note"><i class="fa fa-pencil"></i></a></span>
@ -37,7 +37,7 @@
<div id="doc" class="container markdown-body"> <div id="doc" class="container markdown-body">
<%- body %> <%- body %>
</div> </div>
<div class="ui-toc dropup" style="display:none;"> <div class="ui-toc dropup unselectable hidden-print" style="display:none;">
<div class="pull-right dropdown"> <div class="pull-right dropdown">
<a id="tocLabel" class="ui-toc-label btn btn-default" data-target="#" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false" title="Table of content"> <a id="tocLabel" class="ui-toc-label btn btn-default" data-target="#" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false" title="Table of content">
<i class="fa fa-bars"></i> <i class="fa fa-bars"></i>
@ -46,7 +46,7 @@
</ul> </ul>
</div> </div>
</div> </div>
<div id="toc-affix" class="ui-affix-toc ui-toc-dropdown" data-spy="affix" style="display:none;"></div> <div id="toc-affix" class="ui-affix-toc ui-toc-dropdown unselectable hidden-print" data-spy="affix" style="display:none;"></div>
</body> </body>
</html> </html>