Commit cce84b6f authored by Vanesssa's avatar Vanesssa

modified: src/main/webapp/js/page.js

	modified:   src/main/webapp/skins/finding/css/finding.css
	modified:   src/main/webapp/skins/yilia/article.ftl
	modified:   src/main/webapp/skins/yilia/css/yilia.css
	modified:   src/main/webapp/skins/yilia/footer.ftl
	deleted:    src/main/webapp/skins/yilia/images/header-bg.jpg
	deleted:    src/main/webapp/skins/yilia/images/next.jpg
	deleted:    src/main/webapp/skins/yilia/images/preview.jpg
	modified:   src/main/webapp/skins/yilia/js/yilia.js
	src/main/webapp/js/lib/highlight/
parent b1512991
......@@ -18,9 +18,9 @@
*
* @author <a href="http://vanessa.b3log.org">Liyuan Li</a>
* @author <a href="mailto:DL88250@gmail.com">Liang Ding</a>
* @version 1.1.3.5, Jul 23, 2014
* @version 1.2.3.5, Nov 2, 2015
*/
var Page = function(tips) {
var Page = function (tips) {
this.currentCommentId = "";
this.tips = tips;
};
......@@ -29,13 +29,13 @@ $.extend(Page.prototype, {
* @description 评论时点击表情,在评论内容中插入相关代码
* @param {String} name 用于区别回复评论还是对文章的评论
*/
insertEmotions: function(name) {
insertEmotions: function (name) {
var _it = this;
if (name === undefined) {
name = "";
}
$("#emotions" + name + " span").click(function() {
$("#emotions" + name + " span").click(function () {
var $comment = $("#comment" + name);
var endPosition = _it._getCursorEndPosition($comment[0]);
var key = "[" + this.className + "]",
......@@ -58,7 +58,7 @@ $.extend(Page.prototype, {
* @param {Dom} textarea 评论框对象
* @returns {Num} 光标位置
*/
_getCursorEndPosition: function(textarea) {
_getCursorEndPosition: function (textarea) {
textarea.focus();
if (textarea.setSelectionRange) { // W3C
return textarea.selectionEnd;
......@@ -80,7 +80,7 @@ $.extend(Page.prototype, {
* @description 评论校验
* @param {String} state 用于区别回复评论还是对文章的评论
*/
validateComment: function(state) {
validateComment: function (state) {
if (Util.isLoggedIn()) {
var commenterContent = $("#comment" + state).val().replace(/(^\s*)|(\s*$)/g, "");
if (2 > commenterContent.length || commenterContent.length > 500) {
......@@ -120,7 +120,7 @@ $.extend(Page.prototype, {
* @description 把评论中的标识替换为图片
* @param {Dom} selector
*/
replaceCommentsEm: function(selector) {
replaceCommentsEm: function (selector) {
var $commentContents = $(selector);
for (var i = 0; i < $commentContents.length; i++) {
var str = $commentContents[i].innerHTML;
......@@ -131,7 +131,7 @@ $.extend(Page.prototype, {
* @description 初始化 SyantaxHighlighter
* @param {Array} languages 需要加载的语言
*/
_initSyntaxHighlighter: function(languages) {
_initSyntaxHighlighter: function (languages) {
// load brush js
for (var i = 0; i < languages.length; i++) {
switch (languages[i]) {
......@@ -274,7 +274,7 @@ $.extend(Page.prototype, {
* @description 加载 SyntaxHighlighter
* @param {String} SHTheme SyntaxHighLighter 样式
*/
_loadSyntaxHighlighter: function(SHTheme) {
_loadSyntaxHighlighter: function (SHTheme) {
var cssName = SHTheme ? SHTheme : "shCoreEclipse",
that = this;
// load css
......@@ -290,11 +290,11 @@ $.extend(Page.prototype, {
url: latkeConfig.staticServePath + "/js/lib/SyntaxHighlighter/scripts/shCore.js",
dataType: "script",
cache: true,
success: function() {
success: function () {
// get brush settings
var languages = [],
isScrip = false;
$(".article-body pre, .code-highlight pre").each(function() {
$(".article-body pre, .code-highlight pre").each(function () {
var name = this.className.split(";")[0];
var language = name.substr(7, name.length - 1);
if (this.className.indexOf("html-script: true") > -1 &&
......@@ -311,7 +311,7 @@ $.extend(Page.prototype, {
url: latkeConfig.staticServePath + "/js/lib/SyntaxHighlighter/scripts/shBrushXml.js",
dataType: "script",
cache: true,
success: function() {
success: function () {
that._initSyntaxHighlighter(languages);
}
});
......@@ -326,10 +326,10 @@ $.extend(Page.prototype, {
* @param {Obj} obj 语法高亮配置参数
* @param {Obj} obj.SHTheme 语法高亮 SyntaxHighLighter 样式
*/
parseLanguage: function(obj) {
parseLanguage: function (obj) {
var isPrettify = false,
isSH = false;
$(".article-body pre, .code-highlight pre").each(function() {
$(".article-body pre, .code-highlight pre").each(function () {
if (this.className.indexOf("brush") > -1) {
isSH = true;
}
......@@ -338,8 +338,10 @@ $.extend(Page.prototype, {
isPrettify = true;
}
});
if (isSH) {
this._loadSyntaxHighlighter(obj ? (obj.SHTheme ? obj.SHTheme : undefined) : undefined);
return false;
}
if (isPrettify) {
......@@ -355,37 +357,56 @@ $.extend(Page.prototype, {
url: latkeConfig.staticServePath + "/js/lib/google-code-prettify/prettify.js",
dataType: "script",
cache: true,
success: function() {
success: function () {
prettyPrint();
}
});
return false;
}
// otherelse use highlight
// load css
if (document.createStyleSheet) {
document.createStyleSheet(latkeConfig.staticServePath + "/js/lib/highlight/styles/default.css");
} else {
$("head").append($("<link rel='stylesheet' href='" + latkeConfig.staticServePath + "/js/lib/highlight/styles/github.css'>"));
}
$.ajax({
url: latkeConfig.staticServePath + "/js/lib/highlight/highlight.pack.js",
dataType: "script",
cache: true,
success: function () {
hljs.initHighlightingOnLoad();
}
});
},
/*
* @description 文章/自定义页面加载
* @param {Obj} obj 配置设定
* @param {Obj} obj.language 代码高亮配置
*/
load: function(obj) {
load: function (obj) {
var that = this;
// emotions
that.insertEmotions();
// language
that.parseLanguage(obj ? (obj.language ? obj.language : undefined) : undefined);
// submit comment
$("#commentValidate").keypress(function(event) {
$("#commentValidate").keypress(function (event) {
if (event.keyCode === 13) {
that.submitComment();
}
});
$("#comment").keypress(function(event) {
$("#comment").keypress(function (event) {
if (event.keyCode === 13 && event.ctrlKey) {
that.submitComment();
}
});
// captcha
$("#captcha").click(function() {
$("#captcha").click(function () {
$(this).attr("src", latkeConfig.servePath + "/captcha.do?code=" + Math.random());
});
// cookie
......@@ -406,13 +427,13 @@ $.extend(Page.prototype, {
* @description 加载随机文章
* @param {String} headTitle 随机文章标题
*/
loadRandomArticles: function(headTitle) {
loadRandomArticles: function (headTitle) {
var randomArticles1Label = this.tips.randomArticles1Label;
// getRandomArticles
$.ajax({
url: latkeConfig.servePath + "/get-random-articles.do",
type: "POST",
success: function(result, textStatus) {
success: function (result, textStatus) {
var randomArticles = result.randomArticles;
if (!randomArticles || 0 === randomArticles.length) {
$("#randomArticles").remove();
......@@ -439,11 +460,11 @@ $.extend(Page.prototype, {
* @param {String} id 文章 id
* @param {String} headTitle 相关文章标题
*/
loadRelevantArticles: function(id, headTitle) {
loadRelevantArticles: function (id, headTitle) {
$.ajax({
url: latkeConfig.servePath + "/article/id/" + id + "/relevant/articles",
type: "GET",
success: function(data, textStatus) {
success: function (data, textStatus) {
var articles = data.relevantArticles;
if (!articles || 0 === articles.length) {
$("#relevantArticles").remove();
......@@ -464,7 +485,7 @@ $.extend(Page.prototype, {
+ listHtml + "</ul>";
$("#relevantArticles").append(relevantArticleListHtml);
},
error: function() {
error: function () {
$("#relevantArticles").remove();
}
});
......@@ -474,7 +495,7 @@ $.extend(Page.prototype, {
* @param {String} tags 文章 tags
* @param {String} headTitle 站外相关文章标题
*/
loadExternalRelevantArticles: function(tags, headTitle) {
loadExternalRelevantArticles: function (tags, headTitle) {
var tips = this.tips;
try {
$.ajax({
......@@ -483,10 +504,10 @@ $.extend(Page.prototype, {
type: "GET",
cache: true,
dataType: "jsonp",
error: function() {
error: function () {
$("#externalRelevantArticles").remove();
},
success: function(data, textStatus) {
success: function (data, textStatus) {
var articles = data.articles;
if (!articles || 0 === articles.length) {
$("#externalRelevantArticles").remove();
......@@ -518,7 +539,7 @@ $.extend(Page.prototype, {
* @param {String} commentId 回复评论时的评论 id
* @param {String} state 区分回复文章还是回复评论的标识
*/
submitComment: function(commentId, state) {
submitComment: function (commentId, state) {
if (!state) {
state = '';
}
......@@ -536,7 +557,7 @@ $.extend(Page.prototype, {
"oId": tips.oId,
"commentContent": $("#comment" + state).val().replace(/(^\s*)|(\s*$)/g, "")
};
if (!Util.isLoggedIn()) {
requestJSONObject = {
"oId": tips.oId,
......@@ -550,7 +571,7 @@ $.extend(Page.prototype, {
Cookie.createCookie("commentEmail", requestJSONObject.commentEmail, 365);
Cookie.createCookie("commentURL", $("#commentURL" + state).val().replace(/(^\s*)|(\s*$)/g, ""), 365);
}
if (state === "Reply") {
requestJSONObject.commentOriginalCommentId = commentId;
}
......@@ -561,7 +582,7 @@ $.extend(Page.prototype, {
cache: false,
contentType: "application/json",
data: JSON.stringify(requestJSONObject),
success: function(result) {
success: function (result) {
if (!result.sc) {
$("#commentErrorTip" + state).html(result.msg);
$("#comment" + state).val("").focus();
......@@ -600,7 +621,7 @@ $.extend(Page.prototype, {
* @param {String} commentFormHTML 评论表单HTML
* @param {String} endHTML 判断该表单使用 table 还是 div 标签,然后进行构造
*/
addReplyForm: function(id, commentFormHTML, endHTML) {
addReplyForm: function (id, commentFormHTML, endHTML) {
var that = this;
if (id === this.currentCommentId) {
if ($("#commentNameReply").val() === "") {
......@@ -621,7 +642,7 @@ $.extend(Page.prototype, {
}
// change id, bind event and set value
$("#replyForm input, #replyForm textarea").each(function() {
$("#replyForm input, #replyForm textarea").each(function () {
this.id = this.id + "Reply";
});
$("#commentNameReply").val(Cookie.readCookie("commentName"));
......@@ -634,25 +655,25 @@ $.extend(Page.prototype, {
$("#commentURLReply").val(Cookie.readCookie("commentURL"));
$("#replyForm #emotions").attr("id", "emotionsReply");
this.insertEmotions("Reply");
$("#commentReply").unbind().keypress(function(event) {
$("#commentReply").unbind().keypress(function (event) {
if (event.keyCode === 13 && event.ctrlKey) {
that.submitComment(id, 'Reply');
event.preventDefault();
}
});
$("#commentValidateReply").unbind().keypress(function(event) {
$("#commentValidateReply").unbind().keypress(function (event) {
if (event.keyCode === 13) {
that.submitComment(id, 'Reply');
event.preventDefault();
}
});
$("#replyForm #captcha").attr("id", "captchaReply").
attr("src", latkeConfig.servePath + "/captcha.do?" + new Date().getTime()).click(function() {
attr("src", latkeConfig.servePath + "/captcha.do?" + new Date().getTime()).click(function () {
$(this).attr("src", latkeConfig.servePath + "/captcha.do?code=" + Math.random());
});
$("#replyForm #commentErrorTip").attr("id", "commentErrorTipReply").html("").hide();
$("#replyForm #submitCommentButton").attr("id", "submitCommentButtonReply");
$("#replyForm #submitCommentButtonReply").unbind("click").removeAttr("onclick").click(function() {
$("#replyForm #submitCommentButtonReply").unbind("click").removeAttr("onclick").click(function () {
that.submitComment(id, 'Reply');
});
if ($("#commentNameReply").val() === "") {
......@@ -669,7 +690,7 @@ $.extend(Page.prototype, {
* @description 隐藏回复评论的浮出层
* @parma {String} id 被回复的评论 id
*/
hideComment: function(id) {
hideComment: function (id) {
$("#commentRef" + id).hide();
},
/*
......@@ -679,7 +700,7 @@ $.extend(Page.prototype, {
* @param {Int} top 位置相对浮出层的高度
* @param {String} [parentTag] it 如果嵌入在 position 为 relative 的元素 A 中时,需取到 A 元素
*/
showComment: function(it, id, top, parentTag) {
showComment: function (it, id, top, parentTag) {
var positionTop = parseInt($(it).position().top);
if (parentTag) {
positionTop = parseInt($(it).parents(parentTag).position().top);
......@@ -700,7 +721,7 @@ $.extend(Page.prototype, {
* @parma {String} commentHTML 回复内容 HTML
* @param {String} state 用于区分评论文章还是回复评论
*/
addCommentAjax: function(commentHTML, state) {
addCommentAjax: function (commentHTML, state) {
if ($("#comments").children().length > 0) {
$($("#comments").children()[0]).before(commentHTML);
} else {
......
......@@ -18,7 +18,7 @@
* skin finding style
*
* @author <a href="http://vanessa.b3log.org">Liyuan Li</a>
* @version 1.0.0.0, Jun 4, 2015
* @version 1.0.1.0, Nov 2, 2015
*/
/* start reset */
html {
......@@ -427,6 +427,7 @@ pre code, pre tt {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
font-family: "Merriweather", "Microsoft Yahei", 'Helvetica';
outline: none;
}
.form button {
......
......@@ -11,7 +11,7 @@
<body>
<#include "side.ftl">
<main>
<article class="post">
<article class="post article-body">
<header>
<h2>
<a rel="bookmark" href="${servePath}${article.articlePermalink}">
......@@ -49,7 +49,23 @@
${article.articleSign.signHTML}
</div>
</#if>
<#if nextArticlePermalink?? || previousArticlePermalink??>
<aside class="fn-clear">
<#if previousArticlePermalink??>
<a class="fn-left" rel="prev" href="${servePath}${previousArticlePermalink}">
<strong>&lt;</strong> ${previousArticleTitle}
</a>
</#if>
<#if nextArticlePermalink??>
<a class="fn-right" rel="next" href="${servePath}${nextArticlePermalink}">
${nextArticleTitle} <strong>&gt;</strong>
</a>
</#if>
</aside>
</#if>
</section>
<footer class="fn-clear share">
<div class="fn-right">
<span class="icon icon-t-weibo" data-type="tencent"></span>
......@@ -59,30 +75,9 @@
</div>
</footer>
</article>
<@comments commentList=articleComments article=article></@comments>
<#if nextArticlePermalink?? || previousArticlePermalink??>
<aside class="read-next">
<#if nextArticlePermalink??>
<div class="read-next-story " style="background-image: url('${staticServePath}/skins/${skinDirName}/images/next.jpg')"
onclick="window.location = '${servePath}${nextArticlePermalink}'">
<section class="post">
<h2>${nextArticleTitle}</h2>
<p>${nextArticleAbstract}</p>
</section>
</div>
</#if>
<#if previousArticlePermalink??>
<div class="read-next-story prev " style="background-image: url('${staticServePath}/skins/${skinDirName}/images/preview.jpg')"
onclick="window.location = '${servePath}${previousArticlePermalink}'">
<section class="post">
<h2>${previousArticleTitle}</h2>
<p>${previousArticleAbstract}</p>
</section>
</div>
</#if>
</aside>
</#if>
<#include "footer.ftl">
<@comment_script oId=article.oId>
......
......@@ -18,7 +18,7 @@
* skin yilia style
*
* @author <a href="http://vanessa.b3log.org">Liyuan Li</a>
* @version 1.0.0.0, Nov 1, 2015
* @version 1.1.0.0, Nov 2, 2015
*/
/* start reset */
html {
......@@ -65,7 +65,7 @@ h4, h5, h6 {
-webkit-font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1;
-moz-font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1;
-o-font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1;
color: #2E2E2E;
color: #666;
line-height: 1.15em;
font-family: "Open Sans", "Microsoft Yahei", 'Helvetica';
text-rendering: geometricPrecision;
......@@ -149,11 +149,16 @@ hr {
}
blockquote {
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 1.75em 0 1.75em -2.2em;
margin: 1.75em 0 1.75em 0;
padding: 0 0 0 1.75em;
border-left: #4A4A4A 0.4em solid;
border-left: 5px solid;
transition: all 0.3s ease;
}
blockquote:hover {
border-color: #b0a0aa;
}
blockquote p {
......@@ -191,18 +196,7 @@ code, tt {
}
pre {
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0 0 1.75em 0;
border: #E3EDF3 1px solid;
width: 100%;
padding: 10px;
font-family: Inconsolata, monospace, "Microsoft Yahei", 'Helvetica';
font-size: 0.9em;
white-space: pre;
overflow: auto;
background: #F7FAFB;
border-radius: 3px;
}
pre code, pre tt {
......@@ -305,8 +299,125 @@ pre code, pre tt {
.icon-login:before {
content: "\e611";
}
.form {
width: 100%;
padding: 30px;
}
#captcha,
#captchaReply {
height: 27px;
display: inline-block;
vertical-align: inherit;
}
.form input,
.form textarea,
.form button {
border: 1px solid #CCCCCC;
background-color: #FAFAFA;
border-radius: 3px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075) inset;
padding: 7px 8px;
width: 100%;
box-sizing: border-box;
outline: none;
font-family: "Merriweather", "Microsoft Yahei", 'Helvetica';
}
.form button {
width: auto;
vertical-align: bottom;
transition: all 0.3s ease;
cursor: pointer;
}
.form button:hover {
background-color: #b0a0aa;
color: #FFF;
box-shadow: 0 0 0;
border-color: #b0a0aa;
}
.form input:focus,
.form textarea:focus {
background-color: #FFF;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075) inset, 0 0 5px rgba(176, 160, 170, 0.5);
border: 1px solid #b0a0aa;
}
/* end common */
/* start emotions */
.em00, .em01, .em02, .em03, .em04, .em05, .em06, .em07, .em08, .em09,
.em10, .em11, .em12, .em13, .em14 {
background-image: url("../images/emotions/emotions-ease.png");
float: left;
height: 24px;
margin-right: 5px;
width: 24px;
}
#emotions span {
cursor: pointer;
}
.em01 {
background-position: -24px 0;
}
.em02 {
background-position: -48px 0;
}
.em03 {
background-position: -72px 0;
}
.em04 {
background-position: -96px 0;
}
.em05 {
background-position: 0px -24px;
}
.em06 {
background-position: -24px -24px;
}
.em07 {
background-position: -48px -24px;
}
.em08 {
background-position: -72px -24px;
}
.em09 {
background-position: -96px -24px;
}
.em10 {
background-position: 0 -48px;
}
.em11 {
background-position: -24px -48px ;
}
.em12 {
background-position: -48px -48px;
}
.em13 {
background-position: -72px -48px;
}
.em14 {
background-position: -96px -48px;
}
/* end emotions */
/* start side */
.side {
position: fixed;
......@@ -448,9 +559,9 @@ article header:hover {
}
article header h2 {
margin: 0;
font-size: 26px;
padding-right: 110px;
margin: 0;
font-size: 26px;
padding-right: 110px;
}
article header a {
......@@ -490,14 +601,6 @@ article footer {
border-top: 1px solid #ddd;
}
.post section.tags {
margin: 0;
}
.post header {
padding-bottom: 0;
}
.tags .tag:hover,
article .abstract a:hover{
opacity: 0.7;
......@@ -512,11 +615,6 @@ article .abstract a:hover{
transition: all 0.2s ease-out 0s;
}
.post .tags .avatar {
bottom: inherit;
margin-top: 4px;
}
.share span {
transition: all 0.2s ease-out 0s;
cursor: pointer;
......@@ -630,8 +728,52 @@ nav.pagination:hover .extend {
opacity: 1;
}
article.post {
visibility: visible;
}
.post .tags .avatar {
bottom: inherit;
margin-top: 4px;
}
.post section.tags {
margin: 0;
}
.post header {
padding-bottom: 0;
}
.post .share {
padding: 0;
padding: 10px 0 0 0;
margin-top: 15px;
font-size: 14px;
}
.post aside a {
color: #DDD;
}
.post aside a > strong {
background: #ddd;
color: #fff;
border-radius: 50%;
width: 16px;
height: 16px;
display: inline-block;
transition: background 0.3s;
vertical-align: middle;
line-height: 18px;
text-align: center;
}
.post aside a:hover {
color: #4d4d4d;
}
.post aside a:hover > strong {
background-color: #4d4d4d;
}
/* end article */
......@@ -644,6 +786,53 @@ footer.footer {
opacity: 0.6;
margin: 0 30px 30px;
}
footer.footer .icon-goup {
position: fixed;
bottom: 35px;
right: 5px;
-webkit-animation: upbounce 4s 2s infinite;
animation: upbounce 4s 2s infinite;
z-index: 10;
font-size: 20px;
cursor: pointer;
color: #b0a0aa;
transition: all 0.3s ease;
}
footer.footer .icon-goup:hover {
color: #4a4a4a;
}
@-webkit-keyframes upbounce {
0%, 10%, 25%, 40%, 50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
20% {
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
}
30% {
-webkit-transform: translateY(-5px);
transform: translateY(-5px);
}
}
@keyframes upbounce {
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
40% {
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
}
60% {
-webkit-transform: translateY(-5px);
transform: translateY(-5px);
}
}
/* end footer */
/* start responsive */
......
......@@ -18,6 +18,7 @@
<a href="http://b3log.org/services/#solo" target="_blank">Solo</a> ${version}
</span>
</div>
<span onclick="Util.goTop()" class="icon-goup"></span>
</footer>
......
......@@ -17,7 +17,7 @@
* @fileoverview util and every page should be used.
*
* @author <a href="http://vanessa.b3log.org">Liyuan Li</a>
* @version 1.0.0.0, Nov 1, 2015
* @version 1.1.0.0, Nov 2, 2015
*/
/**
......@@ -31,15 +31,19 @@ var Yilia = {
init: function () {
Util.killIE();
this.resetTags();
$(window).scroll(function () {
$("article:not(.show)").each(function () {
if ($(this).offset().top <= $(window).scrollTop() + $(window).height() - $(this).height() / 7) {
$(this).addClass("show");
}
if ($("article").length > 0 && $("article.post").length === 0) {
$(window).scroll(function () {
$("article:not(.show)").each(function () {
if ($(this).offset().top <= $(window).scrollTop() + $(window).height() - $(this).height() / 7) {
$(this).addClass("show");
}
});
});
});
$(window).scroll();
$(window).scroll();
} else if ($("article.post").length === 1) {
$("article.post").addClass('show');
}
},
resetTags: function () {
$("a.tag").each(function (i) {
......
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