JSFiddle - React, Tailwind, and code Playground

by mstefanko

HTML

<script src="http://jcrop-cdn.tapmodo.com/v0.9.12/js/jquery.Jcrop.js"></script>
<link rel="stylesheet" href="http://jcrop-cdn.tapmodo.com/v0.9.12/css/jquery.Jcrop.css">
<div id='campaign-image-popup'>
						  <div class='campaign-image-popup-class'>
						    <div id='campaign-image-popup-content' style='display:none;'>
						      <div class='bimodal-scroll'>
						        <div class='scrollContent'>
                                    <img id='campaign-image-cropper' src='http://test.brightideatest.com/CORE/IMAGES/defaul-webstorm-image.png' />
						        </div>
						      </div>
						    </div>
						  </div>
						</div>

CSS

/*** Buttons **/
.bimodal-popup{
  display:none;
}

.green_btn_container, .grey_btn_container {
    font-family: Tahoma,Verdana,Arial !important;
    font-size: 11px;
    margin: 0;
    padding: 0;
    width: auto;
    cursor: pointer;
    
}

.green_btn_left, .grey_btn_left, .disabled_btn_left {
    display: block;
    width:16px;
    height:32px;
    float: left;
}
.green_btn_left {
    background: url(http://test.brightideatest.com/core/images/btn_default_left.png) 0px -32px no-repeat;
}

.disabled_btn_left {
    background: url(http://test.brightideatest.com/core/images/btn_default_left.png) 0px 0px no-repeat;
}
.grey_btn_left {
    background: url(http://test.brightideatest.com/core/images/btn_gray_left.png) 0px -0px no-repeat;
}

.green_btn_center {
    display: inline-block;
    color: #FFFFFF !important;
    font-weight: bold;
    height:32px;
    line-height: 30px;
    float: left;
    padding: 0 10px;
    text-shadow: 0 -1px 0 #999999 !important;
    background: url(http://test.brightideatest.com/core/images/btn_default_center.png) 0px -32px repeat-x;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
  .green_btn_center {
    display: inline-block;
    color: #FFFFFF !important;
    font-weight: bold;
    height:32px;
    line-height: 32px!important;
    float: left;
    padding: 0 10px;
    text-shadow: 0 -1px 0 #999999 !important;
    background: url(http://test.brightideatest.com/core/images/btn_default_center.png) 0px -32px repeat-x;
  }
}

  .disabled_btn_center {
    display: inline-block;
    color: #919191 !important;
    font-weight: bold;
    line-height: 0px;
    float: left;
    padding: 16px 10px;
    background-position: 0px 0px;
    cursor: move!important;
  }

.disabled_btn_left{
    cursor: move!important;
}

.disabled_btn_right{
    cursor: move!important;
}
.disabled_btn_center {
    background: url(http://test.brightideatest.com/core/images/btn_default_center.png) 0px 0px repeat-x;
}
.grey_btn_center {
  display: block;
 ...

JavaScript

var campaign_px = new Object, campaign_image_id = null, campaign_jcrop = null;
				function initImageCropFactor()
				{
					// init location and size
					campaign_px['x']=0;
					campaign_px['y']=0;
					campaign_px['x2']=250;
					campaign_px['y2']=250;
					campaign_px['w']=250;
					campaign_px['h']=250;
				}


(function($){
    //fn to center elements
    $.fn.center = function (options) {
        var defaults = {
            location: 'center'
        }

        var o = $.extend(defaults, options);

        if (o.location == 'center') {
            this.css('position','absolute');
            this.css('top', (($(window).height() - this.outerHeight()) / 2) +
                                                        $(window).scrollTop() + 'px');
            this.css('left', (($(window).width() - this.outerWidth()) / 2) +
                                                        $(window).scrollLeft() + 'px');
        }

        if (o.location == 'top') {
            this.css('position','absolute');
            this.css('top', '0')
            this.css('left', (($(window).width() - this.outerWidth()) / 2) +
                                                        $(window).scrollLeft() + 'px');
        }
        return this;
    }
    //TODO: Essentially part of validation function, migrate with validate to new file so this can be used anywhere
    $.fn.placeholderText = function () {
        $('input').each(function(){
            if($(this).val()=="" && $(this).attr("placeholder")) {
                $(this).val($(this).attr("placeholder"));
                $(this).css('color','#969696');
                //$(this).css('font-size', '12px'); //part of spec but causes issues with form cross-browser for alignment of text in inputs/selects
                $(this).blur(function(){
                    if($(this).val()=="") {
                        $(this).val($(this).attr("placeholder"));
                        $(this).css('color','#969696');
                       ...