Skip to content

Commit

Permalink
fix double commit and change style layout
Browse files Browse the repository at this point in the history
  • Loading branch information
Dotos committed Aug 9, 2017
1 parent 2709612 commit 557cc2e
Show file tree
Hide file tree
Showing 3 changed files with 107 additions and 59 deletions.
2 changes: 1 addition & 1 deletion dist/Valine.min.js
View file

Large diffs are not rendered by default.

144 changes: 97 additions & 47 deletions src/Valine.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ class Valine {
}
_root.element.classList.add('valine');
let placeholder = option.placeholder || 'ヾﾉ≧∀≦)o来啊，快活啊!';
let eleHTML = `<div class="vwrap"><div class="vedit"><textarea class="veditor vinput" placeholder="${placeholder}"></textarea></div><div class="vcontrol"><div class='vident'><input placeholder="称呼" class="vnick vinput" type="text"><input placeholder="网址(http://)" class="vlink vinput" type="text"><input placeholder="邮箱" class="vmail vinput" type="text"></div><div class="vright"><button type="button" class="vsubmit vbtn">回复</button></div></div><div style="display:none;" class="vmark"><div class="valert txt-center"><div class="vtext"></div><div><button class="vcancel vbtn">我再看看</button><button class="vsure vbtn">继续提交</button></div></div></div></div><div class="pd5 txt-right power">Powered By <a href="https://github.com/xCss/Valine" target="_blank">Valine</a></div><ul class="vlist"><li class="vloading"></li><li class="vempty"></li></ul>`;
let eleHTML = `<div class="vwrap"><div class="vedit"><textarea class="veditor vinput" placeholder="${placeholder}"></textarea></div><div class="vcontrol"><div class='vident'><input placeholder="称呼" class="vnick vinput" type="text"><input placeholder="网址(http://)" class="vlink vinput" type="text"><input placeholder="邮箱" class="vmail vinput" type="text"></div><div class="vright"><button type="button" class="vsubmit vbtn">回复</button></div></div><div style="display:none;" class="vmark"></div></div><div class="pd5 txt-right power">Powered By <a href="https://github.com/xCss/Valine" target="_blank">Valine</a></div><ul class="vlist"><li class="vloading"></li><li class="vempty"></li></ul>`;
_root.element.innerHTML = eleHTML;

