caboose-cms 0.5.206 → 0.5.207
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +8 -8
- data/app/assets/stylesheets/caboose/modal_main.css +372 -0
- data/app/controllers/caboose/fonts_controller.rb +48 -0
- data/app/controllers/caboose/modification_value_input_fields_controller.rb +108 -0
- data/app/controllers/caboose/sites_controller.rb +1 -0
- data/app/models/caboose/core_plugin.rb +1 -0
- data/app/models/caboose/font.rb +7 -0
- data/app/models/caboose/modification_value_input_field.rb +21 -0
- data/app/models/caboose/schema.rb +8 -0
- data/app/models/caboose/site.rb +1 -0
- data/app/views/caboose/checkout/thanks.html.erb +1 -1
- data/app/views/caboose/fonts/admin_index.html.erb +438 -0
- data/app/views/caboose/modification_value_input_fields/admin_edit.html.erb +78 -0
- data/app/views/caboose/orders_mailer/fulfillment_new_order.html.erb +114 -0
- data/app/views/caboose/sites/admin_edit.html.erb +2 -0
- data/config/routes.rb +9 -1
- data/lib/caboose/version.rb +1 -1
- metadata +9 -2
|
@@ -146,6 +146,7 @@ module Caboose
|
|
|
146
146
|
when 'description' then site.description = value
|
|
147
147
|
when 'under_construction_html' then site.under_construction_html = value
|
|
148
148
|
when 'use_store' then site.use_store = value
|
|
149
|
+
when 'use_fonts' then site.use_fonts = value
|
|
149
150
|
when 'use_retargeting' then site.use_retargeting = value
|
|
150
151
|
when 'custom_css' then site.custom_css = value
|
|
151
152
|
when 'custom_js' then site.custom_js = value
|
|
@@ -9,6 +9,7 @@ class Caboose::CorePlugin < Caboose::CaboosePlugin
|
|
|
9
9
|
item = { 'id' => 'core', 'text' => 'Settings', 'children' => [] }
|
|
10
10
|
item['children'] << { 'id' => 'blocktypes' , 'text' => 'AB Test Variants' , 'href' => '/admin/ab-variants' , 'modal' => false } if user.is_allowed('abvariants' , 'view')
|
|
11
11
|
item['children'] << { 'id' => 'blocktypes' , 'text' => 'Block Types' , 'href' => '/admin/block-types' , 'modal' => false } if user.is_allowed('blocktypes' , 'view')
|
|
12
|
+
item['children'] << { 'id' => 'fonts' , 'text' => 'Fonts' , 'href' => '/admin/fonts' , 'modal' => false } if user.is_allowed('fonts' , 'view') if site.use_fonts
|
|
12
13
|
item['children'] << { 'id' => 'redirects' , 'text' => 'Permanent Redirects' , 'href' => '/admin/redirects' , 'modal' => false } if user.is_allowed('redirects' , 'view')
|
|
13
14
|
item['children'] << { 'id' => 'permissions' , 'text' => 'Permissions' , 'href' => '/admin/permissions' , 'modal' => false } if user.is_allowed('permissions' , 'view')
|
|
14
15
|
item['children'] << { 'id' => 'roles' , 'text' => 'Roles' , 'href' => '/admin/roles' , 'modal' => false } if user.is_allowed('roles' , 'view')
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
|
|
2
|
+
module Caboose
|
|
3
|
+
class ModificationValueInputField < ActiveRecord::Base
|
|
4
|
+
self.table_name = 'store_modification_value_input_fields'
|
|
5
|
+
self.primary_key = 'id'
|
|
6
|
+
|
|
7
|
+
belongs_to :modification_value, :class_name => 'Caboose::ModificationValue'
|
|
8
|
+
attr_accessible :id,
|
|
9
|
+
:modification_value_id,
|
|
10
|
+
:sort_order,
|
|
11
|
+
:name,
|
|
12
|
+
:description,
|
|
13
|
+
:field_type,
|
|
14
|
+
:default_value,
|
|
15
|
+
:width,
|
|
16
|
+
:height,
|
|
17
|
+
:options,
|
|
18
|
+
:options_url
|
|
19
|
+
|
|
20
|
+
end
|
|
21
|
+
end
|
|
@@ -278,6 +278,13 @@ class Caboose::Schema < Caboose::Utilities::Schema
|
|
|
278
278
|
[ :under_construction , :boolean, { :default => false }],
|
|
279
279
|
[ :forward_to_primary , :boolean, { :default => false }]
|
|
280
280
|
],
|
|
281
|
+
Caboose::Font => [
|
|
282
|
+
[ :site_id , :integer ],
|
|
283
|
+
[ :name , :string ],
|
|
284
|
+
[ :family , :string ],
|
|
285
|
+
[ :variant , :string ],
|
|
286
|
+
[ :url , :string ]
|
|
287
|
+
],
|
|
281
288
|
Caboose::GiftCard => [
|
|
282
289
|
[ :site_id , :integer ],
|
|
283
290
|
[ :name , :string ],
|
|
@@ -607,6 +614,7 @@ class Caboose::Schema < Caboose::Utilities::Schema
|
|
|
607
614
|
[ :description , :text ],
|
|
608
615
|
[ :under_construction_html , :text ],
|
|
609
616
|
[ :use_store , :boolean , { :default => false }],
|
|
617
|
+
[ :use_fonts , :boolean , { :default => true }],
|
|
610
618
|
[ :logo , :attachment ],
|
|
611
619
|
[ :is_master , :boolean , { :default => false }],
|
|
612
620
|
[ :analytics_id , :string ],
|
data/app/models/caboose/site.rb
CHANGED
|
@@ -7,6 +7,7 @@ class Caboose::Site < ActiveRecord::Base
|
|
|
7
7
|
has_many :block_types, :through => :block_type_site_memberships
|
|
8
8
|
has_many :site_memberships, :class_name => 'Caboose::SiteMembership', :dependent => :delete_all
|
|
9
9
|
has_many :domains, :class_name => 'Caboose::Domain', :dependent => :delete_all
|
|
10
|
+
has_many :fonts, :class_name => 'Caboose::Font', :dependent => :delete_all
|
|
10
11
|
has_many :post_categories, :class_name => 'Caboose::PostCategory'
|
|
11
12
|
has_one :store_config
|
|
12
13
|
has_attached_file :logo,
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
<% if @last_order.has_downloadable_items? %>
|
|
6
6
|
<% sc = Caboose::StoreConfig.where(:site_id => @site.id).last %>
|
|
7
7
|
<% instr = (sc && !sc.download_instructions.blank?) ? sc.download_instructions : "Your order contained downloadable items. Download your items with the links below:" %>
|
|
8
|
-
<
|
|
8
|
+
<div><%== instr %></div>
|
|
9
9
|
<ul id='downloads'>
|
|
10
10
|
<% @last_order.line_items.each do |li| %>
|
|
11
11
|
<% if li.variant.downloadable %>
|
|
@@ -0,0 +1,438 @@
|
|
|
1
|
+
<% if @site.use_fonts %>
|
|
2
|
+
|
|
3
|
+
<div class="constrain clearfix">
|
|
4
|
+
|
|
5
|
+
<div class="font-window">
|
|
6
|
+
<div class="page-links clearfix">
|
|
7
|
+
<a href="#" id="previous" class="caboose-btn page-link">Previous</a>
|
|
8
|
+
<h4>Choose Your Site Fonts Below</h4>
|
|
9
|
+
<a href="#" id="next" class="caboose-btn page-link">Next</a>
|
|
10
|
+
</div>
|
|
11
|
+
<ul class="font-list" data-min="0" data-max="10">
|
|
12
|
+
<li class="font-li clearfix selected" id="1" data-family="" data-index="0">
|
|
13
|
+
<h2 class="font-name">Font Name</h2><h2 class="font-test">Grumpy wizards make toxic brew for the evil Queen and Jack.</h2>
|
|
14
|
+
</li>
|
|
15
|
+
<li class="font-li clearfix" id="2" data-family="" data-index="0">
|
|
16
|
+
<h2 class="font-name">Font Name</h2><h2 class="font-test">Grumpy wizards make toxic brew for the evil Queen and Jack.</h2>
|
|
17
|
+
</li>
|
|
18
|
+
<li class="font-li clearfix" id="3" data-family="" data-index="0">
|
|
19
|
+
<h2 class="font-name">Font Name</h2><h2 class="font-test">Grumpy wizards make toxic brew for the evil Queen and Jack.</h2>
|
|
20
|
+
</li>
|
|
21
|
+
<li class="font-li clearfix" id="4" data-family="" data-index="0">
|
|
22
|
+
<h2 class="font-name">Font Name</h2><h2 class="font-test">Grumpy wizards make toxic brew for the evil Queen and Jack.</h2>
|
|
23
|
+
</li>
|
|
24
|
+
<li class="font-li clearfix" id="5" data-family="" data-index="0">
|
|
25
|
+
<h2 class="font-name">Font Name</h2><h2 class="font-test">Grumpy wizards make toxic brew for the evil Queen and Jack.</h2>
|
|
26
|
+
</li>
|
|
27
|
+
<li class="font-li clearfix" id="6" data-family="" data-index="0">
|
|
28
|
+
<h2 class="font-name">Font Name</h2><h2 class="font-test">Grumpy wizards make toxic brew for the evil Queen and Jack.</h2>
|
|
29
|
+
</li>
|
|
30
|
+
<li class="font-li clearfix" id="7" data-family="" data-index="0">
|
|
31
|
+
<h2 class="font-name">Font Name</h2><h2 class="font-test">Grumpy wizards make toxic brew for the evil Queen and Jack.</h2>
|
|
32
|
+
</li>
|
|
33
|
+
<li class="font-li clearfix" id="8" data-family="" data-index="0">
|
|
34
|
+
<h2 class="font-name">Font Name</h2><h2 class="font-test">Grumpy wizards make toxic brew for the evil Queen and Jack.</h2>
|
|
35
|
+
</li>
|
|
36
|
+
<li class="font-li clearfix" id="9" data-family="" data-index="0">
|
|
37
|
+
<h2 class="font-name">Font Name</h2><h2 class="font-test">Grumpy wizards make toxic brew for the evil Queen and Jack.</h2>
|
|
38
|
+
</li>
|
|
39
|
+
<li class="font-li clearfix" id="10" data-family="" data-index="0">
|
|
40
|
+
<h2 class="font-name">Font Name</h2><h2 class="font-test">Grumpy wizards make toxic brew for the evil Queen and Jack.</h2>
|
|
41
|
+
</li>
|
|
42
|
+
</ul>
|
|
43
|
+
</div>
|
|
44
|
+
<form id="font-form" class="clearfix">
|
|
45
|
+
<div class="field"><span>Select a font variant: </span><select id="variant-selector" name="font-variant"></select></div>
|
|
46
|
+
<div id="message"></div>
|
|
47
|
+
</form>
|
|
48
|
+
<div class="font-preview-box">
|
|
49
|
+
<h2 class="font-preview">Font Preview - <span class="family">Open Sans</span></h2>
|
|
50
|
+
<p class="font-preview">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia, expedita. Alias consequuntur, tenetur, asperiores quisquam voluptatibus deserunt itaque officiis quas beatae iusto at aliquam debitis, a nihil unde, dolore est. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa debitis corporis saepe eum alias eius cum eaque ipsam ducimus sunt, nobis ab quia vitae hic laudantium unde pariatur sapiente numquam.</p>
|
|
51
|
+
<a href="#" class="caboose-btn font-preview" style="margin-top:20px;">Click Here</a>
|
|
52
|
+
</div>
|
|
53
|
+
<div class="set-buttons grid-row clearfix">
|
|
54
|
+
<div class="unit1of3">
|
|
55
|
+
<a href="#" class="set-font caboose-btn" id="1" data-name="heading-font">Set as Heading Font</a>
|
|
56
|
+
</div>
|
|
57
|
+
<div class="unit1of3">
|
|
58
|
+
<a href="#" class="set-font caboose-btn" id="2" data-name="body-font">Set as Body Font</a>
|
|
59
|
+
|
|
60
|
+
<a href="#" class="set-font caboose-btn" id="4" data-name="body-font-bold">Set as Body Font BOLD</a>
|
|
61
|
+
<a href="#" class="set-font caboose-btn" id="5" data-name="body-font-italic">Set as Body Font ITALIC</a>
|
|
62
|
+
<a href="#" class="set-font caboose-btn" id="6" data-name="body-font-bold-italic">Set as Body Font BOLD ITALIC</a>
|
|
63
|
+
<!-- <div class="field"><span>Bold:</span><select class="body-variant-selector" id="bold"></select></div>
|
|
64
|
+
<div class="field"><span>Italic:</span><select class="body-variant-selector" id="italic"></select></div>
|
|
65
|
+
<div class="field"><span>Bold Italic:</span><select class="body-variant-selector" id="bold-italic"></select></div> -->
|
|
66
|
+
</div>
|
|
67
|
+
<div class="unit1of3">
|
|
68
|
+
<a href="#" class="set-font caboose-btn" id="3" data-name="button-font">Set as Button Font</a>
|
|
69
|
+
</div>
|
|
70
|
+
</div>
|
|
71
|
+
<div class="final-box">
|
|
72
|
+
<h2 id="font1-preview">Your Selected Fonts - <span class="family"><%= @hf.family %></span> <span class="variant"><%= @hf.variant %></span></h2>
|
|
73
|
+
<p id="font2-preview"><span class="family"><%= @bf.family %></span> <span class="variant"><%= @bf.variant %></span> - Lorem ipsum dolor sit amet, consectetur <strong id="font4-preview">this is bold text</strong>. Dicta, at voluptates assumenda hic <span class="bold-italic" id="font6-preview">this is bold italic text</span> soluta. Beatae illo explicabo, atque deserunt, <em id="font5-preview">this is italic text</em> magni necessitatibus, a eveniet hic. Culpa debitis corporis saepe eum alias eius cum eaque ipsam ducimus sunt, nobis ab quia vitae hic laudantium unde pariatur sapiente numquam.</p>
|
|
74
|
+
<a id="font3-preview" class="caboose-btn" href="#" style="margin-top:20px;"><span class="family"><%= @btn.family %></span> <span class="variant"><%= @btn.variant %></span></a>
|
|
75
|
+
</div>
|
|
76
|
+
</div>
|
|
77
|
+
|
|
78
|
+
<% content_for :caboose_css do %>
|
|
79
|
+
<style>
|
|
80
|
+
#font-form {
|
|
81
|
+
margin-top: 20px;
|
|
82
|
+
}
|
|
83
|
+
.set-font {
|
|
84
|
+
margin-bottom: 5px;
|
|
85
|
+
}
|
|
86
|
+
.final-box {
|
|
87
|
+
border: 1px dashed gray;
|
|
88
|
+
padding: 30px 2%;
|
|
89
|
+
}
|
|
90
|
+
.unit1of3 .field {
|
|
91
|
+
margin-top: 8px;
|
|
92
|
+
}
|
|
93
|
+
.field span {
|
|
94
|
+
margin-right: 6px;
|
|
95
|
+
}
|
|
96
|
+
.final-box h2, .font-preview-box h2 {
|
|
97
|
+
margin: 0 auto 15px auto;
|
|
98
|
+
}
|
|
99
|
+
.final-box p em {
|
|
100
|
+
font-family: "body-font-italic";
|
|
101
|
+
font-style: normal;
|
|
102
|
+
font-weight: normal;
|
|
103
|
+
}
|
|
104
|
+
.final-box p strong {
|
|
105
|
+
font-family: "body-font-bold";
|
|
106
|
+
font-style: normal;
|
|
107
|
+
font-weight: normal;
|
|
108
|
+
}
|
|
109
|
+
.caboose-btn {
|
|
110
|
+
padding: 8px 15px;
|
|
111
|
+
}
|
|
112
|
+
.final-box p .bold-italic {
|
|
113
|
+
font-family: "body-font-bold-italic";
|
|
114
|
+
font-style: normal;
|
|
115
|
+
font-weight: normal;
|
|
116
|
+
}
|
|
117
|
+
.set-buttons {
|
|
118
|
+
text-align: center;
|
|
119
|
+
padding: 20px 2% 50px 2%;
|
|
120
|
+
}
|
|
121
|
+
.page-links {
|
|
122
|
+
margin-bottom: 10px;
|
|
123
|
+
height: 28px;
|
|
124
|
+
text-align: center;
|
|
125
|
+
}
|
|
126
|
+
.page-links h4 {
|
|
127
|
+
display: inline-block;
|
|
128
|
+
margin: 0;
|
|
129
|
+
margin-top: 4px;
|
|
130
|
+
font-size: 1.4em;
|
|
131
|
+
}
|
|
132
|
+
.grid-row {
|
|
133
|
+
width: 100%;
|
|
134
|
+
}
|
|
135
|
+
.unit1of3 {
|
|
136
|
+
width: 33.3333%;
|
|
137
|
+
float: left;
|
|
138
|
+
text-align: center !important;
|
|
139
|
+
}
|
|
140
|
+
#previous {
|
|
141
|
+
float: left;
|
|
142
|
+
}
|
|
143
|
+
#next {
|
|
144
|
+
float: right;
|
|
145
|
+
}
|
|
146
|
+
.font-list {
|
|
147
|
+
padding: 0;
|
|
148
|
+
list-style-type: none;
|
|
149
|
+
border: 1px dashed gray;
|
|
150
|
+
}
|
|
151
|
+
.font-li {
|
|
152
|
+
cursor: pointer;
|
|
153
|
+
padding: 12px 10px 12px 10px;
|
|
154
|
+
}
|
|
155
|
+
.font-li:hover {
|
|
156
|
+
background: rgb(232, 232, 232);
|
|
157
|
+
}
|
|
158
|
+
.font-li.selected {
|
|
159
|
+
background: rgb(255, 255, 211);
|
|
160
|
+
}
|
|
161
|
+
.font-preview-box {
|
|
162
|
+
padding: 30px 2%;
|
|
163
|
+
margin-top: 20px;
|
|
164
|
+
border: 1px dashed gray;
|
|
165
|
+
}
|
|
166
|
+
.font-li h2 {
|
|
167
|
+
display: inline-block;
|
|
168
|
+
margin-top: 0;
|
|
169
|
+
margin-bottom: 0;
|
|
170
|
+
font-size: 1.2em;
|
|
171
|
+
}
|
|
172
|
+
.font-li .font-name {
|
|
173
|
+
width: 20%;
|
|
174
|
+
float: left;
|
|
175
|
+
}
|
|
176
|
+
.font-li .font-test {
|
|
177
|
+
width: 75%;
|
|
178
|
+
float: right;
|
|
179
|
+
}
|
|
180
|
+
@font-face {
|
|
181
|
+
font-family: "heading-font";
|
|
182
|
+
src: url('<%= @hf.url %>') format('truetype');
|
|
183
|
+
}
|
|
184
|
+
@font-face {
|
|
185
|
+
font-family: "body-font";
|
|
186
|
+
src: url('<%= @bf.url %>') format('truetype');
|
|
187
|
+
}
|
|
188
|
+
@font-face {
|
|
189
|
+
font-family: "body-font-bold";
|
|
190
|
+
src: url('<%= @bfb.url %>') format('truetype');
|
|
191
|
+
}
|
|
192
|
+
@font-face {
|
|
193
|
+
font-family: "body-font-italic";
|
|
194
|
+
src: url('<%= @bfi.url %>') format('truetype');
|
|
195
|
+
}
|
|
196
|
+
@font-face {
|
|
197
|
+
font-family: "body-font-bold-italic";
|
|
198
|
+
src: url('<%= @bfbi.url %>') format('truetype');
|
|
199
|
+
}
|
|
200
|
+
@font-face {
|
|
201
|
+
font-family: "button-font";
|
|
202
|
+
src: url('<%= @btn.url %>') format('truetype');
|
|
203
|
+
}
|
|
204
|
+
#font1-preview {
|
|
205
|
+
font-family: "heading-font";
|
|
206
|
+
font-style: normal;
|
|
207
|
+
font-weight: normal;
|
|
208
|
+
}
|
|
209
|
+
#font2-preview {
|
|
210
|
+
font-family: "body-font";
|
|
211
|
+
font-style: normal;
|
|
212
|
+
font-weight: normal;
|
|
213
|
+
}
|
|
214
|
+
#font3-preview {
|
|
215
|
+
font-family: "button-font";
|
|
216
|
+
font-style: normal;
|
|
217
|
+
font-weight: normal;
|
|
218
|
+
}
|
|
219
|
+
.clearfix::after {
|
|
220
|
+
content: ".";
|
|
221
|
+
visibility: hidden;
|
|
222
|
+
display: block;
|
|
223
|
+
height: 0;
|
|
224
|
+
clear: both;
|
|
225
|
+
}
|
|
226
|
+
#font-form .field {
|
|
227
|
+
width: 50%;
|
|
228
|
+
float: left;
|
|
229
|
+
}
|
|
230
|
+
#message {
|
|
231
|
+
width: 50%;
|
|
232
|
+
float: right;
|
|
233
|
+
}
|
|
234
|
+
#message .note {
|
|
235
|
+
padding: 10px 15px;
|
|
236
|
+
font-size: 16px;
|
|
237
|
+
}
|
|
238
|
+
.constrain {
|
|
239
|
+
max-width: 900px;
|
|
240
|
+
width: 100%;
|
|
241
|
+
position: relative;
|
|
242
|
+
margin: 0 auto !important;
|
|
243
|
+
padding: 40px 2%;
|
|
244
|
+
height: 100%;
|
|
245
|
+
}
|
|
246
|
+
</style>
|
|
247
|
+
<% end %>
|
|
248
|
+
|
|
249
|
+
<% content_for :caboose_js do %>
|
|
250
|
+
<script>
|
|
251
|
+
window.google_fonts = [];
|
|
252
|
+
|
|
253
|
+
$(".page-link#next").click(function(event) {
|
|
254
|
+
event.preventDefault();
|
|
255
|
+
var min = $(".font-list").data("min");
|
|
256
|
+
var max = $(".font-list").data("max");
|
|
257
|
+
update_fonts(min + 10, max + 10);
|
|
258
|
+
$(".font-list").data("min", min + 10);
|
|
259
|
+
$(".font-list").data("max", max + 10);
|
|
260
|
+
});
|
|
261
|
+
|
|
262
|
+
$(".page-link#previous").click(function(event) {
|
|
263
|
+
event.preventDefault();
|
|
264
|
+
var min = $(".font-list").data("min");
|
|
265
|
+
var max = $(".font-list").data("max");
|
|
266
|
+
update_fonts(min - 10, max - 10);
|
|
267
|
+
$(".font-list").data("min", min - 10);
|
|
268
|
+
$(".font-list").data("max", max - 10);
|
|
269
|
+
});
|
|
270
|
+
|
|
271
|
+
$(".font-li").click(function() {
|
|
272
|
+
$(".font-li").removeClass("selected");
|
|
273
|
+
// console.log("clicked " + $(this).data("index"));
|
|
274
|
+
// $("#font-selector").val( $(this).data("index") );
|
|
275
|
+
// $("#font-selector").trigger("change");
|
|
276
|
+
$("#message").html("");
|
|
277
|
+
$(this).addClass("selected");
|
|
278
|
+
refresh_variants($(this).data("index"));
|
|
279
|
+
load_css($(this).data("index"), $("#variant-selector").val());
|
|
280
|
+
$(".font-preview-box h2 .family").html($(this).data("family"));
|
|
281
|
+
change_preview($(this).data("index"), $("#variant-selector").val());
|
|
282
|
+
});
|
|
283
|
+
|
|
284
|
+
function update_fonts(min, max) {
|
|
285
|
+
var font;
|
|
286
|
+
var variant;
|
|
287
|
+
for (i = min; i < max; i++) {
|
|
288
|
+
font = window.google_fonts[i];
|
|
289
|
+
variant = font.variants[0];
|
|
290
|
+
load_css(i, variant);
|
|
291
|
+
var index = (i % 10) + 1;
|
|
292
|
+
// console.log("family: " + font.family, ", index: " + index);
|
|
293
|
+
$(".font-li:nth-of-type(" + index + ")").find("h2").css("font-family",font.family);
|
|
294
|
+
$(".font-li:nth-of-type(" + index + ")").find(".font-name").html(font.family);
|
|
295
|
+
$(".font-li:nth-of-type(" + index + ")").data("family",font.family);
|
|
296
|
+
$(".font-li:nth-of-type(" + index + ")").data("index",i);
|
|
297
|
+
}
|
|
298
|
+
}
|
|
299
|
+
|
|
300
|
+
function refresh_variants(font_id) {
|
|
301
|
+
var font = window.google_fonts[font_id];
|
|
302
|
+
$("#variant-selector").html("");
|
|
303
|
+
$(".body-variant-selector").html("");
|
|
304
|
+
if ( font && font.variants ) {
|
|
305
|
+
$.each(font.variants, function(key, variant) {
|
|
306
|
+
$("#variant-selector").append("<option value='" + variant + "'>" + variant + "</option>");
|
|
307
|
+
$(".body-variant-selector").append("<option value='" + variant + "'>" + variant + "</option>");
|
|
308
|
+
});
|
|
309
|
+
}
|
|
310
|
+
}
|
|
311
|
+
|
|
312
|
+
function load_css(font_id, variant) {
|
|
313
|
+
var font = window.google_fonts[font_id];
|
|
314
|
+
// console.dir(font);
|
|
315
|
+
// console.log("family: " + font.family);
|
|
316
|
+
// console.log("variant: " + variant);
|
|
317
|
+
var apiUrl = [];
|
|
318
|
+
apiUrl.push('//fonts.googleapis.com/css?family=');
|
|
319
|
+
apiUrl.push(font.family.replace(/ /g, '+'));
|
|
320
|
+
if ( variant && variant != "" ) {
|
|
321
|
+
apiUrl.push(':');
|
|
322
|
+
apiUrl.push(variant);
|
|
323
|
+
}
|
|
324
|
+
var url = apiUrl.join('');
|
|
325
|
+
var cssId = font_id + "_" + variant;
|
|
326
|
+
if (!document.getElementById(cssId)) {
|
|
327
|
+
var head = document.getElementsByTagName('head')[0];
|
|
328
|
+
var link = document.createElement('link');
|
|
329
|
+
link.id = cssId;
|
|
330
|
+
link.rel = 'stylesheet';
|
|
331
|
+
link.type = 'text/css';
|
|
332
|
+
link.href = url;
|
|
333
|
+
link.media = 'all';
|
|
334
|
+
head.appendChild(link);
|
|
335
|
+
}
|
|
336
|
+
}
|
|
337
|
+
|
|
338
|
+
function change_preview(font_id, variant) {
|
|
339
|
+
var font = window.google_fonts[font_id];
|
|
340
|
+
$(".font-preview").css("font-family",font.family);
|
|
341
|
+
if ( variant.indexOf("italic") >= 0 ) {
|
|
342
|
+
$(".font-preview").css("font-style","italic");
|
|
343
|
+
}
|
|
344
|
+
else {
|
|
345
|
+
$(".font-preview").css("font-style","normal");
|
|
346
|
+
}
|
|
347
|
+
var weight = variant.match(/\d+/);
|
|
348
|
+
if ( weight && weight != "" ) {
|
|
349
|
+
$(".font-preview").css("font-weight",weight);
|
|
350
|
+
}
|
|
351
|
+
else {
|
|
352
|
+
$(".font-preview").css("font-weight","normal");
|
|
353
|
+
}
|
|
354
|
+
}
|
|
355
|
+
|
|
356
|
+
function save_font(family, variant, url, name) {
|
|
357
|
+
// console.log("saving font: " + family + " " + variant + " " + url + " " + name);
|
|
358
|
+
$.ajax({
|
|
359
|
+
url: '/admin/fonts',
|
|
360
|
+
type: 'put',
|
|
361
|
+
data: {
|
|
362
|
+
family: family,
|
|
363
|
+
variant: variant,
|
|
364
|
+
url: url,
|
|
365
|
+
name: name
|
|
366
|
+
},
|
|
367
|
+
success: function(resp) {
|
|
368
|
+
if ( resp.success ) {
|
|
369
|
+
$("#message").html("<p class='note success'>Font saved successfully!</p>").show().delay(1000).fadeOut(200);
|
|
370
|
+
}
|
|
371
|
+
else {
|
|
372
|
+
$("#message").html("<p class='note error'>Error saving font.</p>").show().delay(1000).fadeOut(200);
|
|
373
|
+
}
|
|
374
|
+
}
|
|
375
|
+
});
|
|
376
|
+
}
|
|
377
|
+
|
|
378
|
+
$(document).ready(function() {
|
|
379
|
+
|
|
380
|
+
$.ajax({
|
|
381
|
+
url: 'https://www.googleapis.com/webfonts/v1/webfonts?sort=popularity&key=AIzaSyAjSs-Jq6hpuT35RG9wD6LuqaDFzYDCOPk',
|
|
382
|
+
type: 'get',
|
|
383
|
+
success: function(resp) {
|
|
384
|
+
if ( resp.items ) {
|
|
385
|
+
window.google_fonts = resp.items;
|
|
386
|
+
update_fonts(0, 10);
|
|
387
|
+
var first_font = $(".font-li.selected").data("index");
|
|
388
|
+
refresh_variants(first_font);
|
|
389
|
+
var first_variant = $("#variant-selector").val();
|
|
390
|
+
load_css(first_font, first_variant);
|
|
391
|
+
change_preview(first_font, first_variant);
|
|
392
|
+
}
|
|
393
|
+
else {
|
|
394
|
+
$("#message").html("<p class='note error'>Error connecting to the Google Fonts API</p>");
|
|
395
|
+
}
|
|
396
|
+
},
|
|
397
|
+
error: function(resp) {
|
|
398
|
+
$(".constrain.clearfix").html("<p style='text-align:center;'>Sorry, this domain is not setup for Google Fonts yet.</p>");
|
|
399
|
+
}
|
|
400
|
+
});
|
|
401
|
+
|
|
402
|
+
$("#variant-selector").change(function() {
|
|
403
|
+
load_css( $(".font-li.selected").data("index"), $(this).val() );
|
|
404
|
+
change_preview( $(".font-li.selected").data("index"), $(this).val() );
|
|
405
|
+
});
|
|
406
|
+
|
|
407
|
+
$(".set-font").click(function(event) {
|
|
408
|
+
event.preventDefault();
|
|
409
|
+
var font_id = $(".font-li.selected").data("index");
|
|
410
|
+
var variant = $("#variant-selector").val();
|
|
411
|
+
var font = window.google_fonts[font_id];
|
|
412
|
+
var preview = $("#font" + $(this).attr("id") + "-preview");
|
|
413
|
+
preview.css("font-family",font.family);
|
|
414
|
+
if ( variant.indexOf("italic") >= 0 ) {
|
|
415
|
+
preview.css("font-style","italic");
|
|
416
|
+
}
|
|
417
|
+
else {
|
|
418
|
+
preview.css("font-style","normal");
|
|
419
|
+
}
|
|
420
|
+
var weight = variant.match(/\d+/);
|
|
421
|
+
if ( weight && weight != "" ) {
|
|
422
|
+
preview.css("font-weight",weight);
|
|
423
|
+
}
|
|
424
|
+
else {
|
|
425
|
+
preview.css("font-weight","normal");
|
|
426
|
+
}
|
|
427
|
+
preview.find(".family").html(font.family);
|
|
428
|
+
preview.find(".variant").html(variant);
|
|
429
|
+
save_font(font.family, variant, font.files[variant], $(this).data("name"));
|
|
430
|
+
});
|
|
431
|
+
|
|
432
|
+
});
|
|
433
|
+
</script>
|
|
434
|
+
<% end %>
|
|
435
|
+
|
|
436
|
+
<% else %>
|
|
437
|
+
<div class="constrain" style="text-align:center;"><p>Sorry, fonts are not configured for your site yet.</p></div>
|
|
438
|
+
<% end %>
|