Jump to content

Help with launching spinning gif when Submit is selected


Chrisj
 Share

Recommended Posts

I have added a spinning gif successfully to this web page, now I am seeking help so that it only appears when the Form submit button is selected. Any help will be appreciated.

<div class="wo_about_wrapper_parent">
	<div class="wo_about_wrapper">
		<div class="hero hero-overlay" style="background-color: #d84c47;">
			<div class="container">
				<h1 class="text-center">{{LANG upload_new_video}}</h1>
			</div>
		</div>
		<svg id="wave" viewBox="0 0 100 15"><path fill="#d84c47" opacity="0.5" d="M0 30 V15 Q30 3 60 15 V30z"></path><path fill="#d84c47" d="M0 30 V12 Q30 17 55 12 T100 11 V30z"></path></svg>
	</div>
</div>
<div class="col-md-2"></div>
<div class="col-md-8 pt_page_margin">
	<div class="content pt_shadow">
		<div class="col-md-12 pt_upload_vdo">
			<?php if ($pt->user->admin == 1) { ?>
				<div class="alert alert-warning">
					<h4>Just admins can see this message</h4>
					<p>Note: Your server max upload size is: <?php echo ini_get('upload_max_filesize')?>, means you can't upload files that are larger than: <?php echo ini_get('upload_max_filesize')?><br><br> If you want to increase the limit or If you can't upload large files, go to Admin Settings > Settings > Site Settings > Max upload size and increase the value, if you still can't upload large files, please contact your host provider and let them increase the upload limit and max_execution_time.</p>
				</div>
			<?php } ?>
			<div class="upload upload-video" data-block="video-drop-zone">
				<div>
					<svg fill="currentColor" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" class="feather feather-upload"><path d="M14,13V17H10V13H7L12,8L17,13M19.35,10.03C18.67,6.59 15.64,4 12,4C9.11,4 6.6,5.64 5.35,8.03C2.34,8.36 0,10.9 0,14A6,6 0 0,0 6,20H19A5,5 0 0,0 24,15C24,12.36 21.95,10.22 19.35,10.03Z" /></svg>
					<h4>{{LANG darg_drop_video}}</h4>
					<p>{{LANG or}} {{LANG click_2choose_file}}</p>
					<button class="btn btn-main">{{LANG upload}}</button>
				</div>
			</div>
			<div class="progress hidden">
				<span class="percent">0%</span>
				<div class="progress_bar_parent">
					<div class="bar upload-progress-bar progress-bar active"></div>
				</div>
				<div class="clear"></div>
				<div class="text-center pt_prcs_vdo"></div>
			</div>

<style>
.form-group1.hidden {
  visibility:hidden;
}
.form-group1.hidden {  /*this is being used, it overrides the previous rule*/
  position:absolute;
  left:-999em;
}
p {margin:0}
</style>

			<form action="" method="POST" id="upload-video" style="visibility: hidden;">
				<input type="file" name="video" accept="video/*" class="upload-video-file">
			</form>
			<div class="fluid upload-ffmpeg-mode hidden" id="upload-form">
				<div class="col-md-12">
					<form action="" class="form-horizontal setting-panel pt_forms" method="POST">
						<div class="form-group">
							<label class="col-md-12" for="title">{{LANG video_title}}</label>
							<div class="col-md-12">
								<input id="title" name="title" type="text" placeholder="" class="form-control input-md">
								<span class="help-block">{{LANG video_title_help}}</span>
							</div>
						</div>
						<div class="form-group">
							<label class="col-md-12" for="description">{{LANG video_description}}</label>
							<div class="col-md-12">
								<textarea name="description" id="description" cols="30" rows="5" class="form-control"></textarea>
							</div>
						</div>
						<div class="form-group">
							<label class="col-md-12" for="category_id">{{LANG category}}</label>
							<div class="col-md-12">
								<select name="category_id" id="category_id" class="form-control">
									<?php foreach($pt->categories as $key => $category) {?>
									<option value="<?php echo $key?>"><?php echo $category?></option>
									<?php } ?>
								</select>
							</div>
						</div>
                  <!--<div class="form-group1">--><div class="form-group1 hidden">
                     <!--<label class="col-md-12" for="privacy">{{LANG privacy}}</label>-->
                     <!--<div class="col-md-12">-->
                        <select name="privacy" id="privacy" class="form-control">
                              <option hidden value="0">public</option>
						      <option hidden value="1">private</option>
    						  <option selected value="2"></option>
                               <!--<option value="2">{{LANG unlisted}}</option>-->
                        </select>
                     <!--</div>-->
                  </div>
                  <div class="form-group1 hidden">
                        <!--<label class="col-md-12" for="age_restriction">{{LANG age_restriction}}</label>-->
                        <!--<div class="col-md-12">-->
                           <select name="age_restriction" id="age_restriction" class="form-control">
                              <option selected value="1">{{LANG all_ages}}</option>
                              <option hidden value="2"></option>
                           </select>
                        <!--</div>-->
                     </div>
						<div class="form-group">
							<label class="col-md-12" for="tags">{{LANG tags}}</label>
							<div class="col-md-12">
								<input id="mySingleFieldTags" name="tags" type="text" placeholder="" class="form-control input-md">
								<span class="help-block">{{LANG tags_help}}</span>
							</div>
						</div>

						<div class="form-group hidden" id="video-thumnails">
							<label class="col-md-12" for="thumbnail">{{LANG thumbnail}}</label>
							<div class="col-md-12">
								<div class="fluid">
									<div class="carousel slide" id="choose-thumnail-cr" data-interval="false" style="cursor: pointer">
										<div class="carousel-inner">
											<div class="item active"></div>
										</div>
										<div class="fluid choose-thumnail-control">
											<span class="pull-left">{{LANG video_thumbs}}</span>
											<span class="pull-right">
												<a class="btn btn-default" href="#choose-thumnail-cr" data-slide="prev">
													<i class="fa fa-caret-left"></i>
												</a>
												<a class="btn btn-default" href="#choose-thumnail-cr"  data-slide="next">
													<i class="fa fa-caret-right"></i>
												</a>
											</span>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="last-sett-btn modal-footer" style="margin: 0px -40px -10px -40px;">
							<button type="submit" id="submit-btn" class="btn btn-main setting-panel-mdbtn" disabled><svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-check-circle'><path d='M22 11.08V12a10 10 0 1 1-5.93-9.14'></path><polyline points='22 4 12 14.01 9 11.01'></polyline></svg> {{LANG publish}}</button>
						</div>
						<input type="hidden" name="video-location" id="video-location" value="">
						<input type="hidden" name="video-thumnail" id="video-thumnail" value="">

					</form>
				</div>
			</div>
			<div class="clear"></div>
		</div>
		<div class="clear"></div>
	</div>
