[Git][noosfero/noosfero][master] 2 commits: adding thumbnail in editing profile picture

[Rodrigo Souto]

Rodrigo Souto pushed to branch master at Noosfero / noosfero


Commits:
70010915 by Lucas Malta at 2017-12-12T14:24:28+00:00
adding thumbnail in editing profile picture

- - - - -
a29f4956 by Rodrigo Souto at 2017-12-12T14:24:29+00:00
Merge branch 'adding_thumbnail_profile_picture' into 'master'

adding thumbnail in editing profile picture

See merge request noosfero/noosfero!1354
- - - - -


3 changed files:

- app/views/shared/_change_image.html.erb
- app/views/shared/_show_thumbnail.html.erb
- + public/javascripts/profile_image.js


Changes:

=====================================
app/views/shared/_change_image.html.erb
=====================================
--- a/app/views/shared/_change_image.html.erb
+++ b/app/views/shared/_change_image.html.erb
@@ -1,3 +1,4 @@
-<%= file_field_tag("#{for_attr}[uploaded_data]", { :onchange => 'updateImg(this.value)' } ) %>
+<%= file_field_tag("#{for_attr}[uploaded_data]", { :onchange => 'updateImg(this.value)', :id => "picture-input" } ) %>
 <%= labelled_form_field(_("Image Label:"), text_field_tag("#{for_attr}[label]")) %>
 <%= button_to_function(:cancel,_('Cancel'),"jQuery('#change-image-link').show(); jQuery('#change-image').hide()", :id => 'cancel-change-image-link', :style => 'display: none')%>
+<%= javascript_include_tag "profile_image" %>


=====================================
app/views/shared/_show_thumbnail.html.erb
=====================================
--- a/app/views/shared/_show_thumbnail.html.erb
+++ b/app/views/shared/_show_thumbnail.html.erb
@@ -1,4 +1,6 @@
 <%= image_tag(image.public_filename(:thumb)) %>
+<div id='preview-text' data-label="<%= _('Preview') %>"></div>
+<div id='preview-image'></div>
 
 <br/>
 


=====================================
public/javascripts/profile_image.js
=====================================
--- /dev/null
+++ b/public/javascripts/profile_image.js
@@ -0,0 +1,14 @@
+$(function() {
+    $('#picture-input').on('change', function(event) {
+      var files = event.target.files;
+      var image = files[0]
+      var reader = new FileReader();
+      reader.onload = function(file) {
+        var img = new Image(98, 100);
+        img.src = file.target.result;
+        $('#preview-image').html(img);
+        $('#preview-text').html($('#preview-text').data('label'));
+      }
+      reader.readAsDataURL(image);
+    });
+  });



View it on GitLab: https://gitlab.com/noosfero/noosfero/compare/4b4d4a6ab13acd9ebdb95c88a963d066c0538180...a29f49568516ec210a931cd83d4eeed4e77d956e

---
View it on GitLab: https://gitlab.com/noosfero/noosfero/compare/4b4d4a6ab13acd9ebdb95c88a963d066c0538180...a29f49568516ec210a931cd83d4eeed4e77d956e
You're receiving this email because of your account on gitlab.com.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://listas.softwarelivre.org/pipermail/noosfero-dev/attachments/20171212/b64a629c/attachment-0001.html>