MrBuggy MrBuggy - 4 months ago 51
HTML Question

Handling on-long-press and ng-click

Hi I've got follow code (please use a tablet):



body {
font-family: Roboto;
box-sizing: border-box
}
.cContent {
display: flex;
flex-direction: column;
}
.cHeaders {
display: flex;
flex-direction: row;
}
.cHeader {
background-color: rgb(141, 141, 142);
color: white;
padding: 10px;
margin-left: 10px;
margin-bottom: 5px;
}
.cThemeHeader {
width: 300px;
}
.cItemHeader {
width: 300px;
}
.cCountHeader {
width: 80px;
text-align: center
}
.cData {
display: flex;
}
.cRow {
display: flex;
flex-direction: column;
}
.cItemRow {
display: flex;
width: 300px;
}
.cBox {
background-color: rgb(208, 229, 199);
color: #4a7f35;
padding: 10px;
margin-left: 10px;
margin-bottom: 5px;
}
.cTheme {
width: 300px;
}
.cItem {
background-color: white;
color: #4a7f35;
border: 1px solid #4a7f35;
padding-left: 5px;
padding-right: 5px;
margin-right: 10px;
cursor: pointer;
font-size: 12px;
height: 18px;
}
.cCount {
width: 80px;
background-color: #4a7f35;
color: white;
text-align: center
}
.cWindow {
width: 100px;
height: 100px;
background-color: blue;
color: white;
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) {
body {
font-family: Arial;
}
.cBox {
height: 30px;
font-size: 20px;
line-height: 30px;
}
.cItem {
height: 30px;
font-size: 20px;
line-height: 30px;
}
}

<!doctype html>
<html ng-app="myApp" ng-controller="myController">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes">
<title>Langer Klick</title>
<link rel="stylesheet" href="./styles.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-touch.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
angular.module("myApp", ['ngTouch']).controller("myController", function($scope) {
$scope.dataList = [{
id: 1,
count: 0,
text: 'Leistung nach Bedarf',
items: [{
id: 1,
text: 'bei Bedarf'
}]
}, {
id: 2,
count: 0,
text: 'Leistung je 2 st√ľndlich',
items: [{
id: 1,
text: '11:00'
}, {
id: 2,
text: '15:00'
}]
}, {
id: 3,
count: 0,
text: 'Leistung auf einen fixen Zeitpunkt',
items: [{
id: 1,
text: '15:00'
}, {
id: 2,
text: '16:00'
}]
}];
$scope.isTablet = false;
$scope.hideBox = function(event) {
$(event.target).hide();
}

$scope.closeWindow = function() {
$scope.isTablet = false;
}

$scope.helloWorld = function() {
$scope.isTablet = true;
}
}).directive('onLongPress', function($timeout) {
return {
restrict: 'A',
link: function($scope, $elm, $attrs) {
$elm.bind('touchstart', function(evt) {
// Locally scoped variable that will keep track of the long press
$scope.longPress = true;

// We'll set a timeout for 600 ms for a long press
$timeout(function() {
if ($scope.longPress) {
// If the touchend event hasn't fired,
// apply the function given in on the element's on-long-press attribute
$scope.$apply(function() {
$scope.$eval($attrs.onLongPress)
});
}
}, 600);
});

$elm.bind('touchend', function(evt) {
// Prevent the onLongPress event from firing
$scope.longPress = false;
// If there is an on-touch-end function attached to this element, apply it
if ($attrs.onTouchEnd) {
$scope.$apply(function() {
$scope.$eval($attrs.onTouchEnd)
});
}
});
}
};
});
</script>
<script src="./removeItem.js"></script>
</head>

<body>
<div class="cContent">
<div class="cHeaders">
<div class="cHeader cThemeHeader">Katalog</div>
<div class="cHeader cItemHeader">Plan</div>
<div class="cHeader cCountHeader">Ist</div>
</div>

<div class="cData" ng-repeat="data in dataList">
<div class="cThemeRow">
<div class="cBox cTheme">{{data.text}}</div>
</div>

<div class="cBox cItemRow">
<div ng-repeat="item in data.items" class="cItem" ng-click="data.count = data.count + 1; hideBox($event);" on-long-press="helloWorld();">{{item.text}}</div>
</div>

<div class="cCountRow">
<div class="cBox cCount">{{data.count}}</div>
</div>
</div>
</div>

<div class="cWindow" ng-if="isTablet" ng-click="closeWindow();">HI, I'M A TEST WINDOW!</div>
</body>

</html>





I would like to remove the white box
.cItem
when I click on it (normal click with mouse or normal touch-click). This worsk fine. I also would like to open a window with a long pressed touch on the tablet but not remove the box. The long pressed touch works and it opens the window, but also removes the box (check this with a tablet). How can I just open the window without removing it (just function of a
on-long-press
not also
ng-click
)? I also would like to remove the default of a long press on tablet (marking text etc.) and just open the window. Any ideas? Thanks.

Answer

