//配置文件
(function () {
var config = {
'baseUrl': './'
};
require.config(config);
define('app', function () {
return angular.module('angular-require', [
'ui.router',
'ngRequire',
'infinite-scroll'
]).config([
'$stateProvider',
'$urlRouterProvider',
'$locationProvider',
'$requireProvider',
function ($stateProvider, $urlRouterProvider, $locationProvider, $requireProvider) {
var requireJS = $requireProvider.requireJS;
var requireCSS = $requireProvider.requireCSS;
$locationProvider.html5Mode(false);
$urlRouterProvider.otherwise('homepage');
$stateProvider.state('homepage', {
url: '/homepage',
templateUrl: 'views/homepage.html',
controller: 'homepage as vm',
resolve: {
deps: requireJS([
'controllers/homepage',
'js/factory'
]),
css: requireCSS([
'style!css/homepage'
])
}
});
$stateProvider.state('communication', {
url: '/communication/?:id',
templateUrl: 'views/communication.html',
params:{id:null},
controller: 'communication as vm',
resolve: {
deps: requireJS([
'lib/fixed',
'lib/transform',
'lib/alloy_touch.css',
'controllers/communication',
'js/factory',
'lib/photoswipe.min',
'lib/photoswipe-ui-default.min',
'js/photo_swipe_do',
/* 'js/communication'*/
]),
css: requireCSS([
'style!css/communication',
'style!css/photoswipe',
'style!css/top',
'style!css/footer'
])
}
});
$stateProvider.state('user_communication', {
url: '/user_communication',
templateUrl: 'views/user_communication.html',
controller: 'user_communication as vm',
resolve: {
deps: requireJS([
'lib/fixed',
'lib/transform',
'lib/alloy_touch.css',
'controllers/user_communication',
'js/factory'
]),
css: requireCSS([
'style!css/user_communication',
'style!css/top',
'style!css/footer'
])
}
});
$stateProvider.state('PostNews', {
url: '/PostNews',
templateUrl: 'views/PostNews.html',
controller: 'PostNews as vm',
resolve: {
deps: requireJS([
'lib/fixed',
'controllers/PostNews',
'js/factory'
]),
css: requireCSS([
'style!css/PostNews',
'style!css/top',
'style!css/footer'
])
}
});
}
])
});
})();
//插件初始化
window.initPhotoSwipeFromDOM = function(gallerySelector) {
var parseThumbnailElements = function(el) {
var thumbElements = el.childNodes,
numNodes = thumbElements.length,
items = [],
figureEl,
linkEl,
size,
item;
for(var i = 0; i < numNodes; i++) {
figureEl = thumbElements[i];
if(figureEl.nodeType !== 1) {
continue;
}
linkEl = figureEl.children[0];
size = linkEl.getAttribute('data-size').split('x');
item = {
src: linkEl.getAttribute('href'),
w: parseInt(size[0], 10),
h: parseInt(size[1], 10)
};
if(figureEl.children.length > 1) {
item.title = figureEl.children[1].innerHTML;
}
if(linkEl.children.length > 0) {
item.msrc = linkEl.children[0].getAttribute('src');
}
item.el = figureEl;
items.push(item);
}
return items;
};
var closest = function closest(el, fn) {
return el && ( fn(el) ? el : closest(el.parentNode, fn) );
};
var onThumbnailsClick = function(e) {
e = e || window.event;
e.preventDefault ? e.preventDefault() : e.returnValue = false;
var eTarget = e.target || e.srcElement;
var clickedListItem = closest(eTarget, function(el) {
return (el.tagName && el.tagName.toUpperCase() === 'FIGURE');
});
if(!clickedListItem) {
return;
}
var clickedGallery = clickedListItem.parentNode,
childNodes = clickedListItem.parentNode.childNodes,
numChildNodes = childNodes.length,
nodeIndex = 0,
index;
for (var i = 0; i < numChildNodes; i++) {
if(childNodes[i].nodeType !== 1) {
continue;
}
if(childNodes[i] === clickedListItem) {
index = nodeIndex;
break;
}
nodeIndex++;
}
if(index >= 0) {
openPhotoSwipe( index, clickedGallery );
}
return false;
};
var photoswipeParseHash = function() {
var hash = window.location.hash.substring(1),
params = {};
if(hash.length < 5) {
return params;
}
var vars = hash.split('&');
for (var i = 0; i < vars.length; i++) {
if(!vars[i]) {
continue;
}
var pair = vars[i].split('=');
if(pair.length < 2) {
continue;
}
params[pair[0]] = pair[1];
}
if(params.gid) {
params.gid = parseInt(params.gid, 10);
}
return params;
};
var openPhotoSwipe = function(index, galleryElement, disableAnimation, fromURL) {
var pswpElement = document.querySelectorAll('.pswp')[0],
gallery,
options,
items;
items = parseThumbnailElements(galleryElement);
options = {
galleryUID: galleryElement.getAttribute('data-pswp-uid'),
getThumbBoundsFn: function(index) {
var thumbnail = items[index].el.getElementsByTagName('img')[0],
pageYScroll = window.pageYOffset || document.documentElement.scrollTop,
rect = thumbnail.getBoundingClientRect();
return {x:rect.left, y:rect.top + pageYScroll, w:rect.width};
}
};
if(fromURL) {
if(options.galleryPIDs) {
for(var j = 0; j < items.length; j++) {
if(items[j].pid == index) {
options.index = j;
break;
}
}
} else {
options.index = parseInt(index, 10) - 1;
}
} else {
options.index = parseInt(index, 10);
}
if( isNaN(options.index) ) {
return;
}
if(disableAnimation) {
options.showAnimationDuration = 0;
}
gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
gallery.init();
};
var galleryElements = document.querySelectorAll( gallerySelector );
for(var i = 0, l = galleryElements.length; i < l; i++) {
galleryElements[i].setAttribute('data-pswp-uid', i+1);
galleryElements[i].onclick = onThumbnailsClick;
}
var hashData = photoswipeParseHash();
if(hashData.pid && hashData.gid) {
openPhotoSwipe( hashData.pid , galleryElements[ hashData.gid - 1 ], true, true );
}
};
//使用
<section ng-init="vm.communication()" class="communication">
<section class="top-section">
<section id="fixedTop" class="block-1 xh-full-container">
<div id="firstBackground" class="first-background xh-transition" style="background:url({{vm.post.coverUrl}})"></div>
<div class="one-group-btn">
<button type="button" class="xh-btn back" ng-click="vm.back()"></button>
<button type="button" class="xh-btn share"></button>
</div>
<div class="one-content xh-background-fff xh-size0">
<div id="fix" layout="row vertical">
<div class="topic-img xh-inblock">
<img ng-src="{{}}" alt=""/>
</div>
<span>{{vm.post.period}}</span>
<span class="xh-inblock dot">▪</span>
<span class="xh-inblock joinCount">{{vm.post.joinCount+'人参与'}}</span>
<span>{{vm.post.begin+' 开始'}}</span>
</div>
</div>
</section>
<section class="block-2">
<div class="two-content xh-background-fff xh-text-center">
<p id="limitText" class="checkLimit xh-size28 over-flow-2 xh-text-left" data-over="2">
{{vm.post.summary}}
</p>
<button class="over-flow-btn btn" type="button" onclick="checkLimitText(this)"
ng-click="vm.checkLimitText($event)"><i></i></button>
</div>
</section>
</section>
<section class="block-3 xh-relative">
<section id="wrapper">
<section id="scroller">
<ul id="postList" class="three-content xh-text-left">
</ul>
</section>
</section>
</section>
<footer class="footer xh-relative">
<ul id="footerFix" class="footer-tab tranform-horizontal-center floatfix">
<li class="pull-left">
<a class="xh-color-000 xh-size28">
<i class="xh-inblock"></i>
<span class="xh-inblock">热议话题</span>
</a>
</li>
<li class="tranform-horizontal-center">
<a class="xh-color-8b8b8b xh-size28">
<i class="xh-inblock"></i>
<span class="xh-inblock">参与讨论</span>
</a>
</li>
<li class="pull-right">
<a class="xh-color-8b8b8b xh-size28">
<i class="xh-inblock"></i>
<span class="xh-inblock">相关阅读</span>
</a>
</li>
</ul>
</footer>
</section>
<script type="text/template" id="postMoke">
<li class="three-content-item xh-marginTop-30 xh-background-fff" data-sId="{{sId}}" id="{{id}}" data-oid="{{oid}}">
<div class="three-body xh-size0" layout="row vertical">
<img src="{{icon}}" alt=""/>
<span class="xh-size30">{{name}}</span>
<span class="xh-size30">-</span>
<span class="xh-size30">{{tag}}</span>
</div>
<div class="three-footer xh-text-center">
<p class="checkLimit xh-marginTop-40 xh-color-000 xh-text-left over-flow-6" data-over="6">
{{content}}
</p>
<button class="over-flow-btn btn" type="button" onclick="checkLimitText(this)" ng-click="vm.checkLimitText($event)"><i></i></button>
<div class="xh-marginTop-30 gallery xh-text-left">
{{postParticipator.images}}
</div>
<label class="xh-color-797878 xh-paddingTop-30 xh-size24 xh-block xh-text-left">{{time}}</label>
</div>
</li>
</script>
<script type="text/template" id="imgMoke">
<figure class="xh-inline">
<a href="{{image}}" data-size="1672x1020">
<img src="{{image}}" alt="" data-pin-nopin="true">
</a>
</figure>
</script>
<script>
var wow = new WOW({
boxClass: 'wow',
animateClass: 'animated',
offset: 0,
mobile: true,
live: true
});
wow.init();
//=========================================================滚动=====================================================
var postList = $("#postList"),
postMoke = $("#postMoke"),
postTop = $("#firstBackground")[0];
scroller = $("#scroller")[0],
height = $(".first-background").height(),
loading = false,
id = kit.getEncodeParam('id') || kit.getUrlParam('id');
alloyTouch = null;
Transform(scroller, true);
Transform(postTop);
postTop.originY = -70;
postTop.translateY = -70;
loadMore();
alloyTouch = new AlloyTouch({
touch: "#wrapper",
vertical: true,
target: scroller,
property: "translateY",
maxSpeed: 2,
outFactor: 0.2,
min: 160 * -20 + window.innerHeight - 202 - 50,
max: 0,
touchStart: function () {
reastMin();
},
lockDirection: false,
change: function (v) {
if (v > 70) {
} else {
}
if (v <= this.min + 5 && !loading) {
loading = true;
loadMore();
}
if (v < 0) {
$(".first-background").css({
'height': height / 3
})
} else {
$(".first-background").css({
'height': height
})
}
},
touchEnd: function (evt, value) {
/* if (value > 70) {
this.to(70);
mockRequest(this);
pull_refresh.classList.add('none');
return false;
}*/
}
});
//=========================================================数据加载=================================================
function loadMore() {
var mockHTML = postMoke.html();
setTimeout(function () {
$.ajax({
type: 'post',
url: window.WHDAPP.ApiAddress.GetPostComments,
data: {
postId: id,
lastPostCommentId: $("#postList li:last").data('oid'),
from: "PostParticipator",
maxResultCount: 3
},
success: function (response) {
var data = response.result;
console.log(data);
if (data.length > 0) {
var html = '';
var te=["http://hbfile.b0.upaiyun.com/img/home/banner/166eb0cb296085fc4d75c14bd1dbf32af400d94cb1f64","http://hbfile.b0.upaiyun.com/img/home/banner/a75d948ab49f8edb8ce32f1be0bb85f7b33a328c342bf"];
var imagesTpl = $("#imgMoke").html();
for (var i = 0; i < data.length; i++) {
var buildImages = (function() {
var result = '';
result+= imagesTpl.replace(/{{image}}/g,te[0]);
result+= imagesTpl.replace(/{{image}}/g,te[1]);
return result;
/*if (data[i].images && data[i].images.length <= 0)
return '';
else {
var result = '';
for (var j = 0; j < data[i].images.length; j++) {
result += imagesTpl.replace(/{{image}}/g, data.images[j]||te);
}
return result;
}*/
})();
html += mockHTML.replace(/{{content}}/g, data[i].content)
.replace(/{{id}}/g, data[i].id)
.replace(/{{oid}}/g, data[i].id)
.replace(/{{postParticipator.images}}/g, buildImages)
.replace(/{{time}}/g, moment(data[i].creationTime).startOf('hour').fromNow())
.replace(/{{icon}}/g, window.WHDAPP.getRealUri(data[i].sender.avatar))
.replace(/{{sId}}/g, data[i].sender.id)
.replace(/{{name}}/g, data[i].sender.name)
.replace(/{{tag}}/g, function () {
if (data[i].sender.from === "PostParticipator") {
return data[i].sender.tag
}
});
}
postList.append(html);
loading = false;
reastMin();//重新设置最小高度
initCheckLimitText();//初始化检查文字是否过多的
initPhotoSwipeFromDOM('.gallery');
}
}
});
}, 500)
}
function reastMin() {
alloyTouch.min = -1 * parseInt(getComputedStyle(scroller).height) + window.innerHeight - 202;
}
document.addEventListener("touchmove", function (evt) {
evt && evt.preventDefault();
}, false);
//===================================================动态dom元素事件================================================
window.checkLimitText = function (obj) {
var target = $(obj);
var prev = target.prev('p.checkLimit');
var limit = prev.data('over');
var lines = lookLines(prev);
if (lines >= limit) {
target.addClass('none');//触发的按钮
prev.removeClass('over-flow-' + limit); //需要移除class的ele
}
};
//==================================================普通方法========================================================
function initCheckLimitText() {
var chekLimit = $('p.checkLimit').each(function () {
var _this = $(this);
var nextBtn = _this.next('button.over-flow-btn');
var lines = lookLines(_this);
var limit = _this.data('over');
if (lines < limit) {
nextBtn.addClass('none');
}
});
}
function lookLines(obj) {
var lines = window.kit.getLines(obj[0]);
return lines;
}
</script>
<script>
//===========================================================通知===================================================
var postCommentActionType = {
New: 0,
Delete: 1,
SwitchOrder: 2,
Locked: 3
};
$(document).ready(function () {
abp.event.on('post.event', function (data) {
abp.log.debug(data);
/*if (parseInt(data.actionType) == postCommentActionType.New && data.sender.from == 'PostParticipator') {
var mockHTML = postMoke.html();
if (data.length > 0) {
var html = '';
for (var i = 0; i < data.length; i++) {
html += mockHTML.replace(/{{content}}/g, data[i].content)
.replace(/{{id}}/g, data[i].id)
.replace(/{{oid}}/g, data[i].id)
.replace(/{{time}}/g, moment(data[i].creationTime).startOf('hour').fromNow())
.replace(/{{icon}}/g, window.WHDAPP.getRealUri(data[i].sender.avatar))
.replace(/{{sId}}/g, data[i].sender.id)
.replace(/{{name}}/g, data[i].sender.name)
.replace(/{{tag}}/g, function () {
if (data[i].sender.from === "PostParticipator") {
return data[i].sender.tag
}
});
}
postList.prepend(html);
}
}*/
});
});
</script>
是在ajax提交结束过后 执行的插件方法
问题是: