Slidercalc Extension

Entwicklung für Mietlager

Diverse JavaScripte und zusätzliche Tools

Relaunch 2017

Rundung des Volumens auf 2 Nachkommastellen

Slidercalc Hauptskript

slidercalc-tabs.js (Mailfunktion wurde entfernt, dafür Übermittlung des Volumens per Get an das Kontaktformular)

// SliderCalc SC Namespace
var SC = function(initObj){
    this.config = initObj.config;
    this.sliders = initObj.sliders;
    this.init = function(){
    //this.preventBrowserScroll();
        this.clearJSMessage();
        this.generateSliders();
        this.reset();
        this.activateTabs();
        this.setButtons();
    };
    this.preventBrowserScroll = function(){
        // todo implement smooth scroll and prevent headbutt ?
        // or just use css to prevent headbutt
    }

    this.clearJSMessage = function(){
        $(".no-js").hide();
    };
    this.setButtons = function(){
      $('#jq-send').click(function(e) {
        var title,amount,formdata,thesum;
        var sliders = [];
        // collect sliders
        $("#slidercalc-form input.vol").each(function(i,val){ //add sliders
          if(parseFloat(val.value) > 0){
            amount = $(this).parent().prev().children("input").val() + $(this).parent().prev().text()// amount
            title = val.getAttribute("title");
            sliders.push(title + ' ' + amount + ': ' + val.value);
          }
        });
        //str = 'Summe: ' + $("#slidercalc-form #vol_sum").val();
        //sliders.push('Summe: ' + $("#slidercalc-form #vol_sum").val() );
        //formdata += str;
        formdata = JSON.stringify(sliders);
        // set datafield
        $('#thesliders').val(formdata);
        thesum = $("#slidercalc-form #vol_sum").val();
        $('#thesum').val( thesum );
        
      });
    }

    this.activateTabs = function(){
        $('#sliderContainer').easytabs();
    }


    this.generateSliders = function(){
        var f=1;// factor for special calculations with divided sliders
        var myScObj = this; // store reference that we can use "this" in jQuery Child Objects
        var vol = 0;
        var actCatId='';
        var lastCatId='';
        var mySliders = {};
        var navSlider = "";
        var template = '\
		<div class="slidercalc-single-slider-wrap" id="slider-{id}">\
			<div class="slider_block">\
				<div class="slidercalc-singleslider-header">\
					<h4 title="{subtitle}">{title}</h4>\
					<span class="amount">&nbsp;<input name="amount_{id} type="text" id="amount_{id}" class="slider_field" > {sliderunit}</span>\
					<span class="volume">Rauminhalt: <input name="vol_{id}" type="text" title="{title}" id="vol_{id}" class="slider_field vol" readonly>{amountunit}</span>\
				</div>\
				<div class="slider" id="slider_{id}"></div>\
			</div> \
		</div>\
		';
        //template = '<div class="test">hallo</div>';
        $(myScObj.config.slider_container).html('');
        // Add tabnavigation container
        $(myScObj.config.slider_container).append('<ul id="nav-tabs"></ul>');
        if (typeof(jQuery.ui.slider) != 'undefined'){
            $.each(this.sliders,function(i,val){
                if (typeof(mySliders[val.text.category_uid]) == 'undefined'){ // New Category
                    mySliders[val.text.category_uid] = new Array();
                    navSlider += '<li><a href="#category_'+val.text.category_uid+'">'+val.text.category+'</a></li>';
                    $(myScObj.config.slider_container).append('<div class="category" id="category_'+val.text.category_uid+'">'+'</div>');
                }
                //console.log("Marker:" + i + " : " + val)
                var str = template;
                $.each(val.text,function(j,myMarker){
                    str = myScObj.replaceMarker(str,"{"+j+"}",myMarker);
                });
                str = myScObj.replaceMarker(str,"{id}",i);
                html = $.parseHTML( str );
                $("#category_"+val.text.category_uid).append(html);
                //ACTIVATE SLIDER
                //console.log("SliderVals: " + val);
                $( "#slider_"+i ).slider({ // init Slider
                    range: "max",
                    min: val.config.min,
                    max: val.config.max,
                    value: 0,
                    step: val.config.step,
                    slide: function( event, ui ) {
                        if(typeof(val.config.sliderdivider) != "undefined" && val.config.sliderdivider != 0){
                            f=val.config.sliderdivider;
                            ui.value = ui.value / f; // slider value
                        }
                        $( "#amount_"+i ).val( ui.value );// set input field to slider amount
                        vol = eval(val.config.calculation);// calculate result for this slider
                        $( "#vol_"+i).val(vol.toFixed(myScObj.config.to_fixed));// show slider result
                        myScObj.calcSum(); // calculate sum of all sliders
                    },
                    change:function( event, ui ) {
                        $( "#vol_"+i).val(vol.toFixed(myScObj.config.to_fixed));// show slider result
                        myScObj.calcCatSum(this); // calculate vol for category of actual slider
                        myScObj.calcSum(); // calculate sum of all sliders
                        myScObj.setCompleteLoad(); // show load cabins
                    }
                });// End init slider
                // init input field
                $('#amount_'+i).change(function(event) {
                    var ui = {}
                    ui.value = 0;
                    ui.value = this.value;
                    vol = eval(val.config.calculation);// change of input field needs no /f 
                    $( "#vol_"+i).val(vol.toFixed(myScObj.config.to_fixed));// show slider result
					myScObj.calcCatSum(this);
                    myScObj.calcSum(); // calculate sum of all sliders
                    myScObj.setCompleteLoad(); // show load cabins
                });

            });// End each sliders
            // add tab navigation
            $("#nav-tabs").append(navSlider);
        }else{
            alert("You need to include jQuery-ui Sliders to make the sliders work")
        }
    }

    this.calcCatSum = function(obj){ // Calc Sum of actual Category and set class
        var cat_sum = 0;
		var myId;
        $(obj).parents('.category').find("input.vol").each(function(){
            cat_sum += parseFloat($(this).val());
        });
		myId = $(obj).parents('.category').attr("id"); // actual id
        if (cat_sum > 0){
			// find tab for this cat
			$('#nav-tabs').find('a[href="#'+myId+'"]').parent().addClass("sth");

        }else{
            $('#nav-tabs').find('a[href="#'+myId+'"]').parent().removeClass("sth");
        }

    };
    // get sum of all vols and write in #vol_sum
    this.calcSum = function(){
        var vol_sum = 0;
        $("input.vol").each(function(){
            vol_sum += parseFloat($(this).val());
        });
        vol_sum = vol_sum.toFixed(2);
        $("#vol_sum").val(vol_sum);
    }

    //calculate total volume
    this.setCompleteLoad = function(){
        var vol_sum = 0;
        $("input.vol").each(function(){
            vol_sum += parseFloat($(this).val());
        });
        this.setLoadBoxes(Math.ceil(vol_sum)); // fill indicator with boxes
        
        this.setOfferButton(vol_sum.toFixed(2).toLocaleString()); // appende vol to offer button
    }
    
    this.setOfferButton = function(vol_sum){
      // Set Offer Button...
      $('.angebot span').remove();
      $('.angebot').append("<span> (" + vol_sum + " m³)</span>"); // append vol
      $("a.angebot").attr('href',function(i,h){return h.split('?')[0]});
      $("a.angebot").attr('href', function(i, h) {
        return h + (h.indexOf('?') != -1 ? "&vol=" + vol_sum : "?vol="+vol_sum);
      });
      vol_sum ? $('.angebot').fadeIn() : $('.angebot').fadeOut();
      
    }
    // calculate containers, boxes and show them
    this.setLoadBoxes = function(cbm){
        // we only use empty boxes to hide the background of the container
        var full_boxes = 0;
        var num_of_container = 0;
        var full_container = 0;
        var num_of_boxes = Math.floor(cbm / this.config.cbm_per_box);
        var rest_boxes = 0;
        var empty_boxes = 0;
        var last_full = 0;
        var boxes_per_container = 0;
        var container_dx = this.config.cols * this.config.box_dx; //width of container
        var container_dy  = this.config.rows * this.config.box_dy;
        boxes_per_container = this.config.rows * this.config.cols;
        num_of_container = Math.ceil( num_of_boxes / boxes_per_container );
        full_container = Math.floor( num_of_boxes / boxes_per_container );
        if (num_of_container == full_container && cbm > 0) last_full = 1;
        if (num_of_container == 0) num_of_container = 1 // at least one
        $("#slidercalc-container-wrap").html("");// clear content
        // fill all containers
        var i = 0;
        while (i < num_of_container) {
            i += 1;
            $("#slidercalc-container-wrap").append('<div class="slidercalc-container" id="slidercalc-container_' + i + '" style="width:' + this.container_dx + 'px; height:' + this.container_dy + 'px;"></div>');
        }

        // calc empty boxes for last container
        rest_boxes = cbm % boxes_per_container ;
        rest_boxes = Math.ceil(rest_boxes);
        empty_boxes = boxes_per_container - rest_boxes;
        if (last_full){
            empty_boxes = 0;
        }
        for (var i = 0; i < empty_boxes;i++){
            $("#slidercalc-container_" + num_of_container).append('<div class="box_empty" style="width:' + this.config.box_dx + 'px; height:' + this.config.box_dy + 'px;border:none;border-radius:0;">&nbsp;</div>');
        }  
      }

    this.reset = function(){
        $(".volume input").each(function(){
            $(this).val(0);
        });
        $(".amount input").each(function(){
            $(this).val(0);
        });
        this.calcSum();
        this.setCompleteLoad();
    }

    this.escapeRegExp = function(string){
        return string.replace(/([.*+?^=!:${}()|\[\]\/\\])/g, "\\$1");
    }
    this.replaceMarker = function(string, find, replace) {
        return string.replace(new RegExp(this.escapeRegExp(find), 'g'), replace);
    }

    this.init();
};

