url_scraper 0.0.3 → 0.0.4

data/README.rdoc

@@ -4,13 +4,15 @@ Its a simple plugin for providing facebook style url scraper. Using url scraper
 
 == Installation
 
-    gem install url_scraper
+Add to your gemfile 
 
-paste this line in your application.js file
+    gem "url_scraper"
+
+Paste this line in your application.js file
 
     //= require jquery.scraper
 
-paste this line in your application.css file          
+Paste this line in your application.css file
 
     *= require scraper
 
@@ -22,7 +24,7 @@ Add following to your routes
 
 Create a text area or text field with id="scrape_url" and that's it.
 
-==  Advanced Usage
+== Advanced Usage
 
     require 'url_scraper'
     
@@ -40,3 +42,8 @@ built into it, so you can examine what properties you've retrieved like so:
 
     movie.keys # => ['type','image','title','url']
 
+== Pending list
+
+1) Showing video on the page.
+
+2) Giving developers an easy way to integrate with rails forms.  

data/app/assets/javascripts/bjqs.js

@@ -0,0 +1,719 @@
+/*
+ * Basic jQuery Slider plug-in v.1.3
+ *
+ * http://www.basic-slider.com
+ *
+ * Authored by John Cobb
+ * http://www.johncobb.name
+ * @john0514
+ *
+ * Copyright 2011, John Cobb
+ * License: GNU General Public License, version 3 (GPL-3.0)
+ * http://www.opensource.org/licenses/gpl-3.0.html
+ *
+ */
+
+;(function($) {
+
+    "use strict";
+
+    $.fn.bjqs = function(o) {
+        
+        // slider default settings
+        var defaults        = {
+
+            // w + h to enforce consistency
+            width           : 700,
+            height          : 300,
+
+            // transition valuess
+            animtype        : 'fade',
+            animduration    : 450,      // length of transition
+            animspeed       : 4000,     // delay between transitions
+            automatic       : true,     // enable/disable automatic slide rotation
+
+            // control and marker configuration
+            showcontrols    : true,     // enable/disable next + previous UI elements
+            centercontrols  : true,     // vertically center controls
+            nexttext        : 'Next',   // text/html inside next UI element
+            prevtext        : 'Prev',   // text/html inside previous UI element
+            showmarkers     : true,     // enable/disable individual slide UI markers
+            centermarkers   : true,     // horizontally center markers
+
+            // interaction values
+            keyboardnav     : true,     // enable/disable keyboard navigation
+            hoverpause      : true,     // enable/disable pause slides on hover
+
+            // presentational options
+            usecaptions     : true,     // enable/disable captions using img title attribute
+            randomstart     : false,     // start from a random slide
+            responsive      : false     // enable responsive behaviour
+
+        };
+
+        // create settings from defauls and user options
+        var settings        = $.extend({}, defaults, o);
+
+        // slider elements
+        var $wrapper        = this,
+            $slider         = $wrapper.find('ul.bjqs'),
+            $slides         = $slider.children('li'),
+
+            // control elements
+            $c_wrapper      = null,
+            $c_fwd          = null,
+            $c_prev         = null,
+
+            // marker elements
+            $m_wrapper      = null,
+            $m_markers      = null,
+
+            // elements for slide animation
+            $canvas         = null,
+            $clone_first    = null,
+            $clone_last     = null;
+
+        // state management object
+        var state           = {
+            slidecount      : $slides.length,   // total number of slides
+            animating       : false,            // bool: is transition is progress
+            paused          : false,            // bool: is the slider paused
+            currentslide    : 1,                // current slide being viewed (not 0 based)
+            nextslide       : 0,                // slide to view next (not 0 based)
+            currentindex    : 0,                // current slide being viewed (0 based)
+            nextindex       : 0,                // slide to view next (0 based)
+            interval        : null              // interval for automatic rotation
+        };
+
+        var responsive      = {
+            width           : null,
+            height          : null,
+            ratio           : null
+        };
+
+        // helpful variables
+        var vars            = {
+            fwd             : 'forward',
+            prev            : 'previous'
+        };
+            
+        // run through options and initialise settings
+        var init = function() {
+
+            // differentiate slider li from content li
+            $slides.addClass('bjqs-slide');
+
+            // conf dimensions, responsive or static
+            if( settings.responsive ){
+                conf_responsive();
+            }
+            else{
+                conf_static();
+            }
+
+            // configurations only avaliable if more than 1 slide
+            if( state.slidecount > 1 ){
+
+                // enable random start
+                if (settings.randomstart){
+                    conf_random();
+                }
+
+                // create and show controls
+                if( settings.showcontrols ){
+                    conf_controls();
+                }
+
+                // create and show markers
+                if( settings.showmarkers ){
+                    conf_markers();
+                }
+
+                // enable slidenumboard navigation
+                if( settings.keyboardnav ){
+                    conf_keynav();
+                }
+
+                // enable pause on hover
+                if (settings.hoverpause && settings.automatic){
+                    conf_hoverpause();
+                }
+
+                // conf slide animation
+                if (settings.animtype === 'slide'){
+                    conf_slide();
+                }
+
+            } else {
+                // Stop automatic animation, because we only have one slide! 
+                settings.automatic = false;
+            }
+
+            if(settings.usecaptions){
+                conf_captions();
+            }
+
+            // TODO: need to accomodate random start for slide transition setting
+            if(settings.animtype === 'slide' && !settings.randomstart){
+                state.currentindex = 1;
+                state.currentslide = 2;
+            }
+
+            // slide components are hidden by default, show them now
+            $slider.show();
+            $slides.eq(state.currentindex).show();
+
+            // Finally, if automatic is set to true, kick off the interval
+            if(settings.automatic){
+                state.interval = setInterval(function () {
+                    go(vars.fwd, false);
+                }, settings.animspeed);
+            }
+
+        };
+
+        var conf_responsive = function() {
+
+            responsive.width    = $wrapper.outerWidth();
+            responsive.ratio    = responsive.width/settings.width,
+            responsive.height   = settings.height * responsive.ratio;
+
+            if(settings.animtype === 'fade'){
+
+                // initial setup
+                $slides.css({
+                    'height'        : settings.height,
+                    'width'         : '100%'
+                });
+                $slides.children('img').css({
+                    'height'        : settings.height,
+                    'width'         : '100%'
+                });
+                $slider.css({
+                    'height'        : settings.height,
+                    'width'         : '100%'
+                });
+                $wrapper.css({
+                    'height'        : settings.height,
+                    'max-width'     : settings.width,
+                    'position'      : 'relative'
+                });
+
+                if(responsive.width < settings.width){
+
+                    $slides.css({
+                        'height'        : responsive.height
+                    });
+                    $slides.children('img').css({
+                        'height'        : responsive.height
+                    });
+                    $slider.css({
+                        'height'        : responsive.height
+                    });
+                    $wrapper.css({
+                        'height'        : responsive.height
+                    });
+
+                }
+
+                $(window).resize(function() {
+
+                    // calculate and update dimensions
+                    responsive.width    = $wrapper.outerWidth();
+                    responsive.ratio    = responsive.width/settings.width,
+                    responsive.height   = settings.height * responsive.ratio;
+
+                    $slides.css({
+                        'height'        : responsive.height
+                    });
+                    $slides.children('img').css({
+                        'height'        : responsive.height
+                    });
+                    $slider.css({
+                        'height'        : responsive.height
+                    });
+                    $wrapper.css({
+                        'height'        : responsive.height
+                    });
+
+                });
+
+            }
+
+            if(settings.animtype === 'slide'){
+
+                // initial setup
+                $slides.css({
+                    'height'        : settings.height,
+                    'width'         : settings.width
+                });
+                $slides.children('img').css({
+                    'height'        : settings.height,
+                    'width'         : settings.width
+                });
+                $slider.css({
+                    'height'        : settings.height,
+                    'width'         : settings.width * settings.slidecount
+                });
+                $wrapper.css({
+                    'height'        : settings.height,
+                    'max-width'     : settings.width,
+                    'position'      : 'relative'
+                });
+
+                if(responsive.width < settings.width){
+
+                    $slides.css({
+                        'height'        : responsive.height
+                    });
+                    $slides.children('img').css({
+                        'height'        : responsive.height
+                    });
+                    $slider.css({
+                        'height'        : responsive.height
+                    });
+                    $wrapper.css({
+                        'height'        : responsive.height
+                    });
+
+                }
+
+                $(window).resize(function() {
+
+                    // calculate and update dimensions
+                    responsive.width    = $wrapper.outerWidth(),
+                    responsive.ratio    = responsive.width/settings.width,
+                    responsive.height   = settings.height * responsive.ratio;
+
+                    $slides.css({
+                        'height'        : responsive.height,
+                        'width'         : responsive.width
+                    });
+                    $slides.children('img').css({
+                        'height'        : responsive.height,
+                        'width'         : responsive.width
+                    });
+                    $slider.css({
+                        'height'        : responsive.height,
+                        'width'         : responsive.width * settings.slidecount
+                    });
+                    $wrapper.css({
+                        'height'        : responsive.height
+                    });
+                    $canvas.css({
+                        'height'        : responsive.height,
+                        'width'         : responsive.width
+                    });
+
+                    resize_complete(function(){
+                        go(false,state.currentslide);
+                    }, 200, "some unique string");
+
+                });
+
+            }
+
+        };
+
+        var resize_complete = (function () {
+            
+            var timers = {};
+            
+            return function (callback, ms, uniqueId) {
+                if (!uniqueId) {
+                    uniqueId = "Don't call this twice without a uniqueId";
+                }
+                if (timers[uniqueId]) {
+                    clearTimeout (timers[uniqueId]);
+                }
+                timers[uniqueId] = setTimeout(callback, ms);
+            };
+
+        })();
+
+        // enforce fixed sizing on slides, slider and wrapper
+        var conf_static = function() {
+
+            $slides.css({
+                'height'    : settings.height,
+                'width'     : settings.width
+            });
+            $slider.css({
+                'height'    : settings.height,
+                'width'     : settings.width
+            });
+            $wrapper.css({
+                'height'    : settings.height,
+                'width'     : settings.width,
+                'position'  : 'relative'
+            });
+
+        };
+
+        var conf_slide = function() {
+
+            // create two extra elements which are clones of the first and last slides
+            $clone_first    = $slides.eq(0).clone();
+            $clone_last     = $slides.eq(state.slidecount-1).clone();
+
+            // add them to the DOM where we need them
+            $clone_first.attr({'data-clone' : 'last', 'data-slide' : 0}).appendTo($slider).show();
+            $clone_last.attr({'data-clone' : 'first', 'data-slide' : 0}).prependTo($slider).show();
+
+            // update the elements object
+            $slides             = $slider.children('li');
+            state.slidecount    = $slides.length;
+
+            // create a 'canvas' element which is neccessary for the slide animation to work
+            $canvas = $('<div class="bjqs-wrapper"></div>');
+
+            // if the slider is responsive && the calculated width is less than the max width
+            if(settings.responsive && (responsive.width < settings.width)){
+
+                $canvas.css({
+                    'width'     : responsive.width,
+                    'height'    : responsive.height,
+                    'overflow'  : 'hidden',
+                    'position'  : 'relative'
+                });
+
+                // update the dimensions to the slider to accomodate all the slides side by side
+                $slider.css({
+                    'width'     : responsive.width * (state.slidecount + 2),
+                    'left'      : -responsive.width * state.currentslide
+                });
+
+            }
+            else {
+
+                $canvas.css({
+                    'width'     : settings.width,
+                    'height'    : settings.height,
+                    'overflow'  : 'hidden',
+                    'position'  : 'relative'
+                });
+
+                // update the dimensions to the slider to accomodate all the slides side by side
+                $slider.css({
+                    'width'     : settings.width * (state.slidecount + 2),
+                    'left'      : -settings.width * state.currentslide
+                });
+
+            }
+
+            // add some inline styles which will align our slides for left-right sliding
+            $slides.css({
+                'float'         : 'left',
+                'position'      : 'relative',
+                'display'       : 'list-item'
+            });
+
+            // 'everything.. in it's right place'
+            $canvas.prependTo($wrapper);
+            $slider.appendTo($canvas);
+
+        };
+
+        var conf_controls = function() {
+
+            // create the elements for the controls
+            $c_wrapper  = $('<ul class="bjqs-controls"></ul>');
+            $c_fwd      = $('<li class="bjqs-next"><a href="#" data-direction="'+ vars.fwd +'">' + settings.nexttext + '</a></li>');
+            $c_prev     = $('<li class="bjqs-prev"><a href="#" data-direction="'+ vars.prev +'">' + settings.prevtext + '</a></li>');
+
+            // bind click events
+            $c_wrapper.on('click','a',function(e){
+
+                e.preventDefault();
+                var direction = $(this).attr('data-direction');
+
+                if(!state.animating){
+
+                    if(direction === vars.fwd){
+                        go(vars.fwd,false);
+                    }
+
+                    if(direction === vars.prev){
+                        go(vars.prev,false);
+                    }
+
+                }
+
+            });
+
+            // put 'em all together
+            $c_prev.appendTo($c_wrapper);
+            $c_fwd.appendTo($c_wrapper);
+            $c_wrapper.appendTo($wrapper);
+
+            // vertically center the controls
+            if (settings.centercontrols) {
+
+                $c_wrapper.addClass('v-centered');
+
+                // calculate offset % for vertical positioning
+                var offset_px   = ($wrapper.height() - $c_fwd.children('a').outerHeight()) / 2,
+                    ratio       = (offset_px / settings.height) * 100,
+                    offset      = ratio + '%';
+
+                $c_fwd.find('a').css('top', offset);
+                $c_prev.find('a').css('top', offset);
+
+            }
+
+        };
+
+        var conf_markers = function() {
+
+            // create a wrapper for our markers
+            $m_wrapper = $('<ol class="bjqs-markers"></ol>');
+
+            // for every slide, create a marker
+            $.each($slides, function(key, slide){
+
+                var slidenum    = key + 1,
+                    gotoslide   = key + 1;
+                
+                if(settings.animtype === 'slide'){
+                    // + 2 to account for clones
+                    gotoslide = key + 2;
+                }
+
+                var marker = $('<li><a href="#">'+ slidenum +'</a></li>');
+
+                // set the first marker to be active
+                if(slidenum === state.currentslide){ marker.addClass('active-marker'); }
+
+                // bind the click event
+                marker.on('click','a',function(e){
+                    e.preventDefault();
+                    if(!state.animating && state.currentslide !== gotoslide){
+                        go(false,gotoslide);
+                    }
+                });
+
+                // add the marker to the wrapper
+                marker.appendTo($m_wrapper);
+
+            });
+
+            $m_wrapper.appendTo($wrapper);
+            $m_markers = $m_wrapper.find('li');
+
+            // center the markers
+            if (settings.centermarkers) {
+                $m_wrapper.addClass('h-centered');
+                var offset = (settings.width - $m_wrapper.width()) / 2;
+                $m_wrapper.css('left', offset);
+            }
+
+        };
+
+        var conf_keynav = function() {
+
+            $(document).keyup(function (event) {
+
+                if (!state.paused) {
+                    clearInterval(state.interval);
+                    state.paused = true;
+                }
+
+                if (!state.animating) {
+                    if (event.keyCode === 39) {
+                        event.preventDefault();
+                        go(vars.fwd, false);
+                    } else if (event.keyCode === 37) {
+                        event.preventDefault();
+                        go(vars.prev, false);
+                    }
+                }
+
+                if (state.paused && settings.automatic) {
+                    state.interval = setInterval(function () {
+                        go(vars.fwd);
+                    }, settings.animspeed);
+                    state.paused = false;
+                }
+
+            });
+
+        };
+
+        var conf_hoverpause = function() {
+
+            $wrapper.hover(function () {
+                if (!state.paused) {
+                    clearInterval(state.interval);
+                    state.paused = true;
+                }
+            }, function () {
+                if (state.paused) {
+                    state.interval = setInterval(function () {
+                        go(vars.fwd, false);
+                    }, settings.animspeed);
+                    state.paused = false;
+                }
+            });
+
+        };
+
+        var conf_captions = function() {
+
+            $.each($slides, function (key, slide) {
+
+                var caption = $(slide).children('img:first-child').attr('title');
+
+                // Account for images wrapped in links
+                if(!caption){
+                    caption = $(slide).children('a').find('img:first-child').attr('title');
+                }
+
+                if (caption) {
+                    caption = $('<p class="bjqs-caption">' + caption + '</p>');
+                    caption.appendTo($(slide));
+                }
+
+            });
+
+        };
+
+        var conf_random = function() {
+
+            var rand            = Math.floor(Math.random() * state.slidecount) + 1;
+            state.currentslide  = rand;
+            state.currentindex  = rand-1;
+
+        };
+
+        var set_next = function(direction) {
+
+            if(direction === vars.fwd){
+                
+                if($slides.eq(state.currentindex).next().length){
+                    state.nextindex = state.currentindex + 1;
+                    state.nextslide = state.currentslide + 1;
+                }
+                else{
+                    state.nextindex = 0;
+                    state.nextslide = 1;
+                }
+
+            }
+            else{
+
+                if($slides.eq(state.currentindex).prev().length){
+                    state.nextindex = state.currentindex - 1;
+                    state.nextslide = state.currentslide - 1;
+                }
+                else{
+                    state.nextindex = state.slidecount - 1;
+                    state.nextslide = state.slidecount;
+                }
+
+            }
+
+        };
+
+        var go = function(direction, position) {
+
+            // only if we're not already doing things
+            if(!state.animating){
+
+                // doing things
+                state.animating = true;
+
+                if(position){
+                    state.nextslide = position;
+                    state.nextindex = position-1;
+                }
+                else{
+                    set_next(direction);
+                }
+
+                // fade animation
+                if(settings.animtype === 'fade'){
+
+                    if(settings.showmarkers){
+                        $m_markers.removeClass('active-marker');
+                        $m_markers.eq(state.nextindex).addClass('active-marker');
+                    }
+
+                    // fade out current
+                    $slides.eq(state.currentindex).fadeOut(settings.animduration);
+                    // fade in next
+                    $slides.eq(state.nextindex).fadeIn(settings.animduration, function(){
+
+                        // update state variables
+                        state.animating = false;
+                        state.currentslide = state.nextslide;
+                        state.currentindex = state.nextindex;
+
+                    });
+
+                }
+
+                // slide animation
+                if(settings.animtype === 'slide'){
+
+                    if(settings.showmarkers){
+                        
+                        var markerindex = state.nextindex-1;
+
+                        if(markerindex === state.slidecount-2){
+                            markerindex = 0;
+                        }
+                        else if(markerindex === -1){
+                            markerindex = state.slidecount-3;
+                        }
+
+                        $m_markers.removeClass('active-marker');
+                        $m_markers.eq(markerindex).addClass('active-marker');
+                    }
+
+                    // if the slider is responsive && the calculated width is less than the max width
+                    if(settings.responsive && ( responsive.width < settings.width ) ){
+                        state.slidewidth = responsive.width;
+                    }
+                    else{
+                        state.slidewidth = settings.width;
+                    }
+
+                    $slider.animate({'left': -state.nextindex * state.slidewidth }, settings.animduration, function(){
+
+                        state.currentslide = state.nextslide;
+                        state.currentindex = state.nextindex;
+
+                        // is the current slide a clone?
+                        if($slides.eq(state.currentindex).attr('data-clone') === 'last'){
+
+                            // affirmative, at the last slide (clone of first)
+                            $slider.css({'left': -state.slidewidth });
+                            state.currentslide = 2;
+                            state.currentindex = 1;
+
+                        }
+                        else if($slides.eq(state.currentindex).attr('data-clone') === 'first'){
+
+                            // affirmative, at the fist slide (clone of last)
+                            $slider.css({'left': -state.slidewidth *(state.slidecount - 2)});
+                            state.currentslide = state.slidecount - 1;
+                            state.currentindex = state.slidecount - 2;
+
+                        }
+
+                        state.animating = false;
+
+                    });
+
+                }
+
+            }
+
+        };
+
+        // lets get the party started :)
+        init();
+
+    };
+
+})(jQuery);

