Created
September 14, 2014 21:42
-
-
Save beames/1a99feeaecec86e0a902 to your computer and use it in GitHub Desktop.
Revisions
-
beames created this gist
Sep 14, 2014 .There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,1277 @@ <!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: 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> This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,289 @@ 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; } This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,313 @@ 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();