rails_tipjar 0.1.0 → 0.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8a942f0f33f3ae7a78eda233a1dff1ce1a883a144ac1cad2a31e9849f212b708
-  data.tar.gz: f00214075a3e9008ddc7aa9b85d46caca6a6792ebbc185407c5dae07ccc114f8
+  metadata.gz: b20cb8427d06b557ced9867853f9acd14b7ba74cac80de9207316dd8f6cdb2ee
+  data.tar.gz: a89f5d9936f3efa1f714df6a56b542988709b8a6e99e96478b1f2f70d4713bfd
 SHA512:
-  metadata.gz: 7a437aedf1dd798d8bb7e76d364236f19c80b1ee3295c72df64477cbaa1ed1f4e51f494a32e5a53da8fa86fd42a7376dc7c53110e916fcd24020f9d6c6739819
-  data.tar.gz: 38d10e40392878cf99f43ed646a41401630f97340b97145b02b49ce9a48d8b49a716d5c4c2cb4bf1d59d873614cf5f404e4740d894cbb32045ac402d05f7de86
+  metadata.gz: 77a0e7430424741d748ea350bf629c1a92ccbf743649d6f45709e0e9767980a113206f171313a14548813948b992372d22ca57d2081ea92c2b2d4b63d5ff1e1b
+  data.tar.gz: cad8649848b878a8d26796a4fa29760d51e71ff1576d1bc09128d0de77bc784d65230ecf3830b6315bd864b5e53204e008d6a9335c8e7b2c0f3d78a9181e4aab

data/app/helpers/tipjar_helper.rb

@@ -6,20 +6,32 @@ module TipjarHelper
     custom_class = options[:class] || config.button_class
     z_index = options[:z_index] || config.z_index
     
+    # Inject CSS styles into the page once
+    tipjar_styles + tipjar_button_html(config, position, custom_class, z_index)
+  end
+  
+  private
+  
+  def tipjar_button_html(config, position, custom_class, z_index)
     # Simple direct link mode when payment_link is set
     if config.payment_link && !config.use_modal
+      position_style = position_inline_styles(position)
+      button_style = "#{position_style} z-index: #{z_index}; display: flex; align-items: center; padding: 0.75rem 1rem; background-color: #3b82f6; color: white; border-radius: 9999px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; cursor: pointer; border: none; font-size: 0.875rem; font-weight: 500; text-decoration: none; animation: tipjar-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;"
+      
       link_to config.payment_link,
               target: "_blank",
               rel: "noopener",
-              class: "tipjar-button #{config_position_classes(position)} #{custom_class}",
-              style: "z-index: #{z_index};" do
-        content_tag(:span, class: "tipjar-button-icon") do
+              class: "tipjar-button #{custom_class}",
+              style: button_style,
+              onmouseover: "this.style.backgroundColor='#2563eb'; this.style.transform='scale(1.05)'; this.querySelector('.tipjar-button-text').style.maxWidth='200px'; this.querySelector('.tipjar-button-text').style.marginLeft='0.5rem';",
+              onmouseout: "this.style.backgroundColor='#3b82f6'; this.style.transform='scale(1)'; this.querySelector('.tipjar-button-text').style.maxWidth='0'; this.querySelector('.tipjar-button-text').style.marginLeft='0';" do
+        content_tag(:span, style: "display: flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem;") do
           raw config.icon_svg
         end +
-        content_tag(:span, config.button_text, class: "tipjar-button-text")
+        content_tag(:span, config.button_text, class: "tipjar-button-text", style: "white-space: nowrap; max-width: 0; overflow: hidden; transition: all 0.3s ease; margin-left: 0;")
       end
     else
-      # Original modal mode
+      # Original modal mode - would need more work to be fully inline
       content_tag :div, 
                   class: "tipjar-container",
                   data: { 
@@ -41,6 +53,58 @@ module TipjarHelper
     end
   end
   
+  def tipjar_styles
+    return "" if @tipjar_styles_injected
+    @tipjar_styles_injected = true
+    
+    content_tag :style do
+      <<~CSS.html_safe
+        @keyframes tipjar-pulse {
+          0%, 100% { opacity: 1; }
+          50% { opacity: 0.8; }
+        }
+        
+        @keyframes tipjar-coin-drop {
+          0% {
+            transform: translateY(0) rotate(0deg);
+            opacity: 0;
+          }
+          20% {
+            opacity: 1;
+          }
+          80% {
+            transform: translateY(7px) rotate(180deg);
+            opacity: 1;
+          }
+          100% {
+            transform: translateY(9px) rotate(180deg);
+            opacity: 0;
+          }
+        }
+        
+        .tipjar-coin-animation {
+          animation: tipjar-coin-drop 2s ease-in-out infinite;
+          transform-origin: center;
+        }
+      CSS
+    end
+  end
+  
+  def position_inline_styles(position)
+    case position
+    when :bottom_right
+      "position: fixed; bottom: 1rem; right: 1rem;"
+    when :bottom_left
+      "position: fixed; bottom: 1rem; left: 1rem;"
+    when :top_right
+      "position: fixed; top: 1rem; right: 1rem;"
+    when :top_left
+      "position: fixed; top: 1rem; left: 1rem;"
+    else
+      "position: fixed; bottom: 1rem; right: 1rem;"
+    end
+  end
+  
   def tipjar_link(text = nil, options = {})
     config = RailsTipjar.config
     text ||= config.button_text
@@ -74,8 +138,6 @@ module TipjarHelper
     }
   end
   
-  private
-  
   def config_position_classes(position)
     case position
     when :bottom_right

data/lib/rails_tipjar/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module RailsTipjar
-  VERSION = "0.1.0"
+  VERSION = "0.2.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: rails_tipjar
 version: !ruby/object:Gem::Version
-  version: 0.1.0
+  version: 0.2.0
 platform: ruby
 authors:
 - Justin Paulson
@@ -60,6 +60,7 @@ files:
 - lib/rails_tipjar/configuration.rb
 - lib/rails_tipjar/engine.rb
 - lib/rails_tipjar/version.rb
+- rails_tipjar-0.1.0.gem
 - sig/rails_tipjar.rbs
 homepage: https://github.com/justinpaulson/rails_tipjar
 licenses: []