Try this, Its working I am giving 3 seconds value for the long pressing using , Mousedown and mouseup.

    angular.module("myApp", ['ngTouch']).controller("myController", function($scope,$timeout) {
      $scope.dataList = [{
        id: 1,
        count: 0,
        text: 'Leistung nach Bedarf',
        items: [{
          id: 1,
          text: 'bei Bedarf'
        }]
      }, {
        id: 2,
        count: 0,
        text: 'Leistung je 2 st√ľndlich',
        items: [{
          id: 1,
          text: '11:00'
        }, {
          id: 2,
          text: '15:00'
        }]
      }, {
        id: 3,
        count: 0,
        text: 'Leistung auf einen fixen Zeitpunkt',
        items: [{
          id: 1,
          text: '15:00'
        }, {
          id: 2,
          text: '16:00'
        }]
      }];
      $scope.isTablet = false;
      $scope.hideBox = function(event) {
        //$scope.longPress = false;
        //$(event.target).hide();
      }
      $scope.onMouseDown = function(event){
      $timeout($scope.callAtTimeout, 3000);
      
      }
      $scope.longPress = false;
      $scope.callAtTimeout = function(){
        $scope.longPress = true;
      }
      
      $scope.onMouseUp = function(event){
      console.log($scope.longPress);
      console.log("on mouse up");
        if($scope.longPress){
        $scope.longPress = false;
        $(event.target).hide();
        }
      }

      $scope.closeWindow = function() {
        $scope.isTablet = false;
      }

      $scope.helloWorld = function() {
        $scope.isTablet = true;
      }
    }).directive('onLongPress', function($timeout) {
      return {
        restrict: 'A',
        link: function($scope, $elm, $attrs) {
          $elm.bind('touchstart', function(evt) {
            // Locally scoped variable that will keep track of the long press
            $scope.longPress = true;

            // We'll set a timeout for 600 ms for a long press
            $timeout(function() {
              if ($scope.longPress) {
                // If the touchend event hasn't fired,
                // apply the function given in on the element's on-long-press attribute
                $scope.$apply(function() {
                  $scope.$eval($attrs.onLongPress)
                });
              }
            }, 600);
          });

          $elm.bind('touchend', function(evt) {
            // Prevent the onLongPress event from firing
            $scope.longPress = false;
            // If there is an on-touch-end function attached to this element, apply it
            if ($attrs.onTouchEnd) {
              $scope.$apply(function() {
                $scope.$eval($attrs.onTouchEnd)
              });
            }
          });
        }
      };
    });
body {
  font-family: Roboto;
  box-sizing: border-box
}
.cContent {
  display: flex;
  flex-direction: column;
}
.cHeaders {
  display: flex;
  flex-direction: row;
}
.cHeader {
  background-color: rgb(141, 141, 142);
  color: white;
  padding: 10px;
  margin-left: 10px;
  margin-bottom: 5px;
}
.cThemeHeader {
  width: 300px;
}
.cItemHeader {
  width: 300px;
}
.cCountHeader {
  width: 80px;
  text-align: center
}
.cData {
  display: flex;
}
.cRow {
  display: flex;
  flex-direction: column;
}
.cItemRow {
  display: flex;
  width: 300px;
}
.cBox {
  background-color: rgb(208, 229, 199);
  color: #4a7f35;
  padding: 10px;
  margin-left: 10px;
  margin-bottom: 5px;
}
.cTheme {
  width: 300px;
}
.cItem {
  background-color: white;
  color: #4a7f35;
  border: 1px solid #4a7f35;
  padding-left: 5px;
  padding-right: 5px;
  margin-right: 10px;
  cursor: pointer;
  font-size: 12px;
  height: 18px;
}
.cCount {
  width: 80px;
  background-color: #4a7f35;
  color: white;
  text-align: center
}
.cWindow {
  width: 100px;
  height: 100px;
  background-color: blue;
  color: white;
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) {
  body {
    font-family: Arial;
  }
  .cBox {
    height: 30px;
    font-size: 20px;
    line-height: 30px;
  }
  .cItem {
    height: 30px;
    font-size: 20px;
    line-height: 30px;
  }
}
<!doctype html>
<html ng-app="myApp" ng-controller="myController">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <meta name="apple-mobile-web-app-capable" content="yes">
  <title>Langer Klick</title>
  <link rel="stylesheet" href="./styles.css">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-touch.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script>

  </script>
  <script src="./removeItem.js"></script>
</head>

<body>
  <div class="cContent">
    <div class="cHeaders">
      <div class="cHeader cThemeHeader">Katalog</div>
      <div class="cHeader cItemHeader">Plan</div>
      <div class="cHeader cCountHeader">Ist</div>
    </div>

    <div class="cData" ng-repeat="data in dataList">
      <div class="cThemeRow">
        <div class="cBox cTheme">{{data.text}}</div>
      </div>

      <div class="cBox cItemRow">
        <div ng-repeat="item in data.items" class="cItem" ng-click="data.count = data.count + 1;" ng-mousedown="onMouseDown($event);" ng-mouseup="onMouseUp($event)">{{item.text}}</div>
      </div>

      <div class="cCountRow">
        <div class="cBox cCount">{{data.count}}</div>
      </div>
    </div>
  </div>

  <div class="cWindow" ng-if="isTablet" ng-click="closeWindow();">HI, I'M A TEST WINDOW!</div>
</body>

</html>

Comments