src/cm/media/js/client/c_addcomment_form.js
author Simon Descarpentries <sid@sopinspace.com>
Mon, 21 Oct 2013 16:37:07 +0200
changeset 553 bf26fb47a14c
parent 532 0bad3613f59d
child 562 92e8e5aaacde
permissions -rw-r--r--
To allow scrolling in Safari mobile, we set the content of text_view_comments frame in a jQuery UI layout. So the automated scrolling operations in c_sync.js must be adjustable to the right part to scroll. Also, if a comment have to be shown outside of the current viewport, we scroll the correct part to that viewport and then set the comment top Y offset to juste what it needs to avoid the "Add comment" button after scrolling operation. If not in Safari mobile, we add an offset here to avoid comment to display under the "Add comment" button.

gICommentForm = null ;

instanciateICommentForm = function() {
  gICommentForm = {
      'position':[CY.WidgetPositionExt.TL, CY.WidgetPositionExt.TL],
      'formId':CY.guid(),
      'formTitleId':CY.guid(),
      'titleInputId':CY.guid(),
      'contentInputId':CY.guid(),
      'tagsInputId':CY.guid(),
      'categoryInputId':CY.guid(),
      'formatInputId':CY.guid(),
      'startWrapperInputId':CY.guid(),
      'endWrapperInputId':CY.guid(),
      'startOffsetInputId':CY.guid(),
      'endOffsetInputId':CY.guid(),
      'selectionPlaceId':CY.guid(),
      'keyId':CY.guid(),
      'currentSelId':CY.guid(),
      'currentSelIdI':CY.guid(),
      'addBtnId':CY.guid(),
      'cancelBtnId':CY.guid(),
      'closeBtnId':CY.guid()
  } ;
  
  if (!sv_loggedIn) {
    gICommentForm ['nameInputId'] = CY.guid() ;
    gICommentForm ['emailInputId'] = CY.guid() ;
  }
  
  var overlayHtml = getHtml(gICommentForm) ;
  
  var width = gLayout.getTopICommentsWidth() ;
  
  var overlay = new CY.Overlay( {
    zIndex :3,
    shim :false, // until we really need it, no shim 
    visible :false,
    headerContent :overlayHtml['headerContent'],
    bodyContent :overlayHtml['bodyContent'],
    xy :[10,10],
    width : width
  });
  overlay.get('contentBox').addClass("c-newcomment") ;
  
  // attach to DOM
  overlay.render('#leftcolumn');
  
  if (!sv_loggedIn) {
    CY.get("#"+gICommentForm['nameInputId']).set('value',gPrefs.get("user","name")) ;
    CY.get("#"+gICommentForm['emailInputId']).set('value',gPrefs.get("user","email")) ;
  }
    
  CY.get("#"+gICommentForm['formTitleId']).set('innerHTML', gettext('New comment')) ;
  CY.get("#"+gICommentForm['formatInputId']).set('value',gConf['defaultCommentFormat']) ;
  
  CY.on("click", onSubmitICommentFormClick, "#"+gICommentForm['addBtnId']);
  CY.on("click", onCancelICommentFormClick, "#"+gICommentForm['cancelBtnId']);
  CY.on("click", onCancelICommentFormClick, "#"+gICommentForm['closeBtnId']);
  
  gICommentForm['overlay'] = overlay ;
  
  var animationHide = null ;
  animationHide = new CY.Anim({
        node: overlay.get('boundingBox'),
        duration: .3, //gPrefs['general']['animduration'],
        easing: CY.Easing.easeOut
    });   
  gICommentForm['animationHide'] = animationHide ; 
  animationHide.set('to', { opacity: 0});// height : 0 doesn't work
  gICommentForm['animationHide-handle'] = animationHide.on('end', onICommentFormHideAnimEnd, gICommentForm);

  var animationShow = null ;
  animationShow = new CY.Anim({
        node: overlay.get('boundingBox'),
        duration: .3, //gPrefs['general']['animduration'],
        easing: CY.Easing.easeOut
    });   
  gICommentForm['animationShow'] = animationShow ; 
  animationShow.set('to', { opacity: 1});
  gICommentForm['animationShow-handle'] = animationShow.on('end', onICommentFormShowAnimEnd, gICommentForm);
  
  changeFormFieldsWidth(gICommentForm['formId'], width) ;
}

