phrasing_plus 0.0.4 → 0.0.5
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/assets/javascripts/phrasing_image_widget.js +24 -21
- data/app/assets/stylesheets/phrasing_plus.scss +73 -59
- data/app/views/phrasing_plus/_editable_image.html.haml +1 -1
- data/app/views/phrasing_plus/_form.html.haml +6 -5
- data/lib/phrasing_plus/version.rb +1 -1
- metadata +1 -1
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 0c37aa5fc15cfa361d73fdd69ca1c3c9714c5b56
|
4
|
+
data.tar.gz: 8db7d447611199cbf48d9838c12a8c54409db6c5
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: c0f3b416895eccca8d6ed9b717002f5c9b84c29f2c5ef66b5af282fc2a1490762daa581de76dfb587d8cb90313df02826cd2d3ada33b2c40fa421b53a8b9f06e
|
7
|
+
data.tar.gz: fd05c06feaed51b7d4270f65f36ac677ecd83f6c07ffc837ff353c959f2527ca2b2b476b0122645d19ec14770f5227b5607897f1f7708bf7c05fb38601e86501
|
@@ -7,11 +7,23 @@ function PhrasingImageWidget(options){
|
|
7
7
|
var $form = options.$form;
|
8
8
|
var $submitButton = options.$submitButton;
|
9
9
|
|
10
|
+
var showSaveDiscardButtons = function() {
|
11
|
+
$fileInputLabel.hide();
|
12
|
+
$discardChangeLabel.css('display', 'block');
|
13
|
+
$submitButton.css('display', 'block');
|
14
|
+
};
|
15
|
+
|
16
|
+
var hideSaveDiscardButtons = function() {
|
17
|
+
$fileInputLabel.css('display', 'block');
|
18
|
+
$discardChangeLabel.hide();
|
19
|
+
$submitButton.hide();
|
20
|
+
};
|
21
|
+
|
10
22
|
var getImageSrc = function(){
|
11
23
|
if($image.size() !== 0){
|
12
|
-
$image.attr('src');
|
24
|
+
return $image.attr('src');
|
13
25
|
}else{
|
14
|
-
$wrapper.css('background-image');
|
26
|
+
return $wrapper.css('background-image');
|
15
27
|
}
|
16
28
|
};
|
17
29
|
|
@@ -26,9 +38,7 @@ function PhrasingImageWidget(options){
|
|
26
38
|
var showChosenImage = function(){
|
27
39
|
rememberOriginalImage();
|
28
40
|
setChosenImageAsSource();
|
29
|
-
|
30
|
-
$discardChangeLabel.show();
|
31
|
-
$submitButton.show();
|
41
|
+
showSaveDiscardButtons();
|
32
42
|
};
|
33
43
|
|
34
44
|
var setChosenImageAsSource = function(){
|
@@ -51,10 +61,8 @@ function PhrasingImageWidget(options){
|
|
51
61
|
|
52
62
|
var discardChosenImage = function(){
|
53
63
|
revertImageToOriginal();
|
54
|
-
$form
|
55
|
-
|
56
|
-
$discardChangeLabel.hide();
|
57
|
-
$submitButton.hide();
|
64
|
+
$form.get(0).reset();
|
65
|
+
hideSaveDiscardButtons();
|
58
66
|
};
|
59
67
|
|
60
68
|
var revertImageToOriginal = function(){
|
@@ -64,27 +72,24 @@ function PhrasingImageWidget(options){
|
|
64
72
|
|
65
73
|
var uploadChosenImage = function(){
|
66
74
|
$.ajax({
|
67
|
-
type:
|
75
|
+
type: 'PUT',
|
68
76
|
url: $form.attr('action'),
|
69
77
|
data: new FormData( $form[0] ),
|
70
78
|
processData: false,
|
71
79
|
contentType: false,
|
72
|
-
success: function(data)
|
73
|
-
{
|
80
|
+
success: function(data) {
|
74
81
|
handleSuccessfullUpload(data);
|
75
82
|
},
|
76
|
-
error: function(data){
|
83
|
+
error: function(data) {
|
77
84
|
handleFailedUpload(data);
|
78
85
|
}
|
79
86
|
});
|
80
87
|
};
|
81
88
|
|
82
89
|
var handleSuccessfullUpload = function(data){
|
83
|
-
$form
|
90
|
+
$form.get(0).reset();
|
84
91
|
addNewSrcToImage(data.image.url);
|
85
|
-
|
86
|
-
$discardChangeLabel.hide();
|
87
|
-
$submitButton.hide();
|
92
|
+
hideSaveDiscardButtons();
|
88
93
|
showSuccessNotification(data);
|
89
94
|
};
|
90
95
|
|
@@ -102,11 +107,9 @@ function PhrasingImageWidget(options){
|
|
102
107
|
};
|
103
108
|
|
104
109
|
var handleFailedUpload = function(data){
|
105
|
-
$form
|
110
|
+
$form.get(0).reset();
|
106
111
|
revertImageToOriginal();
|
107
|
-
|
108
|
-
$discardChangeLabel.hide();
|
109
|
-
$submitButton.hide();
|
112
|
+
hideSaveDiscardButtons();
|
110
113
|
showFailureNotification(data);
|
111
114
|
};
|
112
115
|
|
@@ -1,92 +1,106 @@
|
|
1
|
-
|
2
|
-
|
1
|
+
$phrasing-image-font-family: "icomoon";
|
2
|
+
$phrasing-image-font-size: 13px;
|
3
|
+
$phrasing-image-font-weight: 200;
|
4
|
+
|
5
|
+
$phrasing-image-btn-color: #FFFFFF;
|
6
|
+
|
7
|
+
$phrasing-image-btn-width: 180px;
|
8
|
+
$phrasing-image-line-height: 35px;
|
9
|
+
|
10
|
+
$phrasing-image-border-width: 2px;
|
11
|
+
$phrasing-image-border-color: #FFFFFF;
|
12
|
+
$phrasing-image-btn-border-radius: 35px;
|
13
|
+
|
14
|
+
$phrasing-image-btn-edit-background: #898989;
|
15
|
+
$phrasing-image-btn-discard-chage-background: #F1A515;
|
16
|
+
$phrasing-image-btn-submit-background: #56AE45;
|
17
|
+
|
18
|
+
%phrasing-image-button-style {
|
19
|
+
padding: 0;
|
20
|
+
margin-bottom: 10px;
|
21
|
+
|
22
|
+
cursor: pointer;
|
23
|
+
|
24
|
+
display: block;
|
25
|
+
|
26
|
+
font: {
|
27
|
+
family: $phrasing-image-font-family;
|
28
|
+
size: $phrasing-image-font-size;
|
29
|
+
weight: $phrasing-image-font-weight;
|
30
|
+
}
|
31
|
+
|
32
|
+
text-align: center;
|
33
|
+
color: $phrasing-image-btn-color;
|
34
|
+
|
35
|
+
width: $phrasing-image-btn-width;
|
36
|
+
line-height: $phrasing-image-line-height;
|
37
|
+
|
38
|
+
border: {
|
39
|
+
width: $phrasing-image-border-width;
|
40
|
+
style: solid;
|
41
|
+
color: $phrasing-image-border-color;
|
42
|
+
}
|
43
|
+
-webkit-border-radius: $phrasing-image-btn-border-radius;
|
44
|
+
-moz-border-radius: $phrasing-image-btn-border-radius;
|
45
|
+
border-radius: $phrasing-image-btn-border-radius;
|
46
|
+
}
|
47
|
+
|
48
|
+
%phrasing-image-holder{
|
49
|
+
|
50
|
+
&.phrasable-on .phrasing-image-edit-form{
|
51
|
+
display: block;
|
52
|
+
}
|
53
|
+
|
54
|
+
.phrasing-image-edit-form {
|
3
55
|
display: none;
|
4
56
|
position: absolute;
|
5
57
|
top: 0;
|
6
58
|
right: 0;
|
7
59
|
|
8
|
-
|
9
|
-
font-family: "icomoon";
|
10
|
-
font-size: 13px;
|
11
|
-
font-weight: 200;
|
12
|
-
|
13
|
-
position: absolute;
|
14
|
-
right: 20px;
|
60
|
+
padding: 20px;
|
15
61
|
|
16
|
-
|
17
|
-
|
62
|
+
.phrasing-image-file-input {
|
63
|
+
display: none;
|
64
|
+
}
|
18
65
|
|
19
|
-
|
66
|
+
.phrasing-image-edit-label {
|
67
|
+
@extend %phrasing-image-button-style;
|
20
68
|
|
21
|
-
color:
|
22
|
-
border: 2px solid white;
|
23
|
-
-webkit-border-radius: 35px;
|
24
|
-
-moz-border-radius: 35px;
|
25
|
-
border-radius: 35px;
|
69
|
+
background-color: $phrasing-image-btn-edit-background;
|
26
70
|
}
|
27
71
|
|
28
|
-
|
29
|
-
|
30
|
-
background: #898989;
|
31
|
-
}
|
72
|
+
.phrasing-image-discard-change-label{
|
73
|
+
@extend %phrasing-image-button-style;
|
32
74
|
|
33
|
-
label.phrasing-image-discard-change-label{
|
34
|
-
top: 65px;
|
35
|
-
background: #F1A515;
|
36
75
|
display: none;
|
37
|
-
}
|
38
76
|
|
39
|
-
|
40
|
-
display: none;
|
77
|
+
background-color: $phrasing-image-btn-discard-chage-background;
|
41
78
|
}
|
42
79
|
|
43
80
|
.phrasing-image-submit-button {
|
44
|
-
|
45
|
-
font-size: 13px;
|
46
|
-
font-weight: 200;
|
47
|
-
|
48
|
-
position: absolute;
|
49
|
-
top: 20px;
|
50
|
-
right: 20px;
|
81
|
+
@extend %phrasing-image-button-style;
|
51
82
|
|
52
83
|
display: none;
|
53
84
|
|
54
|
-
|
55
|
-
height: 42px;
|
56
|
-
|
57
|
-
color: white;
|
58
|
-
border: 2px solid white;
|
59
|
-
-webkit-border-radius: 35px;
|
60
|
-
-moz-border-radius: 35px;
|
61
|
-
border-radius: 35px;
|
62
|
-
background: #56AE45;
|
63
|
-
}
|
64
|
-
}
|
65
|
-
|
66
|
-
&.phrasable-on{
|
67
|
-
.phrasing-image-edit-form{
|
68
|
-
display: block;
|
85
|
+
background-color: $phrasing-image-btn-submit-background;
|
69
86
|
}
|
70
87
|
}
|
71
88
|
}
|
72
89
|
|
73
|
-
|
74
|
-
@extend
|
75
|
-
position: relative;
|
90
|
+
.phrasable-image-wrapper{
|
91
|
+
@extend %phrasing-image-holder;
|
76
92
|
display: inline-block;
|
77
93
|
|
78
94
|
.phrasable-image {
|
79
95
|
position: relative;
|
80
96
|
}
|
81
|
-
|
82
|
-
&.phrasable-on {
|
83
|
-
.phrasable-image {
|
84
|
-
opacity: .8;
|
85
|
-
}
|
86
|
-
}
|
87
97
|
}
|
88
98
|
|
89
99
|
.phrasable-background-image{
|
90
|
-
@extend
|
100
|
+
@extend %phrasing-image-holder;
|
101
|
+
}
|
102
|
+
|
103
|
+
.phrasing-image-form-container {
|
91
104
|
position: relative;
|
105
|
+
z-index: 255;
|
92
106
|
}
|
@@ -1,5 +1,6 @@
|
|
1
|
-
|
2
|
-
=
|
3
|
-
|
4
|
-
|
5
|
-
|
1
|
+
.phrasing-image-form-container
|
2
|
+
= form_for(widget, html: { class: 'phrasing-image-edit-form'}) do |f|
|
3
|
+
= f.label(:image, 'Click to edit image', class: 'phrasing-image-edit-label', for: "phrasing_image_image_#{widget.id}")
|
4
|
+
= f.file_field(:image, class: 'phrasing-image-file-input', id: "phrasing_image_image_#{widget.id}")
|
5
|
+
= f.button('Save image', class: 'phrasing-image-submit-button')
|
6
|
+
= f.label(:discard_change, class: 'phrasing-image-discard-change-label')
|