Custom JavaScript examples

[buuuudzik]

Code:

$('object')

 was for selecting the container of your svg element but better way(because you probably have more than one svg image or object) is to add Additional class 'blind1' to this svg image in the visualisatiuon editior and select in this way:

Code:

$('.blind1 > object')

I've tested a minute ago and it seems to work but now I propose to generate HTML via Custom Javascript or create simple app for same task.

Full code:

Code:

// Manipulating SVG images
$(function(){

  $('.blind1 > object').load(function() {
    
    var svg = $('.blind1 > object')[0]; // Choosing svg

    var svgDoc = svg.contentDocument; // Choosing content from svg
    var svgItem = svgDoc.getElementById("rect4136"); // Choosing blind from content
    var svgItem1 = svgDoc.getElementById("g4136"); // Choosing window from content
    var svgItem2 = svgDoc.getElementById("rect4154-4"); // Choosing light from content
    
    position_plus = '32/1/15'; // Position
    grp.listen(position_plus, function(obj, type) {
      if (type == 'init') return false;
      
        let height = Number( svgItem.getAttribute("height") ) + 10;
      console.log('plus, nowa: ', height)
      if (height >= 100) svgItem.setAttribute('height', '100');
      else if (height < 100) svgItem.setAttribute('height', height);
      
      if (height > 50) {
        svgItem.style.fill='black';
        svgItem2.style.opacity= '0';
      } else {
        svgItem.style.fill='red';
          svgItem2.style.opacity= '80';
      };
    }, true);
    
    position_minus = '32/1/16';
    grp.listen(position_minus, function(obj, type) {
      if (type == 'init') return false;
      
        let height = Number( svgItem.getAttribute("height") ) - 10;
      console.log('minus, nowa: ', height)
      if (height <= 0) svgItem.setAttribute('height', '0');
      else if (height > 0) svgItem.setAttribute('height', height);
      
      if (height > 50) {
        svgItem.style.fill='black';
        svgItem2.style.opacity= '0';
      } else {
        svgItem.style.fill='red';
        svgItem2.style.opacity= '80';
      };
    }, true);
    
    // onclick blind-up
    svgItem.addEventListener('click', function (event) {
        }, false);
        svgItem.addEventListener('click', function (event) {
         svgItem.setAttribute('height', '0')
        }, true);
    
    // onclick blind-down
    svgItem1.addEventListener('click', function (event) {
        }, false);
        svgItem1.addEventListener('click', function (event) {
         svgItem.setAttribute('height', '100');
        }, true);
 
});
 
});