lentil 0.0.1.pre

data/app/assets/javascripts/lentil/addinfinitescroll.js.erb

@@ -0,0 +1,50 @@
+function hideOverlayDestroySpinner() {
+    $('#spinner-overlay').hide();
+    FANCYBOX_SPINNER.stop();
+}
+
+
+function addinfinitescroll() {
+
+    if ($("div#paging a").length > 0) {
+        $('div.images').infinitescroll({
+            loading: {
+                msgText: "Loading more photos...",
+                img: "<%= asset_path('lentil/loadingsquares.gif') %>",
+                finishedMsg: "No more photos to load."
+            },
+            state : {
+                isDone : false
+            },
+            navSelector  : "div#paging",
+
+            // selector for the paged navigation (it will be hidden)
+            nextSelector : "div#paging a:first",
+
+            // selector for the NEXT link (to page 2)
+            itemSelector : "div.image-tile",
+
+            // selector for all items you'll retrieve
+            animate: true,
+            extraScrollPx: 30,
+            appendCallback: true,
+            errorCallback: function() {
+                hideOverlayDestroySpinner()
+            }
+        },
+        function () {
+            addfancybox();
+            addimageerrors();
+            // on callback, if fancybox is open
+            // then close it and reopen at the same spot
+            // this fakes dynamic loading of new images
+            if ($.fancybox.isOpen) {
+                start = $.fancybox.current.index;
+                FancyBoxCloseFunctionState.fancyboxvisible = false;
+                $.fancybox.close();
+                $(".fancybox").eq(start).trigger('click');
+                hideOverlayDestroySpinner();
+            }
+        });
+    }
+}

data/app/assets/javascripts/lentil/buttonhandler.js

@@ -0,0 +1,25 @@
+function buttonhandler() {
+
+    $(".like-btn, .flag-confirm").click(function(e) {
+        button = $(this);
+        imageId = $(".fancybox-overlay, .fancybox-mobile, .image-show").attr("id");
+        
+        if (!$(button).is(".already-clicked")) {
+            url = $(button).attr("href");
+            $.post(url, function() {
+                $(button).addClass("already-clicked");
+                $("#" + imageId + " .text-overlay").find(".initial-state").addClass("already-clicked");
+            });
+        }
+
+        if ($(button).is(".like-btn")) {
+            $("#" + imageId + " .like-btn").toggle();
+        } else if ($(button).is(".flag-confirm")) {
+            $("#" + imageId + " .flag-btn.initial-state").remove();
+            $("#" + imageId + " .flag-btn.secondary-state").show();
+            $('.modal').modal('hide');
+        }
+        
+        e.preventDefault();
+    });
+}

data/app/assets/javascripts/lentil/event_tracking.js.erb