// loading
Expand Down Expand Up @@ -93,14 +93,14 @@ class Valine {
_root.nodata.hide();
let query = new _root.v.Query('Comment');
query.equalTo('url', location.pathname);
query.ascending('updatedAt');
query.descending('updatedAt');
query.limit('1000');
query.find().then(ret => {
_root.loading.hide();
let _temp = [];
if (ret.length) {
_root.nodata.hide();
for (var i in ret) {
for (let i = ret.length - 1; i > -1; i--) {
let item = ret[i];
let _vcard = document.createElement('li');
_vcard.setAttribute('class', 'vcard');
Expand All @@ -109,6 +109,10 @@ class Valine {
let _vlist = _root.element.querySelector('.vlist');
let _vlis = _vlist.querySelectorAll('li');
let _vat = _vcard.querySelector('.vat');
let _a = _vcard.querySelectorAll('a');
_a.forEach(item => {
item.setAttribute('target', '_blank');
})
_root.bindAt(_vat);
_vlist.insertBefore(_vcard, _vlis[1]);
}
Expand Down Expand Up @@ -156,67 +160,63 @@ class Valine {
defaultComment['at'] = '';
}

// at event
_root.bindAt = (el) => {
el.addEventListener('click', (e) => {
let at = el.getAttribute('at');
let rid = el.getAttribute('rid');
defaultComment['at'] = at;
defaultComment['rid'] = rid;
inputs['comment'].value = `${at} ，`;
inputs['comment'].focus();
})
}

// alert
let _mark = _root.element.querySelector('.vmark');
let _atx = _mark.querySelector('.vtext');
let _vok = _mark.querySelector('.vsure');
_mark.querySelector('.vcancel').addEventListener('click', function(e) {
_root.alert.hide();
});
// alert
_root.alert = {
show(txt, cb) {
_atx.innerHTML = txt;
let _confirm = `<div class="valert txt-center"><div class="vtext">${txt}</div><div><button class="vcancel vbtn">我再看看</button><button class="vsure vbtn">继续提交</button></div></div>`;
_mark.innerHTML = _confirm;
_mark.querySelector('.vcancel').addEventListener('click', function(e) {
_root.alert.hide();
});
let _ok = _mark.querySelector('.vsure');
_mark.setAttribute('style', 'display:block;');
_vok.addEventListener('click', function(e) {
cb && cb()
Event.on('click', _ok, e => {
cb && cb();
_root.alert.hide();
})
});
},
hide() {
_mark.setAttribute('style', 'display:none;');
}
}

// submit
let vsubmit = _root.element.querySelector('.vsubmit');
vsubmit.addEventListener('click', (e) => {
let submitBtn = _root.element.querySelector('.vsubmit');
let submitEvt = (e) => {
if (defaultComment.comment == '') {
inputs['comment'].focus();
return;
}
if (defaultComment.nick == '') {
defaultComment['nick'] = '小调皮';
}

defaultComment.comment = snarkdown(defaultComment.comment);
let idx = defaultComment.comment.indexOf(defaultComment.at);
if (idx > -1 && defaultComment.at != '') {
let at = `<a href='#${defaultComment.rid}'>${defaultComment.at}</a>`;
defaultComment.comment = defaultComment.comment.replace(defaultComment.at, at);
}
if (!verify.mail(defaultComment.mail) && !verify.link(defaultComment.link)) {
_root.alert.show('您的网址和邮箱格式不正确, 是否继续提交?', commit)
} else if (!verify.mail(defaultComment.mail)) {
_root.alert.show('您的邮箱格式不正确, 是否继续提交?', commit)
} else if (!verify.link(defaultComment.link)) {
_root.alert.show('您的网址格式不正确, 是否继续提交?', commit)
// veirfy
let mailRet = verify.mail(defaultComment.mail);
let linkRet = verify.link(defaultComment.link);
if (!mailRet.k && !linkRet.k) {
_root.alert.show('您的网址和邮箱格式不正确, 是否继续提交?', commitEvt)
} else if (!mailRet.k) {
defaultComment['link'] = linkRet.v;
_root.alert.show('您的邮箱格式不正确, 是否继续提交?', commitEvt)
} else if (!linkRet.k) {
defaultComment['mail'] = mailRet.v;
_root.alert.show('您的网址格式不正确, 是否继续提交?', commitEvt)
} else {
commit()
defaultComment['mail'] = mailRet.v;
defaultComment['link'] = linkRet.v;
commitEvt()
}
})
}

let commit = () => {
let commitEvt = () => {
_root.loading.show();
// 声明类型
let Ct = _root.v.Object.extend('Comment');
Expand All @@ -233,6 +233,10 @@ class Valine {
_vcard.innerHTML = `<div class="vhead" ><a href="${getLink({link:ret.get('link') ,mail:ret.get('mail')})}" target="_blank" >${ret.get('nick')}</a><span class="vtime">${dateFormat(ret.get("updatedAt"))}</span><span rid='${ret.id}' at='@${ret.get('nick')}' class="vat">回复</span></div><div class="vcomment">${ret.get('comment')}</div>`;
let _vlist = _root.element.querySelector('.vlist');
let _vlis = _vlist.querySelectorAll('li');
let _a = _vcard.querySelectorAll('a');
_a.forEach(item => {
item.setAttribute('target', '_blank');
})
let _vat = _vcard.querySelector('.vat');
_root.bindAt(_vat);
_vlist.insertBefore(_vcard, _vlis[1]);
Expand All @@ -244,21 +248,76 @@ class Valine {
_root.loading.hide();
})
}

// at event
let atEvt = (el, cb) => {
Event.off('click', el, cb)
Event.on('click', el, cb)
}
_root.bindAt = (el) => {
atEvt(el, (e) => {
let at = el.getAttribute('at');
let rid = el.getAttribute('rid');
defaultComment['at'] = at;
defaultComment['rid'] = rid;
inputs['comment'].value = `${at} ，`;
inputs['comment'].focus();
})
}

Event.off('click', submitBtn, submitEvt);
Event.on('click', submitBtn, submitEvt);


}

}

const Event = {
on(type, el, handler, capture) {
if (el.addEventListener) el.addEventListener(type, handler, capture || false);
else if (el.attachEvent) el.attachEvent(`on${type}`, handler);
else el[`on${type}`] = handler;
},
off(type, el, handler, capture) {
if (el.removeEventListener) el.removeEventListener(type, handler, capture || false);
else if (el.detachEvent) el.detachEvent(`on${type}`, handler);
else el[`on${type}`] = null;
},
// getEvent(e) {
// return e || window.event;
// },
// getTarget(e) {
// return e.target || e.srcElement;
// },
// preventDefault(e) {
// e = e || window.event;
// e.preventDefault && e.preventDefault() || (e.returnValue = false);
// },
// stopPropagation(e) {
// e = e || window.event;
// e.stopPropagation && e.stopPropagation() || (e.cancelBubble = true);
// }
}


const getLink = (target) => {
return target.link || (target.mail && `mailto:${target.mail}`) || 'javascript:void(0);';
}

const verify = {
mail(m) {
return /[\w-\.]+@([\w-]+\.)+[a-z]{2,3}/.test(m);
return {
k: /[\w-\.]+@([\w-]+\.)+[a-z]{2,3}/.test(m),
v: m
};
},
link(l) {
l = /^(http|https)/.test(l) ? l : `http://${l}`;
return /(((^https?:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)$/g.test(l);
return {
k: /(((^https?:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)$/g.test(l),
v: l
};
}
}

Expand All @@ -281,15 +340,6 @@ const HtmlUtil = {
}
};

const convertUrl = (link) => {
if (!!link) {
link = /^(http|https)/.test(link) ? link : `http://${link}`
} else {
link = window.location.href
}
return link;
}

const dateFormat = (date) => {
var vDay = padWithZeros(date.getDate(), 2);
var vMonth = padWithZeros(date.getMonth() + 1, 2);
Expand Down
20 changes: 9 additions & 11 deletions src/Valine.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,30 +18,28 @@
font-size: 0;
.vident {
font-size: 14px;
width: 87%;
width: 85%;
display: inline-block;
padding: 5px;
vertical-align: middle;
.vinput {
width: 33%;
}
}
.vright {
font-size: 14px;
padding: 5px;
display: inline-block;
width: 13%;
width: 15%;
text-align: right;
vertical-align: middle;
}
@media screen and (min-width:620px) and (max-width:719px) {
.vident {
width: 88%;
}
.vright {
width: 12%;
}
}
@media screen and (max-width:480px) {
@media screen and (max-width:500px) {
.vident {
width: 75%;
.vinput {
width: 80%;
}
}
.vright {
width: 25%;
Expand Down

0 comments on commit 557cc2e

Please sign in to comment.