Alfa

Stabil versiyon. Ancak henüz JSOOP edilmedi. Fork edilip JSOOP yazılacak. Sonra devam edilecek

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Alfa</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <html>
  <body>
    <header>
      <div id="logo">
      <img src="https://www.notesuat.appspot.com/img/notesuat-logo.jpg">  
      </div>     
      
      <div class="toptoolbar">
        Hello {{name}} Logout
        | Settings
      </div>
      
      <div class="searchpanel">
          <form>
            <input type="text" id="query"  list="oldqueries" placeholder="Search Term"/>
            <input  id="clearquery" type="button" value="Clear"/>
            <datalist id="oldqueries"> 
            </datalist>
            
            
            <div id="quicktags">
            <span class='quicktag'>#genel</span> | 
            <span class='quicktag'>#işnotlarım </span>| 
            <span class='quicktag'>#seyahat </span>| 
            <span class='quicktag'>#okumanotlarım </span>| 
            <span class='quicktag'>#geçici</span>
              
              
            </div>
            
            <!--notesinfo-->
          <div class="infopanel">
            Infopanel
          </div>
            
          </form>
        </div>
         
      
    </header>
    <div class="frame">
      <div class="panel1">
        <form class="newnote">
        
          <div class="inputbox">
          <input placeholder="New note title" type="text" id="note_title"/>
          <br>
          <textarea id="note_text" placeholder="New Note">
            
          </textarea>
          </div>
          <br>
        <!--May be auto save-->
          <input id="addnote"  type="button" value="Add"/>
        </form>
      </div>
      <div class="panel2">
        
        
          
        
        <div class="notespanel">
        
          <!--*-->
          <div class="note">
            <div class="title">Suat ATAN</div>
            <div class="content">Content</div>
          </div>
          
 
      </div>
      
    </div>
  </body>
</html>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://tinymce.cachefly.net/4.0/tinymce.min.js'></script>

    <script  src="js/index.js"></script>

</body>
</html>
/* Downloaded from https://www.codeseek.co/ */
body, input, textarea{
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  font-size: 0.9em;
}
#logo{
  float:left;
}
header{
  margin-bottom: 10px;
  
}
input{
font-weight:bold;
}
/*bone*/
.panel2{
  
  

}
.panel1{
  
 
}

header{
  position: fixed;
  height: 150px;
 
}
.inputbox{
  
 
  background-color: white;
}

#note_text,#note_title{
  border: none;
  width: 100%;

}
#note_text{
  /*tinymce sallamaz*/
  height: 380px;
  border: none;
}

.searchpanel{
  float:left;
  padding-left: 5px;
}
.searchpanel #query {
  width: 70%;
}

.notespanel{

  background-color: white;
  overflow: hidden;
}
.note{
  width: 100%;
  
  margin-top: 1px;
  margin-bottom: 1px;
  border: solid 2px #bdc3c7 ;
  background-color: #ecf0f1
  overflow: hidden;
  padding: 2px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  padding: 5px;

}
*{
  oveflow:hidden;
}


