Gebruiker:Sumurai8/columnManager.js

/**
 * '''Description'''
 * This script is used to find consecutive lists, sort them in a variety of ways and put
 * them in various column templates. Can also be used to balance existing column templates.
 *
 * '''Author'''
 * [[user talk:Sumurai8|Sumurai8]] on nl.wikipedia.org
 *
 * '''License'''
 * Code is available under cc-by-sa. In other words: ALWAYS PROVIDE A LINK
**/

var ColumnManager = function() {
  //Private constants
  var replaceToken  = "a0e8bb19af1ef0ca";
  var templateRegex = new RegExp( "\{\{[\s]*(?:Sjabloon:)?([^|]+)([^\{\}]*)\}\}" );
  var listRegex     = new RegExp( "(?:([\*#])[^\n]+\n)(\1[^\n]+\n)*" );
  var columnParseRegex = new RegExp( "^(?:\|[\s]*Kolom1[\s]*=[\s]*([\s\S]*?)[\s]*)?(?:\|[\s]*Kolom2[\s]*=[\s]*([\s\S]*?)[\s]*)?(?:\|[\s]*Kolom3[\s]*=[\s]*([\s\S]*?)[\s]*)?(?:\|[\s]*Kolom4[\s]*=[\s]*([\s\S]*?)[\s]*)?(?:\|[\s]*Kolom5[\s]*=[\s]*([\s\S]*?)[\s]*)?$" );
  var maxTemplates  = 1000;
  var maxLists      = 100;
  var columnTemplates = ["Kolommen","Kolommen2","Kolommen3","Kolommen4","Kolommen5"];
  var columnParamPrefix = "Kolom";
  var buttons       = {
    "Sorteer alfabetisch"      : this.clickSortAlfabetic,
    "Sorteer op zichtbaar"     : this.clickSortVisible,
    "Sorteer tweede zichtbaar" : this.clickSortSecondVisible,
    "Balanceer"                : this.clickBalance,
    "Maak 1 kolom"             : this.clickMakeColumn,
    "Maak 2 kolommen"          : this.clickMakeTwoColumns,
    "Maak 3 kolommen"          : this.clickMakeThreeColumns,
    "Maak 4 kolommen"          : this.clickMakeFourColumns,
    "Maak 5 kolommen"          : this.clickMakeFiveColumns
  };
  
  //Private variables
  var templates     = [];
  var columnPos     = [];
  var lists         = [];
  var content       = "";
  var overlayBackground;
  var overlayTop;

  this.init = function () {
    this.reset();

    overlayBackground = $( "<div></div>" ).css( {
      "position"         : "fixed",
      "width"            : "100%",
      "height"           : "100%",
      "background-color" : "black",
      "opacity"          : "0.5"
    } ).attr( "id", "columnManagerBackground" ).hide();
    overlayTop = $( "<div></div>" ).css( {
      "position"         : "fixed",
      "width"            : "80%",
      "height"           : "80%",
      "left"             : "10%",
      "top"              : "10%",
      "border"           : "black 1px solid",
      "background-color" : "white",
      "padding"          : "1em"
    } ).attr( "id", "columnManagerTop" ).hide();

    $("body").append( overlayBackground ).append( overlayTop );
  }

  this.parseText = function () {
    var matches, i;
    for( i = 0; i < maxTemplates; i++ ) {
      if( matches = content.match( templateRegex ) ) {
        templates.push( matches );
        content.replace( templateRegex, replacetoken + "_t" + i + "_" );

        if( columnTemplates.indexOf( matches[1] ) > -1 ) {
          columnPos.push( i );
        }
      } else {
        //Out of templates to replace
        break;
      }
    }
    if( i == maxTemplates ) {
      console.error( "ColumnManager :: This page contains too many templates" );
      return false;
    }

    for( i = 0; i < maxLists; i++ ) {
      if( matches = content.match( listRegex ) ) {
        lists.push( matches );
        content.replace( listRegex, replacetoken + "_l" + i + "_" );
      } else {
        //Out of lists to replace
        break;
      }
    }
    if( i == maxLists ) {
      console.error( "ColumnManager :: This page contains too many lists" );
      return false;
    }

    return true;
  }

  this.reset = function () {
    templates     = [];
    columnPos     = [];
    lists         = [];
    content       = "";

    !overlayBackground || overlayBackground.remove();
    !overlayTop || overlayTop.remove();
  }

  /**
   * Parses a match of templateRegex into a list of some amount of columns
   * The template variable is in the form [entire match, template name, variables]
  **/
  this.parseColumnTemplate = function( template ) {
    var output = template[2].match( columnParseRegex ).slice( 1 ).map( function( oldval ) {
      for( var i = 0; i < templates.length; i++ ) {
        oldval = oldval.replace( replacetoken + "_t" + i + "_", templates[i] );
      }
    } );
  }

  this.renderOptions = function ( columns, id ) {
    var width = 100 / columns.length;
    var container = $( "<div></div>" ).data( "link", id ).attr( "class", "columnManagerGroup" );

    for( var i = 0; i < columns.length; i++ ) {
      var textbox = $( "<textarea></textarea>" ).css( {
        "width" : width + "%",
        "height": "200px",
        "float" : "left"
      } ).val( columns[i] );
      container.append( textbox );
    }

    container.append( this.renderButtons() );

    overlayTop.append( container );
  }

  this.renderButtons = function () {
    var container = $( "<span></span>" );
    for( button in buttons ) {
      var input = $( "<input>" ).attr( {
        "type"   : "button",
        "value"  : button
      } ).on( "click", buttons[button] );
      container.append( input );
    }
    return container;
  }

  this.saveChanges = function () {
    for( var i = 0; i < templates.length; i++ ) {
      if( columnPos.indexOf( i ) == -1 ) {
        content = content.replace( replacetoken + "_t" + i + "_", templates[i] );
      } else {
        var group = $( ".columnManagerGroup[data-link=\"t" + i + "\"]" );
        var columns = group.children( "textarea" );

        var replaceText = "";
        if( columns.length == 1 ) {
          //We turned it into a list
          replaceText = columns[0].val();
        } else {
          //2 or more columns
          replaceText = "{{" + columnTemplates[0] + "\n" +
                        columns.reduce( function( prev, elem, j ) {
                          return prev + "|" + columnParamPrefix + (j + 1) + "=" + $(elem).val();
                        }, "" ) +
                        "\n}}";
        }
        content.replace( replacetoken + "_t" + i + "_", replaceText );
      }
    }
  }

  this.cancelChanges = function () {
    this.reset();
  }

  this.importText = function () {
    content = $( "#wpTextbox1" ).val();

    if( content.match( new RegExp( replaceToken ) ) !== null ) {
      //Possible security vulnerability
      content = "";
    }
  }

  this.showInterface = function () {
    this.importText();

    if( !this.parseText() ) {
      return;
    }

    for( var i = 0; i < columnPos.length; i++ ) {
      this.renderOptions( this.parseColumnTemplate( templates[columnPos[i]] ), "t" + columnPos[i] );
    }

    for( var i = 0; i < lists; i++ ) {
      this.renderOptions( lists[i], "l" + i );
    }

    var saveButton = $( "<input>" ).attr( {
      "type"    : "button",
      "value"   : "Opslaan"
    } ).on( "click", this.saveChanges );
    overlayTop.append( saveButton );
    var cancelButton = $( "<a></a>" ).attr( {
      "href"    : "#"
    } ).text( "Annuleer" ).on( "click", this.cancelChanges );

    overlayBackground.show();
    overlayTop.show();
  }

  this.clickSortAlfabetic = function ( e ) {

  }
  this.clickSortVisible = function ( e ) {

  }
  this.clickSortSecondVisible = function ( e ) {

  }
  this.clickBalance = function ( e ) {

  }
  this.clickMakeColumn = function ( e ) {

  }
  this.clickMakeTwoColumns = function ( e ) {

  }
  this.clickMakeThreeColumns = function ( e ) {

  }
  this.clickMakeFourColumns = function ( e ) {

  }
  this.clickMakeFiveColumns = function ( e ) {

  }
}