</div>
<form action="" id="thumbnail-form" method="POST">
   <input id="thumbnail" name="thumbnail" type="file" style="visibility: hidden;" accept="image/*">
   <div class="loading-spinner"></div>
</form>
<div class="col-md-2"></div>

<style>
.loading-spinner {
  -webkit-animation-play-state: running;
          animation-play-state: running;
  opacity: 1;
  position: relative;
  height: 100vh;
}
@-webkit-keyframes spinner {
  0% {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(0deg);
            transform: translate3d(-50%, -50%, 0) rotate(0deg);
  }
  100% {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(360deg);
            transform: translate3d(-50%, -50%, 0) rotate(360deg);
  }
}
@keyframes spinner {
  0% {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(0deg);
            transform: translate3d(-50%, -50%, 0) rotate(0deg);
  }
  100% {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(360deg);
            transform: translate3d(-50%, -50%, 0) rotate(360deg);
  }
}
.loading-spinner.-paused {
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
  opacity: 0.2;
  transition: opacity linear 0.1s;
}
.loading-spinner::before {
  -webkit-animation: 1.5s linear infinite spinner;
          animation: 1.5s linear infinite spinner;
  -webkit-animation-play-state: inherit;
          animation-play-state: inherit;
  border: solid 3px #dedede;
  border-bottom-color: #EF6565;
  border-radius: 50%;
  content: "";
  height: 40px;
  left: 50%;
  opacity: inherit;
  position: absolute;
  top: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0);
          transform: translate3d(-50%, -50%, 0);
  width: 40px;
  will-change: transform;
}
</style>



