Slidercalc Extension: Unterschied zwischen den Versionen

Aus Wikizone
Wechseln zu: Navigation, Suche
(Die Seite wurde neu angelegt: „Entwicklung für Mietlager Diverse JavaScripte und zusätzliche Tools Relaunch 2017 Rundung des Volumens auf 2 Nachkommastellen“)
 
 
(Eine dazwischenliegende Version desselben Benutzers wird nicht angezeigt)
Zeile 6: Zeile 6:
  
 
Rundung des Volumens auf 2 Nachkommastellen
 
Rundung des Volumens auf 2 Nachkommastellen
 +
 +
==== Slidercalc Hauptskript ====
 +
slidercalc-tabs.js (Mailfunktion wurde entfernt, dafür Übermittlung des Volumens per Get an das Kontaktformular)
 +
<syntaxhighlight lang="javascript">
 +
 +
 +
// 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({});
 +
});
 +
 +
</syntaxhighlight>
 +
 +
====
 +
Volumen eintragen und Ein-Ausklappen ====
 +
 +
==== Dropzone Skript ====
 +
<syntaxhighlight lang="javascript">
 +
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);
 +
    });
 +
  }
 +
</syntaxhighlight>

Aktuelle Version vom 18. Juli 2017, 10:28 Uhr

Entwicklung für Mietlager

Diverse JavaScripte und zusätzliche Tools

Relaunch 2017

Rundung des Volumens auf 2 Nachkommastellen

Slidercalc Hauptskript[Bearbeiten]

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({});
});

==[Bearbeiten]

Volumen eintragen und Ein-Ausklappen ====

Dropzone Skript[Bearbeiten]

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);
    });
  }
Abgerufen von „https://wiki.stephanschlegel.de/index.php?title=Slidercalc_Extension&oldid=22408“