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 CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: 325ffaefd9b627bc76ab0a6996826b43c503822b
4
- data.tar.gz: 33bea4c01013ca073e8190d4c972428c5dbf25f9
3
+ metadata.gz: 0c37aa5fc15cfa361d73fdd69ca1c3c9714c5b56
4
+ data.tar.gz: 8db7d447611199cbf48d9838c12a8c54409db6c5
5
5
  SHA512:
6
- metadata.gz: 11618d56c62b024549bf72710269adfd50bd487d3995f04e0947318ec5c748d91329e12dfdb536244b5963512a06dcf2c786c43b73c900fb74bb7a8a6ace385f
7
- data.tar.gz: ed303b7017a46fd50ebb1841e922214dbf79721b999b909a872d218ab52a7b81b36b8e394cb843a9ec127000738c111f2b10a7894a6906e34c7c0c5e608178c5
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
- $fileInputLabel.hide();
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[0].reset();
55
- $fileInputLabel.show();
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: "PUT",
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[0].reset();
90
+ $form.get(0).reset();
84
91
  addNewSrcToImage(data.image.url);
85
- $fileInputLabel.show();
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[0].reset();
110
+ $form.get(0).reset();
106
111
  revertImageToOriginal();
107
- $fileInputLabel.show();
108
- $discardChangeLabel.hide();
109
- $submitButton.hide();
112
+ hideSaveDiscardButtons();
110
113
  showFailureNotification(data);
111
114
  };
112
115
 
@@ -1,92 +1,106 @@
1
- .phrasing-image-holder{
2
- form.phrasing-image-edit-form {
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
- label{
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
- width: 180px;
17
- padding: 12px 0;
62
+ .phrasing-image-file-input {
63
+ display: none;
64
+ }
18
65
 
19
- text-align: center;
66
+ .phrasing-image-edit-label {
67
+ @extend %phrasing-image-button-style;
20
68
 
21
- color: white;
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
- label.phrasing-image-edit-label {
29
- top: 20px;
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
- .phrasing-image-file-input {
40
- display: none;
77
+ background-color: $phrasing-image-btn-discard-chage-background;
41
78
  }
42
79
 
43
80
  .phrasing-image-submit-button {
44
- font-family: "icomoon";
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
- width: 181px;
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
- span.phrasable-image-wrapper{
74
- @extend .phrasing-image-holder;
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 .phrasing-image-holder;
100
+ @extend %phrasing-image-holder;
101
+ }
102
+
103
+ .phrasing-image-form-container {
91
104
  position: relative;
105
+ z-index: 255;
92
106
  }
@@ -1,4 +1,4 @@
1
1
  %span{ widget.wrapper_options }
2
- = image_tag(widget.image_url, widget.options)
3
2
  - if can_edit_phrases?
4
3
  = render 'phrasing_plus/form', widget: widget
4
+ = image_tag(widget.image_url, widget.options)
@@ -1,5 +1,6 @@
1
- = form_for(widget, html: { class: 'phrasing-image-edit-form'}) do |f|
2
- = f.label(:image, 'Click to edit image', class: 'phrasing-image-edit-label', for: "phrasing_image_image_#{widget.id}")
3
- = f.file_field(:image, class: 'phrasing-image-file-input', id: "phrasing_image_image_#{widget.id}")
4
- = f.label(:discard_change, class: 'phrasing-image-discard-change-label')
5
- = f.button('Save image', class: 'phrasing-image-submit-button')
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')
@@ -1,3 +1,3 @@
1
1
  module PhrasingPlus
2
- VERSION = "0.0.4"
2
+ VERSION = "0.0.5"
3
3
  end
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: phrasing_plus
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.0.4
4
+ version: 0.0.5
5
5
  platform: ruby
6
6
  authors:
7
7
  - Damir Svrtan