prensataion tool ok

This commit is contained in:
life
2015-03-07 12:56:20 +08:00
parent 9f2b1f3bed
commit 4a48b11a10
4 changed files with 577 additions and 51 deletions

View File

@@ -48,6 +48,10 @@ function log(o) {
<div id="presentation">
<!-- 工具 -->
<div class="pren-tool">
<a class="pren-tool-close"><i class="fa fa-remove"></i></a>
<a class="pren-tool-bg-color"><i class="fa fa-adjust"></i></a>
<a class="pren-tool-text-size-min"><i class="fa fa-font"></i></a>
<a class="pren-tool-text-size-max"><i class="fa fa-font"></i></a>
</div>
<!-- 标题 -->
<div class="pren-title">

View File

@@ -24,12 +24,241 @@ body {
display: block;
-webkit-user-select: text;
overflow-y: scroll;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
#presentation svg {
border-radius: 5px;
}
#presentation.writting,
#presentation.black {
background-color: #F9F9F5;
color: #2C3E50;
}
#presentation.writting pre.prettyprint,
#presentation.black pre.prettyprint {
/* Pretty printing styles. Used with prettify.js. */
/* SPAN elements with the classes below are added by prettyprint. */
/* plain text */
/* Specify class=linenums on a pre to get line numbering */
/* IE indents via margin-left */
display: block;
background-color: rgba(102, 128, 153, 0.05);
box-shadow: 0 1px 2px rgba(255, 255, 255, 0.1) inset, 45px 0 0 rgba(102, 128, 153, 0.05) inset, 0 1px 0 rgba(102, 128, 153, 0.05);
padding: 9.5px;
}
#presentation.writting pre.prettyprint .pln,
#presentation.black pre.prettyprint .pln {
color: #000000;
}
@media screen {
#presentation.writting pre.prettyprint,
#presentation.black pre.prettyprint {
/* string content */
/* a keyword */
/* a comment */
/* a type name */
/* a literal value */
/* punctuation, lisp open bracket, lisp close bracket */
/* a markup tag name */
/* a markup attribute name */
/* a markup attribute value */
/* a declaration; a variable name */
/* a function name */
}
#presentation.writting pre.prettyprint .str,
#presentation.black pre.prettyprint .str {
color: #008800;
}
#presentation.writting pre.prettyprint .kwd,
#presentation.black pre.prettyprint .kwd {
color: #000088;
}
#presentation.writting pre.prettyprint .com,
#presentation.black pre.prettyprint .com {
color: #880000;
}
#presentation.writting pre.prettyprint .typ,
#presentation.black pre.prettyprint .typ {
color: #660066;
}
#presentation.writting pre.prettyprint .lit,
#presentation.black pre.prettyprint .lit {
color: #006666;
}
#presentation.writting pre.prettyprint .pun,
#presentation.black pre.prettyprint .pun,
#presentation.writting pre.prettyprint .opn,
#presentation.black pre.prettyprint .opn,
#presentation.writting pre.prettyprint .clo,
#presentation.black pre.prettyprint .clo {
color: #666600;
}
#presentation.writting pre.prettyprint .tag,
#presentation.black pre.prettyprint .tag {
color: #000088;
}
#presentation.writting pre.prettyprint .atn,
#presentation.black pre.prettyprint .atn {
color: #660066;
}
#presentation.writting pre.prettyprint .atv,
#presentation.black pre.prettyprint .atv {
color: #008800;
}
#presentation.writting pre.prettyprint .dec,
#presentation.black pre.prettyprint .dec,
#presentation.writting pre.prettyprint .var,
#presentation.black pre.prettyprint .var {
color: #660066;
}
#presentation.writting pre.prettyprint .fun,
#presentation.black pre.prettyprint .fun {
color: #ff0000;
}
}
#presentation.writting pre.prettyprint ol.linenums,
#presentation.black pre.prettyprint ol.linenums {
margin-top: 0;
margin-bottom: 0;
color: rgba(102, 128, 153, 0.4);
}
#presentation.writting pre.prettyprint ol.linenums,
#presentation.black pre.prettyprint ol.linenums {
margin-left: 10px;
}
#presentation.black {
background-color: #000;
color: #fff;
}
#presentation.black blockquote {
background-color: rgba(192, 182, 182, 0.5);
border-left-color: #988F8F;
}
#presentation.black code {
color: #DAD6D7;
background-color: #908185;
}
#presentation.black pre.prettyprint {
background-color: #CACAB7;
}
#presentation.black ol.linenums > li {
color: #000;
}
#presentation.black svg {
background: #F9F9F5;
}
#presentation.black .pren-tool a {
color: #fff;
}
#presentation.text-min-1 .pren-content * {
font-size: 16px;
}
#presentation.text-min-1 .pren-content svg *,
#presentation.text-min-1 .pren-content pre * {
font-size: 16px;
}
#presentation.text-min-1 .pren-content h1 {
font-size: 28px;
}
#presentation.text-min-1 .pren-content h2 {
font-size: 22px;
}
#presentation.text-min-1 .pren-content h3 {
font-size: 18px;
}
#presentation.text-min-1 .pren-content h4 {
font-size: 14px;
}
#presentation.text-min-2 .pren-content * {
font-size: 14px;
}
#presentation.text-min-2 .pren-content svg *,
#presentation.text-min-2 .pren-content pre * {
font-size: 16px;
}
#presentation.text-min-2 .pren-content h1 {
font-size: 24px;
}
#presentation.text-min-2 .pren-content h2 {
font-size: 20px;
}
#presentation.text-min-2 .pren-content h3 {
font-size: 16px;
}
#presentation.text-min-2 .pren-content h4 {
font-size: 14px;
}
#presentation.text-max-1 .pren-content * {
font-size: 20px;
}
#presentation.text-max-1 .pren-content svg *,
#presentation.text-max-1 .pren-content pre * {
font-size: 16px;
}
#presentation.text-max-1 .pren-content h1 {
font-size: 32px;
}
#presentation.text-max-1 .pren-content h2 {
font-size: 28px;
}
#presentation.text-max-1 .pren-content h3 {
font-size: 24px;
}
#presentation.text-max-1 .pren-content h4 {
font-size: 18px;
}
#presentation.text-max-2 .pren-content * {
font-size: 24px;
}
#presentation.text-max-2 .pren-content svg *,
#presentation.text-max-2 .pren-content pre * {
font-size: 16px;
}
#presentation.text-max-2 .pren-content h1 {
font-size: 38px;
}
#presentation.text-max-2 .pren-content h2 {
font-size: 32px;
}
#presentation.text-max-2 .pren-content h3 {
font-size: 28px;
}
#presentation.text-max-2 .pren-content h4 {
font-size: 24px;
}
.pren-tool {
position: fixed;
right: 0;
top: 0;
bottom: 0;
width: 45px;
opacity: 0;
text-align: center;
}
.pren-tool:hover {
opacity: 1;
}
.pren-tool a {
display: block;
font-size: 16px;
height: 30px;
line-height: 30px;
}
.pren-tool .pren-tool-bg-color {
margin-top: 30px;
}
.pren-tool .pren-tool-text-size-max {
font-size: 16px;
}
.pren-tool .pren-tool-text-size-min {
font-size: 12px;
}
.pren-title {
font-size: 32px;
margin: 100px 0;
text-align: center;
padding: 0 150px;
font-weight: bold;
}
.pren-content {
margin: 0 150px;
@@ -40,6 +269,11 @@ body {
font-size: 18px;
line-height: 1.5;
max-width: 100%;
font-family: Microsoft Yahei, Hiragino Sans GB, WenQuanYi Micro Hei, sans-serif;
}
.pren-content svg *,
.pren-content pre * {
font-size: 16px;
}
.pren-content p {
margin: 10px 0;

View File

@@ -28,6 +28,189 @@ body {
display: block;
-webkit-user-select: text;
overflow-y: scroll;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
svg {
border-radius: 5px;
}
&.writting, &.black {
background-color: #F9F9F5;
color: #2C3E50;
pre.prettyprint {
/* Pretty printing styles. Used with prettify.js. */
/* SPAN elements with the classes below are added by prettyprint. */
.pln { color: #000 } /* plain text */
@media screen {
.str { color: #080 } /* string content */
.kwd { color: #008 } /* a keyword */
.com { color: #800 } /* a comment */
.typ { color: #606 } /* a type name */
.lit { color: #066 } /* a literal value */
/* punctuation, lisp open bracket, lisp close bracket */
.pun, .opn, .clo { color: #660 }
.tag { color: #008 } /* a markup tag name */
.atn { color: #606 } /* a markup attribute name */
.atv { color: #080 } /* a markup attribute value */
.dec, .var { color: #606 } /* a declaration; a variable name */
.fun { color: red } /* a function name */
}
/* Specify class=linenums on a pre to get line numbering */
ol.linenums { margin-top: 0; margin-bottom: 0; color: rgba(102, 128, 153, 0.4) } /* IE indents via margin-left */
ol.linenums { margin-left: 10px;}
// ol.linenums > li { padding-left: 15px;}
display: block;
background-color: rgba(102, 128, 153, 0.05);
box-shadow: 0 1px 2px rgba(255, 255, 255, 0.1) inset, 45px 0 0 rgba(102, 128, 153, 0.05) inset, 0 1px 0 rgba(102, 128, 153, 0.05);
padding: 9.5px;
}
}
&.black {
background-color: #000;
color: #fff;
blockquote {
background-color: rgba(192, 182, 182, 0.5);
border-left-color: #988F8F;
}
code {
color: #DAD6D7;
background-color: #908185;
}
pre.prettyprint {
background-color: #CACAB7;
}
ol.linenums > li {
color: #000;
}
svg {
background: #F9F9F5;
}
.pren-tool {
a {
color: #fff;
}
}
}
// text-size
&.text-min-1 .pren-content {
* {
font-size: 16px;
}
svg *, pre * {
font-size: 16px;
}
h1 {
font-size: 28px;
}
h2 {
font-size: 22px;
}
h3 {
font-size: 18px;
}
h4 {
font-size: 14px;
}
}
&.text-min-2 .pren-content {
* {
font-size: 14px;
}
svg *, pre * {
font-size: 16px;
}
h1 {
font-size: 24px;
}
h2 {
font-size: 20px;
}
h3 {
font-size: 16px;
}
h4 {
font-size: 14px;
}
}
&.text-max-1 .pren-content {
* {
font-size: 20px;
}
svg *, pre * {
font-size: 16px;
}
h1 {
font-size: 32px;
}
h2 {
font-size: 28px;
}
h3 {
font-size: 24px;
}
h4 {
font-size: 18px;
}
}
&.text-max-2 .pren-content {
* {
font-size: 24px;
}
svg *, pre * {
font-size: 16px;
}
h1 {
font-size: 38px;
}
h2 {
font-size: 32px;
}
h3 {
font-size: 28px;
}
h4 {
font-size: 24px;
}
}
}
.pren-tool {
position: fixed;
right: 0;
top: 0;
bottom: 0;
width: 45px;
// visibility: hidden;
opacity: 0;
&:hover {
opacity: 1;
}
text-align: center;
a {
display: block;
font-size: 16px;
height: 30px;
line-height: 30px;
}
.pren-tool-bg-color {
margin-top: 30px;
}
.pren-tool-text-size-max {
font-size: 16px;
}
.pren-tool-text-size-min {
font-size: 12px;
}
}
.pren-title {
font-size: 32px;
@@ -35,6 +218,7 @@ body {
// margin-top: 100px;
text-align: center;
padding: 0 150px;
font-weight: bold;
}
.pren-content {
margin: 0 150px;
@@ -44,6 +228,10 @@ body {
font-size: 18px;
line-height: 1.5;
max-width: 100%; // 有些html有宽度, 就会超出
font-family: Microsoft Yahei,Hiragino Sans GB,WenQuanYi Micro Hei,sans-serif;
}
svg *, pre * {
font-size: 16px;
}
p {
margin: 10px 0;

View File

@@ -1563,24 +1563,157 @@ function changeTheme(themeName) {
}
}
var _isPren = false;
function togglePren() {
if(!_isPren) {
$('.pren-title').html($('#noteTitle').val());
$('.pren-content').html(getEditorContent());
// 演示模式, 全屏模式
var Pren = {
$('#themePresentation').attr('disabled', false);
_isFullscreen: false,
_isPren: false,
$('body').addClass('no-drag');
$('#page').hide();
_isPren = true;
} else {
$('#themePresentation').attr('disabled', true);
_isPren = false;
$('body').removeClass('no-drag');
$('#page').show();
// 全局菜单
pren: null,
fullScreen: null,
presentationO: $('#presentation'),
toggleFullscreen: function() {
var me = this;
win.toggleFullscreen();
me._isFullscreen = !isFullscreen;
if(me._isFullscreen) {
me.pren.enabled = false;
} else {
me.pren.enabled = true;
}
},
togglePren: function() {
var me = this;
try {
win.toggleKioskMode();
} catch(e) {}
if(!me._isPren) {
$('.pren-title').html($('#noteTitle').val());
var note = Note.getCurNote();
$('.pren-content').html('');
if(note) {
var content = getEditorContent(note.IsMarkdown);
var contentStr = content;
if(typeof content == 'object') { // markdown
contentStr = content[1];
}
$('.pren-content').html(contentStr);
}
$('#themePresentation').attr('disabled', false);
$('body').addClass('no-drag');
$('#page').hide();
me._isPren = true;
// 代码高亮
$(".pren-content pre").addClass("prettyprint linenums");
prettyPrint();
} else {
$('#themePresentation').attr('disabled', true);
me._isPren = false;
$('body').removeClass('no-drag');
$('#page').show();
me.restore();
}
if(me._isPren) {
me.fullScreen.enabled = false;
} else {
me.fullScreen.enabled = true;
}
},
// 恢复, 为了下次显示
restore: function() {
var me = this;
me.presentationO.scrollTop(0);
},
_themeMode: 'normal', // 当前背景颜色模式, 三种, normal, writting, black
toggleThemeMode: function() {
var me = this;
if(me._themeMode == 'normal') {
me.presentationO.addClass('writting');
me._themeMode = 'writting';
} else if(me._themeMode == 'writting') {
me.presentationO.removeClass('writting').addClass('black');
me._themeMode = 'black';
} else {
me.presentationO.removeClass('black');
me._themeMode = 'normal';
}
},
_fontSizeIndex: 2, // 位置
_fontScales: ['text-min-2', 'text-min-1', '', 'text-max-1', 'text-max-2'],
toggleFontSizeMode: function(isMin) {
var me = this;
var curClass = me._fontScales[me._fontSizeIndex];
if(isMin) {
if(me._fontSizeIndex > 0) {
me._fontSizeIndex--;
}
} else {
if(me._fontSizeIndex < 4) {
me._fontSizeIndex++;
}
}
var nextClass = me._fontScales[me._fontSizeIndex];
if(curClass != nextClass) {
me.presentationO.removeClass(curClass).addClass(nextClass);
}
},
init: function() {
var me = this;
// 初始化menu
me.fullScreen = new gui.MenuItem(
{label: 'Toggle Fullscreen', click: function() {
me.toggleFullscreen();
}
});
me.pren = new gui.MenuItem(
{label: 'Toggle Presentation', click: function() {
me.togglePren();
}
});
// Esc
$("body").on('keydown', function(e) {
if(e.keyCode == 27) {
if(me._isPren) {
me.togglePren();
} else if(isFullscreen) {
me.toggleFullscreen();
}
}
});
$('.pren-tool-close').click(function() {
me.togglePren();
});
$('.pren-tool-bg-color').click(function() {
me.toggleThemeMode();
});
$('.pren-tool-text-size-min').click(function() {
me.toggleFontSizeMode(true);
});
$('.pren-tool-text-size-max').click(function() {
me.toggleFontSizeMode(false);
});
}
}
};
// user
function userMenu() {
@@ -1659,44 +1792,11 @@ function userMenu() {
});
// 全局菜单
var isSlide = false;
var isFullscreen = false;
var slide;
function toggleFullscreen() {
win.toggleFullscreen();
isFullscreen = !isFullscreen;
if(isFullscreen) {
slide.enabled = false;
} else {
slide.enabled = true;
}
}
var fullScreen = new gui.MenuItem({ label: 'Toggle Fullscreen', click: toggleFullscreen});
function toggleSlide() {
win.toggleKioskMode();
isSlide = !isSlide;
togglePren();
if(isSlide) {
fullScreen.enabled = false;
} else {
fullScreen.enabled = true;
}
}
slide = new gui.MenuItem({ label: 'Toggle Presentation', click: toggleSlide});
$("body").on('keydown', function(e) {
if(e.keyCode == 27) {
if(isSlide) {
toggleSlide();
} else if(isFullscreen) {
toggleFullscreen();
}
}
});
Pren.init();
var mode = new gui.Menu();
mode.append(slide);
mode.append(Pren.pren);
mode.append(Pren.fullScreen);
var modes = new gui.MenuItem({ label: 'Mode', submenu: mode});
mode.append(fullScreen);
if(process.platform === "darwin") {
var nativeMenuBar = new gui.Menu({ type: "menubar" });
nativeMenuBar.createMacBuiltin("Leanote");