phrasing_plus 0.0.4 → 0.0.5

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.
Files changed (7) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/javascripts/phrasing_image_widget.js +24 -21
  3. data/app/assets/stylesheets/phrasing_plus.scss +73 -59
  4. data/app/views/phrasing_plus/_editable_image.html.haml +1 -1
  5. data/app/views/phrasing_plus/_form.html.haml +6 -5
  6. data/lib/phrasing_plus/version.rb +1 -1
  7. metadata +1 -1
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
data/app/assets/javascripts/phrasing_image_widget.js CHANGED
@@ -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
 
data/app/assets/stylesheets/phrasing_plus.scss CHANGED
@@ -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
  }
data/app/views/phrasing_plus/_editable_image.html.haml CHANGED
@@ -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)
data/app/views/phrasing_plus/_form.html.haml CHANGED
@@ -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')
data/lib/phrasing_plus/version.rb CHANGED
@@ -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