literasee-viz/host-utils.js at master · Literasee/literasee-viz · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
document.domain = 'literasee.io';
setTimeout(createMaximizeButtons, 6000);

function createMaximizeButtons () {
  document.querySelectorAll('[data-pym-src]').forEach(d => {
    var i = d.querySelector('iframe');
    var doc = i.contentWindow.document;
    var id = parseQueryString(doc.location.search).childId;

    var b = document.createElement('button');
    b.setAttribute('id', 'maxBtn');
    b.innerText = 'maximize';
    b.onclick = function (e) {
      if (e.target.innerText === 'maximize') {
        max(id);
      } else {
        min(id);
      }
    }
    doc.querySelector('#uiContainer').appendChild(b);
  })
}

function parseQueryString (str) {
  str = str || window.location.search;
  if (str.substr(0, 1) === '?') str = str.substr(1);

  if (!str) return {};

  return str.split('&').reduce(function (prev, pair) {
    prev[pair.split('=')[0]] = pair.split('=')[1];
    return prev;
  }, {});
}

function max (id) {
  if (id.substr(0, 1) !== '#') id = '#' + id;

  var d = document.querySelector(id);
  d.style.setProperty('z-index', 3000);
  d.style.setProperty('position', 'fixed');
  d.style.setProperty('top', 0);
  d.style.setProperty('right', 0);
  d.style.setProperty('bottom', 0);
  d.style.setProperty('left', 0);
  d.style.setProperty('display', 'flex');
  d.style.setProperty('flex-direction', 'column');
  d.style.setProperty('justify-content', 'center');
  d.style.setProperty('margin', '0 2em');
  if (d.classList.contains('full-width')) {
    d.classList.remove('full-width');
    d.setAttribute('data-fw', true);
  }

  var bg = document.createElement('div');
  bg.style.setProperty('position', 'absolute');
  bg.style.setProperty('background', 'white');
  bg.style.setProperty('opacity', 0.96);
  bg.style.setProperty('margin-left', '-2em');
  bg.style.setProperty('width', '100vw');
  bg.style.setProperty('height', '100vw');
  bg.onclick = min.bind(null, id);

  var i = d.querySelector('iframe');
  i.style.setProperty('position', 'relative');
  i.style.setProperty('visibility', 'hidden');

  d.insertBefore(bg, i);

  i.contentWindow.document.onkeyup = function (e) {
    if (e.keyCode === 27) min(id);
  }
  i.contentWindow.document.querySelector('#maxBtn').innerText = 'minimize';
  setTimeout(function () {
    i.contentWindow.pymChild.sendHeight();
    i.style.removeProperty('visibility');
  }, 100);
}

function min (id) {
  if (id.substr(0, 1) !== '#') id = '#' + id;

  var d = document.querySelector(id);
  d.style.removeProperty('z-index');
  d.style.removeProperty('position');
  d.style.removeProperty('top');
  d.style.removeProperty('right');
  d.style.removeProperty('bottom');
  d.style.removeProperty('left');
  d.style.removeProperty('margin');
  if (d.getAttribute('data-fw')) {
    d.classList.add('full-width');
    d.removeAttribute('data-fw');
  }

  d.removeChild(d.querySelector('div'));

  var i = d.querySelector('iframe');
  i.style.removeProperty('position');
  i.contentWindow.document.onkeyup = null;
  i.contentWindow.document.querySelector('#maxBtn').innerText = 'maximize';
  i.style.setProperty('visibility', 'hidden');
  setTimeout(function () {
    i.contentWindow.pymChild.sendHeight();
    i.style.removeProperty('visibility');
  }, 100);
}