add swipe gesture for book detail page

This commit is contained in:
2014-05-20 15:34:31 +08:00
parent 6b23e0688e
commit fcd5a5f3fe
16 changed files with 131 additions and 1419 deletions
+42 -42
View File
@@ -259,52 +259,52 @@ ul.shareList li.shareList_item:focus {
background-color: #E4EFFB;
}
.sharePage .sharePageTitle .sharePageBack {
position: absolute;
left: 0px;
top: 0px;
}
/*.sharePage .sharePageTitle .sharePageBack {*/
/*position: absolute;*/
/*left: 0px;*/
/*top: 0px;*/
/*}*/
.sharePage .sharePageTitle .sharePageSubmit {
position: absolute;
right: 0px;
top: 0px;
}
/*.sharePage .sharePageTitle .sharePageSubmit {*/
/*position: absolute;*/
/*right: 0px;*/
/*top: 0px;*/
/*}*/
.sharePage .sharePageContent {
position: fixed;
display: block;
top: 50px;
bottom: 110px;
left: 10px;
right: 10px;
background: #FFF;
border: none;
position: fixed;
font-size: 1em;
}
/*.sharePage .sharePageContent {*/
/*position: fixed;*/
/*display: block;*/
/*top: 50px;*/
/*bottom: 110px;*/
/*left: 10px;*/
/*right: 10px;*/
/*background: #FFF;*/
/*border: none;*/
/*position: fixed;*/
/*font-size: 1em;*/
/*}*/
.sharePage .sharePageBottom {
position: fixed;
bottom: 0;
width: 100%;
left: 0;
height: 40px;
line-height: 40px;
background: #EFF2F8;
border-top: 1px solid #DDD;
}
/*.sharePage .sharePageBottom {*/
/*position: fixed;*/
/*bottom: 0;*/
/*width: 100%;*/
/*left: 0;*/
/*height: 40px;*/
/*line-height: 40px;*/
/*background: #EFF2F8;*/
/*border-top: 1px solid #DDD;*/
/*}*/
.sharePage .sharePageBottom .shareBottomBtn {
width: 30px;
height: 30px;
background: #FF0;
border-radius: 5px;
position: relative;
display: block;
float: left;
margin: 5px 10px;
}
/*.sharePage .sharePageBottom .shareBottomBtn {*/
/*width: 30px;*/
/*height: 30px;*/
/*background: #FF0;*/
/*border-radius: 5px;*/
/*position: relative;*/
/*display: block;*/
/*float: left;*/
/*margin: 5px 10px;*/
/*}*/
.shareGeo {
position: absolute;
+1 -1
View File
@@ -2,7 +2,7 @@ libr = angular.module 'libr.constant', []
Constant = {}
#Constant.baseUrl = "http://libr.herokuapp.com/api/v1"
Constant.baseUrl = "http://192.168.1.108:3000/api/v1"
Constant.baseUrl = "http://192.168.0.103:3000/api/v1"
libr.constant 'Constant', Constant
+1
View File
@@ -12,6 +12,7 @@ var paths = {
'js/app/utils/*.coffee',
'js/app/handler/*.coffee',
'js/app/services/*.coffee',
'js/app/directives/*.coffee',
'js/app/controllers/*.coffee',
'js/*.coffee'],
css: ['css/*.css'],
BIN
View File
Binary file not shown.

After

Width:  |  Height:  |  Size: 3.8 KiB

-17
View File
@@ -34,26 +34,9 @@
<ion-nav-view></ion-nav-view>
<script src="assets/angular-resource/angular-resource.min.js"></script>
<script type="text/javascript" src="js/libr.js"></script>
<script src="js/app.js"></script>
<script src="js/umeng/jquery.js"></script>
<script src="js/umeng/social.umeng.js"></script>
<script src="js/umeng/html2canvas.js"></script>
<script src="dist/js/all.min.js"></script>
<!-- <script src="http://10.17.2.56:8080/target/target-script-min.js#anonymous"></script> -->
<script>
var opt = {
'data': {
'content': {
'text': 'Libr分享即将来临',
'img': 'img/share.png'
}
}
};
function goShare() {
$("#xyz").umshare(opt);
}
</script>
</body>
</html>
+1 -1
View File
@@ -17,6 +17,7 @@ angular.module('libr', [
'libr.services.comment',
'libr.services.recommend',
'libr.services.utils',
'libr.directives.swipeBack',
'libr.controllers.login',
'libr.controllers.home',
'libr.controllers.main',
@@ -100,5 +101,4 @@ angular.module('libr', [
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/login');
});
@@ -1,12 +1,16 @@
libr = angular.module('libr.controllers', ['ionic'])
class BookDetailController
@$inject: ['$scope', '$stateParams', 'Books', '$window', '$ionicModal', 'Comments', 'DoubanService']
constructor: (@$scope, @$stateParams, @Books, @$window, @$ionicModal, @Comments, @DoubanService) ->
@$inject: ['$scope', '$stateParams', 'Books', '$window', '$ionicModal', 'Comments', 'DoubanService',
'$ionicActionSheet']
constructor: (@$scope, @$stateParams, @Books, @$window, @$ionicModal, @Comments, @DoubanService, @$ionicActionSheet) ->
@$scope.openDialog = @openCommentDialog
@$scope.closeDialog = @closeCommentDialog
@$scope.doComment = @doComment
@$scope.back = @back
@$scope.goShare = @goShare
@$scope.closeShare = @closeShare
@$scope.swipeRight = @swipeRight
@$ionicModal.fromTemplateUrl 'templates/modal/comment.html', (modal)=>
@$scope.modal = modal
@@ -14,6 +18,13 @@ class BookDetailController
scope: @$scope,
animation: 'slide-in-up'
}
@$ionicModal.fromTemplateUrl 'templates/modal/share.html', (modal)=>
@$scope.shareModal = modal
, {
scope: @$scope,
animation: 'slide-in-up'
}
@Books.get {book_id: @$stateParams.isbn},
(result) =>
@$scope.book = result
@@ -56,5 +67,11 @@ class BookDetailController
back: ()=>
@$window.history.back()
goShare: ()=>
@$scope.shareModal.show()
closeShare: ()=>
@$scope.shareModal.hide()
swipeRight: ()=>
@$window.history.back()
console.log 'swipe right..'
libr.controller 'BookDetailController', BookDetailController
+14
View File
@@ -0,0 +1,14 @@
libr = angular.module 'libr.directives.swipeBack', []
class SwipeBack
@$inject: ['$ionicGesture', '$window']
constructor: (@$ionicGesture, @$window)->
return {
restrict: 'A',
link: (scope, element, attribute)=>
@$ionicGesture.on 'swiperight', (event)=>
@$window.history.back()
, element
}
libr.directive 'swipeBack', ['$ionicGesture', '$window', SwipeBack]
-4
View File
@@ -1,4 +0,0 @@
var haha = function () {
alert('ssss');
console.log('.......text');
}
+7 -6
View File
@@ -203,13 +203,14 @@
c.name = $.fn.umshare.defaults.data.platform[plat].name;
}
var sharePanel = function (plat, c) {
var panel = $('<div class="sharePage">\
<div class="sharePageTitle">\
<b class="icon-back sharePageBack"></b>\
<span>分享到' + c.name + '</span>\
<b class="icon-submit sharePageSubmit"></b>\
</div>\
var panel = $('<div class="bar bar-header bar-positive">\
<button class="button icon sharePageBack ion-arrow-left-c"></button>\
<h1 class="title">分享到' + c.name + '</h1>\
<button class="button sharePageSubmit icon ion-checkmark-round"></button>\
</div><div class="padding has-header">\
<div class="list">\
<textarea class="sharePageContent">' + c.data.content.text + '</textarea>\
</div></div>\
<div class="sharePageBottom">\
<span class="shareGeo"></span>\
<img id="shareImage" class="shareImg" src="' + (c.data.content.img ? c.data.content.img : c.data.content.furl) + '"/>\
-5
View File
@@ -52,11 +52,6 @@ ul.shareList li.shareList_item:focus{background-color:#E3EDFC}
.icon-submit{background:url(../../img/social.umeng/send.png) no-repeat center center;background-size:60%}
.icon-submit.disabled{background:url(../../img/social.umeng/send_disable.png) no-repeat center center;background-size:60%}
.icon-back:focus,.icon-submit:focus{background-color:#E4EFFB}
.sharePage .sharePageTitle .sharePageBack{position:absolute;left:0;top:0}
.sharePage .sharePageTitle .sharePageSubmit{position:absolute;right:0;top:0}
.sharePage .sharePageContent{display:block;top:50px;bottom:110px;left:10px;right:10px;background:#FFF;border:none;position:fixed;font-size:1em}
.sharePage .sharePageBottom{position:fixed;bottom:0;width:100%;left:0;height:40px;line-height:40px;background:#EFF2F8;border-top:1px solid #DDD}
.sharePage .sharePageBottom .shareBottomBtn{width:30px;height:30px;background:#FF0;border-radius:5px;position:relative;display:block;float:left;margin:5px 10px}
.shareGeo{position:absolute;top:-30px;left:10px;font-size:1em;height:20px;border:1px solid #CCC;border-radius:15px;line-height:20px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;width:150px;color:#666;text-align:center}
.shareImg{position:absolute;bottom:50px;right:10px;max-height:70px;max-width:70px;display:none}
.umTip{position:fixed;bottom:50px;left:0;width:100%;text-align:center;display:none;z-index:10000}
+18 -1330
View File
File diff suppressed because it is too large Load Diff
+7 -6
View File
@@ -203,13 +203,14 @@
c.name = $.fn.umshare.defaults.data.platform[plat].name;
}
var sharePanel = function (plat, c) {
var panel = $('<div class="sharePage">\
<div class="sharePageTitle">\
<b class="icon-back sharePageBack"></b>\
<span>分享到' + c.name + '</span>\
<b class="icon-submit sharePageSubmit"></b>\
</div>\
var panel = $('<div class="bar bar-header bar-positive">\
<button class="button icon sharePageBack ion-arrow-left-c"></button>\
<h1 class="title">分享到' + c.name + '</h1>\
<button class="button sharePageSubmit icon ion-checkmark-round"></button>\
</div><div class="padding has-header">\
<div class="list">\
<textarea class="sharePageContent">' + c.data.content.text + '</textarea>\
</div></div>\
<div class="sharePageBottom">\
<span class="shareGeo"></span>\
<img id="shareImage" class="shareImg" src="' + (c.data.content.img ? c.data.content.img : c.data.content.furl) + '"/>\
+2 -2
View File
@@ -3,7 +3,7 @@
<button class="button button-icon ion-arrow-left-c" ng-click="back()">
</button>
</ion-nav-buttons>
<ion-content has-header="true" padding="true">
<ion-content has-header="true" padding="true" ng-swipe-right="swipeRight()">
<div class="list card">
<div class="item ">
<h2>{{book.name}}</h2>
@@ -27,7 +27,7 @@
<i class="icon ion-chatbox"></i>
评论
</a>
<a class="tab-item" onclick="goShare()" id="xyz">
<a class="tab-item" id="xyz" ng-click="goShare()">
<i class="icon ion-share"></i>
分享
</a>
+2 -2
View File
@@ -3,7 +3,7 @@
<button class="button button-icon ion-arrow-left-c" ng-click="back()">
</button>
</ion-nav-buttons>
<ion-content has-header="true" padding="true">
<ion-content has-header="true" padding="true" swipe-back>
<div class="list card">
<div class="item ">
<h2>{{book.name}}</h2>
@@ -27,7 +27,7 @@
<i class="icon ion-chatbox"></i>
评论
</a>
<a class="tab-item" onclick="goShare()" id="xyz">
<a class="tab-item" id="xyz" ng-click="goShare()">
<i class="icon ion-share"></i>
分享
</a>
+16
View File
@@ -0,0 +1,16 @@
<div class="modal">
<header class="bar bar-header bar-positive">
<button class="button button-icon ion-arrow-left-c" ng-click="closeShare()"></button>
<h1 class="title"><img src="img/weibo24.png">分享到微博</h1>
</header>
<div class="bar bar-loading bar-assertive" id="x-bar" ng-if="data.isLoading">
{{data.text}}
</div>
<ion-content class="padding has-header">
<textarea name="content" class="comment-container" id="comment">
</textarea>
<button class="button button-full button-energized" ng-click="doComment()">
提交
</button>
</ion-content>
</div>