Changeset - ff3f10a6a203
[Not reviewed]
beta
0 2 0
Mads Kiilerich - 13 years ago 2013-03-07 19:00:28
madski@unity3d.com
Transplanted from: 6b0c23e9b32f
pullrequest: just replace children of other_ref when other_repo changes

We were inserting a full select statement as innerHTML of a select and would
thus get nested select statements. IE did not render that correctly ... and
other browsers did strange things.

Instead we now create a in memory DOM object and move the optgroups. After
appending children to the selector we have to set selectedIndex on all
browsers.
2 files changed with 12 insertions and 20 deletions:
0 comments (0 inline, 0 general)
rhodecode/public/js/rhodecode.js
Show inline comments
 
/**
 
RhodeCode JS Files
 
**/
 

	
 
if (typeof console == "undefined" || typeof console.log == "undefined"){
 
	console = { log: function() {} }
 
}
 

	
 

	
 
var str_repeat = function(i, m) {
 
	for (var o = []; m > 0; o[--m] = i);
 
	return o.join('');
 
};
 

	
 
/**
 
 * INJECT .format function into String
 
 * Usage: "My name is {0} {1}".format("Johny","Bravo")
 
 * Return "My name is Johny Bravo"
 
 * Inspired by https://gist.github.com/1049426
 
 */
 
String.prototype.format = function() {
 
	  
 
	  function format() {
 
	    var str = this;
 
	    var len = arguments.length+1;
 
	    var safe = undefined;
 
	    var arg = undefined;
 
	    
 
	    // For each {0} {1} {n...} replace with the argument in that position.  If 
 
	    // the argument is an object or an array it will be stringified to JSON.
 
	    for (var i=0; i < len; arg = arguments[i++]) {
 
	      safe = typeof arg === 'object' ? JSON.stringify(arg) : arg;
 
	      str = str.replace(RegExp('\\{'+(i-1)+'\\}', 'g'), safe);
 
	    }
 
	    return str;
 
	  }
 

	
 
	  // Save a reference of what may already exist under the property native.  
 
	  // Allows for doing something like: if("".format.native) { /* use native */ }
 
	  format.native = String.prototype.format;
 

	
 
	  // Replace the prototype property
 
	  return format;
 

	
 
}();
 

	
 
String.prototype.strip = function(char) {
 
	if(char === undefined){
 
	    char = '\\s';
 
	}
 
	return this.replace(new RegExp('^'+char+'+|'+char+'+$','g'), '');
 
}
 
String.prototype.lstrip = function(char) {
 
	if(char === undefined){
 
	    char = '\\s';
 
	}
 
	return this.replace(new RegExp('^'+char+'+'),'');
 
}
 
String.prototype.rstrip = function(char) {
 
	if(char === undefined){
 
	    char = '\\s';
 
	}
 
	return this.replace(new RegExp(''+char+'+$'),'');
 
}
 

	
 

	
 
if(!Array.prototype.indexOf) {
 
    Array.prototype.indexOf = function(needle) {
 
        for(var i = 0; i < this.length; i++) {
 
            if(this[i] === needle) {
 
                return i;
 
            }
 
        }
 
        return -1;
 
    };
 
}
 

	
 
// IE(CRAP) doesn't support previousElementSibling
 
var prevElementSibling = function( el ) {
 
    if( el.previousElementSibling ) {
 
        return el.previousElementSibling;
 
    } else {
 
        while( el = el.previousSibling ) {
 
            if( el.nodeType === 1 ) return el;
 
        }
 
    }
 
}
 

	
 
var setSelectValue = function(select, val){
 
	var selection =  YUD.get(select);
 
	
 
    // select element
 
    for(var i=0;i<selection.options.length;i++){
 
        if (selection.options[i].innerHTML == val) {
 
            selection.selectedIndex = i;
 
            break;
 
        }
 
    }	
 
}
 

	
 

	
 
/**
 
 * SmartColorGenerator
 
 *
 
 *usage::
 
 *	var CG = new ColorGenerator();
 
 *  var col = CG.getColor(key); //returns array of RGB
 
 *  'rgb({0})'.format(col.join(',')
 
 * 
 
 * @returns {ColorGenerator}
 
 */
 
var ColorGenerator = function(){
 
	this.GOLDEN_RATIO = 0.618033988749895;
 
	this.CURRENT_RATIO = 0.22717784590367374 // this can be random
 
	this.HSV_1 = 0.75;//saturation
 
	this.HSV_2 = 0.95;
 
	this.color;
 
	this.cacheColorMap = {};
 
};
 

	
 
