search

seoscribe / jsearch

jsearch: a drop-in library for client-side search if you don't have a back-end.
BSD 3-Clause Clear License
2 stars 1 forks source link

Encapsulation #4

Open wnda opened 7 years ago

wnda commented 7 years ago

Now that we have the library working generically, we need to make sure that a user's stylesheets don't interfere with how the search UI is displayed.

z-index is one issue, easy to fix, but of special concern is the way in which the input field can be totally screwed up.

While we could use !important along with every CSS property known to man set to norms, it would make better sense to either:

I'd prefer the first option, but then the user needs to include a polyfill for WebComponents for Safari/IE, plus there are probably going to be complications accessing the top document.

I'm open to suggestions.

wnda commented 7 years ago

We are using IDs, that gives us some extreme specificity in the injected CSS. The primary problem is that the right/top offsets are off. Probably a font-size issue...

wnda commented 7 years ago

Should switch to bottom offset, most people have a nav menu in the top right. So that's:

loisatwood commented 7 years ago

ok got it

wnda commented 7 years ago

It'll be good enough for now.

wnda commented 7 years ago

I've seen live chat implemented quite nicely via iframe by Intercom and I think that's the route we should go down, especially now that the search widget works more flexibly now.

The library doesn't need to change much, we just need to create an iframe and inject our markup into the iframe rather than the page, like so. This isn't exactly how Intercom do it, but it's heavily inspired by their method:

// for demonstrative purposes:
function startJSearch (config) {
  var _iwn;
  var _idoc;
  var _ijs;

  document.body
    .insertAdjacentHTML('beforeend', '<iframe id="jsearchFrame"></iframe>');

  _iwn  = window.frames['jsearchFrame'].contentWindow;
  _idoc = _iwn.document;

  _idoc.open('text/html', 'replace');
  _idoc.write('<!doctype html><head></head><body><div></div></body></html>');
  _idoc.close();

  _ijs = _idoc.createElement('script');
  _ijs.async = !0;
  _ijs.onload = function () { _iwn.jsearch.init(config) };
  _ijs.src = 'https://rawgit.com/seoscribe/jsearch/master/jsearch.js';
  _idoc.head.appendChild(_ijs);
}

startJSearch({'append_to': 'div'});

That successfully creates an iframe and injects our jsearch script within, and executes it with the config object specifying to attach jsearch elements to the div element.

That enables us to keep our public method. Unfortunately it does mean we need to include the jsearch lib as an external script but it could be worse.

Though we could do it with a blob like you can with a web worker...

loisatwood commented 7 years ago

it's a real pity that shadow DOM isn't better supported.

so you've done this now? judging from 'jsearch.iframe.js'

wnda commented 7 years ago

No. I mean that code works but I still need to think about styling the iframe. I'm probably going to sleep soon but you're welcome to have a look at it if you're having a late night. Otherwise we'll just crack it tomorrow.

wnda commented 7 years ago

Styling is okay, but we need a means to adjust the sizing of the iframe when the search bar opens and when the results are displayed.

It's not difficult, we just need to decide on the proper event to trigger the resize. I'm thinking:

submit - resizes iframe to accommodate results display click - resizes iframe to accommodate (or not) search bar.