chekoduadarsh--blocklyml/static/js/blockly.js

/**
 * @license
 * Copyright 2012 Google LLC
 * SPDX-License-Identifier: Apache-2.0
 */

/**
 * @fileoverview JavaScript for Blockly's Code demo.
 * @author fraser@google.com (Neil Fraser)
 */
'use strict';

/**
 * Create a namespace for the application.
 */
var blockly = {};



/**
 * Lookup for names of supported languages.  Keys should be in ISO 639 format.
 */
blockly.LANGUAGE_NAME = {
  'ar': 'العربية',
  'be-tarask': 'Taraškievica',
  'br': 'Brezhoneg',
  'ca': 'Català',
  'cs': 'Česky',
  'da': 'Dansk',
  'de': 'Deutsch',
  'el': 'Ελληνικά',
  'en': 'English',
  'es': 'Español',
  'et': 'Eesti',
  'fa': 'فارسی',
  'fr': 'Français',
  'he': 'עברית',
  'hrx': 'Hunsrik',
  'hu': 'Magyar',
  'ia': 'Interlingua',
  'is': 'Íslenska',
  'it': 'Italiano',
  'ja': '日本語',
  'kab': 'Kabyle',
  'ko': '한국어',
  'mk': 'Македонски',
  'ms': 'Bahasa Melayu',
  'nb': 'Norsk Bokmål',
  'nl': 'Nederlands, Vlaams',
  'oc': 'Lenga d\'òc',
  'pl': 'Polski',
  'pms': 'Piemontèis',
  'pt-br': 'Português Brasileiro',
  'ro': 'Română',
  'ru': 'Русский',
  'sc': 'Sardu',
  'sk': 'Slovenčina',
  'sr': 'Српски',
  'sv': 'Svenska',
  'ta': 'தமிழ்',
  'th': 'ภาษาไทย',
  'tlh': 'tlhIngan Hol',
  'tr': 'Türkçe',
  'uk': 'Українська',
  'vi': 'Tiếng Việt',
  'zh-hans': '简体中文',
  'zh-hant': '正體中文'
};

/**
 * List of RTL languages.
 */
blockly.LANGUAGE_RTL = ['ar', 'fa', 'he', 'lki'];

/**
 * Blockly's main workspace.
 * @type {Blockly.WorkspaceSvg}
 */
blockly.workspace = null;

/**
 * Extracts a parameter from the URL.
 * If the parameter is absent default_value is returned.
 * @param {string} name The name of the parameter.
 * @param {string} defaultValue Value to return if parameter not found.
 * @return {string} The parameter value or the default value if not found.
 */
blockly.getStringParamFromUrl = function (name, defaultValue) {
  var val = location.search.match(new RegExp('[?&]' + name + '=([^&]+)'));
  return val ? decodeURIComponent(val[1].replace(/\+/g, '%20')) : defaultValue;
};

/**
 * Get the language of this user from the URL.
 * @return {string} User's language.
 */
blockly.getLang = function () {
  var lang = blockly.getStringParamFromUrl('lang', '');
  if (blockly.LANGUAGE_NAME[lang] === undefined) {
    // Default to English.
    lang = 'en';
  }
  return lang;
};

/**
 * Is the current language (blockly.LANG) an RTL language?
 * @return {boolean} True if RTL, false if LTR.
 */
blockly.isRtl = function () {
  return blockly.LANGUAGE_RTL.indexOf(blockly.LANG) != -1;
};

/**
 * Load blocks saved on App Engine Storage or in session/local storage.
 * @param {string} defaultXml Text representation of default blocks.
 */
