widgets

widgets.js

$(function() {
  'use strict';

  var updateWidgetPreview = function() {
    var iframe = $('#previewiframe');
    var form = $("#previewform");
    if (form.length == 0) {
      form = $("<form/>", {id: "previewform", action: iframe.data('url'), target: "previewiframe", method: "GET"});
      form.hide();
      form.appendTo(document.body);
    }

    form.empty();

    var width = $("#widget_width").val();
    var height = $("#widget_height").val();

    console.log(iframe.data('url'))
    form.append($("<input />", {name: "widget[width]", value: width}));
    form.append($("<input />", {name: "widget[height]", value: height}));
    form.append($("<input />", {name: "widget[campaign_id]", value: $("#widget_campaign_id").val()}));
    form.append($("<input />", {name: "widget[mode]", value: $("#widget_mode").val()}));
    form.append($("<input />", {name: "widget[widget_background_color]", value: $("#widget_background_color").val()}));
    form.append($("<button>submit</button>"));


    form.submit();

    iframe.width(width).height(height);
  };

  $("#widget_height").on('change', updateWidgetPreview);
  $("#widget_width").on('change', updateWidgetPreview);
  $("#widget_campaign_id").on('change', updateWidgetPreview);
  $("#widget_mode").on('change', updateWidgetPreview);
  $("#widget_background_color").colorpicker().on('changeColor', updateWidgetPreview);

  updateWidgetPreview();


});