.toptoolbar{
  height: 20px;
  background-color: #ecf0f1;
  margin-bottom: 15px;

}
.infopanel{
  background-color: #ecf0f1;
  width: 100%;
  margin-top:20px;
  
  height:20px;
}
.note>.title{
  font-weight:bold;
}
#note_text{
  height: 140px;
}
.quicktag{
  /*border: 1px solid gray;*/
  padding: 0.5em;
  font-size: 10px;

}
.quicktag:hover{
  background-color: #d35400;
}
#quicktags{
  padding: 1px 0px 1px 0px;
  float:left;
}
/*TinyMce Modern*/
*[class*='mce-'] { -webkit-border-radius: 0!important; -moz-border-radius: 0!important; border-radius: 0!important; }
.mce-throbber { background: #fff; }
.mce-tinymce button, .mce-panel button { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }
.mce-panel { background: #fff; filter: none; border: 0 solid #fff; }
.mce-in .mce-panel { background: #f3f3f3; border-top: 1px solid #ddd; }
.mce-edit-area { border: 1px solid #ddd!important; }
.mce-btn-group .mce-first, .mce-btn-group .mce-last { border: 0!important; }
.mce-toolbar .mce-btn button { padding-top: 3px; padding-bottom: 3px; }
.mce-toolbar .mce-btn i { color: #555; }
.mce-toolbar .mce-btn: hover i { color: #333; }
.mce-toolbar .mce-btn, .mce-toolbar .mce-btn.mce-disabled { background: none!important; filter: none!important; border: 0; -webkit-box-shadow: none!important; -moz-box-shadow: none!important; box-shadow: none!important; }
.mce-toolbar .mce-btn.mce-disabled { opacity: .4!important; filter: alpha(opacity=40)!important; }
.mce-toolbar .mce-btn.mce-active { background: #eee!important; }
.mce-floatpanel { -webkit-box-shadow: 0 3px 7px rgba(0,0,0,.3); -moz-box-shadow: 0 3px 7px rgba(0,0,0,.3); box-shadow: 0 3px 7px rgba(0,0,0,.3); }
.mce-btn { background: #f0f0f0; }
.mce-btn: hover { background: #e9e9e9; }
.mce-primary { background: #7fba00; }
.mce-primary: hover, .mce-primary: focus { background: #88ca00; }
.mce-primary: active { background: #555; }
.mce-textbox { -webkit-transition: none; transition: none; }
.mce-textbox: focus { border-color: #38add7; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }
.mce-menu-item: hover, .mce-menu-item.mce-selected, .mce-menu-item: focus { background: #eee; }
.mce-menu-item: hover .mce-text, .mce-menu-item.mce-selected .mce-text { color: #333; }
/* Downloaded from https://www.codeseek.co/ */
/*Rich text*/
tinymce.init({
  
  selector:'#note_text',
  statusbar: false,
  menubar : false,
  setup: function(ed) {
    ed.on('keyup', function(e) {
        //console.log('Editor contents was modified. Contents: ' + ed.getContent());
        /*autosave function*/
       localStorage.note_text=ed.getContent();
       
    });
  }
});




function ictanitim(){
//note_text tanıtımı
  $("#note_text").html("Notunuz");
  
}
ictanitim();

/*AutoSave Local*/
/*Saves last note title*/
$("#note_title").keyup(function(){
  var note_title=$("#note_title").val();
  localStorage.note_title=note_title;
});
/*Saving of note_text in function init of tinymce*/

/*Reloading autosaved note when starting app*/
$(document).ready(function(){
  if(localStorage.note_title){
    $("#note_title").val(localStorage.note_title);
  }
  if(localStorage.note_text){
    
  }
  //set note css
  
  
  
  
});


/*QuickTag*/
$(".quicktag").click(function(){
  var query=$(this).html();
$(".note").not(":contains('"+query+"')").hide();
  var resultcount=$(".note:visible").length;

  $(".infopanel").html(resultcount+" result found from your query:"+query);
  
  $("#query").val(query);
});


//tinyMCE.get('note_text').setContent('AnyCountryName');
/**Quick Filter-Live Search******************/
$("#query").keyup(function(){
  var query=$(this).val();
  $(".note").not(":contains('"+query+"')").hide();
  var resultcount=$(".note:visible").length;

    $(".infopanel").html(resultcount+" result found from your query:"+query);
  
  /*back silme tusu-firefoxda calismadi #FIXME*/
  if (event.keyCode == 8) {
    $(".note").show();
    var query=$(this).val();
    $(".note").not(":contains('"+query+"')").hide();
    
    $(".notespanel>.info").html(resultcount+" result found");
    
  }
});
$("#clearquery").click(function(){
  $(".note").show();
  /*adding old query to queue*/
  var query=$("#query").val();
 
  /*oldquery creation over datalist*/
  if(localStorage.OLDQUERIES){
    
  }
  else{
      localStorage.OLDQUERIES="<option></option>";
  }
 
  localStorage.OLDQUERIES="<option  value='"+query+"'>"+localStorage.OLDQUERIES;
  
  $("#query").val("");
  $(".notespanel .info").html("All notes are shown");
  
});
/*********************************************/

/*renew oldqueries over datalist*/
$("#query").mouseover(function(){
$("#oldqueries").html(localStorage.OLDQUERIES);
});


/**note-smalltoolbox**/
var notetoolbox="\
             <span class='makered'></span>\
             <span class='delete'>Delete</span>&nbsp; \
             <span class='update'>Update</span>";

$(".note").prepend(notetoolbox);

             
/*addnote*************************************/
$("#addnote").click(function(){
  //first save function
  var note_title=$("#note_title").val();
  var note_text=tinymce.get('note_text').getContent();
  //alert(note_text);
  ///CREATE NOTE
  
  var note_object="<div class='title'>"+note_title+"</div><div class='content'>"+note_text+"</div>";
  var note_capsule="<div class='note'>"+note_object+window.notetoolbox+"</div>";
  $(".notespanel").prepend(note_capsule);
  
});
/*****************************************/


/*delete operation for veteran and new-generated object*/
$(document).on('click', '.delete', function(event) {
     /*hide and remove*/
  $(this).parent(".note").hide("slow", function(){ $target.remove(); });
});

/*Update note*/
$(document).on('click', '.update', function(event) {

  var title=$(this).parent(".note").find(".title").html();
  var content=$(this).parent(".note").find(" .content").html();
  $("#note_title").val(title);
  tinymce.get('note_text').setContent(content);
  
});




//JS USER EXPERIENCE CUSTOMISATION



//FIXED-FIXME jquery on. to new generated object
//FIXME: AUTORECORDING
//DONE-TODO: UPDATE
//FIXME: datalist clicked

This awesome code ( Alfa ) is write by Suat ATAN, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © Suat ATAN