blockly.loadBlocks = function (defaultXml) {
  try {
    var loadOnce = window.sessionStorage.loadOnceBlocks;
  } catch (e) {
    // Firefox sometimes throws a SecurityError when accessing sessionStorage.
    // Restarting Firefox fixes this, so it looks like a bug.
    var loadOnce = null;
  }
  if ('BlocklyStorage' in window && window.location.hash.length > 1) {
    // An href with #key trigers an AJAX call to retrieve saved blocks.
    BlocklyStorage.retrieveXml(window.location.hash.substring(1));
  } else if (loadOnce) {
    // Language switching stores the blocks during the reload.
    delete window.sessionStorage.loadOnceBlocks;
    var xml = Blockly.Xml.textToDom(loadOnce);
    Blockly.Xml.domToWorkspace(xml, blockly.workspace);
  } else if (defaultXml) {
    // Load the editor with default starting blocks.
    var xml = Blockly.Xml.textToDom(defaultXml);
    Blockly.Xml.domToWorkspace(xml, blockly.workspace);
  } else if ('BlocklyStorage' in window) {
    // Restore saved blocks in a separate thread so that subsequent
    // initialization is not affected from a failed load.
    window.setTimeout(BlocklyStorage.restoreBlocks, 0);
  }
};

/**
 * Save the blocks and reload with a different language.
 */
blockly.changeLanguage = function () {
  // Store the blocks for the duration of the reload.
  // MSIE 11 does not support sessionStorage on file:// URLs.
  if (window.sessionStorage) {
    var xml = Blockly.Xml.workspaceToDom(blockly.workspace);
    var text = Blockly.Xml.domToText(xml);
    window.sessionStorage.loadOnceBlocks = text;
  }

  var languageMenu = document.getElementById('languageMenu');
  var newLang = encodeURIComponent(
    languageMenu.options[languageMenu.selectedIndex].value);
  var search = window.location.search;
  if (search.length <= 1) {
    search = '?lang=' + newLang;
  } else if (search.match(/[?&]lang=[^&]*/)) {
    search = search.replace(/([?&]lang=)[^&]*/, '$1' + newLang);
  } else {
    search = search.replace(/\?/, '?lang=' + newLang + '&');
  }

  window.location = window.location.protocol + '//' +
    window.location.host + window.location.pathname + search;
};

/**
 * Changes the output language by clicking the tab matching
 * the selected language in the codeMenu.
 */
blockly.changeCodingLanguage = function () {
  var codeMenu = document.getElementById('code_menu');
  blockly.tabClick(codeMenu.options[codeMenu.selectedIndex].value);
}

/**
 * Bind a function to a button's click event.
 * On touch enabled browsers, ontouchend is treated as equivalent to onclick.
 * @param {!Element|string} el Button element or ID thereof.
 * @param {!Function} func Event handler to bind.
 */
blockly.bindClick = function (el, func) {
  if (typeof el == 'string') {
    el = document.getElementById(el);
  }
  el.addEventListener('click', func, true);
  el.addEventListener('touchend', func, true);
};

/**
 * Load the Prettify CSS and JavaScript.
 */
blockly.importPrettify = function () {
  var script = document.createElement('script');
  script.setAttribute('src', 'https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js');
  document.head.appendChild(script);
};

/**
 * Compute the absolute coordinates and dimensions of an HTML element.
 * @param {!Element} element Element to match.
 * @return {!Object} Contains height, width, x, and y properties.
 * @private
 */
blockly.getBBox_ = function (element) {
  var height = element.offsetHeight;
  var width = element.offsetWidth;
  var x = 0;
  var y = 0;
  do {
    x += element.offsetLeft;
    y += element.offsetTop;
    element = element.offsetParent;
  } while (element);
  return {
    height: height,
    width: width,
    x: x,
    y: y
  };
};

/**
 * User's language (e.g. "en").
 * @type {string}
 */
blockly.LANG = blockly.getLang();

/**
 * List of tab names.
 * @private
 */
blockly.TABS_ = ['blocks', 'python'];

/**
 * List of tab names with casing, for display in the UI.
 * @private
 */
blockly.TABS_DISPLAY_ = [
  'Blocks', 'Python', ,
];

blockly.selected = 'blocks';

/**
 * Switch the visible pane when a tab is clicked.
 * @param {string} clickedName Name of tab clicked.
 */
