picky-generators 1.1.0

data/prototypes/client/sinatra/stylesheets/stylesheet.css

@@ -0,0 +1,184 @@
+body {
+  text-align: center;
+  font-family: Lucida Grande; }
+
+img {
+  margin: -2px 0px 0px; }
+
+p span.explanation {
+  color: #999999; }
+
+pre {
+  padding: 10px;
+  background-color: #efede5; }
+
+div.content {
+  width: 800px;
+  margin: 0 auto;
+  text-align: left; }
+
+#picky {
+  text-align: left;
+  margin: 0px auto;
+  width: 560px;
+  overflow: hidden; }
+  #picky .dashboard {
+    position: relative;
+    overflow: hidden;
+    background-color: lightGrey;
+    padding: 5px 5px 7px 5px;
+    height: 26px;
+    margin-bottom: 3px; }
+  #picky .status {
+    float: left;
+    width: 45px;
+    height: 26px;
+    line-height: 26px;
+    text-align: center;
+    padding: 0 0 0 2px;
+    font-weight: bold;
+    color: white;
+    margin-right: 5px; }
+  #picky .status.alert {
+    background-color: lightgreen; }
+  #picky .results {
+    margin-top: 0px;
+    padding: 0px; }
+    #picky .results div.book {
+      background-color: #ffeeee;
+      padding: 5px 25px;
+      margin: 3px 0px; }
+    #picky .results em {
+      font-style: normal;
+      background-color: #fff196; }
+    #picky .results .item {
+      display: block;
+      padding: 10px; }
+    #picky .results .addination {
+      position: relative;
+      text-align: center;
+      padding: 7px 5px 5px 5px;
+      background-color: #eeeeee;
+      color: #276abb;
+      cursor: pointer; }
+      #picky .results .addination .tothetop {
+        position: absolute;
+        top: 4px;
+        right: 0px; }
+        #picky .results .addination .tothetop a {
+          display: block;
+          width: 20px;
+          height: 20px; }
+    #picky .results .info {
+      color: #555555;
+      background-color: #eeeeee;
+      padding: 6px 5px 5px 8px; }
+      #picky .results .info .tothetop {
+        float: right;
+        margin-top: -4px; }
+  #picky .feedback {
+    width: 460px;
+    float: left;
+    border: 1px solid #cccccc;
+    padding: 0;
+    margin: 0; }
+    #picky .feedback .reset {
+      float: right;
+      width: 18px;
+      height: 18px;
+      margin: 3px 3px 0px 0px;
+      cursor: pointer;
+      opacity: 0; }
+  #picky .empty .status {
+    background-color: #8cacda; }
+  #picky .empty .feedback {
+    background-color: #d0e2ff; }
+  #picky .none .status {
+    background-color: red; }
+  #picky .none .feedback {
+    background-color: #ffdddd; }
+  #picky .support .status {
+    background-color: #ff6600; }
+  #picky .support .feedback {
+    background-color: #faf3d0; }
+  #picky .ok .status {
+    background-color: #09be01; }
+  #picky .ok .feedback {
+    background-color: #bcf0b3; }
+  #picky input.search_button {
+    margin: 5px 15px; }
+  #picky input.query {
+    float: left;
+    width: 380px;
+    height: 100%;
+    font-size: 1em;
+    font-weight: bold;
+    border-style: solid;
+    border-width: 0px 0px 3px 0px;
+    border-color: transparent;
+    margin: 0;
+    padding: 4px 0 0 0;
+    outline: none;
+    background: none; }
+  #picky .allocations {
+    clear: both;
+    overflow: hidden;
+    background-color: white;
+    padding-bottom: 2px; }
+    #picky .allocations ol.hidden {
+      display: none; }
+    #picky .allocations ol.more:hover {
+      background-color: #cccccc;
+      cursor: pointer; }
+    #picky .allocations ol.more {
+      background-color: #eeeeee;
+      display: none;
+      text-align: center;
+      height: 32px;
+      line-height: 32px; }
+      #picky .allocations ol.more li {
+        text-align: center; }
+    #picky .allocations ol {
+      list-style-position: outside;
+      list-style: none;
+      padding: 0;
+      margin: 0px;
+      overflow: hidden; }
+      #picky .allocations ol li {
+        margin: 0px;
+        margin-bottom: 3px;
+        padding: 10px 13px;
+        cursor: pointer;
+        display: block;
+        font: menu;
+        font-size: 1em;
+        line-height: 16px;
+        background-color: #f3f3f3;
+        overflow: hidden;
+        color: #276abb; }
+        #picky .allocations ol li .text {
+          max-width: 90%;
+          float: left; }
+        #picky .allocations ol li .count {
+          float: right;
+          color: #cccccc; }
+      #picky .allocations ol li:hover {
+        background-color: #d0e2ff; }
+    #picky .allocations .company, #picky .allocations .person {
+      width: 49%; }
+    #picky .allocations .person {
+      float: left;
+      margin-right: 10px; }
+    #picky .allocations .company {
+      float: right; }
+  #picky .no_results {
+    display: none;
+    clear: both;
+    overflow: hidden; }
+    #picky .no_results ul {
+      list-style-type: disc;
+      padding-left: 13px; }
+    #picky .no_results a {
+      display: block; }
+  #picky > .info {
+    display: none; }

