updated the toolbar ui

Author: 4nkitd

injection/dragable.js

@@ -8,7 +8,7 @@ function dragElement(elmnt) {
         document.getElementById("h4c3r_header").onmousedown = dragMouseDown;
     } else {
         // otherwise, move the DIV from anywhere inside the DIV:
-        // elmnt.onmousedown = dragMouseDown;
+        elmnt.onmousedown = dragMouseDown;
     }
 
     function dragMouseDown(e) {

injection/injection.js

@@ -15,9 +15,10 @@ var svg_5 = `<svg xmlns="http://www.w3.org/2000/svg" style="fill: red;" width="2
 var svg_6 = `
 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M11.885 14.988l3.104-3.098.011.11c0 1.654-1.346 3-3 3l-.115-.012zm8.048-8.032l-3.274 3.268c.212.554.341 1.149.341 1.776 0 2.757-2.243 5-5 5-.631 0-1.229-.13-1.785-.344l-2.377 2.372c1.276.588 2.671.972 4.177.972 7.733 0 11.985-8.449 11.985-8.449s-1.415-2.478-4.067-4.595zm1.431-3.536l-18.619 18.58-1.382-1.422 3.455-3.447c-3.022-2.45-4.818-5.58-4.818-5.58s4.446-7.551 12.015-7.551c1.825 0 3.456.426 4.886 1.075l3.081-3.075 1.382 1.42zm-13.751 10.922l1.519-1.515c-.077-.264-.132-.538-.132-.827 0-1.654 1.346-3 3-3 .291 0 .567.055.833.134l1.518-1.515c-.704-.382-1.496-.619-2.351-.619-2.757 0-5 2.243-5 5 0 .852.235 1.641.613 2.342z"/></svg>`;
 
+
 var toolbar_html = `
 
-  <div class="h4c3r_toolbar">
+  
     <div class="h4c3r_toolbar_main" id="toolbar_id_">
       <div class="h4c3r_toolbar_item h4c3r_fill">
         <span>
@@ -50,20 +51,52 @@ var toolbar_html = `
 
     </div>
   </div>
-  </div>
   
   `;
 
+var toolbar_hide = `
 
-(function () {
+    <div class="h4c3r_toolbar_main" id="toolbar_id_">
+      
+    
+      <div class="h4c3r_toolbar_item h4c3r_show">
+        <span class="" >
+            ${svg_6}
+        </span>
+      </div>
+
+      <div class="h4c3r_toolbar_item " id="h4c3r_header" >
+        <span class="h4c3r_drag" >
+            ${svg_3}
+        </span>
+      </div>
+
+
+    </div>
+  
+  `;
+
+
+function init() {
 
 
     var hide_toolbar = localStorage.getItem('h4ck3r.hide');
+    if (!hide_toolbar){
+        localStorage.setItem('h4ck3r.hide', true);
+    }
+
+    $('body').prepend(`<div class="h4c3r_toolbar"></div>`);
 
-    if (hide_toolbar != true || hide_toolbar != 1) {
-        $('body').prepend(toolbar_html);
+
+    if (hide_toolbar == true || hide_toolbar == 1) {
+        $('.h4c3r_toolbar').prepend(toolbar_html);
+    } else {
+        $('.h4c3r_toolbar').prepend(toolbar_hide);
     }
 
+    var elmnt = document.getElementById("toolbar_id_");
+    elmnt.style.top = localStorage.getItem('h4ck3r_position_top') ?? '10px';
+    elmnt.style.left = localStorage.getItem('h4ck3r_position_bottom') ?? '-120px';
 
     var reload_config = localStorage.getItem('h4ck3r.reload');
 
@@ -91,10 +124,17 @@ var toolbar_html = `
 
     }
 
+}
+
+
+(function () {
+
+    init();
+
 })()
 
 
-$('.h4c3r_fill').on('click',(e) => {
+$('.h4c3r_fill').on('click', (e) => {
     fill_email();
     fill_text();
     fill_tel();
@@ -106,14 +146,38 @@ $('.h4c3r_fill').on('click',(e) => {
 
 $('.h4c3r_reset').on('click', (e) => {
 
-     $("input").val('');
-     $("textarea").val('');
+    $("input").val('');
+    $("textarea").val('');
 
 })
 
 $('.h4c3r_hide').on('click', (e) => {
 
-    localStorage.setItem('h4ck3r.hide',1);
+    console.log(e);
+
+
+    localStorage.setItem('h4ck3r.hide', 1);
+
+    $('.h4c3r_toolbar').remove();
+    init();
+
+    localStorage.setItem('h4ck3r_position_top', '9px')
+    localStorage.setItem('h4ck3r_position_bottom', '-65px')
+
+    window.location.reload()
+
+})
+
+$('.h4c3r_show').on('click', (e) => {
+
+    console.log(e);
+
+    localStorage.setItem('h4ck3r.hide', 0);
+
+    $('.h4c3r_toolbar').remove();
+    init();
+    window.location.reload()
+
 
 })
 
@@ -122,16 +186,16 @@ $('#h4c3r_hot_reload').on('click', (e) => {
     var reload_config = localStorage.getItem('h4ck3r.reload');
     reload_config = JSON.parse(reload_config);
 
-    console.log('click', reload_config );
-    if (reload_config?.do == true){
+    console.log('click', reload_config);
+    if (reload_config?.do == true) {
         console.log('%c hot relaod disabled ', 'color: #fff; font-size: 40px; background-color: red;');
 
         $('.h4c3r_hot_reload').html(svg_4);
 
         config = { seconds: 5000, do: false }
 
         localStorage.setItem('h4ck3r.reload', JSON.stringify(config))
-        
+
     } else {
         console.log('%c hot relaod enabled ', 'color: #fff; font-size: 40px; background-color: red;');
 
@@ -148,9 +212,9 @@ $('#h4c3r_hot_reload').on('click', (e) => {
 });
 
 const fill_email = function () {
-   
+
     var sample_email = random_string() + '@yopmail.com';
-    
+
     $("input[type='text']").each((i) => {
 
         var elm = $("input[type='email']")[i];
@@ -164,30 +228,30 @@ const fill_email = function () {
 
 const fill_text = function () {
 
-     $("input[type='text']").each((i)=>{
-    
+    $("input[type='text']").each((i) => {
+
         var elm = $("input[type='text']")[i];
-        var str_len  = 10;
+        var str_len = 10;
 
-         var max_length = $(elm).attr('maxlength');
-         
-         var minlength = $(elm).attr('minlength');
+        var max_length = $(elm).attr('maxlength');
 
-         if (minlength){
-             str_len = minlength + 1;
-         }
+        var minlength = $(elm).attr('minlength');
 
-         if (max_length) {
-             str_len = max_length - 1;
-         }
+        if (minlength) {
+            str_len = minlength + 1;
+        }
+
+        if (max_length) {
+            str_len = max_length - 1;
+        }
+
+        var sample_string = random_string(str_len);
 
-         var sample_string = random_string(str_len);
-    
         $(elm).val(sample_string);
         $(elm).trigger('change');
-     
+
     })
-     
+
 }
 
 const fill_tel = function () {
@@ -265,17 +329,17 @@ const fill_text_area = function () {
 function fill_select() {
 
     $("select").each((i) => {
-    
+
         var elm = $("select")[i];
         var $options = $(elm).find('option');
         var random_val = ~~(Math.random() * $options.length);
         var option = $(elm).find('option')[random_val];
         $(elm).val($(option).val());
         $(elm).trigger('change');
-        
-    
+
+
     });
-    
+
 }
 
 function fill_checkbox() {
@@ -326,11 +390,11 @@ function random_number(length = 8) {
 
 function take_screenshot() {
 
-        $('.h4c3r_toolbar').hide();
+    $('.h4c3r_toolbar').hide();
 
-        html2canvas(document.body).then(function (canvas) {
-            document.body.appendChild(canvas);
-        })
+    html2canvas(document.body).then(function (canvas) {
+        document.body.appendChild(canvas);
+    })
         .then(() => {
             var canvas = document.querySelector('canvas');
             canvas.style.display = 'none';
@@ -341,6 +405,6 @@ function take_screenshot() {
             a.click();
         });
 
-        $('.h4c3r_toolbar').show();
+    $('.h4c3r_toolbar').show();
 
 }