blockly.tabClick = function (clickedName) {
  // If the XML tab was open, save and render the content.
  // tabmin tab_collapse

  if (document.getElementById('tab_blocks').classList.contains('tabon')) {
    blockly.workspace.setVisible(false);
  }
  // Deselect all tabs and hide all panes.
  for (var i = 0; i < blockly.TABS_.length; i++) {
    var name = blockly.TABS_[i];
    var tab = document.getElementById('tab_' + name);
    tab.classList.add('taboff');
    tab.classList.remove('tabon');
    document.getElementById('content_' + name).style.visibility = 'hidden';
  }

  // Select the active tab.
  blockly.selected = clickedName;
  var selectedTab = document.getElementById('tab_' + clickedName);
  selectedTab.classList.remove('taboff');
  selectedTab.classList.add('tabon');
  // Show the selected pane.
  document.getElementById('content_' + clickedName).style.visibility =
    'visible';
  blockly.renderContent();
  // The code menu tab is on if the blocks tab is off.
  var codeMenuTab = document.getElementById('tab_code');
  if (clickedName == 'blocks') {
    blockly.workspace.setVisible(true);
    codeMenuTab.className = 'taboff';
  } else {
    codeMenuTab.className = 'tabon';
  }
  // Sync the menu's value with the clicked tab value if needed.
  var codeMenu = document.getElementById('code_menu');
  for (var i = 0; i < codeMenu.options.length; i++) {
    if (codeMenu.options[i].value == clickedName) {
      codeMenu.selectedIndex = i;
      break;
    }
  }
  Blockly.svgResize(blockly.workspace);
};

/**
 * Populate the currently selected pane with content generated from the blocks.
 */
blockly.renderContent = function () {
  var content = document.getElementById('content_' + blockly.selected);
  // Initialize the pane.
  if (content.id == 'content_xml') {
    var xmlTextarea = document.getElementById('content_xml');
    var xmlDom = Blockly.Xml.workspaceToDom(blockly.workspace);
    var xmlText = Blockly.Xml.domToPrettyText(xmlDom);
    xmlTextarea.value = xmlText;
    xmlTextarea.focus();
  } else if (content.id == 'content_python') {
    console.log("generating python code")
    VarData = {};
    blockly.attemptCodeGeneration(Blockly.Python);
  }
  if (typeof PR == 'object') {
    PR.prettyPrint();
  }
};

/**
 * Attempt to generate the code and display it in the UI, pretty printed.
 * @param generator {!Blockly.Generator} The generator to use.
 */
blockly.attemptCodeGeneration = function (generator) {
  var content = document.getElementById('content_' + blockly.selected);
  content.textContent = '';
  if (blockly.checkAllGeneratorFunctionsDefined(generator)) {
    var code = generator.workspaceToCode(blockly.workspace);
    content.textContent = code;

    // Remove the 'prettyprinted' class, so that Prettify will recalculate.
  }
};

/**
 * Check whether all blocks in use have generator functions.
 * @param generator {!Blockly.Generator} The generator to use.
 */
blockly.checkAllGeneratorFunctionsDefined = function (generator) {
  var blocks = blockly.workspace.getAllBlocks(false);
  var missingBlockGenerators = [];
  for (var i = 0; i < blocks.length; i++) {
    var blockType = blocks[i].type;
    if (!generator[blockType]) {
      if (missingBlockGenerators.indexOf(blockType) == -1) {
        missingBlockGenerators.push(blockType);
      }
    }
  }

  var valid = missingBlockGenerators.length == 0;
  if (!valid) {
    var msg = 'The generator code for the following blocks not specified for ' +
      generator.name_ + ':\n - ' + missingBlockGenerators.join('\n - ');
    Blockly.alert(msg);  // Assuming synchronous. No callback.
  }
  return valid;
};

/**
 * Initialize Blockly.  Called on page load.
 */