@@ -0,0 +1,80 @@
+$(function () {
+
+	Lentil = {
+		// For any event that will load a new page use this pause to allow the event time to
+		// be tracked before going to new page.
+		tracking_pause: function(wait_time){
+		    var date = new Date();
+			var curDate = null;
+			do {
+				curDate = new Date();
+			} while(curDate-date < wait_time);
+		},
+		// In production it tracks the event to Google. It expects an array of everything that
+		// should be sent to Google.
+		ga_track: function(values){
+			<% if Rails.env == 'production' %>
+                <% if !google_analytics_tracker.nil? %>
+				    _gaq.push(values);
+                <% end %>
+			<% else %>
+				console.log(values);
+			<% end %>
+		}
+	}
+
+    // FIXME: All of these event handlers could probably be DRY'd up at some point, but doing it this way
+    // makes it easier to see the patterns first.
+
+	// click on image
+	$(document.body).on('click', '.images .fancybox', function(){
+		var image_id = $(this).parent().attr('id');
+		Lentil.ga_track(['_trackEvent', 'image', 'click', image_id]);
+	});
+
+	// share button
+	$(document.body).on('click', '.share', function(){
+		var image_id = $(this).data('imageId');
+		Lentil.ga_track(['_trackEvent', 'image_view', 'share', image_id]);
+	});
+    // facebook
+    $(document.body).on('click', '.facebook', function(){
+        var image_id = $(this).data('imageId');
+        Lentil.ga_track(['_trackEvent', 'image_view', 'facebook', image_id]);
+    });
+    // twitter
+    $(document.body).on('click', '.twitter', function(){
+        var image_id = $(this).data('imageId');
+        Lentil.ga_track(['_trackEvent', 'image_view', 'twitter', image_id]);
+    });
+    // email
+    $(document).on('click', '.email', function(){
+        var image_id = $(this).data('imageId');
+        Lentil.ga_track(['_trackEvent', 'image_view', 'email', image_id]);
+    });
+
+    // like
+    $(document.body).on('click', '.like-btn', function(){
+        var image_id = $(this).data('imageId');
+        var like_state;
+        if ($(this).hasClass('already-clicked')) {
+            like_state = 'unlike';
+        } else {
+            like_state = 'like';
+        }
+
+        Lentil.ga_track(['_trackEvent', 'image_view', like_state, image_id]);
+    });
+
+    // flag
+    $(document.body).on('click', '.flag-btn', function(){
+        var image_id = $(this).data('imageId');
+        Lentil.ga_track(['_trackEvent', 'image_view', 'flag', image_id]);
+    });
+
+    // picking a battle image
+    $(document.body).on('click', '.battle-form', function(){
+        var image_id = $(this).attr('value');
+        Lentil.ga_track(['_trackEvent', 'battle_view', 'pick', image_id]);
+    });
+});

data/app/assets/javascripts/lentil/imageerrors.js

@@ -0,0 +1,8 @@
+function addimageerrors() {
+    $("img.instagram-img, img.battle-img, img.fancybox-img").on("error", function () {
+        $(this).parents("div.image-tile, li.image-animate-tile").remove();
+        if ($("body.images_animate") || $("body.images_staff_picks_animate")) {
+            addanimatedimages();
+        }
+    });
+}

data/app/assets/javascripts/lentil/images.js

@@ -0,0 +1,55 @@
+// Place all the behaviors and hooks related to the matching controller here.
+// All this logic will automatically be available in application.js.
+//= require lentil/buttonhandler
+//= require fancybox
+//= require lentil/addfancybox
+//= require infinitescroll/jquery.infinitescroll
+//= require bootstrap
+//= require lentil/addinfinitescroll
+//= require lentil/imageerrors
+//= require lentil/addanimatedimages
+//= require touchswipe/jquery.touchSwipe
+
+// wrapped in anonymous function so FANCYBOX_SPINNER
+// is accessible by both addinfinitescroll and addfancybox
+(function() {
+
+    var FANCYBOX_SPINNER;
+
+    // fancybox spinner options
+    opts = {
+        lines: 13, // The number of lines to draw
+        length: 7, // The length of each line
+        width: 4, // The line thickness
+        radius: 10, // The radius of the inner circle
+        corners: 1, // Corner roundness (0..1)
+        rotate: 0, // The rotation offset
+        color: '#fff', // #rgb or #rrggbb
+        speed: 1, // Rounds per second
+        trail: 60, // Afterglow percentage
+        shadow: false, // Whether to render a shadow
+        hwaccel: false, // Whether to use hardware acceleration
+        className: 'spinner', // The CSS class to assign to the spinner
+        zIndex: 2e9, // The z-index (defaults to 2000000000)
+        top: 'auto', // Top position relative to parent in px
+        left: 'auto' // Left position relative to parent in px
+    };
+
+    $(document).ready(function() {
+
+        $('body').on('touchstart.dropdown', '.dropdown-menu', function (e) { e.stopPropagation(); });
+
+        addimageerrors();
+
+        if (window.history.pushState) {
+            addfancybox();
+            listenforpopstate();
+            addinfinitescroll();
+        }
+
+        if ($("body.image-show")) {
+            buttonhandler();
+        }
+
+    });
+  })();

