13 |
14 | ## Overview
15 | var generator = new SelectorGenerator();
16 | var element = document.querySelector("input"); //
17 | var selector = generator.getSelector(element); //=> #login
18 | var path = generator.getPath(element); //=> body > div > input
19 |
20 | ## Installation
21 |
22 | ### Node.js
23 |
24 | To install __SelectorGenerator__ module for Node.js, this command should be used:
25 |
26 | npm install selector-generator
27 |
28 | Or [yarn](https://yarnpkg.com/lang/en/):
29 |
30 | yarn add selector-generator
31 |
32 | ## Tests
33 |
34 | You can view the results of the SelectorGenerator test suite [in your browser!](https://rawgit.com/flamencist/SelectorGenerator/master/spec-runner.html)
35 |
36 | ### License
37 |
38 | This software is distributed under the terms of the MIT License (MIT).
39 |
40 | ### Authors
41 |
42 | Alexander Chermyanin / [LinkedIn](https://www.linkedin.com/in/alexander-chermyanin)
43 |
44 |
45 |
46 | Contributions and bugs reports are welcome.
47 |
--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
1 | /*global __dirname*/
2 | const gulp = require("gulp");
3 | const Server = require("karma").Server;
4 | const eslint = require("gulp-eslint");
5 | const concat = require("gulp-concat-util");
6 | const gulpSync = require("gulp-sync")(gulp);
7 | const del = require("del");
8 | const os = require("os");
9 | const pkg = require("./package.json");
10 | const src = [
11 | "./src/shim.js",
12 | "./src/**/!(shim)*.js"
13 | ];
14 |
15 | gulp.task("test", function (done) {
16 | var server = new Server({
17 | configFile: __dirname + "/karma.conf.js",
18 | singleRun: true
19 | }, function () {
20 | done();
21 | });
22 | return server.start();
23 | });
24 | gulp.task("clean", function () {
25 | return del([pkg.name + ".js"]);
26 | });
27 | gulp.task("concat", function () {
28 | return gulp.src(src)
29 | .pipe(concat(pkg.name + ".js", {
30 | sep: os.EOL + os.EOL,
31 | process: function (src, filepath) {//eslint-disable-line no-unused-vars
32 | var lines = src.split(os.EOL);
33 | for (var i = 0; i < lines.length; i++) {
34 | lines[i] = " " + lines[i];
35 | }
36 | return lines.join(os.EOL);
37 | }
38 | }))
39 | .pipe(concat.header("/* selector-generator (ver. " + pkg.version + "). https://github.com/flamencist/SelectorGenerator */" + os.EOL + os.EOL +
40 | "(function () {" + os.EOL + os.EOL +
41 | " \"use strict\";" + os.EOL + os.EOL +
42 | " var exports = {};" + os.EOL + os.EOL +
43 | " if (!(\"version\" in exports)) {" + os.EOL +
44 | " exports.version = \"" + pkg.version + "\";" + os.EOL +
45 | " }" + os.EOL + os.EOL +
46 | " (function(exports){ " +
47 | os.EOL +
48 | " function SelectorGenerator(options){" +
49 | os.EOL + os.EOL))
50 | .pipe(concat.footer(os.EOL + os.EOL +
51 | " return new SelectorGenerator(options);" +
52 | os.EOL +
53 | " }" +
54 | os.EOL +
55 | " exports.SelectorGenerator = SelectorGenerator;" +
56 | os.EOL +
57 | " } (exports));" +
58 | os.EOL + os.EOL +
59 | "for(var key in exports){ if(exports.hasOwnProperty(key)){ exports.SelectorGenerator[key] = exports[key]; }}" + os.EOL +
60 | " window.SelectorGenerator = exports.SelectorGenerator;" +
61 | os.EOL + os.EOL +
62 | "} ());" +
63 | os.EOL + os.EOL))
64 | .pipe(gulp.dest("./"));
65 | });
66 |
67 | gulp.task("eslint", function () {
68 | return gulp.src(["./src/**/*.js", "./tests/*.spec.js", "./selector-generator.js"])
69 | .pipe(eslint())
70 | .pipe(eslint.format())
71 | .pipe(eslint.failAfterError());
72 | });
73 | gulp.task("default", function(){
74 | return gulpSync.sync(["clean", "concat", "test"])
75 | });
76 |
77 | gulp.task("watch-test", function () {
78 | return gulp.watch([
79 | "./src/**/*.js",
80 | "./tests/*.spec.js",
81 | "./tests/fakeElementSelectors.js",
82 | "package.json"], gulpSync.sync(["clean", "concat", "test"]));
83 | });
--------------------------------------------------------------------------------
/karma.conf.js:
--------------------------------------------------------------------------------
1 | module.exports = function(config) {
2 | config.set({
3 | browsers: ["PhantomJS"],
4 | frameworks: ["jasmine"],
5 | files: [
6 | "selector-generator.js",
7 | "tests/domParser.js",
8 | "tests/fakeElementSelectors.js",
9 | "tests/**/*.spec.js"
10 | ]
11 | });
12 | };
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "selector-generator",
3 | "version": "0.3.1",
4 | "description": "JavaScript object that creates a unique CSS selector for a given DOM element. It has no external dependencies.",
5 | "main": "selector-generator.js",
6 | "scripts": {
7 | "test": "gulp test"
8 | },
9 | "repository": {
10 | "type": "git",
11 | "url": "git+https://github.com/flamencist/SelectorGenerator.git"
12 | },
13 | "keywords": [
14 | "css",
15 | "selector"
16 | ],
17 | "author": "Alexander Chermyanin