data/prototypes/client/sinatra/stylesheets/stylesheet.sass

@@ -0,0 +1,225 @@
+body
+  :text-align center
+  :font-family Lucida Grande
+
+img
+  :margin -2px 0px 0px
+
+p
+  span.explanation
+    :color #999
+
+pre
+  :padding 10px
+  :background-color #EFEDE5
+
+div.content
+  :width 800px
+  :margin 0 auto
+  :text-align left
+  
+#picky
+  :text-align left
+  :margin 0px auto
+  :width 560px
+  
+  .dashboard
+    :position relative
+    :overflow hidden
+    :background-color lightGrey
+    :padding 5px 5px 7px 5px
+    :height 26px
+    :margin-bottom 3px
+
+  .status
+    :float left
+    :width  45px
+    :height 26px
+    :line-height 26px
+    :text-align center
+    :padding 0 0 0 2px
+    :font-weight bold
+    :color white
+    :margin-right 5px
+  .status.alert
+    :background-color lightgreen
+    
+  .results
+    :margin-top 0px
+    :padding 0px
+    
+    div.book
+      :background-color #ffeeee
+      :padding 5px 25px
+      :margin 3px 0px
+    
+    em
+      :font-style normal
+      :background-color #FFF196
+    
+    .item
+      :display block
+      :padding 10px
+        
+    .addination
+      :position relative
+      :text-align center
+      :padding 7px 5px 5px 5px
+      :background-color #eee
+      :color #276ABB
+      :cursor pointer
+      
+      .tothetop
+        :position absolute
+        :top 4px
+        :right 0px
+      
+        a
+          :display block
+          :width 20px
+          :height 20px
+        
+    .info
+      :color #555
+      :background-color #eee
+      :padding 6px 5px 5px 8px
+        
+      .tothetop
+        :float right
+        :margin-top -4px
+        
+  :overflow hidden
+
+  // width only set because of IE
+  .feedback
+    :width 460px
+    :float left
+    :border 1px solid #ccc
+    :padding 0
+    :margin 0
+
+    .reset
+      :float right
+      :width  18px
+      :height 18px
+      :margin 3px 3px 0px 0px
+      :cursor pointer
+      :opacity 0
+
+  // Blue
+  .empty
+    .status
+      :background-color #8cacda
+    .feedback
+      :background-color #D0E2FF
+  // Red
+  .none
+    .status
+      :background-color #ff0000
+    .feedback
+      :background-color #ffdddd
+  // Orange
+  .support
+    .status
+      :background-color #ff6600
+    .feedback
+      :background-color #faf3d0
+  // Green
+  .ok
+    .status
+      :background-color #09be01
+    .feedback
+      :background-color #bcf0b3
+  
+  input.search_button
+    :margin 5px 15px
+  
+  input.query
+    :float left
+    :width 380px
+    :height 100%
+    :font-size 1em
+    :font-weight bold
+    :border-style solid
+    :border-width 0px 0px 3px 0px
+    :border-color transparent
+    :margin 0
+    :padding 4px 0 0 0
+    :outline none
+    :background none
+
+  .allocations
+    :clear both
+    :overflow hidden
+    :background-color white
+    :padding-bottom 2px
+      
+    ol.hidden
+      :display none
+    
+    ol.more:hover
+      :background-color #ccc
+      :cursor pointer
+    ol.more
+      :background-color #eee
+      :display none
+      :text-align center
+      :height 32px
+      :line-height 32px
+      
+      li
+        :text-align center
+        
+    ol
+      :list-style-position outside
+      :list-style none
+      :padding 0
+      :margin 0px
+      :overflow hidden
+      
+      li
+        :margin 0px
+        :margin-bottom 3px
+        :padding 10px 13px
+        :cursor pointer
+        :display block
+        :font menu
+        :font-size 1em
+        :line-height 16px
+        :background-color #f3f3f3
+        :overflow hidden
+        :color #276ABB
+        
+        .text
+          :max-width 90%
+          :float left
+          
+        .count
+          :float right
+          :color #ccc
+          
+      li:hover
+        :background-color #D0E2FF
+        
+    .company, .person
+      :width 49%
+    .person
+      :float left
+      :margin-right 10px
+    .company
+      :float right
+
+  .no_results
+    :display none
+    :clear both
+    :overflow hidden
+
+    ul
+      :list-style-type disc
+      :padding-left 13px
+
+    a
+      :display block
+
+  & > .info
+    :display none

data/prototypes/client/sinatra/views/configure.haml

