Skip to content

Instantly share code, notes, and snippets.

@beames

beames/index.html

Created September 14, 2014 21:42
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save beames/1a99feeaecec86e0a902 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save beames/1a99feeaecec86e0a902 to your computer and use it in GitHub Desktop.
Download ZIP
Magnific Popup: Responsive jQuery Lightbox Plugin // source http://jsbin.com/vadesa/58
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<link href="http://dimsemenov.com/plugins/magnific-popup/site-assets/all.min.css?v=0.9.9" rel="stylesheet" />
<script src="http://cdn.staticfile.org/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.staticfile.org/handlebars.js/1.3.0/handlebars.min.js"></script>
<script src="http://cdn.staticfile.org/ember.js/1.6.0-beta.5/ember.debug.js"></script>
<script src="http://cdn.staticfile.org/ember-data.js/1.0.0-beta.8/ember-data.min.js"></script>
<script src="http://cdn.staticfile.org/magnific-popup.js/0.9.9/jquery.magnific-popup.min.js"></script>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Magnific Popup&#58; Responsive jQuery Lightbox Plugin</title>
<meta charset="utf-8">
<meta name="viewport" content="width = device-width, initial-scale = 1.0" />
<style id="jsbin-css">
input[type=text] {
font-size: 20px;
padding: 4px;
width: 40%;
}
.hidden {
display:none;
}
.example h3 {
display: block;
}
.topheader {
display:none;
}
.post-maxheight{
overflow:hidden;
max-height: 380px;
}
p{
clear: both;
}
.floatleft {
float:left;
}
.floatright {
float:right;
}
.gradbox {
margin-top:-50px;
position:relative;
height:50px;
width:100%;
background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 72%, rgba(255,255,255,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(72%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 72%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 72%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 72%,rgba(255,255,255,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 72%,rgba(255,255,255,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}
.gradbox_clicked {
background:transparent !important;
height:auto !important;
margin-top:0 !important;
/*position:initial !important;*/
}
/**
* $Variables
**/
/**
* $Mixins
**/
/* http://www.sitepoint.com/sass-mixins-kickstart-project/ */
/* $Base */
/* $Buttom */
button.btn {
display: inline-block;
margin: 15px auto;
padding: .3em .8em;
font-size: 0.9rem;
text-decoration: none;
outline: none;
color: #fff;
background-color: #FE4365;
border-radius: 3px;
background-clip: padding-box;
box-shadow: 0 0 0 -2px #CFF09E, 0 0 0 -1px #FE4365;
border: none;
-webkit-transition: box-shadow .3s;
transition: box-shadow .3s;
}
button.btn:hover, button.btn:focus {
cursor:pointer;
box-shadow: 0 0 0 2px #CFF09E, 0 0 0 4px #ff0364;
-webkit-transition-timing-function: cubic-bezier(0.6, 4, 0.3, 0.8);
transition-timing-function: cubic-bezier(0.6, 4, 0.3, 0.8);
-webkit-animation: gelatine 0.5s 1;
animation: gelatine 0.5s 1;
}
button.btn:active {
background: #4ECDC4;
-webkit-transition-duration: 0;
transition-duration: 0;
box-shadow: 0 0 0 2px #CFF09E, 0 0 0 4px #3ac7bd;
}
/**
* $keyframes \ gelatine
**/
@keyframes gelatine {
from,to {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
25% {
-webkit-transform: scale(0.9, 1.1);
transform: scale(0.9, 1.1);
}
50% {
-webkit-transform: scale(1.1, 0.9);
transform: scale(1.1, 0.9);
}
75% {
-webkit-transform: scale(0.95, 1.05);
transform: scale(0.95, 1.05);
}
from,to {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
25% {
-webkit-transform: scale(0.9, 1.1);
transform: scale(0.9, 1.1);
}
50% {
-webkit-transform: scale(1.1, 0.9);
transform: scale(1.1, 0.9);
}
75% {
-webkit-transform: scale(0.95, 1.05);
transform: scale(0.95, 1.05);
}
}
@-webkit-keyframes gelatine {
from,to {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
25% {
-webkit-transform: scale(0.9, 1.1);
transform: scale(0.9, 1.1);
}
50% {
-webkit-transform: scale(1.1, 0.9);
transform: scale(1.1, 0.9);
}
75% {
-webkit-transform: scale(0.95, 1.05);
transform: scale(0.95, 1.05);
}
from,to {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
25% {
-webkit-transform: scale(0.9, 1.1);
transform: scale(0.9, 1.1);
}
50% {
-webkit-transform: scale(1.1, 0.9);
transform: scale(1.1, 0.9);
}
75% {
-webkit-transform: scale(0.95, 1.05);
transform: scale(0.95, 1.05);
}
}
/* padding-bottom and top for image */
.mfp-no-margins img.mfp-img {
padding: 0;
}
/* position of shadow behind the image */
.mfp-no-margins .mfp-figure:after {
top: 0;
bottom: 0;
}
/* padding for main container */
.mfp-no-margins .mfp-container {
padding: 0;
}
/*
.mfp-with-zoom .mfp-container,
.mfp-with-zoom.mfp-bg {
opacity: 0.001; /* chrome opacity transition bug */
-webkit-backface-visibility: hidden;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.mfp-with-zoom.mfp-ready .mfp-container {
opacity: 1;
}
.mfp-with-zoom.mfp-ready.mfp-bg {
opacity: 0.8;
}
.mfp-with-zoom.mfp-removing .mfp-container,
.mfp-with-zoom.mfp-removing.mfp-bg {
opacity: 0;
}
*/
.image-source-link {
color: #98C3D1;
}
.mfp-with-zoom .mfp-container,
.mfp-with-zoom.mfp-bg {
opacity: 0.001;
-webkit-backface-visibility: hidden;
/* ideally, transition speed should match zoom duration */
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.mfp-with-zoom.mfp-ready .mfp-container {
opacity: 1;
}
.mfp-with-zoom.mfp-ready.mfp-bg {
opacity: 0.8;
}
.mfp-with-zoom.mfp-removing .mfp-container,
.mfp-with-zoom.mfp-removing.mfp-bg {
opacity: 0;
}
/**
* Simple fade transition,
*/
.mfp-fade.mfp-bg {
opacity: 0.001; /* Chrome opacity transition bug */
-webkit-transition: all 0.15s ease-out;
-moz-transition: all 0.15s ease-out;
transition: all 0.15s ease-out;
}
.mfp-fade.mfp-bg.mfp-ready {
opacity: 0.8;
}
.mfp-fade.mfp-bg.mfp-removing {
opacity: 0;
}
.mfp-fade.mfp-wrap .mfp-content {
opacity: 0;
-webkit-transition: all 0.15s ease-out;
-moz-transition: all 0.15s ease-out;
transition: all 0.15s ease-out;
}
.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
opacity: 1;
}
.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
opacity: 0;
}
</style>
</head>
<body>
<script type="text/x-handlebars">
<div id="main-wrapper">
<h2 id="examples">Examples
{{input type="text" value=query placeholder="Filter addons" }}
</h2>
{{outlet article}}
</div>
</script>
<script type="text/x-handlebars" data-template-name="article">
{{#each post in filteredPosts}}
<div class="example gc3 grid-of-images">
<div {{bind-attr id=post.postindex class=":content :post-maxheight"}}>
<h3>{{post.title}}</h3>
{{#each content in post.content}}
{{!_view.contentIndex}}
{{{format-image-url App.config.hostname post.dir content.img}}}
<p>{{{content.paragraph}}}</p>
{{/each}}
</div>
{{#if post.showmoreButton}}
{{render "showmore" post}}
{{/if}}
{{#if post.showlessButton}}
{{render "showless" post}}
{{/if}}
</div>
{{/each}}
</script>
<script type="text/x-handlebars" data-template-name="showmore">
<div class="gradbox"></div>
<button {{action expand postindex}} class="btn">{{showMoretext}}</button>
</script>
<script type="text/x-handlebars" data-template-name="showless">
<button {{action unexpand postindex}} class="btn">{{showLesstext}}</button>
</script>
<script id="jsbin-javascript">
App = Ember.Application.create();
App.config = {
isDebug:true,
hostname:'http://192.168.1.101/',
dataFile:'mooxing-data.json',
isIE: false,
respIE: ''
}
function _getJsonIE (url,async) {
App.config.respIE = '';
var xdr = new XDomainRequest();
xdr.open("get", url);
xdr.onload = function () {
console.log('Fetch json ' + url + ' success!');
App.config.respIE = xdr.responseText;
};
xdr.onerror = function () {
console.log('Microsfot XDR: Error fetch json ' + alias + ' !');
};
xdr.send();
}
sayswho = navigator.sayswho= (function(){
var ua= navigator.userAgent, tem,
M= ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
if(/trident/i.test(M[1])){
tem= /\brv[ :]+(\d+)/g.exec(ua) || [];
return 'IE '+(tem[1] || '');
}
if(M[1]=== 'Chrome'){
tem= ua.match(/\bOPR\/(\d+)/);
if(tem!== null) return 'Opera '+tem[1];
}
M= M[2]? [M[1], M[2]]: [navigator.appName, navigator.appVersion, '-?'];
if((tem= ua.match(/version\/(\d+)/i))!== null) M.splice(1, 1, tem[1]);
return M.join(' ');
})();
if (sayswho === 'MSIE 8' || sayswho === 'MSIE 9' ) {
var dataurl = App.config.hostname + App.config.dataFile;
_getJsonIE(dataurl);
isIE = true;
}
jsonLoadedIE = function (){
if ( (App.config.isIE === false) || (App.config.respIE !== '') )
{
App.Router.map(function() {
this.route('article',{path:'/'});
});
App.ApplicationView = Ember.View.extend({
didInsertElement : function(){
this._super();
Ember.run.scheduleOnce('afterRender', this, this.afterRenderEvent);
},
afterRenderEvent : function(){
console.log('Application after render');
initMagnificPopup();
}
});
App.ArticleView = Ember.View.extend({
postsBinding: 'controller.filteredModel',
didInsertElement : function(){
this._super();
Ember.run.scheduleOnce('afterRender', this, this.afterRenderEvent);
},
afterRenderEvent : function(){
var self = this;
console.log('Article after render');
$('.content').each(function( index ) {
if ($(this).height() >= 380)
{
var postObjFromModel = self.get('posts').objectAt(index);
Ember.set(postObjFromModel,'showmoreButton',true);
}
});
}.observes('controller.needrecalculat')
});
App.ApplicationRoute = Ember.Route.extend({
model: function() {
var dataurl = App.config.hostname + App.config.dataFile;
if (sayswho === 'MSIE 8' || sayswho === 'MSIE 9' ) {
var data = $.parseJSON(App.config.respIE);
var dataObjlen = $.map(data.posts, function(n, i) {
for (var i = 0; i < n.length; i++) {
n[i]["showmoreButton"] = false;
n[i]["showlessButton"] = false;
};
}).length;
return data;
}
else{
return Ember.$.getJSON(dataurl).then(function(data) {
var dataObjlen = $.map(data.posts, function(n, i) {
for (var i = 0; i < n.length; i++) {
n[i]["showmoreButton"] = false;
n[i]["showlessButton"] = false;
};
}).length;
return data;
});
}
}
});
App.ArticleRoute = Ember.Route.extend({
renderTemplate:function(){
this.render('article',{into:"application",outlet:"article"});
}
});
App.ArticleController = Ember.ObjectController.extend({
needs: ['application','showmore','showless'],
tag:'wandai',
filteredModel:null,
init: function (){
var _filteredModel = eval("this.get('controllers.application.content').posts." + this.get('tag'));
this.set('filteredModel',_filteredModel);
} ,
filteredPosts: function() {
//clear Expand
this.send('clearExpand');
var self = this;
var query = this.get('controllers.application.query');
if (query) {
return this.get('filteredModel').filter(function(item) {
query = query.toLowerCase();
name = (item.title || '').toLowerCase();
try {
return name.match(Handlebars.Utils.escapeExpression(query));
}
catch (e) {
}
});
}
return this.get('filteredModel');
}.property('controllers.application.query'),
actions: {
clearExpand: function (){
var postModel = this.get('filteredModel');
postModel.forEach(function(item, index, enumerable){
if (Ember.get(item,'showlessButton') === true )
Ember.set(item,'showmoreButton',true);
Ember.set(item,'showlessButton',false);
});
}
}
});
App.ShowmoreController = Ember.ObjectController.extend({
needs:'article',
showMoretext: 'ssshow more',
actions: {
expand: function(postindex) {
console.log('Eeeexpand');
var postModel = this.get('model');
Ember.set(postModel,'showmoreButton',false);
Ember.set(postModel,'showlessButton',true);
$('#' + postindex).removeClass('post-maxheight');
}
}
});
App.ShowlessController = Ember.ObjectController.extend({
needs:'article',
showLesstext: 'ssshow less',
actions: {
unexpand: function(postindex) {
var postModel = this.get('model');
Ember.set(postModel,'showmoreButton',true);
Ember.set(postModel,'showlessButton',false);
$('#' + postindex).addClass('post-maxheight');
$(window).scrollTop($('#' + postindex).offset().top);
console.log('Uuuunexpand');
}
}
});
Ember.Handlebars.helper('format-image-url', function(hostname,dir,imageArray) {
var compiled = '';
imageArray.forEach(function(index) {
if (index !== -1)
{
var s_url = hostname + dir + '/' + index + '_s.jpg';
var b_url = hostname + dir + '/' + index + '_b.jpg';
compiled += '<a class="image-popup-no-margins" href="' + s_url + '">' +
'<img src="' + b_url + '"' + ' width="75" height="75"/></a>' ;
}
});
return new Handlebars.SafeString(compiled);
});
function initMagnificPopup (){
$(document).ready(function() {
$('.image-popup-vertical-fit').magnificPopup({
type: 'image',
closeOnContentClick: true,
mainClass: 'mfp-img-mobile',
image: {
verticalFit: true
}
});
$('.image-popup-fit-width').magnificPopup({
type: 'image',
closeOnContentClick: true,
image: {
verticalFit: false
}
});
$('.image-popup-no-margins').magnificPopup({
type: 'image',
closeOnContentClick: true,
closeBtnInside: false,
fixedContentPos: true,
mainClass: 'mfp-no-margins mfp-with-zoom', // class to remove default margin from left and right side
image: {
verticalFit: true
},
zoom: {
enabled: true,
duration: 300 // don't foget to change the duration also in CSS
}
});
});
$(document).ready(function() {
$('.popup-gallery').magnificPopup({
delegate: 'a',
type: 'image',
tLoading: 'Loading image #%curr%...',
mainClass: 'mfp-mobile',
gallery: {
enabled: true,
navigateByImgClick: true,
preload: [0,1]
},
image: {
tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
titleSrc: function(item) {
return item.el.attr('title') + '<small>by Marsel Van Oosten</small>';
},
zoom: {
enabled: true,
duration: 300
}
}
});
});
}
}
else{
setTimeout(function(){
jsonLoadedIE();
},10);
}
}
jsonLoadedIE.call();
</script>
<script id="jsbin-source-css" type="text/css">input[type=text] {
font-size: 20px;
padding: 4px;
width: 40%;
}
.hidden {
display:none;
}
.example h3 {
display: block;
}
.topheader {
display:none;
}
.post-maxheight{
overflow:hidden;
max-height: 380px;
}
p{
clear: both;
}
.floatleft {
float:left;
}
.floatright {
float:right;
}
.gradbox {
margin-top:-50px;
position:relative;
height:50px;
width:100%;
background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 72%, rgba(255,255,255,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(72%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 72%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 72%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 72%,rgba(255,255,255,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 72%,rgba(255,255,255,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}
.gradbox_clicked {
background:transparent !important;
height:auto !important;
margin-top:0 !important;
/*position:initial !important;*/
}
/**
* $Variables
**/
/**
* $Mixins
**/
/* http://www.sitepoint.com/sass-mixins-kickstart-project/ */
/* $Base */
/* $Buttom */
button.btn {
display: inline-block;
margin: 15px auto;
padding: .3em .8em;
font-size: 0.9rem;
text-decoration: none;
outline: none;
color: #fff;
background-color: #FE4365;
border-radius: 3px;
background-clip: padding-box;
box-shadow: 0 0 0 -2px #CFF09E, 0 0 0 -1px #FE4365;
border: none;
-webkit-transition: box-shadow .3s;
transition: box-shadow .3s;
}
button.btn:hover, button.btn:focus {
cursor:pointer;
box-shadow: 0 0 0 2px #CFF09E, 0 0 0 4px #ff0364;
-webkit-transition-timing-function: cubic-bezier(0.6, 4, 0.3, 0.8);
transition-timing-function: cubic-bezier(0.6, 4, 0.3, 0.8);
-webkit-animation: gelatine 0.5s 1;
animation: gelatine 0.5s 1;
}
button.btn:active {
background: #4ECDC4;
-webkit-transition-duration: 0;
transition-duration: 0;
box-shadow: 0 0 0 2px #CFF09E, 0 0 0 4px #3ac7bd;
}
/**
* $keyframes \ gelatine
**/
@keyframes gelatine {
from,to {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
25% {
-webkit-transform: scale(0.9, 1.1);
transform: scale(0.9, 1.1);
}
50% {
-webkit-transform: scale(1.1, 0.9);
transform: scale(1.1, 0.9);
}
75% {
-webkit-transform: scale(0.95, 1.05);
transform: scale(0.95, 1.05);
}
from,to {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
25% {
-webkit-transform: scale(0.9, 1.1);
transform: scale(0.9, 1.1);
}
50% {
-webkit-transform: scale(1.1, 0.9);
transform: scale(1.1, 0.9);
}
75% {
-webkit-transform: scale(0.95, 1.05);
transform: scale(0.95, 1.05);
}
}
@-webkit-keyframes gelatine {
from,to {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
25% {
-webkit-transform: scale(0.9, 1.1);
transform: scale(0.9, 1.1);
}
50% {
-webkit-transform: scale(1.1, 0.9);
transform: scale(1.1, 0.9);
}
75% {
-webkit-transform: scale(0.95, 1.05);
transform: scale(0.95, 1.05);
}
from,to {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
25% {
-webkit-transform: scale(0.9, 1.1);
transform: scale(0.9, 1.1);
}
50% {
-webkit-transform: scale(1.1, 0.9);
transform: scale(1.1, 0.9);
}
75% {
-webkit-transform: scale(0.95, 1.05);
transform: scale(0.95, 1.05);
}
}
/* padding-bottom and top for image */
.mfp-no-margins img.mfp-img {
padding: 0;
}
/* position of shadow behind the image */
.mfp-no-margins .mfp-figure:after {
top: 0;
bottom: 0;
}
/* padding for main container */
.mfp-no-margins .mfp-container {
padding: 0;
}
/*
.mfp-with-zoom .mfp-container,
.mfp-with-zoom.mfp-bg {
opacity: 0.001; /* chrome opacity transition bug */
-webkit-backface-visibility: hidden;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.mfp-with-zoom.mfp-ready .mfp-container {
opacity: 1;
}
.mfp-with-zoom.mfp-ready.mfp-bg {
opacity: 0.8;
}
.mfp-with-zoom.mfp-removing .mfp-container,
.mfp-with-zoom.mfp-removing.mfp-bg {
opacity: 0;
}
*/
.image-source-link {
color: #98C3D1;
}
.mfp-with-zoom .mfp-container,
.mfp-with-zoom.mfp-bg {
opacity: 0.001;
-webkit-backface-visibility: hidden;
/* ideally, transition speed should match zoom duration */
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.mfp-with-zoom.mfp-ready .mfp-container {
opacity: 1;
}
.mfp-with-zoom.mfp-ready.mfp-bg {
opacity: 0.8;
}
.mfp-with-zoom.mfp-removing .mfp-container,
.mfp-with-zoom.mfp-removing.mfp-bg {
opacity: 0;
}
/**
* Simple fade transition,
*/
.mfp-fade.mfp-bg {
opacity: 0.001; /* Chrome opacity transition bug */
-webkit-transition: all 0.15s ease-out;
-moz-transition: all 0.15s ease-out;
transition: all 0.15s ease-out;
}
.mfp-fade.mfp-bg.mfp-ready {
opacity: 0.8;
}
.mfp-fade.mfp-bg.mfp-removing {
opacity: 0;
}
.mfp-fade.mfp-wrap .mfp-content {
opacity: 0;
-webkit-transition: all 0.15s ease-out;
-moz-transition: all 0.15s ease-out;
transition: all 0.15s ease-out;
}
.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
opacity: 1;
}
.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
opacity: 0;
}
</script>
<script id="jsbin-source-javascript" type="text/javascript">App = Ember.Application.create();
App.config = {
isDebug:true,
hostname:'http://192.168.1.101/',
dataFile:'mooxing-data.json',
isIE: false,
respIE: ''
}
function _getJsonIE (url,async) {
App.config.respIE = '';
var xdr = new XDomainRequest();
xdr.open("get", url);
xdr.onload = function () {
console.log('Fetch json ' + url + ' success!');
App.config.respIE = xdr.responseText;
};
xdr.onerror = function () {
console.log('Microsfot XDR: Error fetch json ' + alias + ' !');
};
xdr.send();
}
sayswho = navigator.sayswho= (function(){
var ua= navigator.userAgent, tem,
M= ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
if(/trident/i.test(M[1])){
tem= /\brv[ :]+(\d+)/g.exec(ua) || [];
return 'IE '+(tem[1] || '');
}
if(M[1]=== 'Chrome'){
tem= ua.match(/\bOPR\/(\d+)/);
if(tem!== null) return 'Opera '+tem[1];
}
M= M[2]? [M[1], M[2]]: [navigator.appName, navigator.appVersion, '-?'];
if((tem= ua.match(/version\/(\d+)/i))!== null) M.splice(1, 1, tem[1]);
return M.join(' ');
})();
if (sayswho === 'MSIE 8' || sayswho === 'MSIE 9' ) {
var dataurl = App.config.hostname + App.config.dataFile;
_getJsonIE(dataurl);
isIE = true;
}
jsonLoadedIE = function (){
if ( (App.config.isIE === false) || (App.config.respIE !== '') )
{
App.Router.map(function() {
this.route('article',{path:'/'});
});
App.ApplicationView = Ember.View.extend({
didInsertElement : function(){
this._super();
Ember.run.scheduleOnce('afterRender', this, this.afterRenderEvent);
},
afterRenderEvent : function(){
console.log('Application after render');
initMagnificPopup();
}
});
App.ArticleView = Ember.View.extend({
postsBinding: 'controller.filteredModel',
didInsertElement : function(){
this._super();
Ember.run.scheduleOnce('afterRender', this, this.afterRenderEvent);
},
afterRenderEvent : function(){
var self = this;
console.log('Article after render');
$('.content').each(function( index ) {
if ($(this).height() >= 380)
{
var postObjFromModel = self.get('posts').objectAt(index);
Ember.set(postObjFromModel,'showmoreButton',true);
}
});
}.observes('controller.needrecalculat')
});
App.ApplicationRoute = Ember.Route.extend({
model: function() {
var dataurl = App.config.hostname + App.config.dataFile;
if (sayswho === 'MSIE 8' || sayswho === 'MSIE 9' ) {
var data = $.parseJSON(App.config.respIE);
var dataObjlen = $.map(data.posts, function(n, i) {
for (var i = 0; i < n.length; i++) {
n[i]["showmoreButton"] = false;
n[i]["showlessButton"] = false;
};
}).length;
return data;
}
else{
return Ember.$.getJSON(dataurl).then(function(data) {
var dataObjlen = $.map(data.posts, function(n, i) {
for (var i = 0; i < n.length; i++) {
n[i]["showmoreButton"] = false;
n[i]["showlessButton"] = false;
};
}).length;
return data;
});
}
}
});
App.ArticleRoute = Ember.Route.extend({
renderTemplate:function(){
this.render('article',{into:"application",outlet:"article"});
}
});
App.ArticleController = Ember.ObjectController.extend({
needs: ['application','showmore','showless'],
tag:'wandai',
filteredModel:null,
init: function (){
var _filteredModel = eval("this.get('controllers.application.content').posts." + this.get('tag'));
this.set('filteredModel',_filteredModel);
} ,
filteredPosts: function() {
//clear Expand
this.send('clearExpand');
var self = this;
var query = this.get('controllers.application.query');
if (query) {
return this.get('filteredModel').filter(function(item) {
query = query.toLowerCase();
name = (item.title || '').toLowerCase();
try {
return name.match(Handlebars.Utils.escapeExpression(query));
}
catch (e) {
}
});
}
return this.get('filteredModel');
}.property('controllers.application.query'),
actions: {
clearExpand: function (){
var postModel = this.get('filteredModel');
postModel.forEach(function(item, index, enumerable){
if (Ember.get(item,'showlessButton') === true )
Ember.set(item,'showmoreButton',true);
Ember.set(item,'showlessButton',false);
});
}
}
});
App.ShowmoreController = Ember.ObjectController.extend({
needs:'article',
showMoretext: 'ssshow more',
actions: {
expand: function(postindex) {
console.log('Eeeexpand');
var postModel = this.get('model');
Ember.set(postModel,'showmoreButton',false);
Ember.set(postModel,'showlessButton',true);
$('#' + postindex).removeClass('post-maxheight');
}
}
});
App.ShowlessController = Ember.ObjectController.extend({
needs:'article',
showLesstext: 'ssshow less',
actions: {
unexpand: function(postindex) {
var postModel = this.get('model');
Ember.set(postModel,'showmoreButton',true);
Ember.set(postModel,'showlessButton',false);
$('#' + postindex).addClass('post-maxheight');
$(window).scrollTop($('#' + postindex).offset().top);
console.log('Uuuunexpand');
}
}
});
Ember.Handlebars.helper('format-image-url', function(hostname,dir,imageArray) {
var compiled = '';
imageArray.forEach(function(index) {
if (index !== -1)
{
var s_url = hostname + dir + '/' + index + '_s.jpg';
var b_url = hostname + dir + '/' + index + '_b.jpg';
compiled += '<a class="image-popup-no-margins" href="' + s_url + '">' +
'<img src="' + b_url + '"' + ' width="75" height="75"/></a>' ;
}
});
return new Handlebars.SafeString(compiled);
});
function initMagnificPopup (){
$(document).ready(function() {
$('.image-popup-vertical-fit').magnificPopup({
type: 'image',
closeOnContentClick: true,
mainClass: 'mfp-img-mobile',
image: {
verticalFit: true
}
});
$('.image-popup-fit-width').magnificPopup({
type: 'image',
closeOnContentClick: true,
image: {
verticalFit: false
}
});
$('.image-popup-no-margins').magnificPopup({
type: 'image',
closeOnContentClick: true,
closeBtnInside: false,
fixedContentPos: true,
mainClass: 'mfp-no-margins mfp-with-zoom', // class to remove default margin from left and right side
image: {
verticalFit: true
},
zoom: {
enabled: true,
duration: 300 // don't foget to change the duration also in CSS
}
});
});
$(document).ready(function() {
$('.popup-gallery').magnificPopup({
delegate: 'a',
type: 'image',
tLoading: 'Loading image #%curr%...',
mainClass: 'mfp-mobile',
gallery: {
enabled: true,
navigateByImgClick: true,
preload: [0,1]
},
image: {
tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
titleSrc: function(item) {
return item.el.attr('title') + '<small>by Marsel Van Oosten</small>';
},
zoom: {
enabled: true,
duration: 300
}
}
});
});
}
}
else{
setTimeout(function(){
jsonLoadedIE();
},10);
}
}
jsonLoadedIE.call();</script></body>
</html>
Raw
jsbin.vadesa.css
input[type=text] {
font-size: 20px;
padding: 4px;
width: 40%;
}
.hidden {
display:none;
}
.example h3 {
display: block;
}
.topheader {
display:none;
}
.post-maxheight{
overflow:hidden;
max-height: 380px;
}
p{
clear: both;
}
.floatleft {
float:left;
}
.floatright {
float:right;
}
.gradbox {
margin-top:-50px;
position:relative;
height:50px;
width:100%;
background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 72%, rgba(255,255,255,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(72%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 72%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 72%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 72%,rgba(255,255,255,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 72%,rgba(255,255,255,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}
.gradbox_clicked {
background:transparent !important;
height:auto !important;
margin-top:0 !important;
/*position:initial !important;*/
}
/**
* $Variables
**/
/**
* $Mixins
**/
/* http://www.sitepoint.com/sass-mixins-kickstart-project/ */
/* $Base */
/* $Buttom */
button.btn {
display: inline-block;
margin: 15px auto;
padding: .3em .8em;
font-size: 0.9rem;
text-decoration: none;
outline: none;
color: #fff;
background-color: #FE4365;
border-radius: 3px;
background-clip: padding-box;
box-shadow: 0 0 0 -2px #CFF09E, 0 0 0 -1px #FE4365;
border: none;
-webkit-transition: box-shadow .3s;
transition: box-shadow .3s;
}
button.btn:hover, button.btn:focus {
cursor:pointer;
box-shadow: 0 0 0 2px #CFF09E, 0 0 0 4px #ff0364;
-webkit-transition-timing-function: cubic-bezier(0.6, 4, 0.3, 0.8);
transition-timing-function: cubic-bezier(0.6, 4, 0.3, 0.8);
-webkit-animation: gelatine 0.5s 1;
animation: gelatine 0.5s 1;
}
button.btn:active {
background: #4ECDC4;
-webkit-transition-duration: 0;
transition-duration: 0;
box-shadow: 0 0 0 2px #CFF09E, 0 0 0 4px #3ac7bd;
}
/**
* $keyframes \ gelatine
**/
@keyframes gelatine {
from,to {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
25% {
-webkit-transform: scale(0.9, 1.1);
transform: scale(0.9, 1.1);
}
50% {
-webkit-transform: scale(1.1, 0.9);
transform: scale(1.1, 0.9);
}
75% {
-webkit-transform: scale(0.95, 1.05);
transform: scale(0.95, 1.05);
}
from,to {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
25% {
-webkit-transform: scale(0.9, 1.1);
transform: scale(0.9, 1.1);
}
50% {
-webkit-transform: scale(1.1, 0.9);
transform: scale(1.1, 0.9);
}
75% {
-webkit-transform: scale(0.95, 1.05);
transform: scale(0.95, 1.05);
}
}
@-webkit-keyframes gelatine {
from,to {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
25% {
-webkit-transform: scale(0.9, 1.1);
transform: scale(0.9, 1.1);
}
50% {
-webkit-transform: scale(1.1, 0.9);
transform: scale(1.1, 0.9);
}
75% {
-webkit-transform: scale(0.95, 1.05);
transform: scale(0.95, 1.05);
}
from,to {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
25% {
-webkit-transform: scale(0.9, 1.1);
transform: scale(0.9, 1.1);
}
50% {
-webkit-transform: scale(1.1, 0.9);
transform: scale(1.1, 0.9);
}
75% {
-webkit-transform: scale(0.95, 1.05);
transform: scale(0.95, 1.05);
}
}
/* padding-bottom and top for image */
.mfp-no-margins img.mfp-img {
padding: 0;
}
/* position of shadow behind the image */
.mfp-no-margins .mfp-figure:after {
top: 0;
bottom: 0;
}
/* padding for main container */
.mfp-no-margins .mfp-container {
padding: 0;
}
/*
.mfp-with-zoom .mfp-container,
.mfp-with-zoom.mfp-bg {
opacity: 0.001; /* chrome opacity transition bug */
-webkit-backface-visibility: hidden;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.mfp-with-zoom.mfp-ready .mfp-container {
opacity: 1;
}
.mfp-with-zoom.mfp-ready.mfp-bg {
opacity: 0.8;
}
.mfp-with-zoom.mfp-removing .mfp-container,
.mfp-with-zoom.mfp-removing.mfp-bg {
opacity: 0;
}
*/
.image-source-link {
color: #98C3D1;
}
.mfp-with-zoom .mfp-container,
.mfp-with-zoom.mfp-bg {
opacity: 0.001;
-webkit-backface-visibility: hidden;
/* ideally, transition speed should match zoom duration */
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.mfp-with-zoom.mfp-ready .mfp-container {
opacity: 1;
}
.mfp-with-zoom.mfp-ready.mfp-bg {
opacity: 0.8;
}
.mfp-with-zoom.mfp-removing .mfp-container,
.mfp-with-zoom.mfp-removing.mfp-bg {
opacity: 0;
}
/**
* Simple fade transition,
*/
.mfp-fade.mfp-bg {
opacity: 0.001; /* Chrome opacity transition bug */
-webkit-transition: all 0.15s ease-out;
-moz-transition: all 0.15s ease-out;
transition: all 0.15s ease-out;
}
.mfp-fade.mfp-bg.mfp-ready {
opacity: 0.8;
}
.mfp-fade.mfp-bg.mfp-removing {
opacity: 0;
}
.mfp-fade.mfp-wrap .mfp-content {
opacity: 0;
-webkit-transition: all 0.15s ease-out;
-moz-transition: all 0.15s ease-out;
transition: all 0.15s ease-out;
}
.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
opacity: 1;
}
.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
opacity: 0;
}
Raw
jsbin.vadesa.js
App = Ember.Application.create();
App.config = {
isDebug:true,
hostname:'http://192.168.1.101/',
dataFile:'mooxing-data.json',
isIE: false,
respIE: ''
}
function _getJsonIE (url,async) {
App.config.respIE = '';
var xdr = new XDomainRequest();
xdr.open("get", url);
xdr.onload = function () {
console.log('Fetch json ' + url + ' success!');
App.config.respIE = xdr.responseText;
};
xdr.onerror = function () {
console.log('Microsfot XDR: Error fetch json ' + alias + ' !');
};
xdr.send();
}
sayswho = navigator.sayswho= (function(){
var ua= navigator.userAgent, tem,
M= ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
if(/trident/i.test(M[1])){
tem= /\brv[ :]+(\d+)/g.exec(ua) || [];
return 'IE '+(tem[1] || '');
}
if(M[1]=== 'Chrome'){
tem= ua.match(/\bOPR\/(\d+)/);
if(tem!== null) return 'Opera '+tem[1];
}
M= M[2]? [M[1], M[2]]: [navigator.appName, navigator.appVersion, '-?'];
if((tem= ua.match(/version\/(\d+)/i))!== null) M.splice(1, 1, tem[1]);
return M.join(' ');
})();
if (sayswho === 'MSIE 8' || sayswho === 'MSIE 9' ) {
var dataurl = App.config.hostname + App.config.dataFile;
_getJsonIE(dataurl);
isIE = true;
}
jsonLoadedIE = function (){
if ( (App.config.isIE === false) || (App.config.respIE !== '') )
{
App.Router.map(function() {
this.route('article',{path:'/'});
});
App.ApplicationView = Ember.View.extend({
didInsertElement : function(){
this._super();
Ember.run.scheduleOnce('afterRender', this, this.afterRenderEvent);
},
afterRenderEvent : function(){
console.log('Application after render');
initMagnificPopup();
}
});
App.ArticleView = Ember.View.extend({
postsBinding: 'controller.filteredModel',
didInsertElement : function(){
this._super();
Ember.run.scheduleOnce('afterRender', this, this.afterRenderEvent);
},
afterRenderEvent : function(){
var self = this;
console.log('Article after render');
$('.content').each(function( index ) {
if ($(this).height() >= 380)
{
var postObjFromModel = self.get('posts').objectAt(index);
Ember.set(postObjFromModel,'showmoreButton',true);
}
});
}.observes('controller.needrecalculat')
});
App.ApplicationRoute = Ember.Route.extend({
model: function() {
var dataurl = App.config.hostname + App.config.dataFile;
if (sayswho === 'MSIE 8' || sayswho === 'MSIE 9' ) {
var data = $.parseJSON(App.config.respIE);
var dataObjlen = $.map(data.posts, function(n, i) {
for (var i = 0; i < n.length; i++) {
n[i]["showmoreButton"] = false;
n[i]["showlessButton"] = false;
};
}).length;
return data;
}
else{
return Ember.$.getJSON(dataurl).then(function(data) {
var dataObjlen = $.map(data.posts, function(n, i) {
for (var i = 0; i < n.length; i++) {
n[i]["showmoreButton"] = false;
n[i]["showlessButton"] = false;
};
}).length;
return data;
});
}
}
});
App.ArticleRoute = Ember.Route.extend({
renderTemplate:function(){
this.render('article',{into:"application",outlet:"article"});
}
});
App.ArticleController = Ember.ObjectController.extend({
needs: ['application','showmore','showless'],
tag:'wandai',
filteredModel:null,
init: function (){
var _filteredModel = eval("this.get('controllers.application.content').posts." + this.get('tag'));
this.set('filteredModel',_filteredModel);
} ,
filteredPosts: function() {
//clear Expand
this.send('clearExpand');
var self = this;
var query = this.get('controllers.application.query');
if (query) {
return this.get('filteredModel').filter(function(item) {
query = query.toLowerCase();
name = (item.title || '').toLowerCase();
try {
return name.match(Handlebars.Utils.escapeExpression(query));
}
catch (e) {
}
});
}
return this.get('filteredModel');
}.property('controllers.application.query'),
actions: {
clearExpand: function (){
var postModel = this.get('filteredModel');
postModel.forEach(function(item, index, enumerable){
if (Ember.get(item,'showlessButton') === true )
Ember.set(item,'showmoreButton',true);
Ember.set(item,'showlessButton',false);
});
}
}
});
App.ShowmoreController = Ember.ObjectController.extend({
needs:'article',
showMoretext: 'ssshow more',
actions: {
expand: function(postindex) {
console.log('Eeeexpand');
var postModel = this.get('model');
Ember.set(postModel,'showmoreButton',false);
Ember.set(postModel,'showlessButton',true);
$('#' + postindex).removeClass('post-maxheight');
}
}
});
App.ShowlessController = Ember.ObjectController.extend({
needs:'article',
showLesstext: 'ssshow less',
actions: {
unexpand: function(postindex) {
var postModel = this.get('model');
Ember.set(postModel,'showmoreButton',true);
Ember.set(postModel,'showlessButton',false);
$('#' + postindex).addClass('post-maxheight');
$(window).scrollTop($('#' + postindex).offset().top);
console.log('Uuuunexpand');
}
}
});
Ember.Handlebars.helper('format-image-url', function(hostname,dir,imageArray) {
var compiled = '';
imageArray.forEach(function(index) {
if (index !== -1)
{
var s_url = hostname + dir + '/' + index + '_s.jpg';
var b_url = hostname + dir + '/' + index + '_b.jpg';
compiled += '<a class="image-popup-no-margins" href="' + s_url + '">' +
'<img src="' + b_url + '"' + ' width="75" height="75"/></a>' ;
}
});
return new Handlebars.SafeString(compiled);
});
function initMagnificPopup (){
$(document).ready(function() {
$('.image-popup-vertical-fit').magnificPopup({
type: 'image',
closeOnContentClick: true,
mainClass: 'mfp-img-mobile',
image: {
verticalFit: true
}
});
$('.image-popup-fit-width').magnificPopup({
type: 'image',
closeOnContentClick: true,
image: {
verticalFit: false
}
});
$('.image-popup-no-margins').magnificPopup({
type: 'image',
closeOnContentClick: true,
closeBtnInside: false,
fixedContentPos: true,
mainClass: 'mfp-no-margins mfp-with-zoom', // class to remove default margin from left and right side
image: {
verticalFit: true
},
zoom: {
enabled: true,
duration: 300 // don't foget to change the duration also in CSS
}
});
});
$(document).ready(function() {
$('.popup-gallery').magnificPopup({
delegate: 'a',
type: 'image',
tLoading: 'Loading image #%curr%...',
mainClass: 'mfp-mobile',
gallery: {
enabled: true,
navigateByImgClick: true,
preload: [0,1]
},
image: {
tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
titleSrc: function(item) {
return item.el.attr('title') + '<small>by Marsel Van Oosten</small>';
},
zoom: {
enabled: true,
duration: 300
}
}
});
});
}
}
else{
setTimeout(function(){
jsonLoadedIE();
},10);
}
}
jsonLoadedIE.call();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment