locomotivecms-search 0.2.8 → 0.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: e0d77a299d4c7359a025c73c1b4fb26827bccfa7
-  data.tar.gz: f1aa0dafcd6ed41e9a3bedc75e2a8ddaf5d52632
+  metadata.gz: 246915f225f92f5fa56a2f0c0c83947c81b9c06c
+  data.tar.gz: c4115a28f882c64c91a4d696cd872be18e9af084
 SHA512:
-  metadata.gz: e97309380916b168800477fd67afe3f58ee99617f827fcc3c043817dca0ac9c7f7664d5e219be9f36ab490707f870469c925a3e654bbd495fd903a4c22e61295
-  data.tar.gz: f34fbb2c18c6350d6ce9410a4d535a793cb36558c428132229c72fd8ade5cd135e8b5f6aaef8985a5bff69a84783a07cfab854044414d0513863b3a6250bc14f
+  metadata.gz: 767fcad26f28603df7b9432cbda5c3ee79becd9c76883df1a843409f008c354fecad0de42d2ca3e8a1aa16bf070e17bf83197cbb3ea7f679966d3f7c5ea1280e
+  data.tar.gz: fe75439201ca932e61fa91d7787f39a7f65c1db52973c1633f06dbe1de4d2f78d47c3f60011f77f2f86f28e5a6ff85cec8a729c0b8dc010ac07f5eeaff768757

data/README.md

@@ -35,6 +35,24 @@ Just add this code:
 The important part is the action parameter, since __it must point to the slug of your search results page__.
 Also, the name of the search input must be "search".
 
+## Search from the back-office
+
+From the 0.3.0 version, this gem includes a search bar for your LocomotiveCMS back-office. This search bar uses the [typeahead](http://twitter.github.io/typeahead.js/) javascript plugin.
+
+The only requirement is to have the **LocomotiveCMS 2.5.x** version installed.
+
+In your **LocomotiveCMS main application** (the one embedding LocomotiveCMS), you need to add 2 files (or edit them if they already exist).
+
+In the *app/views/locomotive/shared/_main_app_head.html.haml* file, add these 2 lines:
+
+    = javascript_include_tag  'locomotive/search_bar'
+    = stylesheet_link_tag     'locomotive/search_bar'
+
+In the *app/views/locomotive/shared/_main_app_header.html.haml* file, add this line:
+
+      = render 'locomotive/shared/search_bar'
+
+
 ## Note for mongoid 2.x users
 
 If you are using the mongoid engine and still on 2.x, you must use locomotivecms-search version ~> 0.0.5

data/app/assets/javascripts/locomotive/search_bar.js.coffee

@@ -0,0 +1,12 @@
+#= require_tree ./views
+#= require locomotive/typeahead.js
+#= require_self
+
+# FIXME: are we doing alias_method_chain pattern here? :-)
+application_view_klass = Locomotive.Views.ApplicationView.prototype
+application_view_klass.render_without_search_bar = application_view_klass.render
+
+application_view_klass.render = ->
+  _.tap this.render_without_search_bar(), =>
+    search_bar_view = new Locomotive.Views.Shared.SearchBarView()
+    search_bar_view.render()

data/app/assets/javascripts/locomotive/views/shared/_search_bar_view.js.coffee

@@ -0,0 +1,63 @@
+Locomotive.Views.Shared ||= {}
+
+class Locomotive.Views.Shared.SearchBarView extends Backbone.View
+
+  el: '#search-bar'
+
+  initialize: ->
+    _.bindAll @, 'search'
+
+  render: ->
+    @enable_type_head()
+
+    @
+
+  enable_type_head: ->
+    $input = @$('input[type=text]')
+
+    @typeahead = $input.typeahead({
+        hint:       true
+        highlight:  true
+        minLength:  2
+      }, {
+        source:     @indexer(per_page: 10)
+        displayKey: 'title'
+        templates:
+          empty:      ich.no_search_entries_found
+          suggestion: ich.search_entry
+      }
+    )
+    .on 'typeahead:closed', (event, datum) =>
+      @$('.twitter-typeahead').removeClass('on').removeClass('opened')
+      # remove a UI bug if pressing the bottom key when closing the typeahead widget
+      $('a')[0].focus()
+
+    .on 'typeahead:selected', (event, suggestion, datum) =>
+      event.stopPropagation() & event.preventDefault()
+      window.location.href = suggestion.path
+
+    .data('ttTypeahead').dropdown.onSync 'datasetRendered', =>
+      dropdown = $input.data('ttTypeahead').dropdown
+
+      if dropdown.isEmpty
+        @$('.twitter-typeahead').removeClass('opened')
+      else
+        @$('.twitter-typeahead').addClass('opened')
+
+    @$('.twitter-typeahead').on 'click', ->
+      $(this).addClass('on').removeClass('opened')
+
+
+  indexer: (params) ->
+    (query, cb) =>
+      @search query, (success, content) =>
+        cb(content) if success
+      , params
+
+  search: (query, callback, params) ->
+    $.ajax
+      url:  @$('form').attr('action')
+      data: _.extend(params || {}, { query: query })
+      success: (data, statusText, xhr) =>
+        callback(true, data.results)
+      dataType: 'json'

data/app/assets/stylesheets/locomotive/search_bar.css.scss

@@ -0,0 +1,168 @@
+@import "locomotive/shared/helpers";
+@import "compass/css3";
+@import "compass/css3/border-radius";
+
+@mixin input-placeholder {
+  &.placeholder { @content; }
+  &:-moz-placeholder { @content; }
+  &::-moz-placeholder { @content; }
+  &:-ms-input-placeholder { @content; }
+  &::-webkit-input-placeholder { @content; }
+}
+
+#search-bar {
+  position: absolute;
+  top: 20px;
+  right: 5px;
+
+  .empty-message {
+    min-height: 60px;
+    line-height: 60px;
+    text-align: center;
+    color: #8b8d9a;
+    font-size: 13px;
+  }
+
+  .twitter-typeahead {
+    background: rgba(138, 140, 150, 0.3);
+    @include border-radius(25px);
+    border: 4px solid rgba(0, 0, 10, 0.5);
+    outline: none;
+    width: 31px;
+    line-height: 25px;
+    height: 31px;
+    padding: 0px;
+    margin: 0px;
+
+    @include transition-property(width);
+    @include transition-duration(0.1s);
+    @include transition-timing-function(ease-in);
+
+    input[type=text] {
+      display: inline-block;
+      width: 100%;
+      background: transparent !important;
+      border: none;
+      outline: none;
+      cursor: pointer;
+      line-height: 25px;
+
+      color: transparent;
+      @include input-placeholder {
+        color: transparent;
+      }
+    }
+
+    &.on {
+      width: 340px;
+      padding: 0px 10px 0px 28px;
+
+      input[type=text] {
+        color: #fff;
+        cursor: inherit;
+        @include input-placeholder {
+          color: rgba(255, 255, 255, 0.2);
+        }
+      }
+
+      input.tt-hint {
+        margin-left: 28px;
+      }
+    }
+
+    &.opened {
+      border-bottom: 0px;
+      @include border-bottom-radius(0px);
+    }
+  }
+
+  .tt-dropdown-menu {
+    z-index: 1100 !important;
+    background: white;
+    @include box-shadow(rgba(0, 0, 0, 0.5) 0px 0px 8px 0px);
+    width: 100%;
+    left: -4px !important;
+
+    background: rgba(255, 255, 255, 0.95);
+    @include border-bottom-radius(25px);
+    border: 4px solid #1c1c24;
+    border-top: 0px;
+
+    .search-entry {
+      border-top: 1px solid #eee;
+      padding: 5px;
+
+      h5 {
+        @include locomotive-link;
+        margin: 0 0 5px 0;
+        line-height: 20px;
+      }
+
+      .type {
+        float: right;
+        @include label;
+      }
+
+      .locale {
+        float: right;
+        position: relative;
+        top: -2px;
+        margin-right: 2px;
+      }
+
+      .highlight {
+        background: transparent;
+        color: #999;
+        margin: 0px;
+        padding: 0px;
+
+        strong, em {
+          color: #333;
+          font-weight: bold;
+        }
+      }
+
+      &:last-child {
+        min-height: 60px;
+      }
+    }
+
+    .tt-suggestion.tt-cursor {
+      background: #1F82BC;
+
+      .search-entry {
+        border-top-color: transparent;
+
+        h5 a {
+          color: #fff;
+        }
+
+        .highlight {
+          color: #ccc;
+
+          strong, em {
+            color: #111;
+          }
+        }
+      }
+
+      &:last-child {
+        @include border-bottom-radius(19px);
+      }
+    }
+  }
+
+  form {
+    position: relative;
+
+    &:before {
+      position: absolute;
+      top: 7px;
+      left: 12px;
+      font-family: FontAwesome;
+      content: "\f002";
+      color: rgba(9, 10, 15, 0.7);
+      font-size: 20px;
+    }
+  }
+}

data/app/controllers/locomotive/search_controller.rb

@@ -0,0 +1,20 @@
+module Locomotive
+  class SearchController < ::Locomotive::BaseController
+
+    skip_load_and_authorize_resource
+
+    respond_to :json
+
+    def index
+      results = self.search_service.from_backoffice(current_site, params[:query])
+      respond_with(results: results)
+    end
+
+    protected
+
+    def search_service
+      @search_service ||= Locomotive::SearchService.new
+    end
+
+  end
+end

data/app/models/locomotive/content_entry.rb

