add download function

refactored code of personalisation logo section
wip - file upload
This commit is contained in:
mike-esokia
2018-06-01 11:29:09 +04:00
committed by Mike Ng
parent 4d96feaf28
commit 3d50c59e89
6 changed files with 41 additions and 31 deletions

View File

@@ -46,6 +46,8 @@ class SetupController extends Controller
} }
if ('POST' === $request->getMethod()) { if ('POST' === $request->getMethod()) {
var_dump($request);
die('here');
$form->submit($request->request->all()); $form->submit($request->request->all());
if ($form->isValid()) { if ($form->isValid()) {

View File

@@ -62,21 +62,6 @@ class GeneralFormType extends AbstractType
'id' => 'personalize-logo-container' 'id' => 'personalize-logo-container'
] ]
]); ]);
// $builder->add('personalize-logo-choice', 'choice', [
// 'label' => 'Design of personalization logo section',
// 'choices' => ['original' => 'original', 'personalize' => 'personalize'],
// 'required'=>true,
// 'expanded'=>true,
// 'multiple'=>false,
// 'placeholder'=>false,
// 'attr' => [
// 'id' => 'personalize-logo-container'
// ]
//
// ]);
// $builder->add('personalize-logo', 'file', [
// 'label' => false,
// ]);
} }
public function getName() public function getName()

View File

@@ -19,13 +19,13 @@ class PersonalisationLogoForm extends AbstractType
{ {
$builder->add('originalChoiceInput', 'choice', [ $builder->add('originalChoiceInput', 'choice', [
'label' => false, 'label' => false,
'choices' => ['original' => 'original'], 'choices' => ['original' => 'original-choice-label'],
'expanded' => true, 'expanded' => true,
]); ]);
$builder->add('personaliseChoiceInput', 'choice', [ $builder->add('personaliseChoiceInput', 'choice', [
'label' => false, 'label' => false,
'choices' => ['personalise' => 'personalise'], 'choices' => ['personalise' => 'personalise-choice-label'],
'expanded' => true, 'expanded' => true,
]); ]);

View File

@@ -685,6 +685,7 @@ span.simplecolorpicker.picker {
margin-top: 10px; margin-top: 10px;
padding: 3px 20px; padding: 3px 20px;
line-height: 11px; line-height: 11px;
margin-left: 0;
} }
#help-text { #help-text {
font-family: Roboto; font-family: Roboto;
@@ -704,9 +705,9 @@ span.simplecolorpicker.picker {
text-align: left; text-align: left;
color: #ff0404; color: #ff0404;
} }
//input[type="file"] { input[type="file"] {
// display: none; display: none;
//} }
} }
} }

View File