ColorGenerator.prototype = {
 
    getColor:function(key){
 
    	if(this.cacheColorMap[key] !== undefined){
 
    		return this.cacheColorMap[key];
 
    	}
 
    	else{
 
    		this.cacheColorMap[key] = this.generateColor();
 
    		return this.cacheColorMap[key];
 
    	}
 
    },
 
    _hsvToRgb:function(h,s,v){
 
        if (s == 0.0)
 
            return [v, v, v];
 
        i = parseInt(h * 6.0)
 
        f = (h * 6.0) - i
 
        p = v * (1.0 - s)
 
        q = v * (1.0 - s * f)
 
        t = v * (1.0 - s * (1.0 - f))
 
        i = i % 6
 
        if (i == 0) 
 
            return [v, t, p]
 
        if (i == 1) 
 
            return [q, v, p]
 
        if (i == 2) 
 
            return [p, v, t]
 
        if (i == 3)
 
            return [p, q, v]
 
        if (i == 4) 
 
            return [t, p, v]
 
        if (i == 5)
 
            return [v, p, q]            	
 
    },
 
    generateColor:function(){
 
        this.CURRENT_RATIO = this.CURRENT_RATIO+this.GOLDEN_RATIO;
 
        this.CURRENT_RATIO = this.CURRENT_RATIO %= 1;
 
        HSV_tuple = [this.CURRENT_RATIO, this.HSV_1, this.HSV_2]
 
        RGB_tuple = this._hsvToRgb(HSV_tuple[0],HSV_tuple[1],HSV_tuple[2]);
 
        function toRgb(v){
 
        	return ""+parseInt(v*256)
 
        }
 
        return [toRgb(RGB_tuple[0]),toRgb(RGB_tuple[1]),toRgb(RGB_tuple[2])];
 
        
 
    }
 
}
 

	
 
/**
 
 * PyRoutesJS
 
 * 
 
 * Usage pyroutes.url('mark_error_fixed',{"error_id":error_id}) // /mark_error_fixed/<error_id>
 
 */
 