@@ -2,18 +2,26 @@ require_dependency Locomotive::Engine.root.join('app', 'models', 'locomotive', '
 
 Locomotive::ContentEntry.class_eval do
   include Locomotive::Search::Extension
-  
+
   search_by :options_for_search
-  
+
   def options_for_search
-    store = [:_slug, _label_field_name, :site_id, :content_type_slug]
-    content_type.entries_custom_fields.where(searchable: true).map(&:name) << {store: store}
+    store = [:search_type, :label, :_slug, :site_id, :content_type_slug]
+    content_type.entries_custom_fields.where(searchable: true).map(&:name) << { store: store }
+  end
+
+  def search_type
+    self.content_type.name
   end
-  
+
+  def label
+    self._label
+  end
+
   def content_type_slug
-    content_type.slug
+    self.content_type.slug
   end
-  
+
   def indexable_id
     if respond_to?(:site_id)
       "site_#{site_id}_#{content_type_slug}_#{id}"

data/app/models/locomotive/page.rb

@@ -8,10 +8,18 @@ Locomotive::Page.class_eval do
   field :searchable, type: Boolean, default: true
 
   ## behaviours ##
-  search_by [:title, :searchable_content, store: [:title, :site_id, :fullpath]], if: :is_searchable?
+  search_by [:title, :searchable_content, store: [:search_type, :label, :site_id, :fullpath]], if: :is_searchable?
 
   ## methods
 
+  def search_type
+    'page'
+  end
+
+  def label
+    self.title
+  end
+
   def indexable_id
     if respond_to?(:site_id)
       "site_#{site_id}_page_#{id}"
@@ -26,14 +34,14 @@ Locomotive::Page.class_eval do
 
   def searchable_content
     [].tap do |content|
-      # 1. add the editable elements
-      self.editable_elements.each do |element|
-        # we don't want to include fixed editable elements of children.
-        next if !element.is_a?(Locomotive::EditableText) || (element.fixed? && element.from_parent?)
-        content << element.content
-      end
+      # # 1. add the editable elements
+      # self.editable_elements.each do |element|
+      #   # we don't want to include fixed editable elements of children.
+      #   next if !element.is_a?(Locomotive::EditableText) || (element.fixed? && element.from_parent?)
+      #   content << element.content
+      # end
 
-      # 2. add the raw template
+      # add the raw template by rendering it (will render the editable elements)
 
       # get a simple version of the template. not need to apply the "layout"
       # for instance.

data/app/services/locomotive/search_service.rb

@@ -0,0 +1,52 @@
+module Locomotive
+  class SearchService
+
+    def from_backoffice(site, text, options = { radius: 150 })
+      # scope the search by the site
+      conditions = { 'site_id' => site._id }
+
+      # launch the search with the current engine
+      ::ActiveSearch.search(text, conditions, radius: 150).map do |entry|
+        # keep only what we really need to display in the suggestions list
+        entry.slice('label', 'locale', 'search_type').tap do |_entry|
+          _entry['path']         = entry_path(entry)
+          _entry['content']      = entry_content(entry)
+          _entry['with_locale']  = site.localized?
+        end
+      end
+    end
+
+    protected
+
+    def entry_content(entry)
+      content = nil
+
+      # get the first non blank highligthed field
+      entry['highlighted'].each do |name, value|
+        content = value if content.nil? && value.present?
+      end
+
+      content
+    end
+
+    def entry_path(entry)
+      case entry['original_type']
+      when 'Locomotive::Page'
+        page_path(entry['original_id'], entry['locale'])
+      when /^Locomotive::ContentEntry/
+        content_entry_path(entry['content_type_slug'], entry['original_id'], entry['locale'])
+      else
+        nil
+      end
+    end
+
+    def page_path(id, locale)
+      Locomotive::Engine.routes.url_helpers.edit_page_path(id, locale: locale)
+    end
+
+    def content_entry_path(content_type_slug, id, locale)
+      Locomotive::Engine.routes.url_helpers.edit_content_entry_path(content_type_slug, id, locale: locale)
+    end
+
+  end
+end

data/app/views/locomotive/shared/_search_bar.html.haml

@@ -0,0 +1,20 @@
+#search-bar
+  %form{ action: main_app.locomotive_search_path(:json) }
+    %input{ type: 'text', name: 'keywords', placeholder: 'Search for keywords within pages and content entries' }
+
+%script{ type: 'text/html', id: 'no_search_entries_found' }
+  .empty-message= t('.no_entries_found')
+
+%script{ type: 'text/html', id: 'search_entry' }
+  .search-entry
+    .inner
+      .type {{search_type}}
+      {{#with_locale}}
+      .locale
+        = flag_tag '{{locale}}'
+      {{/with_locale}}
+      .locale
+      %h5= link_to '{{label}}', '{{url}}'
+      .highlight {{{content}}}
+      .clear
+