personal-notes display for card medium and cardfull is ok

sites/all/modules/gui/materiobasemod/js/dist/materio_personalnotes.min.js

@@ -4,7 +4,7 @@
 +'materio_personalnotes/form/'+action
 +'/'+src_nid;if(action=='edit'){url+='/'+note_nid;}
 $.getJSON(url,function(json){trace('MaterioPersonalNotes :: '+action+' : json',json);if(json.new_note_nid){updateNoteLink($link,json.new_note_nid);}
-showNoteForm(json);});return false;};function updateNoteLink($link,new_note_nid){trace('MaterioPersonalNotes :: updateNoteLink : new_note_nid',new_note_nid);$link.attr('note_nid',new_note_nid);$link.attr('href',Drupal.settings.pathPrefix+'node/'+new_note_nid+'/edit');};function showNoteForm(json){trace('MaterioPersonalNotes :: showNoteForm');$.event.trigger({type:"record-stat",categorie:"PersonalNotes",action:'show create form'});var $modal=$('<div id="modal" class="modal note-modal"/>').appendTo('body');$modal.css({position:'absolute',top:'40%',left:'50%',marginLeft:'-150px',width:'500px',zIndex:"99999"}).append($('<div class="close"></i><div>').bind('click',function(){trace('close note');$(this).parents('#modal').remove();}));$modal.append(json.rendered_form).find('textarea').focus().bind('change keyup paste',function(event){var note_nid=$(this).parents('form').find('input[name="note_nid"]').val();saveNote($(this).val(),note_nid);});$modal.find('input[type="submit"], .homepage-textfield').hide();};function saveNote(text,note_nid){trace(text,'MaterioPersonalNotes :: saveNote : text');var url=Drupal.settings.basePath
+showNoteForm($link,json);});return false;};function updateNoteLink($link,new_note_nid){trace('MaterioPersonalNotes :: updateNoteLink : new_note_nid',new_note_nid);$link.attr('note_nid',new_note_nid);$link.attr('href',Drupal.settings.pathPrefix+'node/'+new_note_nid+'/edit');};function showNoteForm($link,json){trace('MaterioPersonalNotes :: showNoteForm');$.event.trigger({type:"record-stat",categorie:"PersonalNotes",action:'show create form'});var $card=$link.parents('.node-materiau');if($card.is('.vm-cardmedium')||$card.is('.vm-cardbig')){var $note=$('<div class="note-wrapper"/>').append($('<div class="close"></i><div>').bind('click',function(){trace('close note');$(this).parents('.node-materiau').removeClass('note-opened');setTimeout((function(that){$(that).parents('.note-wrapper').remove();})(this),300);}));$note.append(json.rendered_form).find('textarea').focus().bind('change keyup paste',function(event){var note_nid=$(this).parents('form').find('input[name="note_nid"]').val();saveNote($(this).val(),note_nid);});$note.find('input[type="submit"], .homepage-textfield').hide();$note.appendTo($card.addClass('note-opened'));$note.find('textarea').focus();}else{}};function saveNote(text,note_nid){trace(text,'MaterioPersonalNotes :: saveNote : text');var url=Drupal.settings.basePath
 +Drupal.settings.pathPrefix
 +'materio_personalnotes/save'
 +'/'+note_nid;$.post(url,{'content':text},function(data,status){trace('MaterioPersonalNotes :: save : status',status);});};init();};$(document).ready(function(){var materioflag=new MaterioPersonalNotes();});})(jQuery);

sites/all/modules/gui/materiobasemod/js/materio_personalnotes.js

@@ -76,7 +76,7 @@ MaterioPersonalNotes = function(){
       if(json.new_note_nid){
         updateNoteLink($link, json.new_note_nid);
       }
-      showNoteForm(json);
+      showNoteForm($link, json);
     });
     return false;
   };
@@ -87,7 +87,7 @@ MaterioPersonalNotes = function(){
     $link.attr('href', Drupal.settings.pathPrefix+'node/'+new_note_nid+'/edit');
   };
 
