f2h 0.9.2 → 0.9.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/README.md +548 -9
- data/lib/f2h/version.rb +1 -1
- data/lib/pdf2img.rb +8 -7
- metadata +2 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 95f26e4ffd924b314bcbed22380ae1652aff7440
|
|
4
|
+
data.tar.gz: f44db5163e43dc7470a9e6aad7e9cffdb48cf805
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 2e2728c0dab5b85887e16cf1a6c016a60f7770d21f3b123d513dfceab04d4a646fe85b5a9f18c1c5387b45b7c2dc4e25591b13d3135b2ffd87cd851849d5f6e8
|
|
7
|
+
data.tar.gz: 5d35d290269e0055f704c2323e4f5a474bff32ce44856ba22c6fed97af5eb49d5ffaf917eaf109c5c60cf5e4cc945c6c32854f2642aea78b8da1f1687813409c
|
data/README.md
CHANGED
|
@@ -1,32 +1,571 @@
|
|
|
1
1
|
# Flash2HTML
|
|
2
|
+
|
|
3
|
+
##### Current Version: 0.9.2
|
|
4
|
+
|
|
2
5
|
Boilerplate code that provides sane default settings when making html5 assets using html,css and js from Flash creatives
|
|
6
|
+
We use GreenSock TweenMax library to create javascript animations for images
|
|
7
|
+
|
|
8
|
+
Gem has a couple of dependencies: image magik to generate images from PDFs
|
|
9
|
+
|
|
3
10
|
|
|
4
11
|
|
|
5
12
|
## Installation
|
|
6
13
|
|
|
7
|
-
|
|
14
|
+
Install the gem:
|
|
8
15
|
|
|
9
16
|
```ruby
|
|
10
|
-
gem 'f2h'
|
|
17
|
+
gem install 'f2h'
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
## Usage
|
|
21
|
+
The f2h gem takes simple arugments to generate files:
|
|
22
|
+
|
|
23
|
+
To initialize a directory with the files, run:
|
|
24
|
+
```ruby
|
|
25
|
+
f2h new
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
This command takes the root directory as path name and using the foldername generates the following files:
|
|
29
|
+
|
|
30
|
+
```
|
|
31
|
+
|____banner_images
|
|
32
|
+
|____box_images
|
|
33
|
+
|____css
|
|
34
|
+
| |____<foldername>_banner.css
|
|
35
|
+
| |____<foldername>_box.css
|
|
36
|
+
|____js
|
|
37
|
+
| |____jquery.min.js
|
|
38
|
+
| |____<foldername>_banner.js
|
|
39
|
+
| |____<foldername>_box.js
|
|
40
|
+
| |____TweenMax.min.js
|
|
41
|
+
|____<foldername>_banner.html
|
|
42
|
+
|____<foldername>_box.html
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
|
|
46
|
+
|
|
47
|
+
Example if you run `f2h new` IN a folder named `Lorem`
|
|
48
|
+
|
|
49
|
+
```
|
|
50
|
+
|____banner_images
|
|
51
|
+
|____box_images
|
|
52
|
+
|____css
|
|
53
|
+
| |____Lorem_banner.css
|
|
54
|
+
| |____Lorem_box.css
|
|
55
|
+
|____js
|
|
56
|
+
| |____jquery.min.js
|
|
57
|
+
| |____Lorem_banner.js
|
|
58
|
+
| |____Lorem_box.js
|
|
59
|
+
| |____TweenMax.min.js
|
|
60
|
+
|____Lorem_banner.html
|
|
61
|
+
|____Lorem_box.html
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
With boilerplate code in HTML, CSS and JS files.
|
|
65
|
+
|
|
66
|
+
##### BOX HTML
|
|
67
|
+
```html
|
|
68
|
+
<!DOCTYPE html>
|
|
69
|
+
<html lang="en">
|
|
70
|
+
<head>
|
|
71
|
+
<meta charset="UTF-8">
|
|
72
|
+
<title></title>
|
|
73
|
+
<link rel="stylesheet" href="css/Lorem_box.css">
|
|
74
|
+
<script src="js/jquery.min.js"></script>
|
|
75
|
+
<script src="js/TweenMax.min.js"></script>
|
|
76
|
+
<script src="js/Lorem_box.js"></script>
|
|
77
|
+
</head>
|
|
78
|
+
<body>
|
|
79
|
+
|
|
80
|
+
<div id="overall_mask"></div>
|
|
81
|
+
|
|
82
|
+
<!-- Start-of-the-Image-Tags -->
|
|
83
|
+
<!-- End-of-the-Image-Tags -->
|
|
84
|
+
|
|
85
|
+
<!-- Start-of-the-ISI -->
|
|
86
|
+
<div id="isi"></div>
|
|
87
|
+
<!-- End-of-the-ISI -->
|
|
88
|
+
|
|
89
|
+
</body>
|
|
90
|
+
</html>
|
|
11
91
|
```
|
|
12
92
|
|
|
13
|
-
|
|
93
|
+
##### BOX CSS
|
|
94
|
+
```css
|
|
95
|
+
body{
|
|
96
|
+
position: fixed;
|
|
97
|
+
padding: 0;
|
|
98
|
+
margin: 0;
|
|
99
|
+
top: 0;
|
|
100
|
+
left: 0;
|
|
101
|
+
}
|
|
14
102
|
|
|
15
|
-
|
|
103
|
+
#overall_mask{
|
|
104
|
+
position: absolute;
|
|
105
|
+
height: 250px;
|
|
106
|
+
width: 300px;
|
|
107
|
+
}
|
|
16
108
|
|
|
17
|
-
Or install it yourself as:
|
|
18
109
|
|
|
19
|
-
|
|
110
|
+
|
|
111
|
+
|
|
112
|
+
|
|
113
|
+
|
|
114
|
+
/* Start-of-the-ISI */
|
|
115
|
+
#isi{
|
|
116
|
+
position: absolute;
|
|
117
|
+
background-color: white;
|
|
118
|
+
top: 250px;
|
|
119
|
+
width: 300px;
|
|
120
|
+
height: 76px;
|
|
121
|
+
font-size: 12px;
|
|
122
|
+
overflow-y: scroll;
|
|
123
|
+
overflow-x: hidden;
|
|
124
|
+
font-family: "Arial-Narrow";
|
|
125
|
+
padding-left: 5px;
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
#isi::-webkit-scrollbar {
|
|
129
|
+
width: 20px;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
#isi::-webkit-scrollbar-button:vertical:start:increment{
|
|
133
|
+
display: block;
|
|
134
|
+
background-image: url();
|
|
135
|
+
background-repeat: no-repeat;
|
|
136
|
+
background-position: center;
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
#isi::-webkit-scrollbar-button:vertical:end:increment{
|
|
140
|
+
display: block;
|
|
141
|
+
background-image: url();
|
|
142
|
+
background-repeat: no-repeat;
|
|
143
|
+
background-position: center;
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
#isi::-webkit-scrollbar-track {
|
|
147
|
+
background-image: url();
|
|
148
|
+
background-position: center;
|
|
149
|
+
background-repeat: no-repeat;
|
|
150
|
+
background-size: 4px 97%;
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
#isi::-webkit-scrollbar-thumb {
|
|
154
|
+
height: 25px;
|
|
155
|
+
background-image: url();
|
|
156
|
+
background-position: center;
|
|
157
|
+
background-repeat: no-repeat;
|
|
158
|
+
}
|
|
159
|
+
/* End-of-the-ISI */
|
|
160
|
+
|
|
161
|
+
```
|
|
162
|
+
|
|
163
|
+
|
|
164
|
+
##### BOX JS
|
|
165
|
+
```js
|
|
166
|
+
$(function(){
|
|
167
|
+
// WebViewCommunicator.sendJavascriptTo("main", "javascript:appRouter.homeView.flashAdImpressionTrack('box-ad')");
|
|
168
|
+
|
|
169
|
+
//Start-of-the-animation-code
|
|
170
|
+
//End-of-the-animation-code
|
|
171
|
+
|
|
172
|
+
|
|
173
|
+
function autoScroll(){
|
|
174
|
+
ascroll = setInterval(function(){
|
|
175
|
+
elem = $("#isi")[0];
|
|
176
|
+
if (elem.scrollTop != 1075){
|
|
177
|
+
# Flash2HTML
|
|
178
|
+
|
|
179
|
+
##### Current Version: 0.9.2
|
|
180
|
+
|
|
181
|
+
Boilerplate code that provides sane default settings when making html5 assets using html,css and js from Flash creatives
|
|
182
|
+
We use GreenSock TweenMax library to create javascript animations for images
|
|
183
|
+
|
|
184
|
+
Gem has a couple of dependencies: image magik to generate images from PDFs
|
|
185
|
+
|
|
186
|
+
|
|
187
|
+
|
|
188
|
+
## Installation
|
|
189
|
+
|
|
190
|
+
Install the gem:
|
|
191
|
+
|
|
192
|
+
```ruby
|
|
193
|
+
gem install 'f2h'
|
|
194
|
+
```
|
|
20
195
|
|
|
21
196
|
## Usage
|
|
197
|
+
The f2h gem takes simple arugments to generate files:
|
|
198
|
+
|
|
199
|
+
To initialize a directory with the files, run:
|
|
200
|
+
```ruby
|
|
201
|
+
f2h new
|
|
202
|
+
```
|
|
203
|
+
|
|
204
|
+
This command takes the root directory as path name and using the foldername generates the following files:
|
|
205
|
+
|
|
206
|
+
```
|
|
207
|
+
|____banner_images
|
|
208
|
+
|____box_images
|
|
209
|
+
|____css
|
|
210
|
+
| |____<foldername>_banner.css
|
|
211
|
+
| |____<foldername>_box.css
|
|
212
|
+
|____js
|
|
213
|
+
| |____jquery.min.js
|
|
214
|
+
| |____<foldername>_banner.js
|
|
215
|
+
| |____<foldername>_box.js
|
|
216
|
+
| |____TweenMax.min.js
|
|
217
|
+
|____<foldername>_banner.html
|
|
218
|
+
|____<foldername>_box.html
|
|
219
|
+
```
|
|
220
|
+
|
|
221
|
+
|
|
222
|
+
|
|
223
|
+
Example if you run `f2h new` IN a folder named `Lorem`
|
|
224
|
+
|
|
225
|
+
```
|
|
226
|
+
|____banner_images
|
|
227
|
+
|____box_images
|
|
228
|
+
|____css
|
|
229
|
+
| |____Lorem_banner.css
|
|
230
|
+
| |____Lorem_box.css
|
|
231
|
+
|____js
|
|
232
|
+
| |____jquery.min.js
|
|
233
|
+
| |____Lorem_banner.js
|
|
234
|
+
| |____Lorem_box.js
|
|
235
|
+
| |____TweenMax.min.js
|
|
236
|
+
|____Lorem_banner.html
|
|
237
|
+
|____Lorem_box.html
|
|
238
|
+
```
|
|
239
|
+
|
|
240
|
+
With boilerplate code in HTML, CSS and JS files.
|
|
241
|
+
|
|
242
|
+
##### BOX HTML
|
|
243
|
+
```html
|
|
244
|
+
<!DOCTYPE html>
|
|
245
|
+
<html lang="en">
|
|
246
|
+
<head>
|
|
247
|
+
<meta charset="UTF-8">
|
|
248
|
+
<title></title>
|
|
249
|
+
<link rel="stylesheet" href="css/Lorem_box.css">
|
|
250
|
+
<script src="js/jquery.min.js"></script>
|
|
251
|
+
<script src="js/TweenMax.min.js"></script>
|
|
252
|
+
<script src="js/Lorem_box.js"></script>
|
|
253
|
+
</head>
|
|
254
|
+
<body>
|
|
255
|
+
|
|
256
|
+
<div id="overall_mask"></div>
|
|
257
|
+
|
|
258
|
+
<!-- Start-of-the-Image-Tags -->
|
|
259
|
+
<!-- End-of-the-Image-Tags -->
|
|
260
|
+
|
|
261
|
+
<!-- Start-of-the-ISI -->
|
|
262
|
+
<div id="isi"></div>
|
|
263
|
+
<!-- End-of-the-ISI -->
|
|
264
|
+
|
|
265
|
+
</body>
|
|
266
|
+
</html>
|
|
267
|
+
```
|
|
268
|
+
|
|
269
|
+
##### BOX CSS
|
|
270
|
+
```css
|
|
271
|
+
body{
|
|
272
|
+
position: fixed;
|
|
273
|
+
padding: 0;
|
|
274
|
+
margin: 0;
|
|
275
|
+
top: 0;
|
|
276
|
+
left: 0;
|
|
277
|
+
}
|
|
278
|
+
|
|
279
|
+
#overall_mask{
|
|
280
|
+
position: absolute;
|
|
281
|
+
height: 250px;
|
|
282
|
+
width: 300px;
|
|
283
|
+
}
|
|
284
|
+
|
|
285
|
+
|
|
286
|
+
|
|
287
|
+
|
|
288
|
+
|
|
289
|
+
|
|
290
|
+
/* Start-of-the-ISI */
|
|
291
|
+
#isi{
|
|
292
|
+
position: absolute;
|
|
293
|
+
background-color: white;
|
|
294
|
+
top: 250px;
|
|
295
|
+
width: 300px;
|
|
296
|
+
height: 76px;
|
|
297
|
+
font-size: 12px;
|
|
298
|
+
overflow-y: scroll;
|
|
299
|
+
overflow-x: hidden;
|
|
300
|
+
font-family: "Arial-Narrow";
|
|
301
|
+
padding-left: 5px;
|
|
302
|
+
}
|
|
303
|
+
|
|
304
|
+
#isi::-webkit-scrollbar {
|
|
305
|
+
width: 20px;
|
|
306
|
+
}
|
|
307
|
+
|
|
308
|
+
#isi::-webkit-scrollbar-button:vertical:start:increment{
|
|
309
|
+
display: block;
|
|
310
|
+
background-image: url();
|
|
311
|
+
background-repeat: no-repeat;
|
|
312
|
+
background-position: center;
|
|
313
|
+
}
|
|
314
|
+
|
|
315
|
+
#isi::-webkit-scrollbar-button:vertical:end:increment{
|
|
316
|
+
display: block;
|
|
317
|
+
background-image: url();
|
|
318
|
+
background-repeat: no-repeat;
|
|
319
|
+
background-position: center;
|
|
320
|
+
}
|
|
321
|
+
|
|
322
|
+
#isi::-webkit-scrollbar-track {
|
|
323
|
+
background-image: url();
|
|
324
|
+
background-position: center;
|
|
325
|
+
background-repeat: no-repeat;
|
|
326
|
+
background-size: 4px 97%;
|
|
327
|
+
}
|
|
328
|
+
|
|
329
|
+
#isi::-webkit-scrollbar-thumb {
|
|
330
|
+
height: 25px;
|
|
331
|
+
background-image: url();
|
|
332
|
+
background-position: center;
|
|
333
|
+
background-repeat: no-repeat;
|
|
334
|
+
}
|
|
335
|
+
/* End-of-the-ISI */
|
|
336
|
+
|
|
337
|
+
```
|
|
338
|
+
|
|
339
|
+
|
|
340
|
+
##### BOX JS
|
|
341
|
+
```js
|
|
342
|
+
$(function(){
|
|
343
|
+
// WebViewCommunicator.sendJavascriptTo("main", "javascript:appRouter.homeView.flashAdImpressionTrack('box-ad')");
|
|
344
|
+
|
|
345
|
+
//Start-of-the-animation-code
|
|
346
|
+
//End-of-the-animation-code
|
|
347
|
+
|
|
348
|
+
|
|
349
|
+
function autoScroll(){
|
|
350
|
+
ascroll = setInterval(function(){
|
|
351
|
+
elem = $("#isi")[0];
|
|
352
|
+
if (elem.scrollTop != 1075){
|
|
353
|
+
elem.scrollTop += 2;
|
|
354
|
+
}
|
|
355
|
+
}, 200);
|
|
356
|
+
}
|
|
357
|
+
|
|
358
|
+
$(document).on("touchstart", "#isi", function(){
|
|
359
|
+
clearInterval(ascroll);
|
|
360
|
+
});
|
|
361
|
+
|
|
362
|
+
|
|
363
|
+
$("#overall_mask").on("click", function(){
|
|
364
|
+
console.log("overall mask was clicked");
|
|
365
|
+
WebViewCommunicator.sendJavascriptTo("main", "javascript:appRouter.homeView.openChildBrowser('', '<div data-advtype=box-mainClickThrough/>')");
|
|
366
|
+
});
|
|
367
|
+
|
|
368
|
+
$("#fdaBtn").on("click", function(){
|
|
369
|
+
console.log("fda btn open button clicked");
|
|
370
|
+
WebViewCommunicator.sendJavascriptTo("main", "javascript:appRouter.homeView.openChildBrowser('http://www.fda.gov/medwatch/', '<div data-advtype=box-fda-medwatch/>')");
|
|
371
|
+
});
|
|
372
|
+
|
|
373
|
+
$("#pi").on("click", function(){
|
|
374
|
+
console.log("pi button clicked");
|
|
375
|
+
WebViewCommunicator.sendJavascriptTo("main", "javascript:appRouter.homeView.openChildBrowser('http://127.0.0.1:8081/', '<div data-advtype=box-pres-info/>')");
|
|
376
|
+
});
|
|
377
|
+
|
|
378
|
+
$("#medguide").on("click", function(){
|
|
379
|
+
console.log("medguide button clicked");
|
|
380
|
+
WebViewCommunicator.sendJavascriptTo("main", "javascript:appRouter.homeView.openChildBrowser('http://127.0.0.1:8081/', '<div data-advtype=box-med-guide/>')");
|
|
381
|
+
});
|
|
382
|
+
|
|
383
|
+
|
|
384
|
+
});
|
|
385
|
+
|
|
386
|
+
```
|
|
387
|
+
|
|
388
|
+
|
|
389
|
+
|
|
390
|
+
|
|
391
|
+
|
|
392
|
+
|
|
393
|
+
|
|
394
|
+
|
|
395
|
+
|
|
396
|
+
|
|
397
|
+
|
|
398
|
+
|
|
399
|
+
|
|
400
|
+
|
|
401
|
+
Use the following command to generate image tags in html
|
|
402
|
+
|
|
403
|
+
```ruby
|
|
404
|
+
f2h g img box | banner | both <filename>
|
|
405
|
+
```
|
|
406
|
+
|
|
407
|
+
* We can pass `box` , `banner` or `both` to specify in what type of image tags needs to be inserted in.
|
|
408
|
+
* Currently all the filenames that are passed into as args are appended the extension of PNG
|
|
409
|
+
* When image is inserted in the html, it yanks the name and uses it to define as the id
|
|
410
|
+
* Using the id selector the tag is generated in CSS and JS as well
|
|
411
|
+
|
|
412
|
+
Example if we run `f2h g img box ipsum`
|
|
413
|
+
|
|
414
|
+
####Lorem_box.html
|
|
415
|
+
|
|
416
|
+
```
|
|
417
|
+
...
|
|
418
|
+
|
|
419
|
+
<img id="ipsum" src="box_images/ipsum.png" alt="">
|
|
420
|
+
|
|
421
|
+
...
|
|
422
|
+
```
|
|
423
|
+
|
|
424
|
+
####Lorem_box.css
|
|
425
|
+
|
|
426
|
+
```
|
|
427
|
+
...
|
|
428
|
+
|
|
429
|
+
#ipsum{
|
|
430
|
+
position: absolute;
|
|
431
|
+
top: 0;
|
|
432
|
+
left: 0;
|
|
433
|
+
}
|
|
434
|
+
|
|
435
|
+
...
|
|
436
|
+
```
|
|
437
|
+
####Lorem_box.js
|
|
438
|
+
|
|
439
|
+
```
|
|
440
|
+
...
|
|
441
|
+
|
|
442
|
+
TweenMax.to(ipsum, 0.0, {});
|
|
443
|
+
|
|
444
|
+
...
|
|
445
|
+
```
|
|
446
|
+
|
|
447
|
+
|
|
448
|
+
|
|
449
|
+
|
|
450
|
+
## Development
|
|
451
|
+
[x] Generate Tags in HTML, CSS and JS
|
|
452
|
+
|
|
453
|
+
[] Implement Destroy method to delete generated tags in all 3 files ( HTML, CSS, JS)
|
|
454
|
+
|
|
455
|
+
[] Migrate to TimeLine instead of using TweenMax for animations
|
|
456
|
+
|
|
457
|
+
## Contributing
|
|
458
|
+
|
|
459
|
+
Bug reports and pull requests are welcome on GitHub at https://github.com/ismk/Flash2HTML. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](contributor-covenant.org) code of conduct.
|
|
460
|
+
|
|
461
|
+
|
|
462
|
+
## License
|
|
463
|
+
|
|
464
|
+
The gem is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT).
|
|
465
|
+
|
|
466
|
+
elem.scrollTop += 2;
|
|
467
|
+
}
|
|
468
|
+
}, 200);
|
|
469
|
+
}
|
|
470
|
+
|
|
471
|
+
$(document).on("touchstart", "#isi", function(){
|
|
472
|
+
clearInterval(ascroll);
|
|
473
|
+
});
|
|
474
|
+
|
|
475
|
+
|
|
476
|
+
$("#overall_mask").on("click", function(){
|
|
477
|
+
console.log("overall mask was clicked");
|
|
478
|
+
WebViewCommunicator.sendJavascriptTo("main", "javascript:appRouter.homeView.openChildBrowser('', '<div data-advtype=box-mainClickThrough/>')");
|
|
479
|
+
});
|
|
480
|
+
|
|
481
|
+
$("#fdaBtn").on("click", function(){
|
|
482
|
+
console.log("fda btn open button clicked");
|
|
483
|
+
WebViewCommunicator.sendJavascriptTo("main", "javascript:appRouter.homeView.openChildBrowser('http://www.fda.gov/medwatch/', '<div data-advtype=box-fda-medwatch/>')");
|
|
484
|
+
});
|
|
485
|
+
|
|
486
|
+
$("#pi").on("click", function(){
|
|
487
|
+
console.log("pi button clicked");
|
|
488
|
+
WebViewCommunicator.sendJavascriptTo("main", "javascript:appRouter.homeView.openChildBrowser('http://127.0.0.1:8081/', '<div data-advtype=box-pres-info/>')");
|
|
489
|
+
});
|
|
490
|
+
|
|
491
|
+
$("#medguide").on("click", function(){
|
|
492
|
+
console.log("medguide button clicked");
|
|
493
|
+
WebViewCommunicator.sendJavascriptTo("main", "javascript:appRouter.homeView.openChildBrowser('http://127.0.0.1:8081/', '<div data-advtype=box-med-guide/>')");
|
|
494
|
+
});
|
|
495
|
+
|
|
496
|
+
|
|
497
|
+
});
|
|
498
|
+
|
|
499
|
+
```
|
|
500
|
+
|
|
501
|
+
|
|
502
|
+
|
|
503
|
+
|
|
504
|
+
|
|
505
|
+
|
|
506
|
+
|
|
507
|
+
|
|
508
|
+
|
|
509
|
+
|
|
510
|
+
|
|
511
|
+
|
|
512
|
+
|
|
513
|
+
|
|
514
|
+
Use the following command to generate image tags in html
|
|
515
|
+
|
|
516
|
+
```ruby
|
|
517
|
+
f2h g img box | banner | both <filename>
|
|
518
|
+
```
|
|
519
|
+
|
|
520
|
+
* We can pass `box` , `banner` or `both` to specify in what type of image tags needs to be inserted in.
|
|
521
|
+
* Currently all the filenames that are passed into as args are appended the extension of PNG
|
|
522
|
+
* When image is inserted in the html, it yanks the name and uses it to define as the id
|
|
523
|
+
* Using the id selector the tag is generated in CSS and JS as well
|
|
524
|
+
|
|
525
|
+
Example if we run `f2h g img box ipsum` the following code will be inserted in the box type files
|
|
526
|
+
|
|
527
|
+
####Lorem_box.html
|
|
528
|
+
|
|
529
|
+
```
|
|
530
|
+
...
|
|
531
|
+
|
|
532
|
+
<img id="ipsum" src="box_images/ipsum.png" alt="">
|
|
533
|
+
|
|
534
|
+
...
|
|
535
|
+
```
|
|
536
|
+
|
|
537
|
+
####Lorem_box.css
|
|
538
|
+
|
|
539
|
+
```
|
|
540
|
+
...
|
|
541
|
+
|
|
542
|
+
#ipsum{
|
|
543
|
+
position: absolute;
|
|
544
|
+
top: 0;
|
|
545
|
+
left: 0;
|
|
546
|
+
}
|
|
547
|
+
|
|
548
|
+
...
|
|
549
|
+
```
|
|
550
|
+
####Lorem_box.js
|
|
551
|
+
|
|
552
|
+
```
|
|
553
|
+
...
|
|
554
|
+
|
|
555
|
+
TweenMax.to(ipsum, 0.0, {});
|
|
556
|
+
|
|
557
|
+
...
|
|
558
|
+
```
|
|
559
|
+
|
|
560
|
+
|
|
22
561
|
|
|
23
|
-
TODO: Write usage instructions here
|
|
24
562
|
|
|
25
563
|
## Development
|
|
564
|
+
[x] Generate Tags in HTML, CSS and JS
|
|
26
565
|
|
|
27
|
-
|
|
566
|
+
[] Implement Destroy method to delete generated tags in all 3 files ( HTML, CSS, JS)
|
|
28
567
|
|
|
29
|
-
|
|
568
|
+
[] Migrate to TimeLine instead of using TweenMax for animations
|
|
30
569
|
|
|
31
570
|
## Contributing
|
|
32
571
|
|
data/lib/f2h/version.rb
CHANGED
data/lib/pdf2img.rb
CHANGED
|
@@ -6,8 +6,8 @@ module F2h
|
|
|
6
6
|
|
|
7
7
|
def do_the_pdf(pdfs_to_html)
|
|
8
8
|
p pdfs_to_html
|
|
9
|
-
html_pdf_imgs = []
|
|
10
9
|
pdfs_to_html.each do |file|
|
|
10
|
+
html_pdf_imgs = []
|
|
11
11
|
if file.include? " "
|
|
12
12
|
File.rename(file, file.gsub(" ","_"))
|
|
13
13
|
file = file.gsub(" ","_")
|
|
@@ -22,14 +22,15 @@ module F2h
|
|
|
22
22
|
html_pdf_imgs << img_tag.join
|
|
23
23
|
img.write(pdf_folder_name+"/#{pdf_folder_name}_#{idx}.png") { self.quality = 100}
|
|
24
24
|
end
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
puts
|
|
25
|
+
pdf_blob = @bp.pdf_html
|
|
26
|
+
pdf_blob = pdf_blob.split(/(<body>)/)
|
|
27
|
+
pdf_blob.insert(2,html_pdf_imgs.join("\n"))
|
|
28
|
+
pdf_blob = pdf_blob.join
|
|
29
|
+
puts pdf_blob
|
|
30
30
|
File.open(pdf_folder_name+".html", "w+") do |f|
|
|
31
|
-
f.write(
|
|
31
|
+
f.write(pdf_blob)
|
|
32
32
|
end
|
|
33
|
+
pdf_blob = ""
|
|
33
34
|
end
|
|
34
35
|
end
|
|
35
36
|
end
|
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: f2h
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.9.
|
|
4
|
+
version: 0.9.3
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Ismail Kalimi
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date:
|
|
11
|
+
date: 2016-01-04 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: rmagick
|