JSFiddle - React, Tailwind, and code Playground

Fliplet RSS Plugin Overlay

by Hugo Carneiro

HTML

<div id="widget-content">
  <div class="container" id="widget-form-container">
    <div class="row row-content">
      <!-- Nav Tabs -->
      <ul class="nav nav-stacked col-xs-3 nav-pills">
        <li class="active"> <a href="#rss-layout" data-toggle="tab" id="toggle-rss-layout">RSS layout</a>

        </li>
        <li class="disabled"> <a href="#rss-settings" data-toggle="tab" id="toggle-rss-settings">RSS settings</a>

        </li>
      </ul>
      <!-- End of Nav Tabs -->
      <!-- Tab Panes -->
      <div class="tab-pane active" id="rss-layout">
        <div class="tab-content col-xs-9">
          <div class="form-horizontal">
            <div class="tab-pane-header">
              <h3>Choose a layout for your RSS feed</h3>
              <p>You can change this at any time.</p>
            </div>
            <div class="tab-pane-content">
              <div class="form-group" id="rss-layout-styles">


                <div class="col-xs-6 layout-holder">
                  <input type="radio" name="rss_layout_style" id="rss_layout_style_left" value="thumb-left" class="hidden">
                  <label for="rss_layout_style_left">
                    <span class="help-block">Thumbnail on the left</span>
                    <div class="img-holder">
                      <div class="screen"></div>
                      <img class="img-responsive" src="http://placehold.it/260x200">
                    </div>
                  </label>
                </div>
                <div class="col-xs-6 layout-holder">
                  <input type="radio" name="rss_layout_style" id="rss_layout_style_right" value="thumb-right" class="hidden">
                  <label for="rss_layout_style_right">
                    <span class="help-block">Thumbnail on the right</span>
                    <div class="img-holder">
                      <div class="screen"></div>
                      <img class="img-responsive" src="http://placehold.it/260x200">
                   ...

CSS

/*************************
 *
 *	Document    : Fliplet Widget Styles
 *	Created on  : Jun 23, 2011, 5:44:22 PM
 *	Author      : Weboo
 *	Description : Fliplet Widget Styles
 *
 ************************/


/***********************/


/*       IMPORTS       */


/***********************/

@import url(http://fonts.googleapis.com/css?family=Dosis:200,400,700|Open+Sans:300italic,400italic,700italic,400,300,700&subset=latin,latin-ext);
html,
body {
  min-height: 100%;
  word-wrap: break-word;
}

* {
  -webkit-font-smoothing: antialiased;
}


/* ---------------------------------------------------------------------------------------------------------- 
01 Padding-less columns -------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */

@media screen and (max-width: 767px) {
  .col-xs-no-padding {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
  .col-sm-no-padding {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

@media screen and (min-width: 992px) and (max-width: 1199px) {
  .col-md-no-padding {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

@media screen and (min-width: 1200px) {
  .col-lg-no-padding {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}


/* Section: Legacy consistency */

.btn {
  vertical-align: middle;
  height: 2.6979166667em;
  line-height: 2.6979166667em;
  padding: 0 0.833333em;
  text-decoration: none;
  cursor: pointer;
  display: inline-block;
  font-size: 14px;
  margin: 0;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
  border-width: 1px;
}

.btn-default {
  color: #333;
  text-decoration: none;
  background: #f1f1f1;
  background: -moz-linear-gradient(top, #fafafa 0%,...

JavaScript

var feedValid = true; // Fake feed validation
var feedCheckTimeout; // For delay URL check
var URLContent; // For storing last checked content
var validURL = true; // Check for valid URL
var validRSSContent = true; // Check for valid RSS
var URLOnline = true; // Check if URL is online

// Changes tabs once a layout is selected
$('#rss-layout input[name="rss_layout_style"]').on('change', function() {
  $('#rss-layout').removeClass('active');
  $('#toggle-rss-layout').parents('li').removeClass('active');
  $('#rss-settings').addClass('active');
  $('#toggle-rss-settings').parents('li').addClass('active');

  $disabledTabs = $('.nav-stacked').find('.disabled');
  $disabledTabs.each(function() {
    $(this).removeClass('disabled');
  });

  $('input[name="rss_layout_style"]').removeClass('checked');
  $(this).addClass('checked');
});

// Validate URL
function isValidURL(url) {
	result = /^(http(s)?:\/\/)?(www\.)?[a-z0-9]+([\-\.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?$/.test(url);
	
	if ( !result ) {
		return false;
	}
	
	return result;
}

// URL Check - Faking it
$('#rss-feed-url').on('keyup blur change paste input', function() {
  var _this = $(this);
	
  clearTimeout(feedCheckTimeout);
  feedCheckTimeout = setTimeout(function() {
	
		// Checks if URL has changed since last check
    if (_this.val() != URLContent) {
      URLContent = _this.val();
      $('#rss-feed-settings').addClass('checking').removeClass('checked');
			
			setTimeout(function() {
				validURL = isValidURL( _this.val() ); // URL Validation
				if ( validURL ) {
					if ( URLOnline && validRSSContent ) {
						$('#rss-feed-settings').removeClass('checking').removeClass('failed').addClass('active checked');
					} else if ( !URLOnline ) {
						$('#rss-feed-settings').removeClass('checking').addClass('failed');
						$('.rss-fail strong').html("The URL you entered seems to lead to an offline website. Please verify the URL and try again.");
					} else if ( !validRSSContent )...