Snippet Edit Template

abc.js.html

<div id="tabbed_layout">
  <ul> 
    <li><a href="#tabs-1">Content Images</a></li>
    <li><a href="#tabs-2">Country List</a></li>
  </ul>

  <div id="tabs-1">
<form id="formmapbg" method="POST" action="https://api2.transloadit.com/assemblies" enctype="multipart/form-data" >		
			<input type="file" name="uploadField" id="mapbgupload"/>
<input type="hidden" name="params" value="{&quot;auth&quot;:{&quot;key&quot;:&quot;7b0e6b7a533a4406bf256d40b524f923&quot;},&quot;template_id&quot;:&quot;687a733a7ce94f0587db4899a3211ca1&quot;,&quot;redirect_url&quot;:&quot;http://tabsmap.kleon.pipe.vitrue.com/maps/1&quot;}" />
			<input type="submit" value="Upload" />
 		</form>
<!-- HI -->
<script type="text/javascript">
	$(document).ready(function(){
  		console.log("hit");
  		$("#formmapbg").transloadit({
               wait:false,
      		   autoSubmit: true,
               fields: "#mapbgupload",
               onSuccess: function(assembly) { console.log(assembly) }
   		});
    });
</script>
<!-- END -->
    <form id="attributes" method="POST" action="/bob">
      <h2>Content Images</h2>
      <div class="field">
                <label for='map_background'>Map background:</label>
        <input type="text" placeholder="map background url" name="map_background" id="map_bg_input" value='https://cdn.vitrue.com/vitrue/images/intel_map.png' />
		
		
      </div>
      <div class="field">
        <label for='select_button'>Select Button Image:</label>
        <input type="text" placeholder="select button url" name="select_button" id="select_btn_input" value='https://cdn.vitrue.com/vitrue/images/choose_country.png' />
		<input type="file" name="uploadField" id="selectbimage"/>

      </div>
      <div class="field">
        <label for='popup_background'>Popup Background:</label>
        <input type="text" placeholder="popup background url" name="popup_background" id="popup_bg_input" value='https://cdn.vitrue.com/vitrue/images/intel_map_menu_4.png' />
		<input type="file" name="uploadField" id="popupbg"/>

      </div>
      <div class="field">
        <label for='tooltip_bg_color'>Tooltip BG Color:</label>
        <input type="text" class="tooltip_input colorpicker_input" placeholder="tooltip bg" name="tooltip_bg_color" id="tooltip_bg_color" value='#F091CE' />
      </div>
      <div class="field">
        <span for='tooltip_border_color'>Tooltip Border Color:</span>
        <input type="text" class="tooltip_input colorpicker_input" placeholder="tooltip border color" name="tooltip_border_color" id="tooltip_border_color" value='#FFFFFF' />
      </div>
      <div class="field">
        <label for='tooltip_text_color'>Tooltip Text Color:</label>
        <input type="text" class="tooltip_input colorpicker_input" placeholder="tooltip text color" name="tooltip_text_color" id="tooltip_text_color" value='#FFFFFF' />
      </div>
      <div class="field">
        <label for='tooltip_border_size'>Tooltip Border Thickness (in px):</label>
                <input type="text" class="tooltip_input" placeholder="tooltip border size" name="tooltip_border_size" id="tooltip_border_size" value='1' />
            </div>
        </form>
        </div>
    <div id="tabs-2">
            <form id='country_data'>
      <h2>Countries to Show</h2>
      <h3>Click on the map to add a country</h3>
      <div id="positioner"><img id="bg_preview" src='https://cdn.vitrue.com/vitrue/images/intel_map.png' /></div>
      <ul id="country_list" style='height: 337px; overflow:scroll;'>
        <li id="country_li_0" class="country_li">
                <!-- <%= button_to_function 'delete', 'remove_country(this);', :class => "delete_btn" %> -->
                <button onclick='remove_country(this);' class='delete_btn' >delete</button>
          <div class="field">
            <label for="countries[][name]">Country Name:</label>
            <input type="text" placeholder="country name" value="Argentina" name="countries[][name]" class="country_name_input" />
          </div>
          <div class="field">
            <label for="countries[][link]">Country Click URL:</label>
            <input type="text" placeholder="country link" value="http://www.facebook.com/IntelLatinAmerica" name="countries[][link]" class="country_link_input" />
          </div>
          <div class="field">
            <label for="countries[][icon]">Country Icon:</label>
            <input type="text" placeholder="icon url" value="https://cdn.vitrue.com/vitrue/intel/flagspng/ar.png" name="countries[][icon]" class="country_icon_input" />
          </div>
          <span class='faded'>
            <b>Positioning</b>
            <label for="countries[][top]">Top:</label>
            <input type="text" name="countries[][top]" value="188" class="country_top"/>
            <label for="countries[][top]">Left:</label>
            <input type="text" name="countries[][left]" value="127" class="country_left"/>
          </span>
        </li>
      </ul>
    </form>
  </div>
