Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Encapsulation #4

Open
wnda opened this issue May 13, 2017 · 8 comments
Open

Encapsulation #4

wnda opened this issue May 13, 2017 · 8 comments
Assignees
@wnda @loisatwood @artmilt

Comments

@wnda
Copy link
Member

wnda commented May 13, 2017

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:

  • turn this into a Web Component
  • use an iframe
  • attach shadow DOM to a containing element.

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
Copy link
Member Author

wnda commented May 13, 2017

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
Copy link
Member Author

wnda commented May 13, 2017

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

  • normalise (exact pixel)
    • right
    • top
  • add
    • z-index
    • font-size (probably 15px/16px is best)

@loisatwood
Copy link
Member

ok got it

@loisatwood loisatwood mentioned this issue May 14, 2017
Merged
@wnda wnda closed this as completed May 14, 2017
@wnda
Copy link
Member Author

wnda commented May 14, 2017

It'll be good enough for now.

@wnda wnda reopened this May 16, 2017
@wnda
Copy link
Member Author

wnda commented May 16, 2017 •
edited
Loading

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
Copy link
Member

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

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

@wnda
Copy link
Member Author

wnda commented May 17, 2017 •
edited
Loading

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
Copy link
Member Author

wnda commented May 17, 2017

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.

@wnda wnda mentioned this issue May 17, 2017
Open
@wnda wnda assigned wnda and artmilt May 24, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@wnda wnda

@loisatwood loisatwood

@artmilt artmilt

Labels
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@wnda @loisatwood @artmilt