Created
April 24, 2016 08:49
-
-
Save telekosmos/8c8f980d505980c9e8720baab243502d to your computer and use it in GitHub Desktop.
ng-rangy
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
'use strict'; | |
import template from './highlightable.html!text'; | |
import controller from './highlightable.controller'; | |
import './highlightable.css!'; | |
// use: <div highlightable hightlight="<scope guard variable>">content</div> | |
let highlightableComponent = function() { | |
return { | |
template, | |
controller, | |
transclude: true, | |
replace: true, | |
restrict: 'AE', | |
scope: { | |
highlight: "=", | |
restoration: "&hlRestore", | |
hlRoot: "@", | |
hlId: "@", | |
hlClassname: "@" | |
}, | |
// controllerAs: 'HighlightableCtrl', | |
// bindToController: true, | |
link: function(scope, elem, attrs, ctrl) { | |
ctrl.loadRangyHighlight(); | |
// Needs to use this workaround in order to wait for the directive content is fully loaded | |
window.setTimeout(() => { | |
let restoreItems = scope.restoration(); | |
ctrl.restoreSelections(undefined, restoreItems); | |
}, 0); | |
scope.$watch( | |
() => { | |
// console.log(`scope.highlight: ${scope.highlight}`); | |
return scope.highlight; // from <div highlightable highlight='model' | |
}, | |
(value, oldVal) => { | |
if (!ctrl.firstFire) { | |
ctrl.toggleHighlight(); // in controller | |
} | |
else | |
ctrl.firstFire = !ctrl.firstFire; | |
} | |
); | |
} | |
}; | |
}; | |
export default highlightableComponent; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
'use strict'; | |
import rangy from 'rangy'; | |
import 'rangy/rangy-classapplier'; | |
import 'rangy/rangy-highlighter'; | |
import 'rangy/rangy-textrange'; | |
import 'rangy/rangy-serializer'; | |
class HighlightableController { | |
constructor($rootScope, $scope) { | |
this.rand = Math.random(); | |
this._$scope = $scope; | |
this._$rootScope = $rootScope; | |
this.name = 'highlightable'; | |
this._$scope.name = 'Highlightable'; | |
this.highlighter = null; | |
this.cssApplier = null; | |
this.highlightClassName = "highlight-text"; | |
this.firstFire = true; | |
this._$scope.loadRangyHighlight = this.loadRangyHighlight; | |
this._$scope.toggleHighlight = this.toggleHighlight; | |
// this._$scope.colored = false; | |
this._topElem = document.getElementById('block-container'); | |
} | |
/** | |
* Initialize rangy highlighter with the text range and the class to highlight | |
* @return | |
*/ | |
loadRangyHighlight() { | |
rangy.init(); | |
this.cssApplier = rangy.createClassApplier(this.highlightClassName, { | |
normalize: true | |
}); | |
this.highlighter = rangy.createHighlighter(document, "TextRange"); | |
this.highlighter.addClassApplier(this.cssApplier); | |
} | |
/** | |
* Highlight, dehighlight the selection. | |
* Broadcast the 'rangy.text.highlighted' event | |
*/ | |
toggleHighlight() { | |
let selText = rangy.getSelection(); | |
let checksum = true; // false, actually, calculates the checksum!!! | |
let serialized = rangy.serializeSelection(selText, checksum, this._topElem); | |
this._$rootScope.$broadcast('rangy.text.highlighted', serialized, this._$scope.hlId);// selText); | |
this.cssApplier.toggleSelection(); | |
selText.removeAllRanges(); // remove selection mark; keeps the highlight | |
} | |
restoreSelections(ev, sels) { | |
let deserializedSel, canBeDeserialized; | |
sels.forEach(sel => { | |
canBeDeserialized = rangy.canDeserializeSelection(sel.v, this._topElem); | |
deserializedSel = rangy.deserializeSelection(sel.v, this._topElem); | |
this.cssApplier.toggleSelection(); | |
deserializedSel.removeAllRanges(); | |
}); | |
} | |
} | |
HighlightableController.$inject = ['$rootScope', '$scope']; | |
export default HighlightableController; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
'use strict'; | |
import angular from 'angular'; | |
import 'angular-ui-router'; | |
import highlightableComponent from './highlightable.component'; | |
import HighlightableCtrl from './highlightable.controller'; | |
import {factory} from '../../common/helper'; | |
let highlightableModule = angular.module('highlightable', [ | |
]); | |
highlightableModule.controller('HighlightableCtrl', HighlightableCtrl); | |
highlightableModule.directive('highlightable', highlightableComponent); | |
export default highlightableModule; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div> | |
<div class="container" ng-transclude></div> | |
<div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment