codesandbox-client/packages/app/src/watermark-button.js at fix-saving-code · hipertracker/codesandbox-client · 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
108
109
110
111
112
113
114
115
116
117
118
// Test it here: https://codesandbox.io/s/codesandbox-watermark-5onwl?file=/src/index.js

const buttonStyles = `
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 500;
  color: white;
  background-color: rgb(21, 21, 21);
  cursor: pointer;
  border: 1px solid rgb(52,52,52);
  border-radius: 4px;
  text-decoration: none;
  font-family: system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Ubuntu,Droid Sans,Helvetica Neue,sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: antialiased;
  z-index: 99999999999;
`;

const setButtonStyles = button => {
  button.setAttribute('style', buttonStyles);
};

const setIframeStyle = iframe => {
  iframe.setAttribute(
    'style',
    `
      position: fixed;
      margin: 0;
      padding: 0;
      bottom: 16px;
      right: 16px;
      border: none;
      width: 118px;
      height: 36px;
      z-index: 9999999999999;
    `
  );

  iframe.addEventListener('load', () => {
    iframe.contentDocument.body.setAttribute('style', `margin: 0;`);
  });
};

function isStandalone() {
  if (typeof window === 'undefined') {
    return true;
  }

  if (window.location && window.location.href.indexOf('?standalone') > -1) {
    return true;
  }

  return !window.opener && window.parent === window;
}

let interval;
const createIframe = () => {
  if (!isStandalone()) {
    return;
  }

  const iframe = document.createElement('iframe');

  const iframeId = `sb__open-sandbox${Math.floor(Math.random() * 100)}`;
  iframe.setAttribute('id', iframeId);

  clearInterval(interval);
  interval = setInterval(() => {
    // Check every second whether the button is still there
    if (!document.getElementById(iframeId)) {
      createIframe();
    }
  }, 1000);

  const link = document.createElement('a');
  setIframeStyle(iframe);

  iframe.onload = () => {
    iframe.contentDocument.body.appendChild(link);
    setButtonStyles(link);
    link.innerText = 'Open Sandbox';

    link.href =
      'https://codesandbox.io/s/' + document.location.host.split('.')[0];
    link.target = '_blank';
    link.rel = 'noopener noreferrer';

    /**
     * Prevent others from trying to remove this button. If it's removed we just
     * readd it!
     */
    const observer = new MutationObserver(() => {
      document.body.removeChild(iframe);
      observer.disconnect();
      createIframe();
    });

    observer.observe(iframe, {
      attributes: true,
      childList: true,
      subtree: true,
    });
  };

  document.body.appendChild(iframe);
};

try {
  setTimeout(() => {
    createIframe();
  }, 250);
} catch (e) {
  console.error(e);
  /* catch */
}