cleanICommentForm = function() {
  CY.get("#"+gICommentForm['currentSelIdI']).set('innerHTML', gNoSelectionYet) ;

    var hostNode = gICommentForm['overlay'].getStdModNode(CY.WidgetStdMod.BODY) ;
    hostNode.queryAll(".comment_input").set('value', "") ;
  
  CY.get("#"+gICommentForm['formatInputId']).set('value',gConf['defaultCommentFormat']) ;// for now ...
  
  if (!sv_loggedIn) {
    hostNode.queryAll(".user_input").set('value', "") ;
  }
}

onICommentFormHideAnimEnd = function() {
//  iComment['overlay'].blur() ;
  this.overlay.hide() ;
  gSync.resume() ;    
}

onICommentFormShowAnimEnd = function() {
  gSync.resume() ;    
}

onSubmitICommentFormClick = function() {
  if (!sv_loggedIn) {
    var name = CY.get("#"+gICommentForm['nameInputId']).get('value') ;
    gPrefs.persist("user", "name", name) ;  
  
    var email = CY.get("#"+gICommentForm['emailInputId']).get('value') ;
    gPrefs.persist("user", "email", email) ;
  }
  gSync.saveComment(gICommentForm['formId']) ;
}

onCancelICommentFormClick = function() {
  gSync.cancelICommentForm() ;
}

// record selection info in hidden form fields
_updateICommentFormSelection = function(ids, displayedText, csStartSelection, csEndSelection) {
  var node = CY.Node.get('#'+ids['currentSelIdI']) ;
  if (node != null)
    node.set('innerHTML', displayedText) ;
  
    node = CY.get('#'+ids['startWrapperInputId']) ;
  if (node != null)
    node.set('value', csStartSelection['elt'].id.substring("sv_".length)) ;
    node = CY.get('#'+ids['startOffsetInputId']) ;
  if (node != null)
    node.set('value', csStartSelection['offset']) ;
    node = CY.get('#'+ids['endWrapperInputId']) ;
  if (node != null)
    node.set('value', csEndSelection['elt'].id.substring("sv_".length)) ;
    node = CY.get('#'+ids['endOffsetInputId']) ;
  if (node != null)
    node.set('value', csEndSelection['offset']) ;
}

updateICommentFormSelection = function(selection) {
  var text = (selection == null) ? "" : selection['text'] ;
  if (text != "") {
    // display text to be commented 
    var displayedText = text ; 
    var maxLength = 100 ; // even number only
    if (text.length > maxLength ) {
      var start = text.substring(0, (text.substring(0, maxLength/2)).lastIndexOf(" ")) ;
      var endPart = text.substring(text.length - maxLength/2) ;
      var end = endPart.substring(endPart.indexOf(" ")) ;
      displayedText = start + " ... " + end ;
    }
        var csStartSelection = _convertSelectionFromCCToCS(selection['start']) ;
        var csEndSelection = _convertSelectionFromCCToCS(selection['end']) ;

        _updateICommentFormSelection(gICommentForm, displayedText, csStartSelection, csEndSelection);
        if (gEdit != null)
          _updateICommentFormSelection(gEdit['ids'], displayedText, csStartSelection, csEndSelection);
      positionICommentForm() ;
  }
}

showICommentForm= function () {
  removeFormErrMsg(gICommentForm['formId']) ;
  if (!sv_loggedIn) {
    if (CY.get("#"+gICommentForm['nameInputId']).get('value') == '') 
      CY.get("#"+gICommentForm['nameInputId']).set('value', gPrefs.get('user','name')) ;
    if (CY.get("#"+gICommentForm['emailInputId']).get('value') == '') 
      CY.get("#"+gICommentForm['emailInputId']).set('value', gPrefs.get('user','email')) ;
  }
  gIComments.hide() ;
  hideToc();
  positionICommentForm() ;
  gICommentForm['overlay'].show() ;
  CY.get("#"+gICommentForm['titleInputId']).focus() ;
}

isICommentFormVisible = function () {
  if (gICommentForm != null)
    return gICommentForm['overlay'].get('visible') ;
  return false ;
}

positionICommentForm = function () {
  if (gICommentForm != null) { 
    var overlay = gICommentForm['overlay'] ;
    var boundingBox = overlay.get('boundingBox') ;

    var commentFormHeight = boundingBox.get('offsetHeight') ;
    var windowHeight = boundingBox.get('winHeight') ;

    var pos = gICommentForm['position'] ;
    if (commentFormHeight > windowHeight) // trying to have save comment visible ... :
      pos = [CY.WidgetPositionExt.BL, CY.WidgetPositionExt.BL] ;
    
    overlay.set("align", {points:pos});
    if (commentFormHeight <= windowHeight)
      overlay.set("y", overlay.get("y") + 30);
    boundingBox.setX(boundingBox.getX() + gConf['iCommentLeftPadding']);
  }
}