// instantiate calendar
$(document).ready(function() {
	if (typeof(configuration) != "undefined"){
    	var sc = new SC(configuration);
    	$(function() {
        	$( ".datepicker" ).datepicker({
            	prevText: '&#x3c;zurück', prevStatus: '',
            	revJumpText: '&#x3c;&#x3c;', prevJumpStatus: '',
            	nextText: 'Vor&#x3e;', nextStatus: '',
            	nextJumpText: '&#x3e;&#x3e;', nextJumpStatus: '',
            	currentText: 'heute', currentStatus: '',
            	todayText: 'heute', todayStatus: '',
            	clearText: '-', clearStatus: '',
            	closeText: 'schließen', closeStatus: '',
            	monthNames: ['Januar','Februar','März','April','Mai','Juni',
                'Juli','August','September','Oktober','November','Dezember'],
            	monthNamesShort: ['Jan','Feb','Mär','Apr','Mai','Jun',
                'Jul','Aug','Sep','Okt','Nov','Dez'],
            	dayNames: ['Sonntag','Montag','Dienstag','Mittwoch','Donnerstag','Freitag','Samstag'],
            	dayNamesShort: ['So','Mo','Di','Mi','Do','Fr','Sa'],
            	dayNamesMin: ['So','Mo','Di','Mi','Do','Fr','Sa'],
            	showMonthAfterYear: false,
            	showOn: 'both',
            	buttonImage: 'media/img/calendar.png',
            	buttonImageOnly: true,
            	dateFormat:'d MM, y'
        	});
    	});
	}
});
		
