isotope embedded inside desktop kernel
This commit is contained in:
		
							parent
							
								
									ff64fb5230
								
							
						
					
					
						commit
						82b6be483a
					
				| 
						 | 
				
			
			@ -17,4 +17,5 @@
 | 
			
		|||
//= require desktop/jquery.gridster
 | 
			
		||||
//= require desktop/books_pages
 | 
			
		||||
//= require select2
 | 
			
		||||
//= require jquery.isotope.min.js
 | 
			
		||||
//= require orbit_js_1.0.1-front-end
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -330,13 +330,9 @@ var orbitDesktop = function(dom){
 | 
			
		|||
    });
 | 
			
		||||
 | 
			
		||||
    $(window).resize(function(){
 | 
			
		||||
      // var ww = $(window).width();
 | 
			
		||||
      // $("img#thmbackground").attr({"width":ww});
 | 
			
		||||
      // if( $('.tinycanvas').length > 0 ){
 | 
			
		||||
        $('.tinycanvas').tinyscrollbar_update('relative'); 
 | 
			
		||||
      // }
 | 
			
		||||
      if($(o.contentHolder).find("div.app_frame").length > 0){
 | 
			
		||||
        $(o.contentHolder).find("div.app_frame").each(function(){
 | 
			
		||||
      $('.tinycanvas').tinyscrollbar_update('relative'); 
 | 
			
		||||
      if($("body").find("div.app_frame").length > 0){
 | 
			
		||||
        $("body").find("div.app_frame").each(function(){
 | 
			
		||||
          var app_holder_height = $(this).height() - 60;
 | 
			
		||||
          var app_holder_width = $(this).width();
 | 
			
		||||
          $(this).find("div.app_holder").height(app_holder_height);
 | 
			
		||||
| 
						 | 
				
			
			@ -361,14 +357,6 @@ var orbitDesktop = function(dom){
 | 
			
		|||
    var extractLast = function( term ) {
 | 
			
		||||
        return split( term ).pop();
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
    // $("body").on("keydown","*[autocomplete]", function( event ) {
 | 
			
		||||
    //   var autocompleteList = $(this).attr("autocomplete-list");
 | 
			
		||||
    //   console.log($(this));
 | 
			
		||||
        
 | 
			
		||||
    // });
 | 
			
		||||
    // 
 | 
			
		||||
  };
 | 
			
		||||
 | 
			
		||||
  this.layout_data = function(h){
 | 
			
		||||
| 
						 | 
				
			
			@ -460,13 +448,51 @@ var orbitDesktop = function(dom){
 | 
			
		|||
    $("div[container=true] div.overview").html(f.markup);
 | 
			
		||||
    var settings = {main : ".tinycanvas"};
 | 
			
		||||
    var tsettings = {};
 | 
			
		||||
 | 
			
		||||
    var ist = function(){
 | 
			
		||||
      $('#holder').css('height', $('#container').height() - 72);
 | 
			
		||||
      $('.tinycanvas').css('height', $('#panel_r').height() - 36);
 | 
			
		||||
      var dom = $("*[isotope=true]").isotope({
 | 
			
		||||
         layoutMode: 'fitColumns',
 | 
			
		||||
         onLayout: function($elems, instance){
 | 
			
		||||
          $elems.width(base_width);
 | 
			
		||||
          setTimeout(function(){
 | 
			
		||||
            dom.isotope('reLayout',function(){
 | 
			
		||||
              $("div[container=true] div.overview").width(dom.width());
 | 
			
		||||
              o.tinyscrollbar.tinyscrollbar_update("relative");
 | 
			
		||||
            })
 | 
			
		||||
          },500);
 | 
			
		||||
         }
 | 
			
		||||
      });
 | 
			
		||||
      
 | 
			
		||||
 | 
			
		||||
      $(window).resize(function(){
 | 
			
		||||
        if($("*[isotope=true]").length > 0){
 | 
			
		||||
          $('#holder').css('height', $('#container').height() - 72);
 | 
			
		||||
          $('.tinycanvas').css('height', $('#panel_r').height() - 36);
 | 
			
		||||
          $(".isotope").isotope('reLayout',function(){
 | 
			
		||||
            $("div[container=true] div.overview").width($(".isotope").width());
 | 
			
		||||
            o.tinyscrollbar.tinyscrollbar_update("relative");
 | 
			
		||||
          });
 | 
			
		||||
        }
 | 
			
		||||
      });
 | 
			
		||||
      $('.s_grid_h_full').parent().css('height','100%');
 | 
			
		||||
     
 | 
			
		||||
      return dom;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    if($("*[isotope=true]").length > 0){
 | 
			
		||||
      var dom = ist();
 | 
			
		||||
      f.width = dom.width();
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    if(f.width){
 | 
			
		||||
      settings.fill = f.width;
 | 
			
		||||
    }
 | 
			
		||||
    if(pagination_variable){
 | 
			
		||||
      var page_no = 1;
 | 
			
		||||
      tsettings.onMove = function(x){
 | 
			
		||||
        if(x < 50){
 | 
			
		||||
      tsettings.onMove = function(e){
 | 
			
		||||
        if(e < 50){
 | 
			
		||||
          if(!pagination_link)
 | 
			
		||||
            pagination_link = o.lastlink;
 | 
			
		||||
          if(o.paging){
 | 
			
		||||
| 
						 | 
				
			
			@ -477,6 +503,8 @@ var orbitDesktop = function(dom){
 | 
			
		|||
        }
 | 
			
		||||
      }
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
  
 | 
			
		||||
    // call other functions here
 | 
			
		||||
    o.tinyscrollbar_ext(settings,tsettings);
 | 
			
		||||
    o.simple_drop_down();
 | 
			
		||||
| 
						 | 
				
			
			@ -484,6 +512,7 @@ var orbitDesktop = function(dom){
 | 
			
		|||
    o.use_select2();
 | 
			
		||||
    o.check_simple_layout();
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  this.paging = true;
 | 
			
		||||
  this.pagination = function(link,variable,page_no){
 | 
			
		||||
    var retvalue = null;
 | 
			
		||||
| 
						 | 
				
			
			@ -492,17 +521,31 @@ var orbitDesktop = function(dom){
 | 
			
		|||
      type : "get",
 | 
			
		||||
      success : function(html){
 | 
			
		||||
        var f = o.layout_data.generate_layout_html(html);
 | 
			
		||||
        // console.log(f.total)
 | 
			
		||||
        if(f.total > 0){
 | 
			
		||||
          $("div[container=true] .overview").append(f.markup);
 | 
			
		||||
          if(f.width){
 | 
			
		||||
            var w = $("div[container=true] .overview").width();
 | 
			
		||||
            $("div[container=true] .overview").width(w+f.width);
 | 
			
		||||
        if($("*[isotope=true]").length > 0){
 | 
			
		||||
          var $ul = $(f.markup),
 | 
			
		||||
              elems = $ul.children("li[item=true]");
 | 
			
		||||
          if(elems.length > 1)
 | 
			
		||||
            o.paging = true;
 | 
			
		||||
          else
 | 
			
		||||
            o.paging = false;
 | 
			
		||||
          $(".isotope").append(elems).isotope("appended",elems,function(){
 | 
			
		||||
            $(".isotope").isotope("reLayout",function(){
 | 
			
		||||
              $("div[container=true] div.overview").width($(".isotope").width()+50);
 | 
			
		||||
              o.tinyscrollbar.tinyscrollbar_update("relative");
 | 
			
		||||
            })
 | 
			
		||||
          });
 | 
			
		||||
        }else{
 | 
			
		||||
          if(f.total > 0){
 | 
			
		||||
            $("div[container=true] .overview").append(f.markup);
 | 
			
		||||
            if(f.width){
 | 
			
		||||
              var w = $("div[container=true] .overview").width();
 | 
			
		||||
              $("div[container=true] .overview").width(w+f.width);
 | 
			
		||||
            }
 | 
			
		||||
            o.tinyscrollbar.tinyscrollbar_update("relative");
 | 
			
		||||
            o.paging = true;
 | 
			
		||||
          } else {
 | 
			
		||||
            o.paging = false;
 | 
			
		||||
          }
 | 
			
		||||
          o.tinyscrollbar.tinyscrollbar_update("relative");
 | 
			
		||||
          o.paging = true;
 | 
			
		||||
        } else {
 | 
			
		||||
          o.paging = false;
 | 
			
		||||
        }
 | 
			
		||||
      }
 | 
			
		||||
    });
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
										
											
												File diff suppressed because one or more lines are too long
											
										
									
								
							| 
						 | 
				
			
			@ -1,4 +1,4 @@
 | 
			
		|||
.noSelect {
 | 
			
		||||
.noSelect, .noSelect * {
 | 
			
		||||
  -webkit-touch-callout: none;
 | 
			
		||||
  -webkit-user-select: none;
 | 
			
		||||
  -khtml-user-select: none;
 | 
			
		||||
| 
						 | 
				
			
			@ -220,7 +220,7 @@
 | 
			
		|||
  .s_form .s_table td {
 | 
			
		||||
    vertical-align: middle; }
 | 
			
		||||
  .s_form .s_table thead th {
 | 
			
		||||
    border-bottom: solid 1px #eeeeee; }
 | 
			
		||||
    border-bottom: solid 1px #eee; }
 | 
			
		||||
 | 
			
		||||
/* simple select */
 | 
			
		||||
.s_select_g {
 | 
			
		||||
| 
						 | 
				
			
			@ -311,7 +311,7 @@
 | 
			
		|||
        width: 16px;
 | 
			
		||||
        height: 20px;
 | 
			
		||||
        background-color: #000;
 | 
			
		||||
        border: solid 2px white;
 | 
			
		||||
        border: solid 2px #fff;
 | 
			
		||||
        cursor: pointer;
 | 
			
		||||
        -webkit-transition: left 0.3s ease;
 | 
			
		||||
        -moz-transition: left 0.3s ease;
 | 
			
		||||
| 
						 | 
				
			
			@ -366,7 +366,7 @@
 | 
			
		|||
      width: 100%; }
 | 
			
		||||
    .tinycanvas .overview > .column {
 | 
			
		||||
      float: left;
 | 
			
		||||
      border-right: solid 1px #eeeeee;
 | 
			
		||||
      border-right: solid 1px #eee;
 | 
			
		||||
      padding: 0 12px 0 0;
 | 
			
		||||
      margin: 0 12px 0 0;
 | 
			
		||||
      height: 100%; }
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -1,6 +1,6 @@
 | 
			
		|||
@import "desktop-helper";
 | 
			
		||||
 | 
			
		||||
.noSelect {
 | 
			
		||||
.noSelect, .noSelect * {
 | 
			
		||||
	@include no-select;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -223,7 +223,8 @@ a.admtxt.admbg2:hover {
 | 
			
		|||
  width: 100%; }
 | 
			
		||||
 | 
			
		||||
.pw {
 | 
			
		||||
  width: 540px; }
 | 
			
		||||
  /*width: 540px;*/
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.h1 {
 | 
			
		||||
  height: 120px; }
 | 
			
		||||
| 
						 | 
				
			
			@ -375,7 +376,8 @@ a.admtxt.admbg2:hover {
 | 
			
		|||
  background-color: #fff;
 | 
			
		||||
  margin-left: 252px;
 | 
			
		||||
  position: relative;
 | 
			
		||||
  width: auto; }
 | 
			
		||||
  width: calc(100% - 272px);
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
/* Desktop Notification */
 | 
			
		||||
#orbitnote {
 | 
			
		||||
| 
						 | 
				
			
			@ -798,7 +800,7 @@ a.admtxt.admbg2:hover {
 | 
			
		|||
/*Tooltip popup */
 | 
			
		||||
.desktop_toolpopup {
 | 
			
		||||
  position: absolute;
 | 
			
		||||
  z-index: 10px;
 | 
			
		||||
  z-index: 10;
 | 
			
		||||
  display: none;
 | 
			
		||||
  padding: 12px;
 | 
			
		||||
  cursor: default;
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -824,7 +824,7 @@ a:focus { outline: none; }
 | 
			
		|||
/*Tooltip popup */
 | 
			
		||||
.desktop_toolpopup {
 | 
			
		||||
	position: absolute;
 | 
			
		||||
	z-index: 10px;
 | 
			
		||||
	z-index: 10;
 | 
			
		||||
	display: none;
 | 
			
		||||
	padding: 12px;
 | 
			
		||||
	cursor: default;
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -1,10 +1,10 @@
 | 
			
		|||
@media only screen and (min-width: 1240px){
 | 
			
		||||
 | 
			
		||||
	#panel_r.pw { width: 800px; }
 | 
			
		||||
	/*#panel_r.pw { width: 800px; }*/
 | 
			
		||||
 | 
			
		||||
}
 | 
			
		||||
@media only screen and (min-width: 1900px){
 | 
			
		||||
 | 
			
		||||
	#panel_r.pw { width: 1400px; }
 | 
			
		||||
	/*#panel_r.pw { width: 1400px; }*/
 | 
			
		||||
 | 
			
		||||
}
 | 
			
		||||
| 
						 | 
				
			
			@ -14,4 +14,5 @@
 | 
			
		|||
 *= require desktop/desktop-media
 | 
			
		||||
 *= require desktop/desktop-select2
 | 
			
		||||
 *= require desktop/desktop-timeline
 | 
			
		||||
 *= require desktop/isotope.css
 | 
			
		||||
*/
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -0,0 +1,72 @@
 | 
			
		|||
 #side {
 | 
			
		||||
    height: auto;
 | 
			
		||||
    min-height: 516px;
 | 
			
		||||
    right: 0;
 | 
			
		||||
    bottom: 12px;
 | 
			
		||||
  }
 | 
			
		||||
  #rwidget {
 | 
			
		||||
    height: 100%;
 | 
			
		||||
  }
 | 
			
		||||
  #container {
 | 
			
		||||
    padding: 0;
 | 
			
		||||
    position: absolute;
 | 
			
		||||
    top: 0;
 | 
			
		||||
    right: 0;
 | 
			
		||||
    bottom: 12px;
 | 
			
		||||
    left: 0;
 | 
			
		||||
    min-height: 588px;
 | 
			
		||||
  }
 | 
			
		||||
  #panel_l, #panel_r {
 | 
			
		||||
    height: 100%;
 | 
			
		||||
  }
 | 
			
		||||
  .isotope {
 | 
			
		||||
    height: 100%;
 | 
			
		||||
  }
 | 
			
		||||
  .isotope .s_grid_row {
 | 
			
		||||
    width: 420px;
 | 
			
		||||
    margin: 0 24px 12px 0;
 | 
			
		||||
  }
 | 
			
		||||
  .s_grid_row .s_grid_h_full {
 | 
			
		||||
    height: 100%;
 | 
			
		||||
  }
 | 
			
		||||
  .list_t_item {
 | 
			
		||||
    float: left;
 | 
			
		||||
    display: inline;
 | 
			
		||||
  }
 | 
			
		||||
  .isotope,
 | 
			
		||||
.isotope .isotope-item {
 | 
			
		||||
  /* change duration value to whatever you like */
 | 
			
		||||
  -webkit-transition-duration: 0.8s;
 | 
			
		||||
     -moz-transition-duration: 0.8s;
 | 
			
		||||
      -ms-transition-duration: 0.8s;
 | 
			
		||||
       -o-transition-duration: 0.8s;
 | 
			
		||||
          transition-duration: 0.8s;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.isotope {
 | 
			
		||||
  -webkit-transition-property: height, width;
 | 
			
		||||
     -moz-transition-property: height, width;
 | 
			
		||||
      -ms-transition-property: height, width;
 | 
			
		||||
       -o-transition-property: height, width;
 | 
			
		||||
          transition-property: height, width;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.isotope .isotope-item {
 | 
			
		||||
  -webkit-transition-property: -webkit-transform, opacity;
 | 
			
		||||
     -moz-transition-property:    -moz-transform, opacity;
 | 
			
		||||
      -ms-transition-property:     -ms-transform, opacity;
 | 
			
		||||
       -o-transition-property:      -o-transform, opacity;
 | 
			
		||||
          transition-property:         transform, opacity;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
/**** disabling Isotope CSS3 transitions ****/
 | 
			
		||||
 | 
			
		||||
.isotope.no-transition,
 | 
			
		||||
.isotope.no-transition .isotope-item,
 | 
			
		||||
.isotope .isotope-item.no-transition {
 | 
			
		||||
  -webkit-transition-duration: 0s;
 | 
			
		||||
     -moz-transition-duration: 0s;
 | 
			
		||||
      -ms-transition-duration: 0s;
 | 
			
		||||
       -o-transition-duration: 0s;
 | 
			
		||||
          transition-duration: 0s;
 | 
			
		||||
}
 | 
			
		||||
| 
						 | 
				
			
			@ -9,6 +9,22 @@ module Panel::PersonalJournal::Desktop::JournalPagesHelper
 | 
			
		|||
      end
 | 
			
		||||
  end
 | 
			
		||||
 | 
			
		||||
  def get_height view
 | 
			
		||||
    case view
 | 
			
		||||
    when "journal_title"
 | 
			
		||||
     height = "50px"
 | 
			
		||||
    when "keywords"
 | 
			
		||||
     height = "100px"
 | 
			
		||||
    when "abstract"
 | 
			
		||||
     height = "200px"
 | 
			
		||||
    when "file"
 | 
			
		||||
      height = "200px"
 | 
			
		||||
    else
 | 
			
		||||
      height = "50px"
 | 
			
		||||
    end
 | 
			
		||||
    height
 | 
			
		||||
  end
 | 
			
		||||
 | 
			
		||||
  def marker
 | 
			
		||||
    content_tag :div,
 | 
			
		||||
     :class => "list_item_action" do
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -30,10 +30,8 @@
 | 
			
		|||
    </div>
 | 
			
		||||
  </div>
 | 
			
		||||
  <div class="viewport"> -->
 | 
			
		||||
    <div class="overview" content-layout="column" base-width="420">
 | 
			
		||||
      <div column="true">
 | 
			
		||||
        <div class="s_form">
 | 
			
		||||
          <ul>
 | 
			
		||||
    <div class="overview" content-layout="simple" base-width="420">
 | 
			
		||||
          <ul class="s_form" isotope="true">
 | 
			
		||||
            <% @site_valid_locales.each_with_index do |locale, i| %>
 | 
			
		||||
              <% style = locale != I18n.locale.to_s ? 'style=display:none;' : "" %>
 | 
			
		||||
              <% data = "data-language=" + locale  %>
 | 
			
		||||
| 
						 | 
				
			
			@ -94,12 +92,7 @@
 | 
			
		|||
            <label class="s_grid_1 s_grid" for="">共</label>
 | 
			
		||||
            <%= f.text_field :total_pages, size: "20", class: "s_grid_2 s_grid"%>
 | 
			
		||||
            </li>
 | 
			
		||||
          </ul>
 | 
			
		||||
        </div>
 | 
			
		||||
      </div>
 | 
			
		||||
      <div column="true">
 | 
			
		||||
        <div class="s_form">
 | 
			
		||||
          <ul>
 | 
			
		||||
      
 | 
			
		||||
            <li class="s_grid_row">
 | 
			
		||||
            <%= f.text_area :author_tokens,
 | 
			
		||||
              class: "s_grid_12 s_grid",
 | 
			
		||||
| 
						 | 
				
			
			@ -173,12 +166,7 @@
 | 
			
		|||
    <li class="s_grid_row">
 | 
			
		||||
    <%= label_tag("", t("personal_journal.url"), class: "s_grid_4 s_grid") %><%= f.text_field :url, size: "20", class: "s_grid_8 s_grid"%>
 | 
			
		||||
    </li>
 | 
			
		||||
          </ul>
 | 
			
		||||
        </div>
 | 
			
		||||
      </div>
 | 
			
		||||
    <div column="true">
 | 
			
		||||
      <div class="s_form">
 | 
			
		||||
        <ul>
 | 
			
		||||
        
 | 
			
		||||
          <li class="s_grid_row">
 | 
			
		||||
          <table class="s_table">
 | 
			
		||||
            <thead>
 | 
			
		||||
| 
						 | 
				
			
			@ -208,23 +196,13 @@
 | 
			
		|||
            </tbody>
 | 
			
		||||
          </table>
 | 
			
		||||
          </li>
 | 
			
		||||
        </ul>
 | 
			
		||||
      </div>
 | 
			
		||||
    </div>
 | 
			
		||||
      <div column="true">
 | 
			
		||||
        <div class="s_form">
 | 
			
		||||
          <ul>
 | 
			
		||||
  
 | 
			
		||||
            <li class="s_grid_row">
 | 
			
		||||
            <%= f.text_area :note, size: "20x22", placeholder: t("personal_journal.note"), class: "s_grid_12 s_grid s_grid_h_10"%>
 | 
			
		||||
            <%= f.text_area :note, size: "20x22", placeholder: t("personal_journal.note"), class: "s_grid_12 s_grid s_grid_h_10 s_grid_h_full"%>
 | 
			
		||||
            </li>
 | 
			
		||||
          </ul>
 | 
			
		||||
        </div>
 | 
			
		||||
      </div>
 | 
			
		||||
      <div column="true">
 | 
			
		||||
        <div class="s_form">
 | 
			
		||||
          <ul>
 | 
			
		||||
      
 | 
			
		||||
            <li class="s_grid_row">
 | 
			
		||||
            <%= f.text_area :abstract, size: "20x22", placeholder: t("personal_journal.abstract"), class: "s_grid_12 s_grid s_grid_h_10"%>
 | 
			
		||||
            <%= f.text_area :abstract, size: "20x22", placeholder: t("personal_journal.abstract"), class: "s_grid_12 s_grid s_grid_h_10 s_grid_h_full"%>
 | 
			
		||||
            </li>
 | 
			
		||||
          </ul>
 | 
			
		||||
        </div>
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -77,8 +77,10 @@
 | 
			
		|||
    <div class="sdm_t hh1"><span class="icon-question-sign"></span></div>
 | 
			
		||||
  </div>
 | 
			
		||||
</div>
 | 
			
		||||
    <div class="overview" page-name="journal_p_list" content-layout="datalist" base-width="300" per-column="<%= @per_column.to_s %>" pagination-var="view=<%= @view_by %>&page" >
 | 
			
		||||
    <div class="overview" page-name="journal_p_list" content-layout="simple" base-width="300" per-column="<%= @per_column.to_s %>" pagination-var="view=<%= @view_by %>&page" >
 | 
			
		||||
      <ul isotope="true">
 | 
			
		||||
      <% @writing_journals.each do |w| %>
 | 
			
		||||
        <%= publication_record w, @view_by%>
 | 
			
		||||
      <% end %>
 | 
			
		||||
    </ul>
 | 
			
		||||
    </div>
 | 
			
		||||
		Loading…
	
		Reference in New Issue