| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188 |
- var $ = document.querySelector.bind(document);
-
- var API_ROOT = '/ionic-lab/api/v1';
-
- var APP_CONFIG = {};
-
- function loadAppConfig() {
- var req = new XMLHttpRequest();
- req.addEventListener('load', function(e) {
- setAppConfig(JSON.parse(req.response));
- });
- req.open('GET', API_ROOT + '/app-config', true);
- req.send(null);
- }
-
- function setAppConfig(data) {
- APP_CONFIG = data;
- }
-
- function buildMenu() {
- buildComponentsMenu();
- var sidebar = $('#sidebar');
- var topLevels = sidebar.querySelectorAll('#menu > li > a');
-
- var lastMenuConfig = window.localStorage.getItem('ionic_labmenu');
- if (lastMenuConfig === 'true' || lastMenuConfig === null) {
- sidebar.classList.remove('hidden');
- }
-
- Array.prototype.map.call(topLevels, function(a) {
- if (!a.href) {
- a.addEventListener('click', function(e) {
- if (a.parentNode.classList.contains('expanded')) {
- a.parentNode.classList.remove('expanded');
- } else {
- a.parentNode.classList.add('expanded');
- }
- e.preventDefault();
- });
- }
- });
-
- $('#view-ad').addEventListener('click', function(e) {
- var win = window.open('http://view.ionic.io/', '_blank');
- win.focus();
- });
-
- var toggleMenu = function(e) {
- if (sidebar.classList.contains('hidden')) {
- sidebar.classList.remove('hidden');
- window.localStorage.setItem('ionic_labmenu', 'true');
- } else {
- sidebar.classList.add('hidden');
- window.localStorage.setItem('ionic_labmenu', 'false');
- }
- };
-
- $('#menu-toggle').addEventListener('click', toggleMenu);
- $('#sidebar .close').addEventListener('click', toggleMenu);
- }
-
- function buildComponentsMenu() {
- var items = [{"href":"http://ionicframework.com/docs/components/#overview","title":"Overview"},{"href":"http://ionicframework.com/docs/components/#action-sheets","title":"Action Sheets"},{"href":"http://ionicframework.com/docs/components/#alert","title":"Alerts"},{"href":"http://ionicframework.com/docs/components/#badges","title":"Badges"},{"href":"http://ionicframework.com/docs/components/#buttons","title":"Buttons"},{"href":"http://ionicframework.com/docs/components/#cards","title":"Cards"},{"href":"http://ionicframework.com/docs/components/#checkbox","title":"Checkbox"},{"href":"http://ionicframework.com/docs/components/#datetime","title":"DateTime"},{"href":"http://ionicframework.com/docs/components/#fabs","title":"FABs"},{"href":"http://ionicframework.com/docs/components/#gestures","title":"Gestures"},{"href":"http://ionicframework.com/docs/components/#grid","title":"Grid"},{"href":"http://ionicframework.com/docs/components/#icons","title":"Icons"},{"href":"http://ionicframework.com/docs/components/#inputs","title":"Inputs"},{"href":"http://ionicframework.com/docs/components/#lists","title":"Lists"},{"href":"http://ionicframework.com/docs/components/#loading","title":"Loading"},{"href":"http://ionicframework.com/docs/components/#menus","title":"Menus"},{"href":"http://ionicframework.com/docs/components/#modals","title":"Modals"},{"href":"http://ionicframework.com/docs/components/#navigation","title":"Navigation"},{"href":"http://ionicframework.com/docs/components/#popovers","title":"Popover"},{"href":"http://ionicframework.com/docs/components/#radio","title":"Radio"},{"href":"http://ionicframework.com/docs/components/#range","title":"Range"},{"href":"http://ionicframework.com/docs/components/#searchbar","title":"Searchbar"},{"href":"http://ionicframework.com/docs/components/#segment","title":"Segment"},{"href":"http://ionicframework.com/docs/components/#select","title":"Select"},{"href":"http://ionicframework.com/docs/components/#slides","title":"Slides"},{"href":"http://ionicframework.com/docs/components/#tabs","title":"Tabs"},{"href":"http://ionicframework.com/docs/components/#toast","title":"Toast"},{"href":"http://ionicframework.com/docs/components/#toggle","title":"Toggle"},{"href":"http://ionicframework.com/docs/components/#toolbar","title":"Toolbar"}];
-
- var componentsMenu = $('#components-menu');
- items.map(function (i) {
- var l = document.createElement('li');
- var a = document.createElement('a');
- a.href = i.href;
- a.target = "_blank";
- a.innerText = i.title;
- l.appendChild(a);
- componentsMenu.appendChild(l);
- });
- }
-
- function tryShowViewPopup() {
- var view = window.localStorage.getItem('ionic_viewpop');
-
- if (!view) {
- $('#view-popup').style.display = 'block';
- $('#view-popup .close').addEventListener('click', function(e) {
- window.localStorage.setItem('ionic_viewpop', true);
- $('#view-popup').style.opacity = 0;
- setTimeout(function() {
- $('#view-popup').style.display = 'none';
- }, 200);
- });
- window.requestAnimationFrame(function() {
- $('#view-popup').style.opacity = 1;
- });
- }
- }
-
- // Bind the dropdown platform toggles
- function bindToggles() {
- // Watch for changes on the checkboxes in the device dropdown
- var iphone = $('#device-iphone');
- var android = $('#device-android');
- var windows = $('#device-windows');
-
- var devices = [iphone, android, windows];
- for(var i in devices) {
- devices[i].addEventListener('change', function(e) {
- var device = this.name;
- console.log('Device changed', device, this.checked);
-
- showDevice(device, this.checked);
- saveLastDevices(device, this.checked);
- });
- }
- }
-
- // Show one of the devices
- function showDevice(device, isShowing) {
- $('#device-' + device).checked = isShowing;
-
- var rendered = $('#' + device);
- if(!rendered) {
- var template = $('#' + device + '-frame-template');
- var clone = document.importNode(template, true);
- $('preview').appendChild(clone.content);
- //check for extra params in location.url to pass on to iframes
- var params = document.location.href.split('?');
- if (params) {
- var newparams = params[params.length - 1];
- var oldsrc = $('preview .frame').getAttribute('src');
- $('preview .frame').setAttribute('src', oldsrc + '&' + newparams);
- }
- } else {
- rendered.style.display = isShowing ? '' : 'none';
- }
- }
-
- function saveLastDevices(newDevice, didAdd) {
- var last = window.localStorage.getItem('ionic_lastdevices');
- if(!last && didAdd) {
- window.localStorage.setItem('ionic_lastdevices', newDevice);
- return;
- }
- var devices = last.split(',');
- var di = devices.indexOf(newDevice);
- if(di == -1 && didAdd) {
- window.localStorage.setItem('ionic_lastdevices', devices.join(',') + ',' + newDevice);
- } else if(di >= 0) {
- devices.splice(di, 1);
- window.localStorage.setItem('ionic_lastdevices', devices.join(','));
- }
- }
-
- function showLastDevices() {
- var last = window.localStorage.getItem('ionic_lastdevices');
- if(!last) {
- showDevice('iphone', true);
- return;
- }
-
- var devices = last.split(',');
- for(var i = 0; i < devices.length; i++) {
- showDevice(devices[i], true);
- }
- }
-
- function setCordovaInfo(data) {
- var el = $('#app-info');
- el.innerHTML = data.name + ' - v' + data.version;
- if(data.name) {
- document.title = data.name + ' - Ionic Lab';
- }
- }
-
- function loadCordova() {
- var req = new XMLHttpRequest();
- req.addEventListener('load', function(e) {
- setCordovaInfo(JSON.parse(req.response));
- });
- req.open('GET', API_ROOT + '/cordova', true);
- req.send(null);
- }
-
- //loadSearchIndex();
- loadAppConfig();
- buildMenu();
- showLastDevices();
- loadCordova();
- bindToggles();
- //tryShowViewPopup();
|