:fishing_pole_and_fish: A library that allows you to access the text selected by the user

Overview

selecting

A library that allows you to access the text selected by the user.

Instalation

To install Selecting, execute:

  npm install selecting

Or Bower too:

  bower install selecting

Or simply pick up the file from src directory.

Supported Browsers

  • Google Chrome
  • Firefox
  • Internet Explorer 9.0+
  • Safari
  • Opera
  • iOS
  • Android

How to use?

Selecting doesn't depend on jQuery, Zepto or any other library to work. You need just to include it at the end of your HTML code:

  <script src="selecting.js"></script>

Then you can call window.selecting function passing two parameters: an DOM element (jQuery object or NodeList) to listen to and a callback function that receive a Selection object by parameter. For example:

  window.selecting($('.container'), function(selector) {
    // Properties
    selector.text; // The selected text
    selector.wordCount; // The number of words selected
  });

Example

See a simple example.

Contributors

@evandrolg @felquis @gibatronic
@evandrolg @felquis @gibatronic
Comments
  • Add wordCount property closes #16

    Add wordCount property closes #16

    It's a basic functionality, and should be reviewed, there's a kind of bug already, if the user select something like ', a', wordCount will return two words selected, but, actually there's just one word in this string. We should remove punctuation and other characters that ins't a word.

    But, it's working.

    opened by felquis 3
  • Finger friendly closes #2 #3

    Finger friendly closes #2 #3

    The commit you need to check is this one https://github.com/felquis/selecting/commit/c8e673454834b8818e2fc91d653f39580f4075b0 the other is just small improvements

    Well, I made a research about selecting text on touchable devices, since this plugin wasn't working properly on touches devices, so I tested in Android and iPad, and the selection spend about 700ms to select a texting, so the user must hold the finger on the screen for about 700ms to select a text.

    I made this script to start checking for text selection when the use put the finger on the screen (touchstart), we start a setInterval, and is some text is selected, we stop the setInterval because the user successfully selected text. But, once the user select the first work with a tab-hold event. We aren't able to detect for changes in the current text selection, so for this reason I need to setup another setInterval, the will look for changes in the current selected text, and every time we notice some change in the selected text we fired the callback.

    Still some work to do, It is hard to example all the problems, but I think this is a beginning, it merged, I'll create some issues

    Tested on Android (Chrome 39) iPad,iOS8.1 (Chrome/Safari)

    opened by felquis 3
  • Where is uglify dependencie?

    Where is uglify dependencie?

    When I run 'make minify' I get an error because there's no uglify in the dependencies https://github.com/EvandroLG/selecting/blob/5492f295791abac490a121899475c0c9751ef938/package.json#L7-L10

    opened by felquis 3
  • Remove librarie verification

    Remove librarie verification

    I think these tests for available libraries (jQuery, Zepto) should be removed, I don't think this is really useful and it's increasing the code complexity.

    If you wish, I can make a pull request with this.

    opened by felquis 1
  • Didn't work properly on Android devices

    Didn't work properly on Android devices

    Testing on Android 4.4.4, on Chrome for Mobile and Firefox, after selecting some text, you need to tab the selected text and then it appear in the #selected-text element.

    opened by felquis 1
  • Return how much words was selected

    Return how much words was selected

    selecting(document, function(selector, otherInfos) {
      console.log(otherInfos.wordCount);
    });
    

    I think this is useful, to avoid the programar to write more code in the callback.

    It'd be something like

    selecting(document, function(selector) {
      console.log(selector.split(' ').length);
    });
    

    The first proposed solution, is so much elegant.

    @EvandroLG what you think about a second parameter? Or, just transform the first parameter to a object, with a lot of helpful information.

    selecting(document, function(selected) {
      console.log(selected.text);
      console.log(selected.wordCount);
    });
    

    Etc... would be awesome!

    opened by felquis 0
  • Add lintspaces to validate .editorconfig

    Add lintspaces to validate .editorconfig

    Some stuffs like newline at the end of the file, trailing spaces, aren't being completely tested, would be great if listspaces was added.

    https://www.npmjs.com/package/lintspaces

    I don't know if this task can be used like jshint with a CLI, but this is a great tool to validate .editorconfig configurations.

    opened by felquis 0
  • Don't work on Xbox One

    Don't work on Xbox One

    This is kind of weird, but well, it's a problem.

    Texted in Xbox One (equivalent to explorer 10), this device has support to getSelection (ref to html5test), but the demo don't work.

    opened by felquis 2
  • Problem with PhantomJS and touch events

    Problem with PhantomJS and touch events

    The problem is that 'ontouchevent' in window return true in PhantomJS and there's no way to disable touch events in PhantomJS on runtime. For this reason, the tests with mouseup are failing.

    And because this, the tests for libraries are also failing because when ontouchevent is present we don't actually use libraries to delegate the events but addEventListener.

    We could use !global.window.mochaPhantomJS in this line:

    if ('ontouchstart' in global && !global.window.mochaPhantomJS) { ... }
    

    But I don't think this is a good solution.

    opened by felquis 1
  • Return useful methods for the selected area

    Return useful methods for the selected area

    What about provide an API wrapper for the selection object? For example, provide the size of the selected area, and other things that is possible to do using this API getSelection, Selection and Range

    Also, this fokus plugin use this getSelection API, we can learn something from his code and learn more about this getSelection object, and turn selecting a lib to help people work with text selection in some way.

    var selection = selecting('.selector-to-watch'); // otherwise watch in all document/window
    
    // Fired when the user start selecting something
    selection.on('selectionStart', function (text, selectionObject) {
    
    });
    
    // Fired when the selected text is changed
    selection.on('selectionChange', function (newText, oldText, selectionObject) {
    
    });
    
    // Fired when the user remove the selection of text, return the selected text before the user remove the text selection
    selection.on('selectionEnd', function (oldText, selectionObject) {
    
    });
    
    /*
      We can do something to the developer just play around with getSelection object if available
    */ 
    selection.hasSelection(); // return true or false
    
    selection.runif(function (api) {
      // `api` is the getSelection objet + some useful shortcut functions included by selecting
      // This function is only executed if there's some active text selection 
    });
    

    getSelection is supported by most of browsers, including smartTVs and consoles, just IE7,8, for these we can turn selection in a kind of basic polyfill to normalize something (but I don't think that is useful spend much time wondering about old browsers)

    opened by felquis 1
Owner
Evandro Leopoldino Gonçalves
senior learner 🤓
Evandro Leopoldino Gonçalves
Javascript URL mutation library

URI.js About Understanding URIs Documentation jQuery URI Plugin Author Changelog IMPORTANT: You may not need URI.js anymore! Modern browsers provide t

Medialize 6.2k Dec 30, 2022
Lo-fi, powerful, community-driven string manipulation library.

Lo-fi, powerful, community-driven string manipulation library. This is the main monorepo codebase of Plexis.js a production-ready string manipulation

Plexis 145 Sep 24, 2022
⚡️The Fullstack React Framework — built on Next.js

The Fullstack React Framework "Zero-API" Data Layer — Built on Next.js — Inspired by Ruby on Rails Read the Documentation “Zero-API” data layer lets y

⚡️Blitz 12.5k Jan 4, 2023
The Bookstore is a website that allows the user to :display a list of books , Add a book and remove a selected book.

Book Store The Bookstore is a website that allows the user to : -Display a list of books. -Add a book. -Remove a selected book. Built With ?? Basic CS

Nedjwa Bouraiou 4 Sep 6, 2022
Hashmat Noorani 4 Mar 21, 2023
The Bookstore is a website similar to the "Awesome Books" website built in the previous module. You will create an MVP version of it that allows you to: Display a list of books. Add a book. Remove a selected book.

Bookstore The Bookstore is a website similar to the "Awesome Books" website built in the previous module. You will create an MVP version of it that al

Anuar Shaidenov 6 Jun 12, 2022
A bookstore app that allows a user add a book, displays added book with reviews and rating for each book and allows a user delete a book.

BOOKSTORE A bookstore app that allows a user add a book, displays added book with reviews and rating for each book and allows a user delete a book. Bu

Promise Okechukwu 7 Nov 1, 2022
a cobbled together alternative UI to launchdarkly, allowing read/write access via LD API access token

discount-launchdarkly a cobbled together alternative UI to launchdarkly, allowing read/write access via LD API access token setup make sure you have a

null 9 Oct 19, 2022
The Bookstore is a website similar to the "Awesome Books" website. Here we will create an MVP version of it that allows you to: Display a list of books, Add a book and Remove a selected book.

Book Store This is Book Store project. Built With HTML CSS JavaScript React Screenshot Live Demo Go Live ?? Getting Started Open dev branch Open VSCod

Tadesse Alemayehu 5 May 3, 2022
Cindy Dorantes 12 Oct 18, 2022
Reveal.js plugin for marking selected lines or regions of text

Reveal.js / Mark.js plugin Based on the highlight plugin from Reveal.js, which supports animated marking (emphasizing) of specific code regions by lin

stlab 3 Aug 9, 2022
Wrap selected text in custom tags with shortcuts.

Obsidian Wrap With Shortcuts Wrap the selected text in customized tags with shortcuts. Underline is provided with Ctrl-u(Cmd-u) as default wrappers. P

Manic Chuang 24 Dec 28, 2022
Create your own wrappings with optional key bindings for selected text, a set of useful defaults is also provided.

Create your own wrappings with optional key bindings for selected text, a set of useful defaults is also provided.

Seth Yuan 66 Jan 1, 2023
The Bookstore is a website where the user can display a list of books, add a book by providing a title, an author, and selecting from the categories, and remove a selected book.

Bookstore The Book Store is a website where the user can display a list of books, add a book and remove a selected book. Microverse's Bookstore API wa

Virag Kormoczy 9 Jan 1, 2023
Elizabeth Oyinlade Ojesanmi 10 Sep 14, 2022
An application where a user can search a location by name and specify a genre of music. Based on the parameters entered, a list of radio stations generate based on genre selected in that area.

Signs of the Times Description An application that allows for the user to enter a date and see the horoscope for that day, and famous people born on t

null 3 Nov 3, 2022
CASL is an isomorphic authorization JavaScript library which restricts what resources a given user is allowed to access

CASL (pronounced /ˈkæsəl/, like castle) is an isomorphic authorization JavaScript library which restricts what resources a given user is allowed to ac

Sergii Stotskyi 4.5k Dec 31, 2022