personal-notes display for card medium and cardfull is ok

This commit is contained in:
Bachir Soussi Chiadmi 2017-11-29 16:40:20 +01:00
parent 7d5bedcb0c
commit 8b486ffc60
9 changed files with 4447 additions and 72 deletions

View File

@ -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);

View File

@ -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');
$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)
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){
// 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()
.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);
});
$modal
.find('input[type="submit"], .homepage-textfield').hide();
// TODO: esc keypressed close the form
.focus();
}else{
// var $note = $('<div id="modal" class="modal note-modal"/>').appendTo('body');
// $note
// .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();
// })
// );
// $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);
});
};

View File

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

File diff suppressed because it is too large Load Diff

View File

@ -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);
if(!$(event.target).is('.flag') && !$(event.target).parent().is('.flag'))
trace('on_click_cardmedium', event);
// if(!$(event.target).is('.flag') && !$(event.target).parent().is('.flag'))
if($(event.target).is('.side') || $(event.target).parents('.side').length)
sideSwitcher(event);
};

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load Diff

View File

@ -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": {}
}

View File

@ -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{
@include layer(); background-color:#fff; height:270px; top:340px; cursor:pointer;
>.side{
@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; }