var pyroutes = (function() {
 
	// access global map defined in special file pyroutes
 
    var matchlist = PROUTES_MAP;
 
    var sprintf = (function() {
 
        function get_type(variable) {
 
            return Object.prototype.toString.call(variable).slice(8, -1).toLowerCase();
 
        }
 
        function str_repeat(input, multiplier) {
 
            for (var output = []; multiplier > 0; output[--multiplier] = input) {/* do nothing */}
 
            return output.join('');
 
        }
 

	
 
        var str_format = function() {
 
            if (!str_format.cache.hasOwnProperty(arguments[0])) {
 
                str_format.cache[arguments[0]] = str_format.parse(arguments[0]);
 
            }
 
            return str_format.format.call(null, str_format.cache[arguments[0]], arguments);
 
        };
 

	
 
        str_format.format = function(parse_tree, argv) {
 
            var cursor = 1, tree_length = parse_tree.length, node_type = '', arg, output = [], i, k, match, pad, pad_character, pad_length;
 
            for (i = 0; i < tree_length; i++) {
 
                node_type = get_type(parse_tree[i]);
 
                if (node_type === 'string') {
 
                    output.push(parse_tree[i]);
 
                }
 
                else if (node_type === 'array') {
rhodecode/templates/pullrequests/pullrequest.html
Show inline comments
 
@@ -68,132 +68,137 @@
 
                </div>
 
              </li>
 
            %endfor
 
            </ul>
 
          </div>
 

	
 
          <div class='ac'>
 
            <div class="reviewer_ac">
 
               ${h.text('user', class_='yui-ac-input')}
 
               <span class="help-block">${_('Add reviewer to this pull request.')}</span>
 
               <div id="reviewers_container"></div>
 
            </div>
 
          </div>
 
        </div>
 
    </div>
 
    <h3>${_('Create new pull request')}</h3>
 

	
 
    <div class="form">
 
        <!-- fields -->
 

	
 
        <div class="fields">
 

	
 
             <div class="field">
 
                <div class="label">
 
                    <label for="pullrequest_title">${_('Title')}:</label>
 
                </div>
 
                <div class="input">
 
                    ${h.text('pullrequest_title',size=30)}
 
                </div>
 
             </div>
 

	
 
            <div class="field">
 
                <div class="label label-textarea">
 
                    <label for="pullrequest_desc">${_('description')}:</label>
 
                </div>
 
                <div class="textarea text-area editor">
 
                    ${h.textarea('pullrequest_desc',size=30)}
 
                </div>
 
            </div>
 

	
 
            <div class="buttons">
 
                ${h.submit('save',_('Send pull request'),class_="ui-btn large")}
 
                ${h.reset('reset',_('Reset'),class_="ui-btn large")}
 
           </div>
 
        </div>
 
    </div>
 
    ${h.end_form()}
 

	
 
</div>
 

	
 
<script type="text/javascript">
 
  var _USERS_AC_DATA = ${c.users_array|n};
 
  var _GROUPS_AC_DATA = ${c.users_groups_array|n};
 
  PullRequestAutoComplete('user', 'reviewers_container', _USERS_AC_DATA, _GROUPS_AC_DATA);
 

	
 
  var other_repos_info = ${c.other_repos_info|n};
 

	
 
  var loadPreview = function(){
 
      YUD.setStyle(YUD.get('pull_request_overview_url').parentElement,'display','none');
 
      //url template
 
      var url = "${h.url('compare_url',
 
                         repo_name='__other_repo__',
 
                         org_ref_type='__other_ref_type__',
 
                         org_ref='__other_ref__',
 
                         other_repo='__org_repo__',
 
                         other_ref_type='__org_ref_type__',
 
                         other_ref='__org_ref__',
 
                         as_form=True,
 
                         merge=True,
 
                         )}";
 
      var org_repo = YUQ('#pull_request_form #org_repo')[0].value;
 
      var org_ref = YUQ('#pull_request_form #org_ref')[0].value.split(':');
 

	
 
      var other_repo = YUQ('#pull_request_form #other_repo')[0].value;
 
      var other_ref = YUQ('#pull_request_form #other_ref')[0].value.split(':');
 

	
 
      var select_refs = YUQ('#pull_request_form select.refs')
 
      var rev_data = {
 
          'org_repo': org_repo,
 
          'org_ref': org_ref[2],
 
          'org_ref_type': 'rev',
 
          'other_repo': other_repo,
 
          'other_ref': other_ref[2],
 
          'other_ref_type': 'rev',
 
      }; // gather the org/other ref and repo here
 

	
 
      for (k in rev_data){
 
          url = url.replace('__'+k+'__',rev_data[k]);
 
      }
 

	
 
      YUD.get('pull_request_overview').innerHTML = "${_('Loading ...')}";
 
      YUD.get('pull_request_overview_url').href = url; // shouldn't have as_form ... but ...
 
      YUD.setStyle(YUD.get('pull_request_overview_url').parentElement,'display','');
 
      ypjax(url,'pull_request_overview', function(data){
 
          var sel_box = YUQ('#pull_request_form #other_repo')[0];
 
          var repo_name = sel_box.options[sel_box.selectedIndex].value;
 
          YUD.get('other_repo_desc').innerHTML = other_repos_info[repo_name]['description'];
 
          // replace options of other_ref with the ones for the current other_repo
 
          var other_ref_selector = YUD.get('other_ref');
 
          var new_select = YUD.createElementFromMarkup(other_repos_info[repo_name]['revs']);
 
          var new_selectedIndex = new_select.selectedIndex;
 
          other_ref_selector.innerHTML = ""; // clear old options
 
          while (new_select.length > 0){ // children will be popped when appened to other_ref_selector
 
              other_ref_selector.appendChild(new_select.children[0]);
 
          }
 
          // browsers lost track of selected when appendChild was used
 
          other_ref_selector.selectedIndex = new_selectedIndex;
 
          // reset && add the reviewer based on selected repo
 
          var _data = other_repos_info[repo_name];
 
          YUD.get('other_repo_desc').innerHTML = other_repos_info[repo_name]['description'];
 
          YUD.get('other_ref').innerHTML = other_repos_info[repo_name]['revs'];
 
          // select back the revision that was just compared
 
          setSelectValue(YUD.get('other_ref'), rev_data['other_ref']);
 
          // reset && add the reviewer based on selected repo
 
          YUD.get('review_members').innerHTML = '';
 
          addReviewMember(_data.user.user_id, _data.user.firstname,
 
                          _data.user.lastname, _data.user.username,
 
                          _data.user.gravatar_link);
 
      })
 
  }
 

	
 
  ## refresh automatically when something changes (org_repo can't change)
 

	
 
  YUE.on('org_ref', 'change', function(e){
 
     loadPreview();
 
  });
 

	
 
  YUE.on('other_repo', 'change', function(e){
 
      var repo_name = e.currentTarget.value;
 
      // replace the <select> of changed repo
 
      YUD.get('other_ref').innerHTML = other_repos_info[repo_name]['revs'];
 
      loadPreview();
 
  });
 

	
 
  YUE.on('other_ref', 'change', function(e){
 
     loadPreview();
 
  });
 

	
 
  //lazy load overview after 0.5s
 
  setTimeout(loadPreview, 500)
 

	
 
</script>
 

	
 
</%def>
0 comments (0 inline, 0 general)