FS Hacker

fs-hacker.markdown

FS Hacker

A Pen by Bike Monkey on CodePen.

License.

inclusion.html

<!-- THIS IS WHAT YOUR HTML PASTE SHOULD LOOK LIKE, and is what's embedded where the form goes on your site. -->
<link rel='stylesheet' href='https://cdn.jsdelivr.net/sweetalert2/6.2.0/sweetalert2.min.css'>
<script src='https://bikemonkey.formstack.com/forms/js.php/thehammer'></script>
<script>
var FS = {
 "magicStrings": {
  "H@M": "100%",
  "elF": "15%"
 }
}
</script>
<script src='https://cdn.jsdelivr.net/es6.shim/0.35.2/es6-shim.min.js'></script>
<script src='https://cdn.jsdelivr.net/es6-promise/3.1.2/es6-promise.min.js'></script>
<script src='https://cdn.jsdelivr.net/sweetalert2/6.2.0/sweetalert2.min.js'></script>
<script src='https://cdn.jsdelivr.net/jquery/3.1.1/jquery.min.js'></script>
<script src='https://app.rhesus.io/cdn/monkeyconsole.js'></script>
<script src='https://app.rhesus.io/cdn/formstack/formstack2017.js'></script>

index.html

<div id="formDashboard">
<h1 class="headerbar">FS Hacker</h1>
  
  <div id="formstackform">
    <h2>FORM EMBED</h2>
    <p>Edit the SCRIPT tag below this paragraph to embed the form you want to work on. The rest is automatic using the selection method described in the window to the right.</p>
    <script id="FSEMBED" type="text/javascript" src="https://bikemonkey.formstack.com/forms/js.php/thehammer"></script>
  </div>
  
  <div id="builderBoard">
    <div id="FSJSON_container">
    <h4>EMBED CODE:</h4>
    <p>This is your custom embed code to place where you want your form. As you link fields, this will update.</p>
    <pre><code id="FSJSON" class="html" contenteditable="true"></code></pre>
    </div>

    <h4>Last ID Selected</h4>
    <p>Left-click the box below you want to capture ID(s) for, then right-click the physical field of the form whose ID you want to capture.</p>
    <pre><code id="lastID"></code></pre>
  
    <div class="taggle_container">
    <h4>FS.$entries<small class="blue">fields</small></h4>
    <div id="fs_entries" jsonNode="$entries" class="FS textarea input"></div>
    </div>

    <div class="taggle_container">
    <h4>FS.$dateFields<small class="blue">fields</small><small class="red">validation</small></h4>
    <div id="fs_datefields" jsonNode="$dateFields" class="FS textarea input"></div>
    </div>

    <div class="taggle_container">
    <h4>FS.$merch<small class="blue">fields</small></h4>
    <div id="fs_merch" jsonNode="$merch" class="FS textarea input"></div>
    </div>

    <div class="taggle_container">
    <h4>FS.$dcField<small class="blue">field</small></h4>
    <div id="fs_dcfield" jsonNode="$dcField" class="FS textarea input"></div>
    </div>

    <div class="taggle_container">
    <h4>FS.$totalfield<small class="red">hidden</small><small class="blue">field</small></h4>
    <div id="fs_totalfield" jsonNode="$totalField" class="FS textarea input"></div>
    </div>

    <div class="taggle_container">
    <h4>FS.$finalNotes<small class="red">hidden</small><small class="blue">field</small></h4>
    <div id="fs_finalnotes" jsonNode="$finalNotes" class="FS textarea input"></div>
    </div>
  </div>
</div>

script.js

// BOILERPLATE FS VARIABLE
var FS_STARTER = {
  magicStrings : {
    "H@M" : "100%",
    "elF" : "15%"
  }
};
var allowedFields = ["magicStrings","$entries","$dateFields","$merch","$dcField","$totalField",,"$finalNotes"];
var activeTaggle; //keep track of the active taggle (the one that's focused)
var phText = "Click to focus";
// Create taggles to capture FS Field IDs
var taggles = {
  fs_entries: {taggle: new Taggle('fs_entries',{placeholder:phText,preserveCase:true}), classLimiter: "fsField"}
  ,fs_merch: {taggle: new Taggle('fs_merch',{placeholder:phText,preserveCase:true}), classLimiter: "fsField"}
  ,fs_datefields: {taggle: new Taggle('fs_datefields',{placeholder:phText,preserveCase:true}), classLimiter: "fsField"}
  ,fs_dcfield: {taggle: new Taggle('fs_dcfield',{placeholder:phText,preserveCase:true}), classLimiter: "fsField", isSingleField: true}
  ,fs_totalfield: {taggle: new Taggle('fs_totalfield',{placeholder:phText,preserveCase:true}), classLimiter: "fsField", isSingleField: true}
  ,fs_finalnotes: {taggle: new Taggle('fs_finalnotes',{placeholder:phText,preserveCase:true}), classLimiter: "fsField", isSingleField: true}
}