blockly.init = function () {
  blockly.initLanguage();

  var rtl = blockly.isRtl();
  var container = document.getElementById('content_area');
  var onresize = function (e) {
    var bBox = blockly.getBBox_(container);
    for (var i = 0; i < blockly.TABS_.length; i++) {
      var el = document.getElementById('content_' + blockly.TABS_[i]);
      el.style.top = bBox.y + 'px';
      el.style.left = bBox.x + 'px';
      // Height and width need to be set, read back, then set again to
      // compensate for scrollbars.
      el.style.height = bBox.height + 'px';
      el.style.height = (2 * bBox.height - el.offsetHeight) + 'px';
      el.style.width = bBox.width + 'px';
      el.style.width = (2 * bBox.width - el.offsetWidth) + 'px';
    }
    // Make the 'Blocks' tab line up with the toolbox.
    if (blockly.workspace && blockly.workspace.getToolbox().width) {
      document.getElementById('tab_blocks').style.minWidth =
        (blockly.workspace.getToolbox().width - 38) + 'px';
      // Account for the 19 pixel margin and on each side.
    }
  };
  window.addEventListener('resize', onresize, false);

  // The toolbox XML specifies each category name using Blockly's messaging
  // format (eg. `<category name="%{BKY_CATLOGIC}">`).
  // These message keys need to be defined in `Blockly.Msg` in order to
  // be decoded by the library. Therefore, we'll use the `MSG` dictionary that's
  // been defined for each language to import each category name message
  // into `Blockly.Msg`.
  // TODO: Clean up the message files so this is done explicitly instead of
  // through this for-loop.

  for (var messageKey in MSG) {
    if (messageKey.indexOf('cat') == 0) {
      Blockly.Msg[messageKey.toUpperCase()] = MSG[messageKey];
    }
  }



  // Construct the toolbox XML, replacing translated variable names.
  var toolboxText = document.getElementById('toolbox').outerHTML;
  toolboxText = toolboxText.replace(/(^|[^%]){(\w+)}/g,
    function (m, p1, p2) { return p1 + MSG[p2]; });
  var toolboxXml = Blockly.Xml.textToDom(toolboxText);

  blockly.workspace = Blockly.inject('content_blocks',
    {
      grid:
      {
        spacing: 25,
        length: 3,
        colour: '#ccc',
        snap: true
      },
      media: '/static/media/',
      rtl: rtl,
      toolbox: toolboxXml,
      zoom:
      {
        controls: true,
        wheel: true
      }
    });

  // Add to reserved word list: Local variables in execution environment (runJS)
  // and the infinite loop detection function.
  Blockly.JavaScript.addReservedWords('code,timeouts,checkTimeout');

  blockly.loadBlocks('');

  if ('BlocklyStorage' in window) {
    // Hook a save function onto unload.
    BlocklyStorage.backupOnUnload(blockly.workspace);
  }

  blockly.tabClick(blockly.selected);

  blockly.bindClick('trashButton',
    function () { blockly.discard(); blockly.renderContent(); });
  blockly.bindClick('runButton', blockly.LaunchCode);
  blockly.bindClick('colabButton', blockly.OpenColab);
  blockly.bindClick('copyButton', blockly.copyCode);
  blockly.bindClick('downlaodButton', blockly.DownloadCode);

  // Disable the link button if page isn't backed by App Engine storage.
  var linkButton = document.getElementById('linkButton');
  if ('BlocklyStorage' in window) {
    BlocklyStorage['HTTPREQUEST_ERROR'] = MSG['httpRequestError'];
    BlocklyStorage['LINK_ALERT'] = MSG['linkAlert'];
    BlocklyStorage['HASH_ERROR'] = MSG['hashError'];
    BlocklyStorage['XML_ERROR'] = MSG['xmlError'];
    blockly.bindClick(linkButton,
      function () { BlocklyStorage.link(blockly.workspace); });
  } else if (linkButton) {
    linkButton.className = 'disabled';
  }

  for (var i = 0; i < blockly.TABS_.length; i++) {
    var name = blockly.TABS_[i];
    blockly.bindClick('tab_' + name,
      function (name_) { return function () { blockly.tabClick(name_); }; }(name));
  }
  blockly.bindClick('tab_code', function (e) {
    if (e.target !== document.getElementById('tab_code')) {
      // Prevent clicks on child codeMenu from triggering a tab click.
      return;
    }
    blockly.changeCodingLanguage();
  });

  onresize();
  Blockly.svgResize(blockly.workspace);

  // Lazy-load the syntax-highlighting.
  window.setTimeout(blockly.importPrettify, 1);
};

