verbose/index.html at main · Common-Codes/verbose · 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
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="default.css">
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
</head>
<body>
  <div id="metaresult" style="border: 1px solid black;"></div>
 <script>
    const validIMG = (str) =>{
      var imgregex = /^https?:\/\/(?:[a-z0-9\-]+\.)+[a-z]{2,6}(?:\/[^\/#?]+)+\.(?:jpe?g|gif|png|bmp)$/gim;
      if(!imgregex.test(str)){
        return false; //false
      } else{
        return true; //true ^
      }
    }

  window.onload = function(){
    const fragment = new URLSearchParams(window.location.search.slice(1));
    const [source, size, height, width] = [fragment.get('url_src'), fragment.get('size'), fragment.get('height'), fragment.get('width')];
    if(!source) {
      document.title = 'Request Failed'
      document.body.innerHTML = `<error>Request Failed</error>`
    } else {
      if(!validIMG(source)){
        var txt = "";
        document.getElementById("metaresult").innerHTML = txt;
        $.ajax({
          url: `${source}`,
          cache: false,
          type: 'GET',
          crossDomain: true,
          error: function() {
            txt = `<error>Request to ${source} failed</error>`;
          },
          success: function(response) {
            response = $.parseHTML(response);
            $.each(response, function(i, el){
              if(el.nodeName.toString().toLowerCase() == 'meta' && $(el).attr("property") != null && typeof $(el).attr("property") != "undefined"){
                txt += `<p id="` + $(el).attr("property") +`">` + ($(el).attr("content")?$(el).attr("content"):($(el).attr("value")?$(el).attr("value"):"")) +"</p>";
              }
            });
          },
          complete: function() {
            document.getElementById("metaresult").innerHTML = txt;
            sam();
            imgin();
          }
        })
        //TO-DO: Make this prettier
        //delete og:locale property
        function sam(){
          if(!document.getElementById("og:locale")){
            return
          } else{
            var c = document.getElementById("og:locale")
            c.parentNode.removeChild(c);
          }
        }
        //convert og:image property to visible image
        function imgin(){
          if(!document.getElementById("og:image")){
            return
          } else{
            var a = document.getElementById("og:image")
            var b = document.createElement('img')
            b.src = a.innerHTML
            a.parentNode.replaceChild(b, a);
            b.style.width = '6%'
          }
        }
      } else {
        if(size != null){
          document.body.innerHTML = `<img src="${source}" style="height: ${size}%; width: ${size}%;">`
          document.title = `${source} ̣̣̣̣— Scaled (${size}%)`
        } else if(width, height  != null){
          document.body.innerHTML = `<img src="${source}" style="height: ${height}px; width: ${width}px;">`
          document.title = `${source} (${height} × ${width} pixels)`
        }else{
          document.body.innerHTML = `<img src="${source}">`
          document.title = `${source}`
        }
      }
    }
  }
 </script>
</body>
</html>