responsive-bookmarklet/index.html at master · Victa/responsive-bookmarklet · 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
<html>
<head>
    <meta charset="UTF-8">
    <title>Responsive Design Bookmarklet</title>
    <meta author="Victor Coulon">
    <meta description="a powerful and easy to use responsive design test bookmarklet">
    <link rel="stylesheet" href="assets/css/web.css">
    <script type="text/javascript">
      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-22043471-5']);
      _gaq.push(['_trackPageview']);

      (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();
    </script>
</head>
<body>


    <div id="help">
        <header>
          <a href="#help">×</a>
          <h4>How it works</h4>
        </header>
        <article>
            <p>There are some options when you run the bookmarklet. Here is some explanations.</p>
            <ul>
                <li>
                    <img src="assets/img/web/keyboard.png" alt="">
                    <p>
                        Toggle a fake keyboard
                        <span>So, you can see how much space is visible when users are entering data in forms.</span>
                    </p>
                </li>
                <li>
                    <img src="assets/img/web/cssrefresh.png" alt="">
                    <p>
                        Toggle CSS Refresh
                        <span>As soon as you save a CSS-file, the changes are directly implemented, without having to refresh your browser. It only works in a server environment.<br>
                        Powered by <a href="http://cssrefresh.frebsite.nl/">CSS Refresh</a></span>
                        <br/>
                        <span>In local environments this button will reload just the iframe your test page is in, saving you from having to re-apply the bookmarklet each time - mapped to the F5 and R keys.</span>
                    </p>
                </li>
                <li>
                    <img src="assets/img/web/close.png" alt="">
                    <p>
                        Close the bookmarklet
                        <span>Close the bookmarklet and return to the current page</span>
                    </p>
                </li>
            </ul>
        </article>
    </div>

    <a href="#help" class="dim"></a>

    <header>
      <a href="#help">How it works <i>i</i></a>
    </header>

    <section>
      <article>
          <hgroup>
              <h1>Responsive Design Bookmarklet</h1>
              <h3>a handy tool for responsive design testing</h3>
          </hgroup>
          <a id="bookmarklet" href="javascript:void((function(){var a=document;a.write('&#60;!DOCTYPE html>&#60;html>&#60;head>&#60;meta charset=&#34;UTF-8&#34;>&#60;title>'+a.title+' - Responsive test &#60;/title>&#60;link rel=&#34;stylesheet&#34; href=&#34;//responsive.victorcoulon.fr/assets/css/app.css&#34;>&#60;script src=&#34;//responsive.victorcoulon.fr/assets/js/app.min.js&#34;>&#60;/script>&#60;/head>&#60;body>&#60;header>&#60;div class=&#34;close&#34;>&#60;a href=&#34;#&#34;>&times;&#60;/a>&#60;/div>&#60;div id=&#34;size&#34;>&#60;/div>&#60;div class=&#34;keyboard&#34;>&#60;a href=&#34;#&#34;>I&#60;/a>&#60;/div>&#60;div class=&#34;cssrefresh&#34;>&#60;a href=&#34;#&#34;>I&#60;/a>&#60;/div>&#60;div class=&#34;reloadiframe&#34;>&#60;a href=&#34;#&#34;>I&#60;/a>&#60;/div>&#60;div id=&#34;devices&#34;>&#60;a href=&#34;#&#34; class=&#34;tablet-portrait&#34;>&#60;span>Tablet Portrait&#60;/span>&#60;/a>&#60;a href=&#34;#&#34; class=&#34;tablet-landscape&#34;>&#60;span>Tablet Landscape&#60;/span>&#60;/a>&#60;a href=&#34;#&#34; class=&#34;smartphone-landscape&#34;>&#60;span>iPhone Landscape&#60;/span>&#60;/a>&#60;a href=&#34;#&#34; class=&#34;smartphone-portrait&#34;>&#60;span>iPhone Portrait&#60;/span>&#60;/a>&#60;a href=&#34;#&#34; class=&#34;auto active&#34;>&#60;span>Auto&#60;/span>&#60;/a>&#60;/div>&#60;/header>&#60;section>&#60;div id=&#34;wrapper&#34;>&#60;iframe src=&#34;'+a.URL+'&#34; onLoad=&#34;resbook.changeUrl(this.contentWindow.location,this.contentDocument.title);&#34;>&#60;/iframe>&#60;span class=&#34;keyboard-bg&#34;>&#60;/span>&#60;/div>&#60;/section>&#60;/body>&#60;/html>')})());">RWD Bookmarklet</a><br>
          <span>Drag the link above into your bookmarks bar</span>
      </article>
    </section>

    <footer>
       An after dinner project by <a href="http://twitter.com/_victa">Victor Coulon</a>
      <a href="https://twitter.com/share" class="twitter-share-button" data-via="_victa">Tweet</a>
      <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
    </footer>


    <script>
        document.addEventListener("DOMContentLoaded", function() {
            var helpBox = document.getElementById('help'),
                dim = document.querySelector('.dim');
            [].forEach.call(document.querySelectorAll('[href="#help"]'), function(el) {
              el.addEventListener("click", function(e) {
                e.preventDefault();
                helpBox.classList.toggle('active');
                dim.classList.toggle('active');
              });
            });
        });
    </script>
</body>
</html>