isotope experiment for form
1. This is only for DEMO, please don't merge this commit into any branch 2. This demo is only inside the Journal Paper > Add/Edit page 3. Please check the Diff from the original HTML 4. Please update the 'desktop-main.scss', 'desktop-main.css', 'desktop-component.scss', 'desktop-component.css' for update and mistake
This commit is contained in:
devin chen committed
1 parent
9fff3b9405
commit
980e63d830
9 files changed
+113
-63
No files matched your search
@@ -16,4 +16,5 @@
|
||||
//= require orbitTimeline
|
||||
//= require orbitdesktop
|
||||
//= require jquery.gridster
|
||||
//= require jquery.isotope.min
|
||||
//= require desktop/books_pages
|
||||
+7
-5
@@ -1,11 +1,13 @@
|
||||
/**
|
||||
* Isotope v1.5.11
|
||||
* Isotope v1.5.25
|
||||
* An exquisite jQuery plugin for magical layouts
|
||||
* http://isotope.metafizzy.co
|
||||
*
|
||||
* Commercial use requires one-time license fee
|
||||
* http://metafizzy.co/#licenses
|
||||
* Commercial use requires one-time purchase of a commercial license
|
||||
* http://isotope.metafizzy.co/docs/license.html
|
||||
*
|
||||
* Copyright 2012 David DeSandro / Metafizzy
|
||||
* Non-commercial use is licensed under the MIT License
|
||||
*
|
||||
* Copyright 2013 Metafizzy
|
||||
*/
|
||||
(function(a,b,c){var d=a.document,e=a.Modernizr,f=function(a){return a.charAt(0).toUpperCase()+a.slice(1)},g="Moz Webkit O Ms".split(" "),h=function(a){var b=d.documentElement.style,c;if(typeof b[a]=="string")return a;a=f(a);for(var e=0,h=g.length;e<h;e++){c=g[e]+a;if(typeof b[c]=="string")return c}},i=h("transform"),j=h("transitionProperty"),k={csstransforms:function(){return!!i},csstransforms3d:function(){var a=!!h("perspective");if(a){var c=" -o- -moz- -ms- -webkit- -khtml- ".split(" "),d="@media ("+c.join("transform-3d),(")+"modernizr)",e=b("<style>"+d+"{#modernizr{height:3px}}"+"</style>").appendTo("head"),f=b('<div id="modernizr" />').appendTo("html");a=f.height()===3,f.remove(),e.remove()}return a},csstransitions:function(){return!!j}},l;if(e)for(l in k)e.hasOwnProperty(l)||e.addTest(l,k[l]);else{e=a.Modernizr={_version:"1.6ish: miniModernizr for Isotope"};var m=" ",n;for(l in k)n=k[l](),e[l]=n,m+=" "+(n?"":"no-")+l;b("html").addClass(m)}if(e.csstransforms){var o=e.csstransforms3d?{translate:function(a){return"translate3d("+a[0]+"px, "+a[1]+"px, 0) "},scale:function(a){return"scale3d("+a+", "+a+", 1) "}}:{translate:function(a){return"translate("+a[0]+"px, "+a[1]+"px) "},scale:function(a){return"scale("+a+") "}},p=function(a,c,d){var e=b.data(a,"isoTransform")||{},f={},g,h={},j;f[c]=d,b.extend(e,f);for(g in e)j=e[g],h[g]=o[g](j);var k=h.translate||"",l=h.scale||"",m=k+l;b.data(a,"isoTransform",e),a.style[i]=m};b.cssNumber.scale=!0,b.cssHooks.scale={set:function(a,b){p(a,"scale",b)},get:function(a,c){var d=b.data(a,"isoTransform");return d&&d.scale?d.scale:1}},b.fx.step.scale=function(a){b.cssHooks.scale.set(a.elem,a.now+a.unit)},b.cssNumber.translate=!0,b.cssHooks.translate={set:function(a,b){p(a,"translate",b)},get:function(a,c){var d=b.data(a,"isoTransform");return d&&d.translate?d.translate:[0,0]}}}var q,r;e.csstransitions&&(q={WebkitTransitionProperty:"webkitTransitionEnd",MozTransitionProperty:"transitionend",OTransitionProperty:"oTransitionEnd",transitionProperty:"transitionEnd"}[j],r=h("transitionDuration"));var s=b.event,t;s.special.smartresize={setup:function(){b(this).bind("resize",s.special.smartresize.handler)},teardown:function(){b(this).unbind("resize",s.special.smartresize.handler)},handler:function(a,b){var c=this,d=arguments;a.type="smartresize",t&&clearTimeout(t),t=setTimeout(function(){jQuery.event.handle.apply(c,d)},b==="execAsap"?0:100)}},b.fn.smartresize=function(a){return a?this.bind("smartresize",a):this.trigger("smartresize",["execAsap"])},b.Isotope=function(a,c,d){this.element=b(c),this._create(a),this._init(d)};var u=["overflow","position","width","height"],v=b(a);b.Isotope.settings={resizable:!0,layoutMode:"masonry",containerClass:"isotope",itemClass:"isotope-item",hiddenClass:"isotope-hidden",hiddenStyle:{opacity:0,scale:.001},visibleStyle:{opacity:1,scale:1},animationEngine:"best-available",animationOptions:{queue:!1,duration:800},sortBy:"original-order",sortAscending:!0,resizesContainer:!0,transformsEnabled:!b.browser.opera,itemPositionDataEnabled:!1},b.Isotope.prototype={_create:function(a){this.options=b.extend({},b.Isotope.settings,a),this.styleQueue=[],this.elemCount=0;var c=this.element[0].style;this.originalStyle={};for(var d=0,e=u.length;d<e;d++){var f=u[d];this.originalStyle[f]=c[f]||""}this.element.css({overflow:"hidden",position:"relative"}),this._updateAnimationEngine(),this._updateUsingTransforms();var g={"original-order":function(a,b){b.elemCount++;return b.elemCount},random:function(){return Math.random()}};this.options.getSortData=b.extend(this.options.getSortData,g),this.reloadItems(),this.offset={left:parseInt(this.element.css("padding-left"),10),top:parseInt(this.element.css("padding-top"),10)};var h=this;setTimeout(function(){h.element.addClass(h.options.containerClass)},0),this.options.resizable&&v.bind("smartresize.isotope",function(){h.resize()}),this.element.delegate("."+this.options.hiddenClass,"click",function(){return!1})},_getAtoms:function(a){var b=this.options.itemSelector,c=b?a.filter(b).add(a.find(b)):a,d={position:"absolute"};this.usingTransforms&&(d.left=0,d.top=0),c.css(d).addClass(this.options.itemClass),this.updateSortData(c,!0);return c},_init:function(a){this.$filteredAtoms=this._filter(this.$allAtoms),this._sort(),this.reLayout(a)},option:function(a){if(b.isPlainObject(a)){this.options=b.extend(!0,this.options,a);var c;for(var d in a)c="_update"+f(d),this[c]&&this[c]()}},_updateAnimationEngine:function(){var a=this.options.animationEngine.toLowerCase().replace(/[ _\-]/g,""),b;switch(a){case"css":case"none":b=!1;break;case"jquery":b=!0;break;default:b=!e.csstransitions}this.isUsingJQueryAnimation=b,this._updateUsingTransforms()},_updateTransformsEnabled:function(){this._updateUsingTransforms()},_updateUsingTransforms:function(){var a=this.usingTransforms=this.options.transformsEnabled&&e.csstransforms&&e.csstransitions&&!this.isUsingJQueryAnimation;a||(delete this.options.hiddenStyle.scale,delete this.options.visibleStyle.scale),thiLine truncated
|
||||
(function(a,b,c){"use strict";var d=a.document,e=a.Modernizr,f=function(a){return a.charAt(0).toUpperCase()+a.slice(1)},g="Moz Webkit O Ms".split(" "),h=function(a){var b=d.documentElement.style,c;if(typeof b[a]=="string")return a;a=f(a);for(var e=0,h=g.length;e<h;e++){c=g[e]+a;if(typeof b[c]=="string")return c}},i=h("transform"),j=h("transitionProperty"),k={csstransforms:function(){return!!i},csstransforms3d:function(){var a=!!h("perspective");if(a){var c=" -o- -moz- -ms- -webkit- -khtml- ".split(" "),d="@media ("+c.join("transform-3d),(")+"modernizr)",e=b("<style>"+d+"{#modernizr{height:3px}}"+"</style>").appendTo("head"),f=b('<div id="modernizr" />').appendTo("html");a=f.height()===3,f.remove(),e.remove()}return a},csstransitions:function(){return!!j}},l;if(e)for(l in k)e.hasOwnProperty(l)||e.addTest(l,k[l]);else{e=a.Modernizr={_version:"1.6ish: miniModernizr for Isotope"};var m=" ",n;for(l in k)n=k[l](),e[l]=n,m+=" "+(n?"":"no-")+l;b("html").addClass(m)}if(e.csstransforms){var o=e.csstransforms3d?{translate:function(a){return"translate3d("+a[0]+"px, "+a[1]+"px, 0) "},scale:function(a){return"scale3d("+a+", "+a+", 1) "}}:{translate:function(a){return"translate("+a[0]+"px, "+a[1]+"px) "},scale:function(a){return"scale("+a+") "}},p=function(a,c,d){var e=b.data(a,"isoTransform")||{},f={},g,h={},j;f[c]=d,b.extend(e,f);for(g in e)j=e[g],h[g]=o[g](j);var k=h.translate||"",l=h.scale||"",m=k+l;b.data(a,"isoTransform",e),a.style[i]=m};b.cssNumber.scale=!0,b.cssHooks.scale={set:function(a,b){p(a,"scale",b)},get:function(a,c){var d=b.data(a,"isoTransform");return d&&d.scale?d.scale:1}},b.fx.step.scale=function(a){b.cssHooks.scale.set(a.elem,a.now+a.unit)},b.cssNumber.translate=!0,b.cssHooks.translate={set:function(a,b){p(a,"translate",b)},get:function(a,c){var d=b.data(a,"isoTransform");return d&&d.translate?d.translate:[0,0]}}}var q,r;e.csstransitions&&(q={WebkitTransitionProperty:"webkitTransitionEnd",MozTransitionProperty:"transitionend",OTransitionProperty:"oTransitionEnd otransitionend",transitionProperty:"transitionend"}[j],r=h("transitionDuration"));var s=b.event,t=b.event.handle?"handle":"dispatch",u;s.special.smartresize={setup:function(){b(this).bind("resize",s.special.smartresize.handler)},teardown:function(){b(this).unbind("resize",s.special.smartresize.handler)},handler:function(a,b){var c=this,d=arguments;a.type="smartresize",u&&clearTimeout(u),u=setTimeout(function(){s[t].apply(c,d)},b==="execAsap"?0:100)}},b.fn.smartresize=function(a){return a?this.bind("smartresize",a):this.trigger("smartresize",["execAsap"])},b.Isotope=function(a,c,d){this.element=b(c),this._create(a),this._init(d)};var v=["width","height"],w=b(a);b.Isotope.settings={resizable:!0,layoutMode:"masonry",containerClass:"isotope",itemClass:"isotope-item",hiddenClass:"isotope-hidden",hiddenStyle:{opacity:0,scale:.001},visibleStyle:{opacity:1,scale:1},containerStyle:{position:"relative",overflow:"hidden"},animationEngine:"best-available",animationOptions:{queue:!1,duration:800},sortBy:"original-order",sortAscending:!0,resizesContainer:!0,transformsEnabled:!0,itemPositionDataEnabled:!1},b.Isotope.prototype={_create:function(a){this.options=b.extend({},b.Isotope.settings,a),this.styleQueue=[],this.elemCount=0;var c=this.element[0].style;this.originalStyle={};var d=v.slice(0);for(var e in this.options.containerStyle)d.push(e);for(var f=0,g=d.length;f<g;f++)e=d[f],this.originalStyle[e]=c[e]||"";this.element.css(this.options.containerStyle),this._updateAnimationEngine(),this._updateUsingTransforms();var h={"original-order":function(a,b){return b.elemCount++,b.elemCount},random:function(){return Math.random()}};this.options.getSortData=b.extend(this.options.getSortData,h),this.reloadItems(),this.offset={left:parseInt(this.element.css("padding-left")||0,10),top:parseInt(this.element.css("padding-top")||0,10)};var i=this;setTimeout(function(){i.element.addClass(i.options.containerClass)},0),this.options.resizable&&w.bind("smartresize.isotope",function(){i.resize()}),this.element.delegate("."+this.options.hiddenClass,"click",function(){return!1})},_getAtoms:function(a){var b=this.options.itemSelector,c=b?a.filter(b).add(a.find(b)):a,d={position:"absolute"};return c=c.filter(function(a,b){return b.nodeType===1}),this.usingTransforms&&(d.left=0,d.top=0),c.css(d).addClass(this.options.itemClass),this.updateSortData(c,!0),c},_init:function(a){this.$filteredAtoms=this._filter(this.$allAtoms),this._sort(),this.reLayout(a)},option:function(a){if(b.isPlainObject(a)){this.options=b.extend(!0,this.options,a);var c;for(var d in a)c="_update"+f(d),this[c]&&this[c]()}},_updateAnimationEngine:function(){var a=this.options.animationEngine.toLowerCase().replace(/[ _\-]/g,""),b;switch(a){case"css":case"none":b=!1;break;case"jquery":b=!0;break;default:b=!e.csstransitions}this.isUsingJQueryAnimation=b,this._updateUsingTransforms()},_updateTransformsEnabled:function(){this._updateUsingTransforms()},_updateUsingTransforms:function(){var a=this.usingTransforms=this.oLine truncated
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
@@ -797,7 +797,7 @@ a.admtxt.admbg2:hover {
|
||||
/*Tooltip popup */
|
||||
.desktop_toolpopup {
|
||||
position: absolute;
|
||||
z-index: 10px;
|
||||
z-index: 10;
|
||||
display: none;
|
||||
padding: 12px;
|
||||
cursor: default;
|
||||
|
||||
@@ -813,7 +813,7 @@ a.admtxt.admbg2:hover {
|
||||
/*Tooltip popup */
|
||||
.desktop_toolpopup {
|
||||
position: absolute;
|
||||
z-index: 10px;
|
||||
z-index: 10;
|
||||
display: none;
|
||||
padding: 12px;
|
||||
cursor: default;
|
||||
|
||||
@@ -271,7 +271,7 @@ disabled look for disabled choices in the results dropdown
|
||||
.select2-container.select2-container-disabled .select2-choice {
|
||||
background-color: #f4f4f4;
|
||||
background-image: none;
|
||||
border: 1px solid #dddddd;
|
||||
border: 1px solid #ddd;
|
||||
cursor: default; }
|
||||
|
||||
.select2-container.select2-container-disabled .select2-choice div {
|
||||
@@ -326,7 +326,7 @@ disabled look for disabled choices in the results dropdown
|
||||
background: white url("select2/spinner.gif") no-repeat 100% !important; }
|
||||
|
||||
.select2-default {
|
||||
color: #999999 !important; }
|
||||
color: #999 !important; }
|
||||
|
||||
.select2-container-multi .select2-choices .select2-search-choice {
|
||||
padding: 3px 5px 3px 18px;
|
||||
@@ -374,12 +374,12 @@ disabled look for disabled choices in the results dropdown
|
||||
.select2-container-multi.select2-container-disabled .select2-choices {
|
||||
background-color: #f4f4f4;
|
||||
background-image: none;
|
||||
border: 1px solid #dddddd;
|
||||
border: 1px solid #ddd;
|
||||
cursor: default; }
|
||||
|
||||
.select2-container-multi.select2-container-disabled .select2-choices .select2-search-choice {
|
||||
padding: 3px 5px 3px 5px;
|
||||
border: 1px solid #dddddd;
|
||||
border: 1px solid #ddd;
|
||||
background-image: none;
|
||||
background-color: #f4f4f4; }
|
||||
|
||||
|
||||
+19
-1
@@ -93,7 +93,25 @@ orbitDesktop.prototype.initializeJournalPapers = function(target,url,cache){ //
|
||||
|
||||
// console.log("hi");
|
||||
var bindHandlers = function(){
|
||||
|
||||
// isotope experiment
|
||||
$('#holder').css('height', $('#container').height() - 72);
|
||||
$('.tinycanvas').css('height', $('#panel_r').height() - 36);
|
||||
$(window).resize(function(){
|
||||
$('#holder').css('height', $('#container').height() - 72);
|
||||
$('.tinycanvas').css('height', $('#panel_r').height() - 36);
|
||||
$('.isotope').isotope('reLayout');
|
||||
});
|
||||
|
||||
$('.isotope').isotope({
|
||||
layoutMode: 'masonryHorizontal',
|
||||
masonryHorizontal: {
|
||||
rowHeight: 44
|
||||
}
|
||||
});
|
||||
|
||||
$('.s_grid_h_full').parent().css('height','100%');
|
||||
$('.tinycanvas').tinyscrollbar_update('relative');
|
||||
$('.isotope').isotope('reLayout');
|
||||
|
||||
}
|
||||
bindHandlers();
|
||||
|
||||
+75
-46
@@ -23,19 +23,8 @@
|
||||
<div class="sdm_t hh1"><span class="icon-question-sign"></span></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div id="paper_add" class="tinycanvas vp">
|
||||
<div class="scrollbar sb_h vp">
|
||||
<div class="track">
|
||||
<div class="thumb thmc2">
|
||||
<div class="end"></div>
|
||||
</div>
|
||||
</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">
|
||||
<ul class="s_form isotope">
|
||||
<li class="s_grid_row">
|
||||
<%= f.fields_for :paper_title_translations do |f| %>
|
||||
<%= f.text_area locale,
|
||||
@@ -94,12 +83,6 @@
|
||||
<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 +156,6 @@
|
||||
<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,33 +185,85 @@
|
||||
</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>
|
||||
<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 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"%>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- </div>
|
||||
</div>
|
||||
-->
|
||||
<style>
|
||||
#side {
|
||||
height: auto;
|
||||
min-height: 516px;
|
||||
right: 0;
|
||||
bottom: 12px;
|
||||
}
|
||||
#rwidget {
|
||||
height: 100%;
|
||||
}
|
||||
#container {
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
top: 48px;
|
||||
right: 0;
|
||||
bottom: 12px;
|
||||
left: 156px;
|
||||
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%;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
var get_html = function(old_id,new_id){
|
||||
return ("<%= escape_javascript(add_attribute 'form_file', f, :writing_journal_files) %>").replace(old_id, new_id);
|
||||
|
||||
Reference in new issue
Block a user