@@ -0,0 +1,170 @@
+!!!
+%html{ :lang => 'en' }
+  %head
+    %link{:href => "stylesheets/stylesheet.css", :media => "screen", :rel => "stylesheet", :type => "text/css"}/
+  %body
+    %img{:src => "images/picky.png"}/
+    %p
+      %a{:href => "http://floere.github.com/picky"} To the Picky Homepage
+      \/
+      %a{:href => '/' } Back to the example
+    .content
+      %h1 Already made it this far? You're good!
+      %p I think you're ready for configuring me for your own purposes.
+      %h2 Configuring the Picky client.
+      %p
+        There are two places where you configure the Picky client:
+        %ol
+          %li
+            %a{ :href => '#controller' } In the controller.
+            (client to Picky server)
+          %li
+            %a{ :href => '#view' } In the view.
+            (javascript client interface)
+      %h2#controller Controller
+      %p
+        Open the file
+        %strong app.rb
+        and take a peek inside.
+      %p
+        First you need both a client instance for a
+        %strong full
+        or a
+        %strong live search
+        depending on what you need (Full gets results with IDs, Live without and is used for updating the counter).
+      %p
+        In the example, I called it
+        %strong FullBooks
+        and
+        %strong LiveBooks
+        respectively.
+        %code
+          %pre
+            :preserve
+              FullBooks = Picky::Client::Full.new :host => 'localhost', :port => 8080, :path => '/books/full'
+              LiveBooks = Picky::Client::Live.new :host => 'localhost', :port => 8080, :path => '/books/live'
+      %p
+        Both clients offer the options:
+        %dl
+          %dt
+            %strong host
+          %dd The Picky search server host.
+          %dt
+            %strong port
+          %dd The Picky search server port (see unicorn.rb in the server).
+          %dt
+            %strong path
+          %dd The Picky search path (see app/application.rb in the server for the mapping path => query).
+      %p
+        Then, use these Client instances in your actions. For example like this:
+        %code
+          %pre
+            :preserve
+              get '/search/full' do
+                results = FullBooks.search :query => params[:query], :offset => params[:offset]
+                results.extend Picky::Convenience
+                results.populate_with Book do |book|
+                  book.to_s
+                end
+                ActiveSupport::JSON.encode results
+              end
+      %p
+        This part gets a
+        %strong hash
+        with the results:
+        %code
+          %pre results = FullBooks.search :query => params[:query], :offset => params[:offset]
+      %p
+        This part takes the
+        %strong hash
+        and extends it with a few useful and convenient methods:
+        %code
+          %pre results.extend Picky::Convenience
+      %p
+        One of these methods is the
+        %strong populate_with
+        method which takes a
+        %strong model
+        as parameter, and then gets the corresponding
+        %strong model instances
+        for each id in the result.
+        %code
+          %pre
+            :preserve
+              results.populate_with Book do |book|
+                book.to_s
+              end
+        The
+        %strong book.to_s
+        simulates rendering a book.
+        You can do whatever with the book instance if you just return a rendered thing that's supposed to be shown in the front end.
+      %p
+        If you don't want to render in the controller, you can do so in a view. In the controller just call
+        %code
+          %pre
+            results.populate_with Book
+        and then render the books in a view using:
+        %code
+          %pre
+            :preserve
+              results.entries do |book|
+                render book # or book.to_s, or however you like to render the book.
+              end
+      %p
+        At the end, encode the hash in JSON:
+        %code
+          %pre
+            ActiveSupport::JSON.encode results
+        That's it for the controller.
+      %p
+        All the steps in one:
+        %code
+          %pre
+            :preserve
+              FullBooks = Picky::Client::Full.new :host => 'localhost', :port => 8080, :path => '/books/full'
+              LiveBooks = Picky::Client::Live.new :host => 'localhost', :port => 8080, :path => '/books/live'
+              
+              get '/search/full' do
+                results = FullBooks.search :query => params[:query], :offset => params[:offset]
+                
+                results.extend Picky::Convenience
+                results.populate_with Book do |book|
+                  book.to_s
+                end
+                
+                ActiveSupport::JSON.encode results
+              end
+      %h2#view View
+      %p
+        The view is even easier. Just add the line
+        %code
+          %pre
+            \= Picky::Helper.cached_interface
+        if you use just one language, or
+        %code
+          %pre
+            \= Picky::Helper.interface :button => 'search', :no_results => 'No results!', :more => 'more'
+        if you use multiple languages.
+        (You'd use the options
+        %pre :button => t(:'search.button'), :no_results => t(:'search.no_results'), :more => t(:'search.more')
+        of course, with proper i18n)
+        The same options can be used for
+        %strong #cached_interface
+        but they will be cached, so you can only set them once and then reused.
+      %p
+        You're almost finished. Take a look at the file
+        %strong views/search.haml
+        where you'll find javascript at the end. It looks something like this:
+        %code
+          %pre
+            :preserve
+              :javascript
+                pickyClient = new PickyClient({
+                  // A full query displays the rendered results.
+                  //
+                  full: '/search/full',
+                  
+                  // etc.
+        Just take a look at the possible javascript client options in that file.
+      %p
+        %strong Good luck my friend! *waves several stubby pink tentacles*