src/cm/media/js/client/c_edit_form.js
author Simon Descarpentries <sid@sopinspace.com>
Mon, 21 Oct 2013 16:37:07 +0200
changeset 553 bf26fb47a14c
parent 532 0bad3613f59d
child 552 ee0c833d1969
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.

gEditICommentHost = null ;
gEdit = null ;

dbgc = null ;
showEditForm = function(iCommentHost) {
  
  if (gEdit == null) {
    gEdit = {
        'ids':{
          'formId':CY.guid(),
          'formTitleId':CY.guid(),
          'nameInputId':CY.guid(),
          'emailInputId':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(),
          'changeScopeInputId':CY.guid(),
          'changeScopeInputWrapper':CY.guid(),
          'selectionPlaceId':CY.guid(),
          'keyId':CY.guid(),
          'editCommentId':CY.guid(),
          'currentSelId':CY.guid(),
          'currentSelIdI':CY.guid(),
          'addBtnId':CY.guid(),
          'cancelBtnId':CY.guid()
          },
        'handlers':{}
    } ;
  }
  
  gEditICommentHost = iCommentHost ;

  gEditICommentHost.hideContent() ;

// FORM HTML  
  var overlayHtml = getHtml(gEdit['ids']) ;
  var editHeader = '<div class="icomment-edit-header">' + overlayHtml['headerContent'] + '</div>' ;
  var editBody = '<div class="icomment-edit-body">' + overlayHtml['bodyContent'] + '</div>' ;
  
//  cf. http://yuilibrary.com/projects/yui3/ticket/2528319 
  gEditICommentHost['overlay'].setStdModContent(CY.WidgetStdMod.HEADER,CY.Node.create(editHeader),CY.WidgetStdMod.AFTER);   
  gEditICommentHost['overlay'].setStdModContent(CY.WidgetStdMod.BODY,CY.Node.create(editBody),CY.WidgetStdMod.AFTER);
  
// FORM TITLE   
  CY.get("#"+gEdit['ids']['formTitleId']).set('innerHTML', gettext("Edit comment")) ;

// FETCH FORM VALUES FROM COMMENT
  
  var comment = gDb.getComment(gEditICommentHost.commentId) ;
  CY.get("#"+gEdit['ids']['editCommentId']).set('value', comment.id) ;
  CY.get("#"+gEdit['ids']['keyId']).set('value', comment.key) ;

  CY.get("#"+gEdit['ids']['changeScopeInputId']+" input").set('checked', false) ;
  // Edit scope and category just for the first comment in a thread
  // => hides these inputs for a reply.
  if (comment.reply_to_id != null) {
    CY.get("#"+gEdit['ids']['changeScopeInputId']).addClass('displaynone')
    CY.get("#"+gEdit['ids']['categoryInputId']).addClass('displaynone')
    CY.get("#"+gEdit['ids']['categoryInputId']).ancestor().addClass('displaynone')
  }
  changeScopeFormClick() ; // to adapt

  CY.get("#"+gEdit['ids']['nameInputId']).set('value', comment.name) ; 
  CY.get("#"+gEdit['ids']['emailInputId']).set('value', comment.email) ; 

  if (comment.logged_author) {
    CY.get("#"+gEdit['ids']['nameInputId']).setAttribute("disabled", true); 
    CY.get("#"+gEdit['ids']['emailInputId']).setAttribute("disabled", true);
  }
  
// FORM VALUES
  CY.get("#"+gEdit['ids']['titleInputId']).set('value', comment['title']) ;
  CY.get("#"+gEdit['ids']['contentInputId']).set('value', comment['content']) ;
  CY.get("#"+gEdit['ids']['tagsInputId']).set('value', comment['tags']) ;
  if ( CY.get("#"+gEdit['ids']['categoryInputId']))
    CY.get("#"+gEdit['ids']['categoryInputId']).set('value', comment['category']) ;
  
  CY.get("#"+gEdit['ids']['formatInputId']).set('value',gConf['defaultCommentFormat']) ;// for now ...
  
// WIDTH  
  var width = gLayout.getTopICommentsWidth() ;
  changeFormFieldsWidth(gEdit['ids']['formId'], width) ;
  
// ATTACH EVENT HANDLERS
  gEdit['handlers']['addBtnId'] = CY.on("click", onEditSaveClick, "#"+gEdit['ids']['addBtnId']);
  gEdit['handlers']['cancelBtnId'] = CY.on("click", onEditCancelClick, "#"+gEdit['ids']['cancelBtnId']);
  gEdit['handlers']['changeScope'] = CY.on("click", onChangeScopeClick, "#"+gEdit['ids']['changeScopeInputId']);
  
}
onEditSaveClick = function(iCommentHost) {
  if (readyForAction())
    gSync.editComment() ;
}
onEditCancelClick = function(iCommentHost) {
  if (readyForAction())
    gSync.cancelEdit() ;
}
onChangeScopeClick = function() {
  if (readyForAction())
    gSync.changeScopeFormClick() ;
  else {// (onChangeScopeClick triggers an animation : checking for readyForAction does not prevent the checkbox change ...)
    var chckCtrl = CY.get("#"+gEdit['ids']['changeScopeInputId']+" input") ;
    var chck = chckCtrl.get('checked') ;
    chckCtrl.set('checked', !chck) ; // set it back 
  }
}
changeScopeFormClick = function() {
  var node = CY.get("#"+gEdit['ids']['currentSelId']) ;
  if (CY.get("#"+gEdit['ids']['changeScopeInputId']+" input").get('checked'))
    node.removeClass('displaynone') ;
  else
    node.addClass('displaynone') ;
}
cancelEditForm = function() {
  if (gEditICommentHost != null) {
// DETACH EVENT HANDLERS
    for (var id in gEdit['handlers']) {
      if (gEdit['handlers'][id] != null) {
        gEdit['handlers'][id].detach() ;
        gEdit['handlers'][id] = null ;
      }
    }

// REMOVE EDIT FORM NODES FROM ICOMMENT OVERLAY
    var node = gEditICommentHost['overlay'].get('contentBox').query(".icomment-edit-body") ;
    node.get('parentNode').removeChild(node) ;
    node = gEditICommentHost['overlay'].get('contentBox').query(".icomment-edit-header") ;
    node.get('parentNode').removeChild(node) ;

// SHOW ICOMMENT OVERLAY
    gEditICommentHost.showContent() ;
    
    gEditICommentHost = null ;
  }
}