data/app/assets/javascripts/jquery.scraper.js

@@ -1,6 +1,6 @@
-$(function(){
-  $('.hidden').hide();
+//= require bjqs
 
+$(function(){
   $('#scrape_url').keyup(function(event){
     if (event.keyCode == 32){
       url = linkify($(this).val());
@@ -78,30 +78,81 @@ $(function(){
           init_slider();
         }
 
+        //Add cross button
+        cross_button = document.createElement('a');
+        cross_button.className = "delete_node";
+        cross_button.innerHTML = "X";
+        $('.scraped_content').append(cross_button);
+
         //Add the title container
-        title = document.createElement('input');
-        title.setAttribute("type", "text");
-        title.setAttribute("value", data.title);                
+        title = document.createElement('div');
+        title.className = "scraped_title";
+        title_input_field = document.createElement('input');
+        title_input_field.setAttribute("type", "text");
+        title_input_field.setAttribute("value", data.title);
+        title_span = document.createElement('span');
+        title_span.innerHTML = data.title;
+        title.appendChild(title_input_field);
+        title.appendChild(title_span);
         $('.scraped_content').append(title);
+        $(title_input_field).hide();
 
         //Add the description container
-        description = document.createElement('textarea');
-        if(data.description.length > 0)
-          $(description).append(data.description);
-        else
-          description.setAttribute("placeholder", "This webpage doesn't provide any description. Go ahead and write your own.");                
-        $('.scraped_content').append(description);
+        if(data.description != null && data.description.length > 0){
+          description = document.createElement('div');
+          description.className = "scraped_description";
+          description_textarea = document.createElement('textarea');
+          description_textarea.innerHTML = data.description;
+          description_span = document.createElement('span');
+          description_span.innerHTML = data.description;
+          description.appendChild(description_textarea);
+          description.appendChild(description_span);
+          $('.scraped_content').append(description);
+          $(description_textarea).hide();          
+        }
+        // else
+        //   description_textarea.setAttribute("placeholder", "This webpage doesn't provide any description. Go ahead and write your own.");
       }
     });
   }
 
+  $(document).on("click", function(e){
+    $(".scraped_content span").show();
+    $(".scraped_content span").siblings().hide();
+  });
+
+  $(document).on("click", ".scraped_content textarea, .scraped_content input", function(e){
+    e.stopPropagation();
+  });
+
+  $(document).on("click", ".scraped_content span", function(e){
+    $(this).parents('div').find('input, textarea').hide();
+    $(this).parents('div').find('span').show();
+    $(this).hide();
+    $(this).siblings().show();
+    e.stopPropagation();
+  });
+
+  $(document).on("change", ".scraped_content .scraped_title input", function(){
+    $(this).siblings('span').html($(this).val());
+  });
+
+  $(document).on("change", ".scraped_content .scraped_description textarea", function(){
+    setTimeout(function () {
+      $(this).siblings('span').html($(this).html());
+    }, 100);
+  });
+  
   function init_slider(){
     $('.scraped_content #image_slider').bjqs({
-      'height' : 100,
+      'height' : 110,
       'width' : 170,
       'responsive' : true,
       'showmarkers' : false,
+      'centercontrols' : false,
+      'nexttext' : '>', // Text for 'next' button (can use HTML)
+      'prevtext' : '<', // Text for 'previous' button (can use HTML)
     });
   };
 
-});
+});

