clarkmalmgren / angular-onselect Goto Github PK

License: MIT License

JavaScript 88.72% HTML 11.28%

angular-onselect's Introduction

Angular On Select Directive

Directive that allows for click-and-drag or just a click for highlighting words within any container regardless of type. The on-select attribute value is evaluated whenever a word or a group of words have been highlighted. The selection object is passed in as selection in the evaluated component.

Additionally, if auto-highlight is also present, upon selection the selected text is automatically highlighted. This is * effectively the same as calling selection.highlight(..) with some basic defaults.

If snap-to-word is present, the selected text is expanded to include whole words (including punctuation). If snap-to-word is turned on, simply clicking on a word is the same as highlighting the whole word.

Example Usage

The below example shows how to use on-select to automatically highlight a word and then after 2000ms the highlight is removed. This is a running demo here.

angular.module('example', ['onSelect'])
  .controller('ExampleController', function() {
    var vm = this;
    vm.handler = handler;
    return this;

    function handler(selection) {
      setTimeout(function() {
        selection.removeHighlight();
      }, 2000);
    };
  });

<div ng-controller="ExampleController as vm">
  <div on-select="vm.handler(selection);" auto-highlight snap-to-word>
    Bacon ipsum dolor amet ut beef ribs culpa...
  </div>
</div>

Installation

$ npm install --save angular-onselect

   -- or --

$ bower install --save angular-onselect

Submitting Issues

Please file a github issue for any problems or feature requests.

Contributing

See Contributing

License

Licensed under MIT

angular-onselect's People

Contributors

Stargazers

Watchers

Forkers

deanmalmgren kaviarasankk justguerra paolocosta lemonl2

angular-onselect's Issues

Highlight across Complex DOM Structures

Can't span complex DOM structures as it currently exists. It doesn't even try, it just stops.

example not working after following contributing guidelines

is it possible that there's a problem in angular?

Improve Code Coverage

Get to your own self-prescribed 90% code coverage.

video / animated gif / working demo of effect

You have a great description in the README, but it'd be pretty awesome to see what this kickass package does!

Better Styling for Default Highlighting

Right now it simply does style="background-color: yellow;". That is lame. Make it look prettier.

Better Interface for Creating a Custom Highlighter

The block is created using the fundamental javascript function document.createElement(tagname).

So a custom highlighter is a authored weirdly:

function onSelect(selection) {
  selection.highlight('div', function(span) {
    span.className = 'well well-sm well-warning inline-block';
    span.setAttribute('ng-click', 'vm.handleReclick();');
  }
}

It just looks ugly. Instead, I'd like to see:

function onSelect(selection) {
  selection.highlight('<span class="well well-sm well-warning inline-block" ng-click="vm.handleReclick();"></span>');
}

I think that this could be accomplished by using $compile(), but I have not verified that yet.

n00b readable contributing guidelines

Starting from

fork and clone the repository
npm install or some such thing
start a web server?

I'm not exactly sure what's involved here, but I'm a complete n00b that will actively contribute to this project if I can just figure out how to get started :)

Minification issue

I have a minification issue. After minification, I get this error

Unknown provider: eProvider <- e <- onSelectDirective

The minified version looks like this:

function() {
    "use strict";
    angular.module("onSelect", [])
}(),
function() {
    function e(e) {
        return {
            restrict: "A",
            scope: !1,
            link: function(t, n, r) {
                var i = {
                    snapToWord: "snapToWord"in r,
                    highlight: "autoHighlight"in r
                };

Here's a possible solution:

http://stackoverflow.com/a/13459722/3419300

Unfortunately I don't have experience on building directives, so before putting time on it maybe somebody else is able to find an easy solution (if nobody is able, I'll try by myself of course)