$(function(){

  //UNHIDE HIDDEN ROWS SO WE CAN WORK WITH THEM
  $(".fsRow.fsHidden").show();
  $(".fsRow.fsHidden *").show();
  
  //PROTIP
  $.protip();
  $(".fsRow,.fsField").each(function(){$(this).attr("data-pt-title","<big>&#35</big>"+$(this).attr("id"));});
  $(".fsRow").protipSet({ trigger: 'hover', position: 'top' });
  $(".fsField").protipSet({ trigger: 'hover', scheme:'blue', position: 'bottom' });


  //ANIMATE.CSS
  $.fn.extend({
      animateCss: function (animationName) {
          var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
          this.addClass('animated ' + animationName).one(animationEnd, function() {
              $(this).removeClass('animated ' + animationName);
          });
      }
  });

  // Put focus on an active taggle box visually and programatically
  $(".taggle_input").on("focus",function(){
    var $taggleBorder = $(this).closest(".FS");
    $(".FS").removeClass("focusedtaggle");
    $taggleBorder.addClass("focusedtaggle");
    activeTaggle = $taggleBorder.attr("id");
  });

  // RIGHT-CLICK a form field to send its ID value to the active taggle
  // and to the FS object
  $("#formstackform input,#formstackform textarea,#formstackform select,#formstackform .fsRow")
  .contextmenu(function(e){
    var $FSfieldClicked = $(this);
    var FSfieldID = $FSfieldClicked.attr("id");
    var $activeTaggle = $("#"+activeTaggle);
    var jsonNode = $activeTaggle.attr("jsonNode");
    var theActiveTaggle, isSingleField, classLimiter;

    if(taggles[activeTaggle]){
      theActiveTaggle = taggles[activeTaggle].taggle;
      isSingleField = taggles[activeTaggle].isSingleField || false;
      classLimiter = taggles[activeTaggle].classLimiter;
    }

    $("#lastID").html("#"+FSfieldID).animateCss("bounceIn");

    if(classLimiter) {
      if( !$(this).hasClass(classLimiter) ){
        return; //magically lets the context move up to the containing row! Rad.
      }
    }
    
    if(theActiveTaggle){
      if(isSingleField){
        // Multiple field selections (array)
        theActiveTaggle.removeAll().add(FSfieldID);
        FS_STARTER[jsonNode] = theActiveTaggle.getTagValues()[0];
      }else{
        // Single value field (string)
        theActiveTaggle.add(FSfieldID);
        FS_STARTER[jsonNode] = theActiveTaggle.getTagValues();
      }

      $activeTaggle.animateCss("bounceIn");

     writeEmbedCode();
    }
    e.preventDefault();
    e.stopPropagation();
  });

  //SYNTX HIGHLIGHTING
  function writeEmbedCode(){
    var EMBEDSRC = $("#FSEMBED").attr("src");
    $("#FSJSON").html(
      "&lt;script src='https://cdn.jsdelivr.net/jquery/3.1.1/jquery.min.js'&gt;&lt;/script&gt;\n" +
      "&lt;script src='https://app.rhesus.io/cdn/formstack/formstack2017.js'&gt;&lt;/script&gt;\n" +
      "&lt;script&gt;\nvar FS = " + JSON.stringify(FS_STARTER,null," ") + "\n&lt;/script&gt;\n" +
      "&lt;script src='"+EMBEDSRC+"'&gt;&lt;/script&gt;"
    );
    hljs.highlightBlock($("#FSJSON")[0]);
  }
  writeEmbedCode();
});

scripts

