starter-tool

Infosite Starter Tool *Basic Kit for Initial Infosite Build

by rsolomonjr1

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.23.1/babel.min.js"></script>
   <div class="flex-container">
      <div class="infosite_tool_layout">
        <h1>Infosite Starter Tool</h1>
        <h4><em>*Basic Kit for Initial Infosite Build</em></h4>

        <form
          action="?"
          id="infosite_starter_form"
          name="infosite_starter_form"
          method="POST"
        >
          <div id="infosite_tracking">
            <div>
              <label for="tracking_sfnumber">SF#</label>
              <input
                type="text"
                id="tracking_sfnumber"
                name="sfnumber"
                placeholder="SF-Number"
              />
            </div>
            <div>
              <label for="tracking_brandName">Brand</label>
              <input
                type="text"
                id="tracking_brandName"
                name="brandName"
                placeholder="brandName"
              />
            </div>
            <div>
              <label for="tracking_brandId">Brand ID</label>
              <input
                type="text"
                id="tracking_brandId"
                name="brandId"
                placeholder="brandId"
              />
            </div>
            <div>
              <label for="tracking_CP_tcid">Tactic ID</label>
              <input
                type="text"
                id="tracking_CP_tcid"
                name="tcid"
                placeholder="tacticId"
              />
            </div>
            <div>
              <label for="tracking_CP_activityId">Promo Activity ID</label>
              <input
                type="text"
                id="tracking_CP_activityId"
                name="activityId"
                placeholder="activityId"
              />
            </div>
          </div>
          <h2>Infosite Template</h2>

     ...

CSS

:root {
  --main-color: #484848;
  --tool-blue: #007cb0;
  --tool-red: #a64452;
}

body {
  font-size: 14px;
  font-family: monospace;
  color: var(--main-color);
  margin: 2em auto;
  width: 370px;
}

.infosite_tool_layout {
  display: flex;
  justify-content: center;
  flex-direction: column;
}

input,
h1,
h2,
h3,
h4,
h5,
h6 {
  text-align: center;
  margin: 0.5em 0;
}

.flex-container {display: flex;}

form {
  display: inline-block;
  text-align: left;
  margin: 0 auto;
}

input[type="radio"]{
  -webkit-appearance: radio;
}

div[id^="infosite_"],
input[type="text"],
input[type="url"],
select {
  border: thin solid var(--tool-blue);
  border-radius: 5px;
  box-shadow: rgba(70, 130, 180, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset; 
}

button[type="submit"] {
  border: thin solid var(--tool-blue);
  border-radius: 5px;
  box-shadow: 1px 1px #007cb0;
  background: #fff;
  font-size: 16px
}

div[id^="infosite_"],
select {
  padding: 1em;
  margin: 1em auto;
}

input[type="text"] {
  padding: 0.25em 0;
}

#infosite_tracking > div,
#infosite_sponsorship,
#infosite_poll > div,
#infosite_accordion > div,
#infosite_number_of_media > div {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

#infosite_tracking label,
#infosite_sponsorship label,
#infosite_poll label,
#infosite_accordion label,
#infosite_number_of_media label {
  margin-right: 1em;
}

#infosite_header > div {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(100% / 2);
  margin: auto;
}

#infosite_number_of_pages {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

#infosite_number_of_pages > :last-child {
  font-size: 75%;
}

#pages_titles_table {
  width: 311px;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
}

#page_titles_table > div {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  text-align:...

JavaScript

$('input[type="radio"]').click(function(){
  var $radio = $(this);
  
  // if this was previously checked
  if ($radio.data('waschecked') == true)
  {
      $radio.prop('checked', false);
      $radio.data('waschecked', false);
  }
  else
      $radio.data('waschecked', true);
  
  // remove was checked from other radios
  $radio.siblings('input[name="radio"]').data('waschecked', false);

});

function changePages() {
  let selector = document.getElementsByName("number_of_pages")[0];
  let numberSelected = selector[selector.selectedIndex].value;

 
  let number = 1;
  let descriptionTitle = "";

  while (number <= numberSelected) {
    descriptionTitle +=
      '<div><div><input type="text" id="description" name="description" placeholder="page_title" value="Homepage" required/></div><div id="radio_button_set' +
      number.toString() +
      '"><div><input type="radio" name="radio' +
      number.toString() +
      '" class="radio" value="internal"></div><div><input type="radio"  name="radio' +
      number.toString() +
      '" class="radio" value="external"></div></div><div><input type="url" id="page_url" name="page_url" placeholder="page_url" /></div></div>';
    number++;
  }

  document.getElementById("page_titles_table").innerHTML = descriptionTitle;
}

function getNumberOfVideos() {
  const videoTable =
    "<div class='media_table'><div><input type='text' id='video_title' name='video_title' placeholder='video_title' value='Title'/></div><div><input type='text' id='video_thumbnail_image_name' name='video_thumbnail_image_name' placeholder='video_thumbnail_image_name' value='mediaFPO.png'/></div><div><input type='text' id='video_poster_image_name' name='video_poster_image_name' placeholder='video_poster_image_name' value='mediaFPO.png'/></div><div><input type='text' id='video_duration' name='video_duration' placeholder='video_duration' value='00:30'  /></div></div>";
  const errorText = "<dir class='errorText'>Please enter a number</dir>";

  var selector =...