mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
fix(reorder): Prevent scroll w/ data-prevent-scroll attr on reorder btn, closes #848
This commit is contained in:
2
js/ext/angular/src/directive/ionicList.js
vendored
2
js/ext/angular/src/directive/ionicList.js
vendored
@@ -68,7 +68,7 @@ angular.module('ionic.ui.list', ['ngAnimate'])
|
||||
</div>\
|
||||
<a class="item-content" ng-href="{{ href }}" ng-transclude></a>\
|
||||
<div class="item-right-edit item-reorder" ng-if="reorderIconClass !== undefined">\
|
||||
<button data-ionic-action="reorder" class="button button-icon icon" ng-class="reorderIconClass"></button>\
|
||||
<button data-ionic-action="reorder" data-prevent-scroll="true" class="button button-icon icon" ng-class="reorderIconClass"></button>\
|
||||
</div>\
|
||||
<div class="item-options" ng-if="itemOptionButtons">\
|
||||
<button ng-click="b.onTap(item, b)" ion-stop-event="click" class="button" ng-class="b.type" ng-repeat="b in itemOptionButtons" ng-bind="b.text"></button>\
|
||||
|
||||
@@ -2,82 +2,9 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>List</title>
|
||||
|
||||
<!-- Sets initial viewport load and disables zooming -->
|
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
|
||||
<link rel="stylesheet" href="../../../../dist/css/ionic.css">
|
||||
<script src="../../../../dist/js/ionic.bundle.js"></script>
|
||||
<style>
|
||||
.box {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
color: #fff;
|
||||
}
|
||||
.box h1 {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 100%;
|
||||
margin-top: -50px;
|
||||
|
||||
color: #fff;
|
||||
|
||||
font-size: 60px;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
.blue {
|
||||
background-color: rgb(71, 138, 238);
|
||||
}
|
||||
.yellow {
|
||||
background-color: rgb(233, 233, 109);
|
||||
}
|
||||
.pink {
|
||||
background-color: rgb(233, 109, 233);
|
||||
}
|
||||
.my-repeat-animation > .ng-enter,
|
||||
.my-repeat-animation > .ng-leave,
|
||||
.my-repeat-animation > .ng-move {
|
||||
-webkit-transition: 0.2s linear all;
|
||||
transition: 0.2s linear all;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.my-repeat-animation > .ng-enter {
|
||||
left:-10px;
|
||||
opacity:0;
|
||||
z-index: 10;
|
||||
}
|
||||
.my-repeat-animation > .ng-enter.ng-enter-active {
|
||||
left:0;
|
||||
opacity:1;
|
||||
}
|
||||
|
||||
.my-repeat-animation > .ng-leave {
|
||||
left:0;
|
||||
opacity:1;
|
||||
}
|
||||
.my-repeat-animation > .ng-leave.ng-leave-active {
|
||||
left:-10px;
|
||||
opacity:0;
|
||||
}
|
||||
|
||||
.my-repeat-animation > .ng-move {
|
||||
opacity:0.5;
|
||||
}
|
||||
.my-repeat-animation > .ng-move.ng-move-active {
|
||||
opacity:1;
|
||||
}
|
||||
#click-notify {
|
||||
position: absolute;
|
||||
z-index: 9999;
|
||||
background: red;
|
||||
min-width: 50px;
|
||||
left: 48%;
|
||||
top: 150px;
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body ng-controller="TestCtrl">
|
||||
<div id="click-notify">CLICK!</div>
|
||||
|
||||
@@ -621,8 +621,9 @@ ionic.views.Scroll = ionic.views.View.inherit({
|
||||
function shouldIgnorePress(e) {
|
||||
// Don't react if initial down happens on a form element
|
||||
return e.target.tagName.match(IS_INPUT_LIKE_REGEX) ||
|
||||
e.target.isContentEditable ||
|
||||
e.target.tagName.match(IS_EMBEDDED_OBJECT_REGEX);
|
||||
e.target.isContentEditable ||
|
||||
e.target.tagName.match(IS_EMBEDDED_OBJECT_REGEX) ||
|
||||
e.target.dataset.preventScroll;
|
||||
}
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user