ilmedova
/
Attendize
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Upgraded the preview feature while editing the design of event/organiser pages. IFrames now scale correctly.

This commit is contained in:
Dave Earley 2016-06-09 12:15:48 +01:00
parent a1f2356eab
commit bc6232c520
4 changed files with 75 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
public/assets/javascript/app.js
View File

@ -362,6 +362,36 @@ $(function () {
}
});
/**
* Scale the preview iFrames when changing the design of organiser/event pages.
*/
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
var target = $(e.target).attr("href");
if ($(target).hasClass('scale_iframe')) {
var $iframe = $('iframe', target);
var iframeWidth = $('.iframe_wrap').innerWidth();
var iframeHeight = $('.iframe_wrap').height();
$iframe.css({
width: 1200,
height: 1400
});
var iframeScale = (iframeWidth / 1200);
$iframe.css({
'-webkit-transform': 'scale(' + iframeScale + ')',
'-ms-transform': 'scale(' + iframeScale + ')',
'transform': 'scale(' + iframeScale + ')',
'-webkit-transform-origin': '0 0',
'-ms-transform-origin': '0 0',
'transform-origin': '0 0',
});
}
});
});
function changeQuestionType(select)

30
public/assets/javascript/backend.js
View File

@ -9342,6 +9342,36 @@ $.cf = {
}
});
/**
* Scale the preview iFrames when changing the design of organiser/event pages.
*/
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
var target = $(e.target).attr("href");
if ($(target).hasClass('scale_iframe')) {
var $iframe = $('iframe', target);
var iframeWidth = $('.iframe_wrap').innerWidth();
var iframeHeight = $('.iframe_wrap').height();
$iframe.css({
width: 1200,
height: 1400
});
var iframeScale = (iframeWidth / 1200);
$iframe.css({
'-webkit-transform': 'scale(' + iframeScale + ')',
'-ms-transform': 'scale(' + iframeScale + ')',
'transform': 'scale(' + iframeScale + ')',
'-webkit-transform-origin': '0 0',
'-ms-transform-origin': '0 0',
'transform-origin': '0 0',
});
}
});
});
function changeQuestionType(select)

14
resources/views/ManageEvent/Customize.blade.php
View File

@ -97,7 +97,7 @@
/* Color picker */
$('.colorpicker').minicolors();
$('#ticket_design .colorpicker').on('change', function(e) {
$('#ticket_design .colorpicker').on('change', function (e) {
var borderColor = $('input[name="ticket_border_color"]').val();
var bgColor = $('input[name="ticket_bg_color"]').val();
var textColor = $('input[name="ticket_text_color"]').val();
@ -124,9 +124,9 @@
});
});
</script>
<style type="text/css">
@ -296,12 +296,12 @@
<div class="custom-checkbox mb5">
{!! Form::checkbox('social_show_facebook', 1, $event->social_show_facebook, ['data-toggle' => 'toggle']) !!}
{!! Form::checkbox('social_show_facebook', 1, $event->social_show_facebook, ['data-toggle' => 'toggle']) !!}
{!! Form::label('social_show_facebook', 'Facebook') !!}
</div>
<div class="custom-checkbox mb5">
{!! Form::checkbox('social_show_twitter', 1, $event->social_show_twitter, ['data-toggle' => 'toggle']) !!}
{!! Form::checkbox('social_show_twitter', 1, $event->social_show_twitter, ['data-toggle' => 'toggle']) !!}
{!! Form::label('social_show_twitter', 'Twitter') !!}
</div>
@ -334,7 +334,7 @@
{!! Form::close() !!}
</div>
<div class="tab-pane {{$tab == 'design' ? 'active' : ''}}" id="design">
<div class="tab-pane scale_iframe {{$tab == 'design' ? 'active' : ''}}" id="design">
<div class="row">
<div class="col-sm-6">
@ -407,7 +407,7 @@
<div class="col-sm-6">
<h4>Event Page Preview</h4>
<div style="height: 600px; border: 1px solid #ccc;">
<div class="iframe_wrap" style="height: 600px; border: 1px solid #ccc;">
<iframe id="previewIframe"
src="{{route('showEventPagePreview', ['event_id'=>$event->id])}}"
frameborder="0" style="overflow:hidden;height:100%;width:100%" height="100%"
@ -507,8 +507,6 @@
</div>
<div class="tab-pane {{$tab == 'ticket_design' ? 'active' : ''}}" id="ticket_design">
{!! Form::model($event, array('url' => route('postEditEventTicketDesign', ['event_id' => $event->id]), 'class' => 'ajax ')) !!}
<h4>Ticket Design</h4>

18
resources/views/ManageOrganiser/Customize.blade.php
View File

@ -22,15 +22,13 @@
<script>
$(function () {
$('.colorpicker').minicolors({
changeDelay: 500,
change: function() {
var replaced = replaceUrlParam('{{route('showOrganiserHome', ['organiser_id'=>$organiser->id])}}', 'preview_styles', encodeURIComponent($('#OrganiserPageDesign form').serialize()));
document.getElementById('previewIframe').src = replaced;
changeDelay: 500,
change: function () {
var replaced = replaceUrlParam('{{route('showOrganiserHome', ['organiser_id'=>$organiser->id])}}', 'preview_styles', encodeURIComponent($('#OrganiserPageDesign form').serialize()));
document.getElementById('previewIframe').src = replaced;
}
});
});
</script>
@stop
@ -147,7 +145,7 @@
</div>
{!! Form::close() !!}
</div>
<div class="tab-pane" id="OrganiserPageDesign">
<div class="tab-pane scale_iframe" id="OrganiserPageDesign">
{!! Form::model($organiser, array('url' => route('postEditOrganiserPageDesign', ['event_id' => $organiser->id]), 'class' => 'ajax ')) !!}
<div class="row">
@ -185,8 +183,10 @@
</div>
<div class="col-md-6">
<h4>Organiser Page Preview</h4>
<div class="preview" style="height: 600px; border: 1px solid #ccc;">
<iframe id="previewIframe" src="{{ route('showOrganiserHome', ['organiser_id' => $organiser->id]) }}"
<div class="preview iframe_wrap"
style="height: 500px; border: 1px solid #ccc; overflow: hidden;">
<iframe id="previewIframe"
src="{{ route('showOrganiserHome', ['organiser_id' => $organiser->id]) }}"
frameborder="0" style="overflow:hidden;height:100%;width:100%" width="100%"
height="100%"></iframe>
</div>