// enter2tab for textboxes
$(document).ready(function() {
	$('input:text:first').focus();
	$('input:text').bind('keydown', function(e) {
		if (e.keyCode == 13) {
			e.preventDefault();
			var nextIndex = $('input:text').index(this) + 1;
			var maxIndex = $('input:text').length;
			if (nextIndex < maxIndex) {
				$('input:text:eq(' + nextIndex+')').focus();
			}
		}
	});
});

$(document).ready(function(){
	//$("#slidercalc-form").validate({});
});

==

Volumen eintragen und Ein-Ausklappen ====

Dropzone Skript

var fileList = new Array;
var i = 0;
var baseUrl = 'http://relaunch.mietlager4u.de.w014e13e.kasserver.com/'; 
var relPathname = 'fileadmin/dropzone/';
Dropzone.autoDiscover = false;
var myDropzone = new Dropzone("div#myDropzone", { 
    url: relPathname + "upload.php", // path to upload script
    autoProcessQueue: true,// uploading dropped files immediately ?
    maxFilesize: 2, // MB
    thumbnailWidth:100,
    thumbnailHeight:100,
    //uploadMultiple: false,
    maxfiles: 3,
    dictDefaultMessage: 'Zum Upload Dateien ablegen oder hier klicken.',
    renameFilename: cleanFilename,
    addRemoveLinks: true,
    init: function() {
      this.autoDiscover = false;
      // UPLOADED File successful
      this.on("success", function(file, serverFileName) {
        // serverFileName comes from upload.php
        fileList[i] = {"serverFileName" : serverFileName, "fileName" : file.name,"fileId" : i };
        writeFileInfo(fileList);
        writeDownloadLinks(fileList);
        i++;
      });

      // REMOVE a file
      this.on("removedfile", function(file) {
        var rmvFile = "";
        for(f=0;f<fileList.length;f++){
          if(fileList[f].fileName == file.name)
          {
            rmvFile = fileList[f].serverFileName;
            rmvIndex = f;
          }
        }
        if (rmvFile){
          $.ajax({
            url: relPathname + "delete_temp_files.php",
            type: "POST",
            data: { "fileList" : rmvFile }
          });
          // remove from List
          fileList.splice(rmvIndex,1);
          i--;
          writeFileInfo(fileList);
          writeDownloadLinks(fileList);
        }
      });

      this.on("addedfile", function(file) {
        //var removeButton = Dropzone.createElement("<button>Remove file</button>");// Create the remove button
        //var submitButton = document.querySelector("#submit-all");// Reference Submit Button
        var _this = this; // Capture the Dropzone instance as closure.

      });
    }
  });
  
  var cleanFilename = function (name) {
    return name.toLowerCase().replace(/[^\w]/gi, '');
  };
  
  var writeFileInfo = function (fileList){
    $("#info").html("");
    $.each(fileList,function( key, value ){
      //$("#info").append('<div>Nr. ' + (key+1) + '</div><div>Dateiname: ' + value['fileName'] + '</div><div> Server-Dateiname: ' + value['serverFileName'] + '</div>');
      $("#info").append('<div>(' + (key+1) + ') ' + value['fileName'] + ' Server-Dateiname: ' + value['serverFileName'] + '</div>');
      
    });
  }
  
  // addLinksToHiddenField
  var writeDownloadLinks = function(fileList){
    var uploadInfo = '';
    $('input[name="upload_links"]').val('');
    $.each(fileList,function( key, value ){
      uploadInfo += baseUrl + relPathname + 'uploads/' + value['serverFileName'] + ' (' + value['fileName'] + ') ';
      $('input[name="tx_powermail_pi1[field][upload_links]"]').val(uploadInfo);
    });
  }