data/app/assets/javascripts/lentil/thisorthat.js.erb

@@ -0,0 +1,129 @@
+// Place all the behaviors and hooks related to the matching controller here.
+// All this logic will automatically be available in application.js.
+//= require imagesloaded/jquery.imagesloaded.min.js
+//= require spin/spin.js
+(function() {
+    var BATTLE_SPINNER,
+        ERROR_TEXT;
+
+    ERROR_TEXT = '<div class="wrapper battle-wrapper">' +
+                 '<div class="alert alert-error" style="margin-top:70px;">' +
+                 '<h4 style="padding-bottom:20px;">Error.</h4>' +
+                 '<p>Sorry, there was a problem loading images. Please reload the page.</p></div></div>';
+
+    // Set AJAX timeout
+    $.rails.ajax = function(options) {
+      if (!options.timeout) {
+        options.timeout = 20000;
+      }
+      return $.ajax(options);
+    };
+
+    $(document).ready(function() {
+        $('.battle-inner:eq(0)').imagesLoaded(function($images, $proper, $broken) {
+            if ($broken.length > 0) {
+                $('.battle-wrapper:eq(0)').replaceWith(ERROR_TEXT);
+            }
+        });
+    });
+
+    $(document).on('ajax:beforeSend', function (evt, xhr, settings) {
+        var img,
+            opts,
+            submitButton,
+            target;
+
+        // Disable Buttons
+        submitButton = $(this).find('button[name="vote"]');
+        submitButton.attr('disabled', 'disabled');
+
+        // Show Spinner
+        $('#spinner-overlay').show();
+        opts = {
+            lines: 13, // The number of lines to draw
+            length: 7, // The length of each line
+            width: 4, // The line thickness
+            radius: 10, // The radius of the inner circle
+            corners: 1, // Corner roundness (0..1)
+            rotate: 0, // The rotation offset
+            color: '#fff', // #rgb or #rrggbb
+            speed: 1, // Rounds per second
+            trail: 60, // Afterglow percentage
+            shadow: false, // Whether to render a shadow
+            hwaccel: false, // Whether to use hardware acceleration
+            className: 'spinner', // The CSS class to assign to the spinner
+            zIndex: 2e9, // The z-index (defaults to 2000000000)
+            top: 'auto', // Top position relative to parent in px
+            left: 'auto' // Left position relative to parent in px
+        };
+        target = document.getElementById('spinner-overlay');
+        BATTLE_SPINNER = new Spinner(opts).spin(target);
+
+    }).on('ajax:success', function (evt, data, status, xhr) {
+        // Insert new images into hidden div
+        $('.battle-inner:eq(1)').replaceWith(data);
+
+        // Once images are loaded, execute callback
+        $('.battle-inner:eq(1)').imagesLoaded(function($images, $proper, $broken) {
+            var wrap;
+
+            if ($broken.length > 0) {
+                // Insert error text into DOM
+                $('.battle-wrapper:eq(0)').replaceWith(ERROR_TEXT);
+                $('.battle-wrapper:eq(0)').show();
+
+                // Hide Spinner
+                $('#spinner-overlay').hide();
+                BATTLE_SPINNER.stop();
+            } else {
+                 // Remove old images
+                $('.battle-wrapper:eq(0)').remove();
+
+                // Div with new images moves up in DOM, display
+                $('.battle-wrapper:eq(0)').show();
+
+                // Hide Spinner
+                $('#spinner-overlay').hide();
+                BATTLE_SPINNER.stop();
+
+                // Insert placeholder div for next set of images
+                wrap = '<div class="wrapper battle-wrapper" style="display:none">' +
+                       '<div class="grid battle-inner"></div></div>';
+                $(wrap).insertAfter('.battle-wrapper:eq(0)');
+            }
+        });
+    }).on('ajax:error', function (evt, xhr, status) {
+        var error,
+            errors,
+            ajaxError;
+
+        // Hide Spinner
+        $('#spinner-overlay').hide();
+        BATTLE_SPINNER.stop();
+
+        if (status === 'timeout') {
+            errors = {Message: "Request timed out. Please reload the page and try again."};
+        } else {
+             try {
+                // Populate ajaxError with the comment errors
+                errors = $.parseJSON(xhr.responseText);
+            } catch (err) {
+                // If the responseText is not valid JSON, populate errors with a generic error message.
+                errors = {Message: "Please reload the page and try again."};
+            }
+        }
+
+        // Build an unordered list from the list of errors
+        ajaxError = '<div class="wrapper battle-wrapper">' +
+                    '<div class="alert alert-error" style="margin-top:70px;">' +
+                    '<h4 style="padding-bottom:20px;">Error</h4><p><ul>';
+
+        for (error in errors) {
+            ajaxError += "<li>" + error + ': ' + errors[error] + "</li> ";
+        }
+
+        ajaxError += "</ul></p></div></div>";
+
+        $('.battle-wrapper:eq(0)').replaceWith(ajaxError);
+    });
+})();

