I am creating an application using Ionic and Angular. I am trying to create a custom highlighting feature using Ionic’s touch events. Right now, I am able to split a string into an array of strings separated by white space, and display each word in a separate span element. What I want to do now is apply a “highlighted” class to the first span element the user touches, the last span element the user touches, and every span element in between.
I am planning to accomplish this by using a drag event, which fires whenever the user moves their finger around the screen. I want to save the ID of the first span touched, continuously update the last span touched, and apply a highlighting class to every span element between the two.
When I ran my code on Ionic Serve (aka web browser), it seems to work fine. Each drag event is registering, and the ID of the current span is saved to my variable “firstWordID”. Likewise, my variable “lastWordID” is saved to the current span element ID generated by each continuous drag event. For instance, when I try to highlight words one through four, this is what I get when I console.log “firstWordID” and “lastWordID”
In Ionic Serve (web browser):
The first word with ID 0 has been tagged controllers.js:104
The last word with ID 0 has been tagged controllers.js:104
The last word with ID 1 has been tagged controllers.js:104
The last word with ID 2 has been tagged controllers.js:104
The last word with ID 3 has been tagged controllers.js:104
The last word with ID 4 has been tagged controllers.js:104
But whenever I run it in iOS Simulator or in Ionic View on my phone, the drag events don’t seem to register. Nothing shows up in the log. I’ve tried this a few ways, with touchstart, touchmove, and touchend, and with drag and release, and sometimes the events do fire continuously. But even then, e.srcElement.id does not get the most recent span ID — both “firstWordID” and “lastWordID” are always stuck on the very first one.
I’m somewhat new at this, and been at it for hours. Any advice would be really appreciated.
My HTML:
<ion-content scroll="false">
<div detect-gestures gesture-type="drag">
<span ng-class="{highlighted: word.isHighlighted}" ng-attr-id="{{word.id}}" ng-repeat="word in words track by $index"> {{word.text}} </span>
</div>
</ion-content>
My CSS:
.highlighted {
background-color: yellow;
}
.normal {
color:#000000;
}
My Javascript:
angular.module('leder.controllers', [])
.directive('detectGestures', function($ionicGesture) {
return {
restrict : 'A',
link : function(scope, elem, attrs) {
$ionicGesture.on('drag', scope.onDrag, elem);
$ionicGesture.on('release', scope.onRelease, elem);
}
}
})
.controller('AppCtrl', function($scope, $ionicModal, $timeout, Notes, $stateParams) {
//set two variables for first and last word IDs
var firstWordID = null;
var lastWordID = null;
//function to set first and last word IDs
$scope.onDrag = function dragTest(e) {
e.preventDefault();
//get ID of current span
var htmlID = $scope.getHTMLObject(e);
//if firstWordID doesn't exist yet, save it to the current span
if (!firstWordID) {
firstWordID = htmlID;
console.log("The first word with ID " + firstWordID + " has been tagged");
}
//save and continuously update lastWordID with current span
lastWordID = htmlID;
console.log("The last word with ID " + lastWordID + " has been tagged");
//iterate through object array.
for (var i = 0; i < $scope.words.length; i++){
//if current element is greater than first word ID and less than last word ID, then change isHighlighted to true
if ($scope.words[i].id >= firstWordID && $scope.words[i].id <= lastWordID){
$scope.words[i].isHighlighted = true;
}
};
};
//function to get ID of current span
$scope.getHTMLObject = function htmlTest(e){
var htmlID = e.srcElement.id;
return htmlID;
}
})