{"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://www.bairwell.com/#organization","name":"Bairwell Ltd","url":"https://www.bairwell.com/","sameAs":["https://www.facebook.com/bairwell/","https://www.linkedin.com/company/bairwell","https://twitter.com/bairwell"],"logo":{"@type":"ImageObject","@id":"https://www.bairwell.com/#logo","url":"https://www.bairwell.com/wp-content/uploads/2017/02/bairwell.png","width":400,"height":400,"caption":"Bairwell Ltd"},"image":{"@id":"https://www.bairwell.com/#logo"}},{"@type":"WebSite","@id":"https://www.bairwell.com/#website","url":"https://www.bairwell.com/","name":"Bairwell PHP and WordPress Development","publisher":{"@id":"https://www.bairwell.com/#organization"},"potentialAction":{"@type":"SearchAction","target":"https://www.bairwell.com/?s={search_term_string}","query-input":"required name=search_term_string"}},{"@type":"ImageObject","@id":"https://www.bairwell.com/project/inspector-gadget/#primaryimage","url":"https://www.bairwell.com/wp-content/uploads/2017/07/inspectorgadget2.png","width":2268,"height":1440},{"@type":"WebPage","@id":"https://www.bairwell.com/project/inspector-gadget/#webpage","url":"https://www.bairwell.com/project/inspector-gadget/","inLanguage":"en-GB","name":"Inspector Gadget | Bairwell PHP and WordPress Development","isPartOf":{"@id":"https://www.bairwell.com/#website"},"primaryImageOfPage":{"@id":"https://www.bairwell.com/project/inspector-gadget/#primaryimage"},"datePublished":"2017-06-28T11:35:57+00:00","dateModified":"2017-07-28T11:44:25+00:00"}]}

Inspector Gadget

Inspector Gadget allowed text, image and element highlighting of web pages.

An ECMAScript 6 (Javascript) based text, element and node highlighter – this base project allowed for certain criteria to be passed to the script and it would then highlight the relevant sections in supplied HTML pages. Multiple highlights were allowed per page (and item), tool tips were automatically added and users could click on the relevant highlighted sections to be returned to the reason of highlighting.

Example usage:
Highlight Text starting `this` exactly 31 characters long as a `Grammar` test with a tool tip of `Exactly 31 characters long`:

"test": "Grammar",
"status": "unconfirmed",
"title": "Check this grammar",
"tooltip": "Exactly 31 characters long",
"highlight": {
"regexp":"this.*",
"minLength":30,
"maxLength":32
}

All links going to example.com (http or https)

"highlight": {
"querySelector": "a[href=\"http://example.com/\"],a[href=\"https://example.com/\"]"
}

All links with the text “sixth”

"highlight": {
"querySelector": "a[href]",
"word":"Sixth"
}

Bad capitalization of Facebook:

"highlight":[
{
"word":["facebook","faceBook","FaceBook","Face-book","face-book","Face-book"],
"caseSensitive":"true"
},
{
"querySelector": "img[alt=\"facebook\"]"
},
{
"querySelector": "img[alt=\"face-book\"]"
},
{
"querySelector": "a[href*=\"face-book.com\"]"
}
]
},

Date

June 2017

Technologies

Javascript

Want us to build or design your site?