data/app/assets/javascripts/jquery.scraper.js~

@@ -0,0 +1,109 @@
+//= require bjqs
+
+$(function(){
+  $('.hidden').hide();
+
+  $('#scrape_url').keyup(function(event){
+    if (event.keyCode == 32){
+      url = linkify($(this).val());
+      if (url != null && url.length > 0)
+        scrapUrl(url.toString());
+    }
+  });
+
+  $('#scrape_url').bind('paste', function () {
+      var url;
+      setTimeout(function () {
+        url = linkify($('#scrape_url').val());
+        if (url != null && url.length > 0)
+          scrapUrl(url.toString());
+      }, 100);
+  });
+
+  function linkify(inputText) {
+    var replacedText, replacePattern1, replacePattern2, replacePattern3;
+
+    //URLs starting with http://, https://, or ftp://
+    replacePattern1 = /((https?|ftp):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gim;
+    replacedText = inputText.replace(replacePattern1, '$1');
+
+    //URLs starting with "www." (without // before it, or it'd re-link the ones done above).
+    replacePattern2 = /(^|[^\/])(www\.[\S]+(\b|$))/gim;
+    replacedText = replacedText.replace(replacePattern2, 'http://$2');
+
+    url = replacedText.match(replacePattern1);
+
+    // console.log(replacedText);
+    // console.log(url);
+    return(url);
+  }
+
+  function scrapUrl(url){
+    $.ajax({
+      url: "/scrape_url",
+      data: {
+        url: url,
+      },
+      type: 'post',
+      success: function(data){
+        var container = document.createElement('div');
+        container.className = "scraped_content";
+        $('#scrape_url').after(container);
+        
+        console.log(data);
+        
+        //Check if a video is present
+        if(data.video != undefined)
+          alert("video pending");
+        else if(data.image.length > 0)
+        { 
+          image_slider = document.createElement('div');
+          image_slider.setAttribute("id", "image_slider");
+          bjqs_ul = document.createElement('ul');
+          bjqs_ul.className = "bjqs"
+          $(image_slider).append(bjqs_ul);
+          $('.scraped_content').append(image_slider);
+
+          if(data.image instanceof Array) {
+            for(image in data.image){
+              if(data.image[image].match("//") == undefined) 
+                $(".scraped_content #image_slider ul.bjqs").append("<li><img src=" + url + data.image[image] + "><img></li>");
+              else
+                $(".scraped_content #image_slider ul.bjqs").append("<li><img src=" + data.image[image] + "><img></li>");
+            }
+          } else if(data.image != null) {
+              if(data.image.match("//") == undefined) 
+                $(".scraped_content #image_slider ul.bjqs").append("<li><img src=" + url + data.image + "><img></li>");
+              else
+                $(".scraped_content #image_slider ul.bjqs").append("<li><img src=" + data.image + "><img></li>");
+          }
+          init_slider();
+        }
+
+        //Add the title container
+        title = document.createElement('input');
+        title.setAttribute("type", "text");
+        title.setAttribute("value", data.title);                
+        $('.scraped_content').append(title);
+
+        //Add the description container
+        description = document.createElement('textarea');
+        if(data.description.length > 0)
+          $(description).append(data.description);
+        else
+          description.setAttribute("placeholder", "This webpage doesn't provide any description. Go ahead and write your own.");                
+        $('.scraped_content').append(description);
+      }
+    });
+  }
+
+  function init_slider(){
+    $('.scraped_content #image_slider').bjqs({
+      'height' : 100,
+      'width' : 170,
+      'responsive' : true,
+      'showmarkers' : false,
+    });
+  };
+
+});

data/app/assets/stylesheets/bjqs.css

@@ -0,0 +1,16 @@
+/* Basic jQuery Slider essential styles */
+
+ul.bjqs{position:relative; list-style:none;padding:0;margin:0;overflow:hidden; display:none;}
+li.bjqs-slide{position:absolute; display:none;}
+ul.bjqs-controls{list-style:none;margin:0;padding:6px;z-index:9999;padding-left: 0px;}
+ul.bjqs-controls li { float: left; }
+ul.bjqs-controls li a{ text-decoration: none; font-weight: bold; color: #fff; background: #333; padding:3px 5px; }
+ul.bjqs-controls li a:hover{ background: #555; }
+ul.bjqs-controls.v-centered li a{position:absolute;}
+ul.bjqs-controls.v-centered li.bjqs-next a{right:0;}
+ul.bjqs-controls.v-centered li.bjqs-prev a{left:0;}
+ol.bjqs-markers{list-style: none; padding: 0; margin: 0; width:100%;}
+ol.bjqs-markers.h-centered{text-align: center;}
+ol.bjqs-markers li{display:inline;}
+ol.bjqs-markers li a{display:inline-block;}
+p.bjqs-caption{display:block;width:96%;margin:0;padding:2%;position:absolute;bottom:0;}

data/app/assets/stylesheets/scraper.css

@@ -0,0 +1,70 @@
+/*
+*= require bjqs
+*/
+.scraped_content{
+  border: 1px solid #a3a3a3;
+  width: 500px;
+  height: 140px;
+  padding: 5px;
+}
+
+.scraped_content .scraped_title{
+  width: 290px;
+  float: left;
+  margin-left: 10px;
+  margin-bottom: 10px;
+}
+
+.scraped_content .scraped_title span{
+  
+}
+
+.scraped_content .scraped_title span:hover{
+  cursor: pointer;
+  background-color: whitesmoke;
+}
+
+.scraped_content .scraped_title input[type='text']{
+  border: 1px black solid;
+  width: 290px;
+}
+
+.scraped_content .scraped_description{
+  margin-left: 10px;
+  width: 290px;
+  height: 110px;
+  float: left;
+}
+
+.scraped_content .scraped_description span{
+  font-size: 80%;
+}
+
+.scraped_content .scraped_description span:hover{
+  cursor: pointer;
+  background-color: whitesmoke;
+
+}
+
+.scraped_content .scraped_description textarea{
+  width: 290px;
+  height: 65px
+}
+.scraped_content #image_slider{
+  display: block;
+  width: 170px;
+  float: left;
+}
+
+.scraped_content a{
+  display: block;
+  float: right;
+  margin-left: 5px;
+  padding: 2px 5px;
+}
+
+.scraped_content a:hover{
+  background-color: grey;
+  color: white;
+  cursor: pointer;
+}

data/app/assets/stylesheets/scraper.css~

@@ -0,0 +1 @@
+*= require bjqs

data/app/controllers/url_scraper_controller.rb

@@ -1,4 +1,4 @@
-roclass UrlScraperController < ApplicationController
+class UrlScraperController < ApplicationController
   def scrape
     object = UrlScraper.fetch(params[:url])
     render :json => object

data/lib/url_scraper/version.rb

@@ -1,3 +1,3 @@
 module UrlScraper
-  VERSION = "0.0.3"
+  VERSION = "0.0.4"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: url_scraper
 version: !ruby/object:Gem::Version
-  version: 0.0.3
+  version: 0.0.4
   prerelease: 
 platform: ruby
 authors:
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2013-05-06 00:00:00.000000000 Z
+date: 2013-05-08 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler
@@ -121,8 +121,12 @@ files:
 - LICENSE.txt
 - README.rdoc
 - Rakefile
+- app/assets/javascripts/bjqs.js
 - app/assets/javascripts/jquery.scraper.js
+- app/assets/javascripts/jquery.scraper.js~
+- app/assets/stylesheets/bjqs.css
 - app/assets/stylesheets/scraper.css
+- app/assets/stylesheets/scraper.css~
 - app/controllers/url_scraper_controller.rb
 - lib/url_scraper.rb
 - lib/url_scraper/version.rb
@@ -140,12 +144,18 @@ required_ruby_version: !ruby/object:Gem::Requirement
   - - ! '>='
     - !ruby/object:Gem::Version
       version: '0'
+      segments:
+      - 0
+      hash: 2025570187396456876
 required_rubygems_version: !ruby/object:Gem::Requirement
   none: false
   requirements:
   - - ! '>='
     - !ruby/object:Gem::Version
       version: '0'
+      segments:
+      - 0
+      hash: 2025570187396456876
 requirements: []
 rubyforge_project: 
 rubygems_version: 1.8.24