<script src="https://cdn.jsdelivr.net/highlight.js/9.9.0/highlight.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/taggle/1.11.1/taggle.min.js"></script>
<script src="https://min.gitcdn.xyz/repo/DoclerLabs/Protip/master/protip.min.js"></script>

style.css

@import url('https://fonts.googleapis.com/css?family=Inconsolata');

*{box-sizing:border-box;}

html,body {font-family:'Inconsolata';padding:0;margin:0;background:#abc;overflow:hidden;}

h1,h2,h3,h4,h5,h6{margin:20px 0 5px 0;}

.headerbar {background:#234;color:#9ab;padding:10px 20px;margin:0;}

.fsRow {border:1px dashed #faa;}
.fsRow:hover {background:#fee;}
#formstackform input:hover, #formstackform select:hover, #formstackform textarea:hover{background:#9fddd3 !important;}

small {margin-left:5px;color:#222;font-weight:normal;border-radius:2px;padding:2px 4px;}
small.red {background:#ca6;}
small.green {background:#6ca;}
small.blue {background:#6ac;}

#formDashboard { display:flex; margin:0; border:3px solid #eee;height:100vh;}

#formstackform { width:70%; border-right:3px solid #eee; padding:20px;height:auto;overflow:scroll;}

#builderBoard { color:#eee; background:#222; width:30%; padding:25px;height:auto;overflow:scroll;}

#lastID {
  background:#444;
  width:auto;
  height:25px;
  color:#aaa;
  padding:5px;
  border:2px solid #666;
  font-size:14px;
}



/* TAGGLE MIN CSS */
.textarea {
  width: auto;
  height: 3em;
  background:#444;
  border:2px solid #666;
  padding:10px;
  overflow:scroll;
}

.taggle_list {
  float: left;
  padding: 0;
  margin: 0;
  width: 100%;
}

.taggle_input {
  border: none;
  outline: none;
  font-size: 16px;
  font-weight: 300;
}

.taggle_list li {
  float: left;
  display: inline-block;
  white-space: nowrap;
  font-weight: 500;
  margin-bottom: 5px;
}

.taggle_list .taggle {
  margin-right: 8px;
  background: #D2EBE7;
  color:#444;
  padding: 5px 10px;
  border-radius: 3px;
  position: relative;
  cursor: pointer;
  transition: all .2s;
  -webkit-animation-duration: .5s;
          animation-duration: .5s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}

.taggle_list .taggle_hot {
  background: #cac8c4;
}

.taggle_list .taggle .close {
  font-size: 1.1rem;
  position: absolute;
  top: 10px;
  right: 3px;
  text-decoration: none;
  padding: 0;
  line-height: 0.5;
  color: #ccc;
  color: rgba(0, 0, 0, 0.2);
  padding-bottom: 4px;
  display: none;
  border: 0;
  background: none;
  cursor: pointer;
}

.taggle_list .taggle:hover {
  padding: 5px;
  padding-right: 15px;
  background: #ccc;
  transition: all .3s;
}

.taggle_list .taggle:hover > .close {
  display: block;
}

.taggle_list .taggle .close:hover {
  color: #990033;
}

.taggle_placeholder {
  color: #aaa;
  transition: opacity, .25s;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.taggle_input {
  padding: 8px;
  padding-left: 0;
  float: left;
  margin-top: -5px;
  background: none;
  width: 100%;
  max-width: 100%;
}

.taggle_sizer {
  padding: 0;
  margin: 0;
  position: absolute;
  top: -500px;
  z-index: -1;
  visibility: hidden;
}

.focusedtaggle{
  border:3px solid #e80;
  background: rgba(255,225,25,0.2);
}

#FSJSON_container {padding-bottom:50px;margin-bottom:50px;border-bottom:1px dashed rgba(255,255,255,0.5);}
code {background:#234 !important;border:1px solid #567;}
code#lastID {color:#fe0;}

/*PROTIP*/
big {font-size:2em;padding-right:5px;}

styles

<link href="https://cdn.jsdelivr.net/animatecss/3.5.2/animate.min.css" rel="stylesheet" />
<link href="https://min.gitcdn.xyz/repo/DoclerLabs/Protip/master/protip.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/highlight.js/9.9.0/styles/zenburn.min.css" rel="stylesheet" />

PRESERVE CASE in taggle or hideCCfields doesn't work.