@@ -3,9 +3,10 @@
<td> <td>
{{ form_widget(form.originalChoiceInput, { 'attr': {'class': 'choice-radio'} }) }} {{ form_widget(form.originalChoiceInput, { 'attr': {'class': 'choice-radio'} }) }}
<div class="image-container"> <div class="image-container">
<img id="original-image-placeholder" src="/assets/common/images/logo.png"/> <img id="original-image-placeholder" alt="gabari"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAACOCAYAAABg4BtLAAADgUlEQVR4Xu2czyt8URjGnyErWfgLWClLCUuxsmCDoijJwpo0GT+S/EhSFmyUErGQ2LBQFrJEmrKxmuIvsLRAo3vM+M5M3c6drnO/hs8s77n3zPu+zznP8z4zZyaWTqfT+gOvGIn+MpRB9JcBKhAF0RKtAEu3RIHzDTsworFYLG+SbEOVvV7YYP2v636ZkmhhZUA0s6RZugXmyPXeZY8GtWnsUfbop+5GTVLsUfZowRqAjCAjyMgpG8O6sC6s+1kBPmHIrATXdsxvfsgIMoKMIKO8NQAZOTYBsC6sC+vCurBubgVcyw6sC+vCurAurAvr5lTgu2QHeUFekBfkBXlBXpCXfxUoVl/RUXQUHUVH0VF0FB1FR78qwBkGn9aI370UFoZjrI6/waap9ykw7gX3gnvBveBecC+4F9wL7sWvI8pex73gXjIV4OcgmUIUa6++637cC+4F94J7wb3gXnAvuBfcC+4l25LSGdEZ0RnRGdEZ0RnRGdEZ0RnRGfmsAY7fcPymRP9FzsZqP3088LdpPz0RW3wkaqtQqY2DaKkhZosXRG0VKnb88fFRy8vLOj4+1uvrqzo6OjQ5OamGhgYVdl3Fzh3k/kgQfXh40PDwsK6vr/Niqqmp0e7urlpbW4PEGuoe54m+vLxobGxM5+fnWlxcVE9Pj8rKynR0dKSZmRk1Nzdra2tL1dXVoRKxPew80fv7e/X29hpE4/G4ysvLTUzv7+9aXV3VxsaGTk9P1djYaIs11LjzRA8PDw2iucm8vb3p8vJS09PTur291f7+vgYGBkIlYnvYeaLr6+tmH3oJ19XVKZlMam5uTmdnZ1+xeSSVSCRssYYad57owsKCLi4utLS0pO3tbe3t7amqqsos55GREbNP29vbNTs7GyoR28POE/UQHR8f/4qjs7NT8/PzRlZSqZT6+/sNQZU8ogcHBxocHFRTU5PRUQ89j3W9193dnbq6uuQVo6+vzwZKqHHniGaTmZiYMKSUe0LMS3Btbe13sO7z87NGR0d1c3Nj5KS7u9sgc3JyYuSmra1Nm5ubqqysDIWY7WHniHoBXF1daWhoSE9PT3nxtLS0aGdnR/X19bY4Q49Hkqh3EtSTlZWVFdMhVVRUGAKamppSbW1t6CSCTBBJokECcX0PibqucNTzg2jUFXf9fiDqusJRzw+iUVfc9fuBqOsKRz3/n0H0A2kqGPz1ouCnAAAAAElFTkSuQmCC"/>
</div> </div>
<a href="#">{{ 'prod::setup: download gabari' | trans }}</a> <a id="download-image-template" href="#">{{ 'prod::setup: download gabari' | trans }}</a>
</td> </td>
<td> <td>
{{ form_widget(form.personaliseChoiceInput) }} {{ form_widget(form.personaliseChoiceInput) }}
@@ -16,7 +17,8 @@
</div> </div>
<div> <div>
{{ form_widget(form.personalizeLogoInput) }} {{ form_widget(form.personalizeLogoInput) }}
<button id="select-logo-btn">{{ 'prod::setup: select file' | trans }}</button> <label for="general_personalize-logo-choice_personalizeLogoInput"
id="select-logo-btn">{{ 'prod::setup: select file' | trans }}</label>
</div> </div>
</td> </td>
</tr> </tr>
@@ -25,6 +27,7 @@
<script type="text/javascript"> <script type="text/javascript">
$(document).ready(function () { $(document).ready(function () {
var fileToUpload = null;
var errorDimension = '{{ 'prod::setup: error text dimension' | trans }}'; var errorDimension = '{{ 'prod::setup: error text dimension' | trans }}';
var errorFileType = '{{ 'prod::setup: error text file type' | trans }}'; var errorFileType = '{{ 'prod::setup: error text file type' | trans }}';
@@ -41,15 +44,31 @@
$(this).closest('td').siblings().find('input').prop('checked', false); $(this).closest('td').siblings().find('input').prop('checked', false);
}); });
$('#select-logo-btn').on('click', function (e) {
e.stopPropagation();
$('#general_personalize-logo-choice_personalizeLogoInput').trigger('click');
});
$("#general_personalize-logo-choice_personalizeLogoInput").change(function () { $("#general_personalize-logo-choice_personalizeLogoInput").change(function () {
readURL(this); readURL(this);
}); });
$("#download-image-template").on('click', function (event) {
event.preventDefault();
var imageInBase64 = $('#original-image-placeholder').attr('src');
var mimeInfo = base64MimeType(imageInBase64);
var ext = mimeInfo.split('/').pop();
var filename = $('#original-image-placeholder').attr('alt') + "." + ext;
download(imageInBase64, filename, mimeInfo);
});
var base64MimeType = function base64MimeType(encoded) {
var result = null;
if (typeof encoded !== 'string') {
return result;
}
var mime = encoded.match(/data:([a-zA-Z0-9]+\/[a-zA-Z0-9-.+]+).*,.*/);
if (mime && mime.length) {
result = mime[1];
}
return result;
};
function readURL(input) { function readURL(input) {
if (input.files && input.files[0]) { if (input.files && input.files[0]) {
var reader = new FileReader(); var reader = new FileReader();
@@ -65,7 +84,6 @@
//check dimensions //check dimensions
if (height > 42 || width > 52) { if (height > 42 || width > 52) {
debugger;
$('#error-text').text(errorDimension); $('#error-text').text(errorDimension);
$('#error-text').show(); $('#error-text').show();
$('#help-text').hide(); $('#help-text').hide();
@@ -84,7 +102,7 @@
$('#personalize-image-container').hide(); $('#personalize-image-container').hide();
return false; return false;
} }
fileToUpload = input.files[0];
$('#personalize-image-container').show(); $('#personalize-image-container').show();
$('#error-text').hide(); $('#error-text').hide();
$('#help-text').hide(); $('#help-text').hide();
@@ -96,7 +114,10 @@
reader.readAsDataURL(input.files[0]); reader.readAsDataURL(input.files[0]);
} }
} }
}); });
</script> </script>

View File

@@ -80,7 +80,8 @@
<div style="clear: both;"></div> <div style="clear: both;"></div>
<div class="well well-large"> <div class="well well-large">
<div style="max-width: 400px;margin: 0 auto 10px;"> <div style="max-width: 400px;margin: 0 auto 10px;">
<input type="submit" class="btn btn-primary btn-block btn-large" value="{{ 'boutton::valider' | trans }}"/> <input type="submit" id="submitSetupForm" class="btn btn-primary btn-block btn-large"
value="{{ 'boutton::valider' | trans }}"/>
</div> </div>
</div> </div>
{{ form_end(form) }} {{ form_end(form) }}