/**
 * Initialize the page language.
 */
blockly.initLanguage = function () {
  // Set the HTML's language and direction.
  var rtl = blockly.isRtl();
  document.dir = rtl ? 'rtl' : 'ltr';
  document.head.parentElement.setAttribute('lang', blockly.LANG);

  // Sort languages alphabetically.
  var languages = [];
  for (var lang in blockly.LANGUAGE_NAME) {
    languages.push([blockly.LANGUAGE_NAME[lang], lang]);
  }
  var comp = function (a, b) {
    // Sort based on first argument ('English', 'Русский', '简体字', etc).
    if (a[0] > b[0]) return 1;
    if (a[0] < b[0]) return -1;
    return 0;
  };
  languages.sort(comp);
  // Populate the language selection menu.
  var languageMenu = document.getElementById('languageMenu');
  languageMenu.options.length = 0;
  for (var i = 0; i < languages.length; i++) {
    var tuple = languages[i];
    var lang = tuple[tuple.length - 1];
    var option = new Option(tuple[0], lang);
    if (lang == blockly.LANG) {
      option.selected = true;
    }
    languageMenu.options.add(option);
  }
  languageMenu.addEventListener('change', blockly.changeLanguage, true);

  // Populate the coding language selection menu.
  var codeMenu = document.getElementById('code_menu');
  codeMenu.options.length = 0;
  for (var i = 1; i < blockly.TABS_.length; i++) {
    codeMenu.options.add(new Option(blockly.TABS_DISPLAY_[i], blockly.TABS_[i]));
  }
  codeMenu.addEventListener('change', blockly.changeCodingLanguage);

  //document.getElementById('title').textContent = MSG['title'];
  document.getElementById('tab_blocks').textContent = MSG['blocks'];

  document.getElementById('linkButton').title = MSG['linkTooltip'];
  document.getElementById('runButton').title = "Run frature is currently disabled";
  document.getElementById('trashButton').title = MSG['trashTooltip'];
};

/**
 * Execute the user's blockly.
 * Just a quick and dirty eval.  Catch infinite loops.
 */
blockly.runJS = function () {
  Blockly.JavaScript.INFINITE_LOOP_TRAP = 'checkTimeout();\n';
  var timeouts = 0;
  var checkTimeout = function () {
    if (timeouts++ > 1000000) {
      throw MSG['timeout'];
    }
  };
  var code = Blockly.Python.workspaceToCode(blockly.workspace);
  Blockly.JavaScript.INFINITE_LOOP_TRAP = null;
  try {
    eval(code);
  } catch (e) {
    console.log(MSG['badCode'].replace('%1', e));
  }
};


blockly.LaunchCode = function () {
  alert("Run is not yet supported!! Please download .ipynb and use in Google Colab");
};