data/app/assets/stylesheets/active_admin.css.scss

@@ -0,0 +1,31 @@
+// SASS variable overrides must be declared before loading up Active Admin's styles.
+//
+// To view the variables that Active Admin provides, take a look at
+// `app/assets/stylesheets/active_admin/mixins/_variables.css.scss` in the
+// Active Admin source.
+//
+// For example, to change the sidebar width:
+// $sidebar-width: 242px;
+
+// Active Admin's got SASS!
+@import "active_admin/mixins";
+@import "active_admin/base";
+
+@import "admin/moderation";
+
+// Overriding any non-variable SASS must be done after the fact.
+// For example, to change the default status-tag color:
+//
+//   body.active_admin {
+//      .status_tag { background: #6090DB; }
+//   }
+//
+// Notice that Active Admin CSS rules are nested within a
+// 'body.active_admin' selector to prevent conflicts with
+// other pages in the app. It is best to wrap your changes in a 
+// namespace so they are properly recognized. You have options
+// if you e.g. want different styles for different namespaces:
+//
+// .active_admin       applies to any Active Admin namespace
+// .admin_namespace    applies to the admin namespace (eg: /admin)
+// .other_namespace    applies to a custom namespace named other (eg: /other)

data/app/assets/stylesheets/admin/moderation.css.scss

@@ -0,0 +1,65 @@
+@import "chosen";
+
+body.admin_namespace {
+    .moderation_thumbnail {
+        width: 250px;
+        height: 250px;
+    }
+
+    .dash_thumbnail {
+        width: 100px;
+        height: 100px;
+    }
+
+    .moderation td {
+        min-width: 100px
+    }
+
+    li.boolean {
+        list-style: none;
+    }
+
+    li.radio, li.select, li.string, li.text {
+        list-style: none;
+    }
+
+    // These selectors are nasty. Used to format radio buttons.
+    form li.moderation_radio fieldset ol > li label {
+        width: 100px;
+    }
+
+    li.moderation_radio fieldset ol > li label input {
+        margin-right:10px;
+    }
+
+    // Format Staff Like checkbox. Need to adjust selector to avoid !important
+    li.moderation_checkbox {
+        margin-top: 20px !important;
+    }
+
+    li.moderation_checkbox label input {
+        margin-right:10px;
+    }
+
+    li.moderation_checkbox label {
+        color: #5e6469;
+        font-weight: bold;
+    }
+
+    .remove-tagset {
+        padding-top: 25px;
+    }
+
+    .remove-tagset input{
+        margin-right: 5px;
+    }
+
+    .submit_wrapper {
+        width: 25%;
+        float:left;
+    }
+
+    .pagination_information {
+        font-size: 10px;
+    }
+}