picky-client 0.2.4 → 0.3.0

data/sinatra_prototype/stylesheets/stylesheet.css

@@ -0,0 +1,175 @@
+body {
+  text-align: center;
+  font-family: Lucida Grande; }
+
+img {
+  margin: -2px 0px 0px; }
+
+p span.explanation {
+  color: #999999; }
+
+#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/sinatra_prototype/stylesheets/stylesheet.sass

@@ -0,0 +1,216 @@
+body
+  :text-align center
+  :font-family Lucida Grande
+
+img
+  :margin -2px 0px 0px
+
+p
+  span.explanation
+    :color #999
+
+#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/sinatra_prototype/views/search.haml

@@ -0,0 +1,107 @@
+!!!
+%html{ :lang => 'en' }
+  %head
+    %link{:href => "stylesheets/stylesheet.css", :media => "screen", :rel => "stylesheet", :type => "text/css"}/
+    = js 'jquery-1.4.3.min'
+    = js 'jquery.scrollTo-1.4.2'
+    = js 'jquery.timer'
+    
+    = js 'picky.extensions'
+    = js 'picky.translations'
+    = js 'picky.data'
+    = js 'picky.view'
+    = js 'picky.backend'
+    = js 'picky.controller'
+    = js 'picky.client'
+    = js 'picky.addination'
+    = js 'picky.results_renderer'
+    = js 'picky.allocation_renderer'
+    = js 'picky.allocations_cloud'
+    
+    / = js 'picky.min'
+  %body
+    %img{:src => "images/picky.png"}/
+    %p
+      %a{:href => "http://floere.github.com/picky"} Back to the Picky documentation.
+    %p
+      Try a few examples
+      = succeed ":" do
+        %span.explanation (on a simple database with 540 books - note that the server is on Heroku and needs a little time to ramp up)
+    %p
+      A simple word,
+      = succeed "." do
+        %a{:href => "#", :onclick => "pickyClient.insert('alan');"} alan
+      %span.explanation
+        (Finds Alan in the title, and Alans who wrote books. The title is ranked higher due to weighing.)
+        %span
+    %p
+      With qualifier,
+      = succeed "." do
+        %a{:href => "#", :onclick => "pickyClient.insert('title:women');"} title:women
+      %span.explanation
+        (Finds "women*" just in titles.)
+        %span
+    %p
+      With similarity,
+      = succeed "." do
+        %a{:href => "#", :onclick => "pickyClient.insert('pinchn~');"} pinchn~
+      %span.explanation (Finds "pynchon", note: Only title in example with similarity. Uses a combination of double metaphone and Levenshtein.)
+    %p
+      More complex,
+      = succeed "." do
+        %a{:href => "#", :onclick => "pickyClient.insert('title:lyterature~');"} title:lyterature~
+      %span.explanation (Finds similar titles)
+    %p
+      With choice,
+      = succeed "." do
+        %a{:href => "#", :onclick => "pickyClient.insert('sp');"} sp
+      %span.explanation (Finds "sp*" in multiple categories. Choose the one you're looking for.)
+    %p
+      More complex,
+      = succeed "." do
+        %a{:href => "#", :onclick => "pickyClient.insert('soc* s');"} soc* s
+      %span.explanation (this is where Picky really shines, "the title started with soc, and the author starts with s")
+    = Picky::Helper.cached_interface
+    :javascript
+      pickyClient = new PickyClient({
+        // A full query displays the rendered results.
+        //
+        full: '/search/full',
+        
+        // A live query just updates the count.
+        //
+        live: '/search/live',
+        
+        // showResultsLimit: 10, // Optional. Default is 10.
+        
+        // before: function(params, query, offset) {  }, // Optional. Before Picky sends any data.
+        // success: function(data, query) {  }, // Optional. Just after Picky receives data. (Get a PickyData object)
+        // after: function(data, query) {  }, // Optional. After Picky has handled the data and updated the view.
+        
+        // This is used to generate the correct query strings, localized. E.g. "subject:war".
+        // Optional. If you don't give these, the field identifier given in the Picky server is used.
+        //
+        qualifiers: {
+          en:{
+            subjects:  'subject'
+          }
+        },
+        
+        // This is used to explain the preceding word in the suggestion text, localized. E.g. "Peter (author)".
+        // Optional. Default are the field identifiers from the Picky server.
+        //
+        explanations: {
+          en:{
+            title:     'titled',
+            author:    'written by',
+            isbn:      'ISBN-13',
+            year:      'published in',
+            publisher: 'published by',
+            subjects:  'topics'
+          }
+        }
+      });
+      
+      // An initial search text, prefilled.
+      //
+      pickyClient.insert('italy');