blockly.DownloadCode = function () {
  var xml = Blockly.Xml.workspaceToDom(blockly.workspace);
  var xml_text = Blockly.Xml.domToText(xml);

  var fileType = "xml"
  var fileName = "blocklyML.xml"
  var blob = new Blob([xml_text], { type: fileType });

  var a = document.createElement('a');
  a.download = fileName;
  a.href = URL.createObjectURL(blob);
  a.dataset.downloadurl = [fileType, a.download, a.href].join(':');
  a.style.display = "none";
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
  setTimeout(function () { URL.revokeObjectURL(a.href); }, 1500);
};
blockly.UploadXml = function () {


  document.getElementById("myForm").style.display = "block";

  $(document).keyup(function (e) {
    if (e.key === "Escape") { // escape key maps to keycode `27`
      document.getElementById("myForm").style.display = "none";
    }
  });


  document.querySelectorAll(".drop-zone__input").forEach((inputElement) => {

    console.log(inputElement)

    var eventChanger = false;

    inputElement.addEventListener("change", (e) => {
      if(!eventChanger){  //hot fix
        if (inputElement.files.length) {
          const input = e.target
          var file = input.files[0]
          var fr = new FileReader();

          fr.readAsText(file)
          fr.onload = function () {
            var xml = Blockly.Xml.textToDom(fr.result);
            Blockly.Xml.domToWorkspace(xml, blockly.workspace);
            fr = new FileReader();
            document.getElementById("myForm").style.display = "none";
          }

        }
      eventChanger = true
    }
    });
    const dropZoneElement = inputElement.closest(".drop-zone");
    dropZoneElement.addEventListener("click", (e) => {
      inputElement.click();

    });
    dropZoneElement.addEventListener("dragover", (e) => {
      e.preventDefault();
      dropZoneElement.classList.add("drop-zone--over");
    });

    ["dragleave", "dragend"].forEach((type) => {
      dropZoneElement.addEventListener(type, (e) => {
        dropZoneElement.classList.remove("drop-zone--over");
      });
    });

    dropZoneElement.addEventListener("drop", (e) => {
      e.preventDefault();
      var files = e.dataTransfer.files;
      if (e.dataTransfer.files.length) {
        //var files = e.target.files || (e.dataTransfer && e.dataTransfer.files);
        inputElement.files = files;
        var file = files[0]
        if (typeof file !== "undefined") {
          var fr = new FileReader();

          fr.readAsText(file)

          fr.onload = function () {
            var xml = Blockly.Xml.textToDom(fr.result);
            Blockly.Xml.domToWorkspace(xml, blockly.workspace);
            document.getElementById("myForm").style.display = "none";
          }
        }
      }

      dropZoneElement.classList.remove("drop-zone--over");
    });

  });

};


blockly.UploadFromUrl = function () {

  let url = document.forms["urlForm"]["url"].value;
  fetch(url).then((r) => {
    r.text().then((d) => {
      var xml = Blockly.Xml.textToDom(d);
      Blockly.Xml.domToWorkspace(xml, blockly.workspace);
    })
  })

  document.getElementById("myForm").style.display = "none";
};


blockly.OpenColab = function () {
  window.open("https://colab.research.google.com/#create=true");
};

blockly.copyCode = function () {
  var code = Blockly.Python.workspaceToCode(blockly.workspace);
  var copyText = document.createElement('textarea');
  copyText.value = code;
  copyText.setAttribute('readonly', '');
  copyText.style = { position: 'absolute', left: '-9999px' };
  document.body.appendChild(copyText);
  copyText.select();
  copyText.setSelectionRange(0, 99999);
  document.execCommand('copy');
};
/**
 * Discard all blocks from the workspace.
 */
blockly.discard = function () {
  var count = blockly.workspace.getAllBlocks(false).length;
  if (count < 2 ||
    window.confirm(Blockly.Msg['DELETE_ALL_BLOCKS'].replace('%1', count))) {
    blockly.workspace.clear();
    if (window.location.hash) {
      window.location.hash = '';
    }
  }
};



Blockly.Blocks['string_length'] = {
  init: function () {
    this.appendValueInput('VALUE')
      .setCheck('String')
      .appendField('length of');
    this.setOutput(true, 'Number');
    this.setColour(160);
    this.setTooltip('Returns number of letters in the provided text.');
    this.setHelpUrl('http://www.w3schools.com/jsref/jsref_length_string.asp');
  }
};




// Load the Code demo's language strings.
document.write('<script src="static/js/msg/js/' + blockly.LANG + '.js"></script>\n');
// Load Blockly's language strings.
document.write('<script src="static/js/tests/msg/' + blockly.LANG + '.js"></script>\n');

window.addEventListener('load', blockly.init);