-  function showNoteForm(json){
+  function showNoteForm($link, json){
     trace('MaterioPersonalNotes :: showNoteForm');
     // google analytics
     $.event.trigger({
@@ -96,32 +96,64 @@ MaterioPersonalNotes = function(){
       action: 'show create form'
     });
 
-    var $modal = $('<div id="modal" class="modal note-modal"/>').appendTo('body');
+    var $card = $link.parents('.node-materiau');
-    $modal
+
-      .css({
+    if($card.is('.vm-cardmedium') || $card.is('.vm-cardbig')){
-        position:'absolute',
+      var $note = $('<div class="note-wrapper"/>')
-        top:'40%', left:'50%',
+        .append($('<div class="close"></i><div>')
-        marginLeft:'-150px', width:'500px',
+          .bind('click', function(){
-        zIndex:"99999"
+            trace('close note');
-      })
+            $(this).parents('.node-materiau').removeClass('note-opened');
-      .append($('<div class="close"></i><div>')
+            setTimeout((function(that){
-        .bind('click', function(){
+              $(that).parents('.note-wrapper').remove();
-          trace('close note');
+            })(this), 300);
-          $(this).parents('#modal').remove();
+          })
-        })
+        );
-      );
+      $note
-    $modal
+        .append(json.rendered_form)
-      .append(json.rendered_form)
+          .find('textarea')
+            .focus()
+            .bind('change keyup paste', function(event){
+              // trace('text changed', $(this).val());
+              var note_nid = $(this).parents('form').find('input[name="note_nid"]').val();
+              saveNote($(this).val(), note_nid);
+            });
+      $note
+        .find('input[type="submit"], .homepage-textfield').hide();
+      $note
+        .appendTo($card.addClass('note-opened'));
+      $note
         .find('textarea')
-          .focus()
+          .focus();
-          .bind('change keyup paste', function(event){
+    }else{
-            // trace('text changed', $(this).val());
+
-            var note_nid = $(this).parents('form').find('input[name="note_nid"]').val();
+      // var $note = $('<div id="modal" class="modal note-modal"/>').appendTo('body');
-            saveNote($(this).val(), note_nid);
+      // $note
-          });
+      //   .css({
-    $modal
+      //     position:'absolute',
-      .find('input[type="submit"], .homepage-textfield').hide();
+      //     top:'40%', left:'50%',
-      // TODO:  esc keypressed close the form
+      //     marginLeft:'-150px', width:'500px',
+      //     zIndex:"99999"
+      //   })
+      //   .append($('<div class="close"></i><div>')
+      //     .bind('click', function(){
+      //       trace('close note');
+      //       $(this).parents('#modal').remove();
+      //     })
+      //   );
+      // $note
+      //   .append(json.rendered_form)
+      //     .find('textarea')
+      //       .focus()
+      //       .bind('change keyup paste', function(event){
+      //         // trace('text changed', $(this).val());
+      //         var note_nid = $(this).parents('form').find('input[name="note_nid"]').val();
+      //         saveNote($(this).val(), note_nid);
+      //       });
+      // $note
+      //   .find('input[type="submit"], .homepage-textfield').hide();
+      //   // TODO:  esc keypressed close the form
+    }
   };
 
   function saveNote(text, note_nid){
@@ -133,7 +165,6 @@ MaterioPersonalNotes = function(){
 
     $.post(url, {'content':text}, function(data, status){
       trace('MaterioPersonalNotes :: save : status', status);
-
     });
   };
 

sites/all/modules/gui/materiobasemod/materio_personalnotes.pages.inc

@@ -53,7 +53,7 @@ function materio_personalnotes_createeditnote($action = 'create', $src_nid = nul
         'field_personal_note' => array(
           'und'=>array(
             array(
-              'value'=>$src_nid
+              'value'=>""
             )
           )
         )

sites/all/themes/gui/materiobasetheme/js/script.js

@@ -560,7 +560,7 @@
         .each(function(i){
           protectFigures(this);
           if(_isLoggedIn){
-            if(!$container.is('.modal-content')){
+            if(!$container.is('.modal-content') && !$(this).is('.vm-cardfull')){
               // do not add preview btn if we are already on a preview
               initPreview(this);
             }else{
@@ -750,8 +750,9 @@
     };
 
     MaterioBaseTheme.prototype.on_click_cardmedium = function(event){
-      // trace('on_click_cardmedium', event);
+      trace('on_click_cardmedium', event);
-      if(!$(event.target).is('.flag') && !$(event.target).parent().is('.flag'))
+      // if(!$(event.target).is('.flag') && !$(event.target).parent().is('.flag'))
+      if($(event.target).is('.side') || $(event.target).parents('.side').length)
         sideSwitcher(event);
     };
 

sites/all/themes/gui/materiobasetheme/package.json

@@ -8,11 +8,12 @@
   "homepage": "https://materio.com",
   "devDependencies": {
     "gulp": "latest",
-    "gulp-autoprefixer": "latest",
+    "gulp-autoprefixer": "^4.0.0",
     "gulp-jsmin": "latest",
     "gulp-rename": "latest",
     "gulp-sass": "latest",
     "gulp-strip-debug": "latest",
     "gulp-watch": "latest"
-  }
+  },
+  "dependencies": {}
 }

sites/all/themes/gui/materiobasetheme/scss/styles.scss

@@ -1392,7 +1392,7 @@ $headerouterheight:$headerheight+$headerpaddingtop+$headerpaddingbottom;
     .search-results, .actuality-items, .flaglist-items{
       font-size:0;
       >*{font-size:16px;}
-      text-align:center;
+      text-align:left;
       >*{text-align:left;}
 
     }
@@ -1446,9 +1446,11 @@ $cardbig_h:610px;
 $cardfull_w:850px;
 $cardfull_h:610px;
 
+$cardmargin:7px;
+
 @mixin card-box($w, $h){
   width:$w; height:$h;
-  @include inlineblock(); position:relative; margin:7px;
+  @include inlineblock(); position:relative; margin:$cardmargin;
 
   @include rounded(5px); background-color: #FFF;
   @include drop-shadow(0, 0, 5px, 0.2);
@@ -1463,7 +1465,7 @@ $cardfull_h:610px;
   }
 
   // .no-touch &:hover{ @include drop-shadow(0, 0, 5px, 0.7); }
-  &.focused{ @include drop-shadow(0, 0, 7px, 0.9); }
+  &.focused{ @include drop-shadow(0, 0, $cardmargin, 0.9); }
 
   &.just-added{ opacity:0; }
 
@@ -1490,7 +1492,10 @@ $cardfull_h:610px;
   // }
 
   nav.nav{
-    position:absolute; top:0; right:0; z-index:11;
+    position:absolute; top:0; z-index:11;
+    width:24px;
+    left:$w - 24px;
+    // right:0;
     padding: 5px 0;
     @include border-radius(0, 5px, 0, 3px);
     @include fs11;
@@ -1504,15 +1509,12 @@ $cardfull_h:610px;
     a{color:#000;}
     ul{background-color: rgba(255, 255, 255, 0.9);}
     span.op{@include fs900; @include fs14;}
-
     ul{padding: 0; margin: 0;}
-
     section{
       position:relative;
 
       &>i, &>a{margin: 0 5px; &:hover{cursor:pointer;}}
     }
-
     ul{
       position:absolute; right:0; top:0; margin-right:22px; min-width:80px; padding: 0; display:block;
       @include rounded(3px); @include drop-shadow(-2px, 2px, 5px, 0.2);
@@ -1557,8 +1559,6 @@ $cardfull_h:610px;
       }
       .ie8 &{background:#FFF;}
     }
-
-
     section:hover{
       ul{
         padding: 5px 5px;
@@ -1571,9 +1571,7 @@ $cardfull_h:610px;
 
     }
 
-    // display:none;
   }
-  // &:hover{nav.nav{display:block;}}
 
   div.workflow{
     position:absolute; bottom:0; right:0; z-index:11;
@@ -1603,6 +1601,57 @@ $cardfull_h:610px;
       text-align: center; text-decoration: none;
     }
   }
+
+  // NOTES
+  transition: width 0.3s ease-in-out;
+  &.node-materiau.vm-cardmedium.note-opened,
+  &.node-materiau.vm-cardbig.note-opened{
+
+    >div.side{
+      width:$w;
+    }
+
+    width:$w*2+$cardmargin*2;
+    nav.nav{
+      border-radius: 0 0 0 3px;
+    }
+
+    .note-wrapper{
+      width:$w+$cardmargin*2; height:$h;
+      position :absolute; top:0; right:0;
+      .close{
+        position: absolute;
+        width:15px; height:15px; top:5px; right:5px;
+        // padding: 3px 3px 0 0;
+        // border-radius: 0 7px 0 0;
+        background-color: #fff!important;
+        background-image: url(../img/close2.png);
+        background-size: contain;
+        background-position: center;
+        cursor: pointer;
+      }
+      .form-item{
+        margin:0;
+      }
+      $label_h:20px;
+      label{
+        // display: none;
+        height:$label_h;
+        @include fs14;
+        margin:0 5px;
+        line-height: 1.6;
+      }
+      textarea{
+        border: #ccc 1px solid;
+        border-radius: 0 7px 7px 0;
+        resize:none;
+        padding:5px; margin:5px;
+        height:$h - 10px - $label_h;
+        width:$w+$cardmargin*2 - 10px;
+        @include fs12;
+      }
+    }
+  }
 }// .card()
 
 /*
@@ -1785,7 +1834,6 @@ article.node-materiau.vm-cardmedium, article.node-breve.vm-cardmedium{
   }
 
   .field-name-field-materiau-ref, .field-name-field-source, .field-name-field-attachments{
-
     @include fs12; padding: 5px; @include fs300; a{color:#000;}
   }
   .field-label{@include fs900; margin: 1em 0 0.5em;}
@@ -1795,6 +1843,8 @@ article.node-materiau.vm-cardmedium, article.node-breve.vm-cardmedium{
   .no-touch &:not(.focused) div.workflow{@include op-hidden;}
 
   .ie8 &{nav.nav{background: #FFF}}
+
+
 }
 
 /*
@@ -1808,12 +1858,20 @@ article.node-materiau.vm-cardmedium, article.node-breve.vm-cardmedium{
 article.node-materiau.vm-cardbig, article.node-breve.vm-cardbig{
   @include card($cardbig_w, $cardbig_h); //width:425px; height:610px;
 
-  .side{
+  >.side{
-    @include layer(); background-color:#fff; height:270px; top:340px; cursor:pointer;
+    @include layer();
+    background-color:#fff;
+    height:270px;
+    top:340px; cursor:pointer;
+
     &:nth-child(2){z-index:1;}
+
   }
 
-  .group-side1{position:relative; @include border-radius(5px, 5px, 0, 0); overflow:hidden;}
+  .group-side1{
+    position:relative; @include border-radius(5px, 5px, 0, 0); overflow:hidden;
+    width:$cardbig_w;
+  }
 
   .group-header{
     position:absolute; bottom:0; z-index:2;
@@ -1882,6 +1940,8 @@ article.node-materiau.vm-cardbig, article.node-breve.vm-cardbig{
       border: 2px solid #69CDCF; background-color:#69CDCF;
     }
   }
+
+
 }
 
 /*
@@ -1964,7 +2024,7 @@ article.node-materiau.vm-cardfull, article.node-breve.vm-cardfull{
   .field-label{@include fs900; margin: 0 0 0.5em;}
 
   // nav
-  nav.nav{ margin: 5px; }
+  // nav.nav{ margin: 5px; }
 
   div.workflow{ margin: 5px; }