</div>
<!-- <%= button_to_function 'Preview', 'window.open(preview_link());', :id => 'preview' %>-->
<!-- <button onclick='window.open(preview_link());' id='preview'>Preview</button> -->


<style type='text/css'>
    .flag {
        position: absolute !important;
    }
	#formmapbg{
  		position:absolute !important;
  		top:146px;
	}
</style>

<script type="text/javascript">
  

  //functions yo
  function draggitize(targ) {
    $(targ).draggable({
      containment: 'parent',
      stop: function(ev,ui) {
        flag_li = get_flags_li(ui.helper.context);
        var topleft = bg_offset();
        $('.country_top', flag_li).val(ui.offset.top - topleft.top);
        $('.country_left', flag_li).val(ui.offset.left - topleft.left);
      }
    });
  };
    function preview_link() {
    return '/map/view?' + $("#country_form").serialize();
  };
  function position_country() {
    $("#bg_preview").attr('src', $("#map_bg_input").val()).parent().show();
  };
  function add_country(x,y) {
    var id_str = "country_li_" + $("#country_list > li").length;
    var new_li = $("#country_list > li:first").clone().hide().attr('id',id_str);
    var flag = $("<div class='flag' id='" + id_str + "_flag' ><img title='" + $('.country_name_input', new_li).val() + "' src='" + $('.country_icon_input', new_li).val() + "' /></div>");
    //flag.offset({left: x + $('#bg_preview').offset().left, top: y + $('#bg_preview').offset().top});
    $("#positioner").append(flag);
    var bgo = bg_offset();
        //flag.offset({left: x + bgo.left, top: y + bgo.top});
        flag.offset({left: x, top: y});
    draggitize(flag);
    addTooltip($('img', flag));
    flag.tooltip({ showURL: false, top: 10, left: 10 });
    $('.country_top', new_li).val(y - bgo.top);
    $('.country_left', new_li).val(x - bgo.left);
    $("#bg_preview").unbind('click', bg_preview_click).css('opacity', 0.8);
    new_li.prependTo('#country_list').slideDown('fast', function() {
            $("#bg_preview").bind('click', bg_preview_click).css('opacity',1);
        });
    $(".delete_btn").removeAttr("disabled");
    return new_li;
  };
  function remove_country(targ) {
    if ($("#country_list > li").length == 2)
      $(".delete_btn").attr("disabled","");
        var li_of_targ = $(targ).parent();
    li_of_targ.slideUp("fast", function() {
      $(this).remove();
    });
        $('#' + li_of_targ.attr('id') + '_flag').remove();
  };
  function bg_offset() {
    return $('#bg_preview').offset();
  };
  function get_flags_li(flag) {
    flag_id = $(flag).attr('id');
    return $('#' + flag_id.slice(0,flag_id.length - 5));
  };
  function update_bg_preview(src) {
    $("#bg_preview").attr('src', src);
  };
  function bg_preview_click(ev) {
    //add_country(parseInt(ev.pageX - ev.currentTarget.offsetLeft), parseInt(ev.pageY - ev.currentTarget.offsetTop));
        console.log(ev);
        console.log('^ event');
        console.log('x: ' + ev.pageX + ', y: ' + ev.pageY);
    add_country(parseInt(ev.pageX), parseInt(ev.pageY));
  }
  function addTooltip(targ) {
    targ.tooltip({ top: 10, left: 10, showURL: false, fade: 250 });
  }
  //takes in input element from inside a country's LI, and returns corresponding
  //flag as a jquery object
  function flagFromInput(ele) {
    return $("#" + $(ele).parents('.country_li').attr('id') + "_flag");
  };

  //SNIPPETS V2 specific
    function get_v2_snippet_data() {
        return {
              attributes: $('#attributes').serializeArray()
            , country_names: $('.country_name_input').serializeArray() 
            , country_links: $('.country_link_input').serializeArray() 
            , country_icons: $('.country_icon_input').serializeArray() 
            , country_tops: $('.country_top').serializeArray()
            , country_lefts: $('.country_left').serializeArray()
        };
    }


  $(document).ready(function() {
  
  
   
      $("#tabbed_layout").tabs();
            //$('.ui-dialog-tabs').css('width','587px');
            $("#country_list > li").each(function(i,v) {
            console.log('made it 0');
        //var topleft = $("#bg_preview").offset();
        var left = parseInt($('.country_left', this).val());
        var top = parseInt($('.country_top', this).val());
        var flag = $("<div class='flag' id='" + $(this).attr('id') + "_flag' ><img src='" + $('.country_icon_input',this).val() + "' title='" + $(".country_name_input", this).val() + "' /></div>");
            console.log('made it 1');
        //flag.offset({left: topleft.left + left, top: topleft.top + top});
            console.log('made it 2');
        $("#positioner").append(flag);
        draggitize(flag);
        addTooltip($('img', flag));
      });



        /*
    $(".colorpicker_input").each( function(a,t) {

      var cp = $($(".colorpicker_input")[a])
      $(t).ColorPicker({
        onChange: function (hsb,hex,rgb) {
          cp.val("#"+hex)
        },
        onBeforeShow: function() {
          $(this).ColorPickerSetColor(this.value)
        }
      });

    });
        */
            console.log('made it 3');
    $("#map_bg_input").change(function(ev) {
        update_bg_preview($(this).val());
    });
    $("#bg_preview").click(bg_preview_click).attr('src',$('#map_bg_input').val());
    $("#positioner").mouseenter(function() {
        $(this).addClass("hover");
    });
    $("#positioner").mouseleave(function() {
        $(this).removeClass("hover");
    });

    //+#+# UPDATE EVENTS #+#+
    bg_preview = $("#bg_preview");//reference for draggable events

    //updating title for tooltip if name is changed
    $("#country_list").on('change', ".country_name_input", function(ev) {
        var img_ele = flagFromInput(ev.currentTarget).children('img');
        img_ele.attr('title',
          $(ev.currentTarget).val());
        addTooltip(img_ele);

    });
    //updating tooltip css if values change up top
    $(".tooltip_input").change(function(ev) {
        $("#tooltip").css({
          border: $('#tooltip_border_size').val() + "px solid " + $('#tooltip_border_color').val(),
          background: 'none repeat scroll 0 0 ' + $("#tooltip_bg_color").val(),
          color: $("#tooltip_text_color").val()
        });
    });
    //updating flag position if top or left values are changed
    $("#country_list").on('change', ".country_left", function(ev) {
      flagFromInput(ev.currentTarget).css('left',
          ($('#bg_preview').offset().left + parseInt($(this).val()))+"px");
    });
    $("#country_list").on('change', '.country_top', function(ev) {
      flagFromInput(ev.currentTarget).css('top',
          ($('#bg_preview').offset().top + parseInt($(this).val()))+"px");
    });

    //updating flag image if image url is changed
    $("#country_list").on('change', '.country_icon_input', function(ev) {
      flagFromInput(ev.currentTarget).children('img').attr('src',$(ev.currentTarget).val());
    });
  });

</script>