<script>
var video_thumb = Array();
$(document).on('click', '.carousel-inner', function(event) {

   $('#thumbnail').trigger('click');
});
$('#thumbnail').change(function(event) {
   $.ajax({
        type: 'POST',
        url: "{{LINK aj/upload-thumbnail}}?hash=" + $('.main_session').val() ,
        data: new FormData($("#thumbnail-form")[0]),
        processData: false,
        contentType: false,
        success: function(data) {
            $('.carousel-inner').append('<div class="item"><img src="' + data.thumbnail + '"></div>');
            video_thumb.push(data.thumbnail);
            $('#video-thumnail').val(data.thumbnail);
            $(".carousel-inner").find('.item').removeClass('active');
            $(".carousel-inner").find('.item:last').addClass('active');
        }
    });
});
$(function () {

   var video_drop_block = $("[data-block='video-drop-zone']");

   if (typeof(window.FileReader)){
      video_drop_block[0].ondragover = function() {
         video_drop_block.addClass('hover');
         return false;
      };

      video_drop_block[0].ondragleave = function() {
         video_drop_block.removeClass('hover');
         return false;
      };

      video_drop_block[0].ondrop = function(event) {
         event.preventDefault();
         video_drop_block.removeClass('hover');
         var file = event.dataTransfer.files;
         $('#upload-video').find('input').prop('files', file);
      };
   }

	$("#mySingleFieldTags").tagit({
      allowSpaces: true
   });
	var bar         = $('.bar');
   var percent     = $('.percent');
   var prcsvdo		= $('.pt_prcs_vdo');
   var is_uploaded = false;


	$('#upload-video').submit(function(event) {
      var file_size = $(".upload-video-file").prop('files')[0].size;
      if (file_size > "{{CONFIG max_upload}}") {
         swal({
            title: '{{LANG error}}',
            text:  "{{LANG file_is_too_big}} <?php echo pt_size_format($pt->config->max_upload); ?>",
            type: 'error',
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'OK',
            buttonsStyling: true,
            confirmButtonClass: 'btn btn-success',
         }).then(function(){
            swal.close();
            $('.upload-video-file').val('');
         },
         function() {
            swal.close();
            $('.upload-video-file').val('');
         });
         return false;
      }
      else{
         var filename = $('.upload').val().split('\\').pop();
         $('#title').val(filename);
         $('#upload-form').removeClass('hidden');
         $('.upload').addClass('hidden');
      }
   });

   $('#choose-thumnail-cr').bind('slid.bs.carousel', function (e) {
      console.log(video_thumb);
      var vsthumb = video_thumb[$(this).find('.active').index()];
      console.log(vsthumb);
      $("#video-thumnail").val(vsthumb);
   });

   $('#upload-video').ajaxForm({
      url: '{{LINK aj/upload-video-ffmpeg}}?hash=' + $('.main_session').val(),
      dataType:'json',
      beforeSend: function() {
         $('.progress').removeClass('hidden');
         var percentVal = '0%';
         bar.width(percentVal);
         percent.html(percentVal);
      },
      uploadProgress: function(event, position, total, percentComplete) {
         if(percentComplete > 50) {
            percent.addClass('white');
         }
         var percentVal = percentComplete + '%';
         bar.width(percentVal);
         percent.html(percentVal);

         if (percentComplete == 100) {
            prcsvdo.html('<svg width="30" height="10" viewBox="0 0 120 30" xmlns="http://www.w3.org/2000/svg" fill="#000"><circle cx="15" cy="15" r="15"><animate attributeName="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcMode="linear" repeatCount="indefinite" /><animate attributeName="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcMode="linear" repeatCount="indefinite" /></circle><circle cx="60" cy="15" r="9" fill-opacity="0.3"><animate attributeName="r" from="9" to="9" begin="0s" dur="0.8s" values="9;15;9" calcMode="linear" repeatCount="indefinite" /><animate attributeName="fill-opacity" from="0.5" to="0.5" begin="0s" dur="0.8s" values=".5;1;.5" calcMode="linear" repeatCount="indefinite" /></circle><circle cx="105" cy="15" r="15"><animate attributeName="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcMode="linear" repeatCount="indefinite" /><animate attributeName="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcMode="linear" repeatCount="indefinite" /></circle></svg> {{LANG processing_video}}');
            $('.progress').find('.bar').removeClass('upload-progress-bar');
         }
      },
      success: function(data) {
	    	percentVal = '0%';
	    	bar.width(percentVal);
         $('.progress').addClass('hidden');

         if (data.status == 200) {
         	$('#video-location').val(data.file_path);
         	Snackbar.show({text: '<i class="fa fa-check"></i> ' + data.file_name + ' {{LANG successfully_uploaded}}'});
         	$('#submit-btn').attr('disabled', false);
         	$('.upload-video-file').val('');
			   $('#title').val(data.file_name);
            $("#video-thumnails").removeClass('hidden');

            var i       = 0;
            var url     = '{img}';
            video_thumb = data.images;

            $('.carousel-inner').html('');
            $.each(video_thumb, function( index, value ) {
                $('.carousel-inner').append('<div class="item"><img src="' + value + '"></div>');
                i++;
            });
            $(".carousel-inner").find('.item:first-child').addClass('active');
            $("#video-thumnail").val(video_thumb[0]);
            $('.carousel').carousel({
              interval: false
            });

 

Link to comment
Share on other sites

I, for one, don't want to have to read through all that to find the spinner so

Make it hidden by default and use the form's submit event to show it. If the form navigates away from the page then you can leave the spinner up, but if it doesn't (you use AJAX) then make sure to hide the spinner when the request completes.

Link to comment
Share on other sites

Thanks for your informative reply.

The spinner is at line 145, after the Form, but your suggestion to make it hidden by default and use the Form's submit event to show it, sounds logical, but I don't know how to code that, can you please provide an example?

Edited by Chrisj
Link to comment
Share on other sites

Here's a sample page showing the above example code in context;

<?php

sleep(2);         // delay loading of the page so you
                  // get chance to see the image
                  // before the page reloads
?>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type='text/javascript'>
    $().ready(function() {
        // hide image when page loads
        $("#spinner").hide();                            
        
        // show it when form submitted
        $("#myform").submit(function() { $("#spinner").show(); })
    })
</script>
</head>
<body>
<form id='myform'>
    <img id='spinner' src='spinner.gif' alt='spinner'>
    <input type="submit" value="Submit">
</form>
</body>
</html>

 

Link to comment
Share on other sites

  • 2 weeks later...
This thread is more than a year old. Are you sure you have something important to add to it?

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.