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

public/css/extra.css

@@ -2,6 +2,7 @@
 
 .vimeo,
 .youtube {
+    position: relative;
     cursor: pointer;
     display: table;
     max-width: 540px;
@@ -11,17 +12,28 @@
     background-size: contain;
     background-color: black;
 }
+.vimeo img,
+.youtube img {
+    position: absolute;
+    margin: auto;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}
 .vimeo .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;
+    opacity: 0.3;
     -webkit-transition: opacity 0.2s; /* Safari */
     transition: opacity 0.2s;
-    
 }
 .vimeo:hover .icon,
 .youtube:hover .icon {
@@ -215,3 +227,20 @@ small .dropdown {
 small .dropdown a:focus, small .dropdown a:hover {
     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;
+    }
+}

public/css/index.css

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

public/js/extra.js

@@ -117,7 +117,8 @@ function finishView(view) {
                 dataType: 'jsonp',
                 success: function (data) {
                     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>');
         setSizebyAttr(div, div);
         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>';
         div.append(icon);
-        var thumbnail_src = '//img.youtube.com/vi/' + videoid + '/hqdefault.jpg';
-        div.css('background-image', 'url(' + thumbnail_src + ')');
         return div[0].outerHTML;
     }
 );

public/views/body.ejs

@@ -1,9 +1,9 @@
 <div class="row ui-content" style="display: none;">
-    <div class="ui-edit-area">
+    <div class="ui-edit-area unselectable">
         <textarea id="textit"></textarea>
     </div>
     <div class="ui-view-area">
-        <div class="ui-infobar container-fluid">
+        <div class="ui-infobar container-fluid unselectable hidden-print">
             <small>
                 <span class="ui-lastchange text-uppercase"></span>
                 <span class="ui-permission dropdown pull-right">
@@ -18,7 +18,7 @@
             </small>
         </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">
                 <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>
@@ -27,7 +27,7 @@
                 </ul>
             </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 class="modal fade" id="clipboardModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

public/views/header.ejs

@@ -1,4 +1,4 @@
-<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 -->
     <div class="navbar-header">
 		<span class="pull-right" style="margin-top: 17px; color: #777;">
@@ -110,4 +110,4 @@
         </ul>
     </div>
 </nav>
-<div class="ui-spinner"></div>
+<div class="ui-spinner unselectable hidden-print"></div>

public/views/pretty.ejs

@@ -28,7 +28,7 @@
 </head>
 
 <body style="display:none;">
-    <div class="ui-infobar container-fluid">
+    <div class="ui-infobar container-fluid unselectable hidden-print">
         <small>
             <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>
@@ -37,7 +37,7 @@
     <div id="doc" class="container markdown-body">
 <%- body %>
     </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">
             <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>
@@ -46,7 +46,7 @@
             </ul>
         </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>
 
 </html>