cruk-pattern-library-api
Version:
CRUK Pattern Library API
2 lines (1 loc) • 11.4 kB
JavaScript
var ndplComponent=Vue.extend({data:function(){return{loaded:!1,hide_sample_code:!1}},props:{component:{required:!0}},computed:{inline_styles:function(){var o=this,t="";return o.loaded&&o.component.options.sample_min_height&&(t+="min-height:"+o.component.options.sample_min_height+"px;"),o.component.options.sample_overflow_hidden&&(t+="overflow: hidden;"),o.component.options.sample_background_color&&(t+="background-color:"+o.component.options.sample_background_color+" !important;"),t}},watch:{"component.html":function(){this.component.html.length&&this.$root.applySyntaxHighlighting(this.$el)}},ready:function(){var o=this;o.$on("loaded",function(){window.addEventListener("scroll",o.updateActive),window.addEventListener("resize",o.updateActive),o.setHideSample(function(){o.loaded=!0})}),o.$on("resizing",function(t){o.loaded=!1,t||o.setHideSample(function(){o.loaded=!0})}),o.component.html&&o.$root.applySyntaxHighlighting(o.$el)},methods:{updateActive:function(){var o=this;if(o.$root&&o.$root.scroll_position>=o.$el.offsetTop-60&&o.$root.scroll_position<o.$el.offsetTop+o.$el.offsetHeight)o.$root.scrolling_to||o.isActive(o.component)||(o.$root.active_components.push(o.component),o.$root.open_group=null,o.$root.updateHash(o.component.id));else if(o.$root&&!o.$root.scrolling_to)for(var t=0;t<o.$root.active_components.length;t++){if(o.$root.active_components[t].id===o.component.id)return void o.$root.active_components.splice(t,1)}},isActive:function(o){for(var t=0;t<this.$root.active_components.length;t++){var e=this.$root.active_components[t];if(o.id===e.id)return!0}return!1},shouldInvertText:function(o){var t=this.$root.convertHexToRgb(o);return this.$root.getColorBrightness(t)>210},shouldApplyBorder:function(o){var t=this.$root.convertHexToRgb(o);return this.$root.getColorBrightness(t)>240},setHideSample:function(o){o=void 0!==o?o:function(){};var t=this;t.hide_sample_code=!1,setTimeout(function(){t.$el.querySelector(".ndpl-component__code")&&(t.$el.querySelector(".ndpl-component__sample").offsetHeight<=74&&!t.component.options.disabled_auto_sample_hiding&&(t.hide_sample_code=!0),t.component.options.disabled_auto_sample_hiding&&t.component.options.disabled_auto_sample_hiding.hasOwnProperty("show_on_mobile")&&t.component.options.disabled_auto_sample_hiding.hasOwnProperty("show_on_desktop")&&(t.$root.mobile_view?t.hide_sample_code=!t.component.options.disabled_auto_sample_hiding.show_on_mobile:t.hide_sample_code=!t.component.options.disabled_auto_sample_hiding.show_on_desktop)),o()},0)},isCodeVisible:function(){return!this.hide_sample_code}}});Vue.component("ndpl-component",ndplComponent);var ndplGroup=Vue.extend({props:{group:{required:!0}}});Vue.component("ndpl-group",ndplGroup);var ndplScript=Vue.extend({props:{script:{required:!0}},methods:{loadTypekit:function(){try{Typekit.load({async:!0})}catch(o){}}}});Vue.component("ndpl-script",ndplScript),new Vue({el:"html",data:{intro:null,project_logo:null,project_favicon:null,project_name:null,project_url:null,copyright_start_year:null,client_name:null,client_url:null,creators:{},content:{},groups:{},theme:{},assets:{css:[],js:[]},font_libraries:{typekit_code:null,google_web_fonts:null,typography_web_fonts:null},log:{error:[],info:[]},components_count:0,groups_count:0,components_loaded_count:0,groups_loaded_count:0,groups_loaded:!1,loaded:!1,resizing:!1,typekit_loaded:!1,scroll_position:0,prev_scroll_position:0,active_group:null,active_components:[],active_page:null,open_group:null,show_first_page_on_load:!1,scrolling_to:!1,sidebar_scrolling:!1,window_outer_width:0,breakpoint:960,mobile_view:!1,open_nav:!1,rtime:new Date(1,1,2e3,12,0,0),timeout:!1,delta:200,version:null},computed:{project:function(){return this.project_name&&this.project_url?'<a href="'+this.project_url+'" target="_blank"><span>'+this.project_name+"</span></a>":this.project_name&&!this.project_url?this.project_name:null},copyright_year:function(){var o=new Date;return o.getFullYear()==this.copyright_start_year?this.copyright_start_year:this.copyright_start_year+" - "+o.getFullYear()},client:function(){return this.client_name&&this.client_url?'<a href="'+this.client_url+'" target="_blank">'+this.client_name+"</a>":this.client_name&&!this.client_url?this.client_name:null},all_creators:function(){var o="";if(this.creators.length&&this.creators[0].name){for(var t=0;t<this.creators.length;t++)prefix=t===this.creators.length-1?" & ":", ",url=this.creators[t].url,name=this.creators[t].name.replace(" "," "),o+=prefix+'<a href="'+url+'" target="_blank">'+name+"</a>";return o.substring(2)}return null},library_inline_styles:function(){var o="";return this.theme.max_width&&(o+="max-width:"+this.theme.max_width+"px;"),o}},watch:{groups_loaded:function(){this.setupComponents()},loaded:function(){this.scrollTo(window.location.hash),this.$broadcast("loaded")}},ready:function(){var o=this;o.loadDataFile(),o.window_outer_width=window.outerWidth,o.mobile_view=!(o.window_outer_width>=o.breakpoint),window.addEventListener("scroll",o.setScrollPosition),window.addEventListener("resize",function(){o.window_outer_width=window.outerWidth,o.setScrollPosition(),o.mobile_view=!(o.window_outer_width>=o.breakpoint),o.rtime=new Date,!1!==o.timeout||o.mobile_view||(o.timeout=!0,setTimeout(o.trackResizing,o.delta))});var t=document.querySelector(".ndpl-sidebar");t.addEventListener("mouseover",function(t){o.sidebar_scrolling=!0}),t.addEventListener("mouseleave",function(t){o.sidebar_scrolling=!1}),setTimeout(function(){var t=o.isLoadingPage();t&&o.loadPage(t)},0)},methods:{applySyntaxHighlighting:function(o){setTimeout(function(){for(var t=o.querySelectorAll("pre code"),e=0;e<t.length;e++){var n=t[e];hljs.highlightBlock(n)}},0)},loadDataFile:function(){var o=this;o.$http.get("./data.json?cb="+new Date).then(function(t){o.initData(t.data,function(){o.$data.groups.length?o.setupGroups():o.logInfo("You need to add a component to your library before it can be loaded.<br/>You can either do this manually by editing your <code>data.json</code> file,<br/> or you can use the command line helper: <code>astrum new [group_name/component_name]</code>")})})},isLoadingPage:function(){var o=this,t=location.hash;if(void 0!==o.content.pages&&o.content.pages.length)if(t)for(var e=0;e<o.content.pages.length;e++){var n=o.content.pages[e];if(n.name==t.replace("#",""))return n}else if(o.content.show_first_page_on_load)return o.content.pages[0];return!1},initData:function(o,t){t=void 0!==t?t:function(){};for(var e in o)this.$set(e,o[e]);t()},updateHash:function(o){history.pushState?history.pushState(null,null,"#"+o):location.hash=o},setupGroups:function(){for(var o=this,t=0;t<o.groups.length;t++){var e=o.groups[t];o.$set("groups["+t+"].id","group-"+e.name),o.$set("groups["+t+"].active",!1),o.$set("groups["+t+"].description",""),o.groups_count=o.groups.length,o.loadGroup(o.groups[t])}},setupComponents:function(){for(var o=this,t=0;t<o.groups.length;t++){var e=o.groups[t];o.components_count+=e.components.length;for(var n=0;n<e.components.length;n++)o.$set("groups["+t+"].components["+n+"].id","group-"+e.name+"-component-"+e.components[n].name),o.$set("groups["+t+"].components["+n+"].group_id","group-"+e.name),o.$set("groups["+t+"].components["+n+"].active",!1),o.$set("groups["+t+"].components["+n+"].options",!!e.components[n].options&&e.components[n].options),o.$set("groups["+t+"].components["+n+"].options.sample_always_show",!!e.components[n].options.sample_always_show&&e.components[n].options.sample_always_show),o.$set("groups["+t+"].components["+n+"].options.sample_mobile_hidden",!!e.components[n].options.sample_mobile_hidden&&e.components[n].options.sample_mobile_hidden),o.$set("groups["+t+"].components["+n+"].options.sample_dark_background",!!e.components[n].options.sample_dark_background&&e.components[n].options.sample_dark_background),o.$set("groups["+t+"].components["+n+"].options.disable_code_sample",!!e.components[n].options.disable_code_sample&&e.components[n].options.disable_code_sample),o.$set("groups["+t+"].components["+n+"].code_show",!1),o.$set("groups["+t+"].components["+n+"].type",e.components[n].type?e.components[n].type:"standard"),o.$set("groups["+t+"].components["+n+"].width",e.components[n].width?e.components[n].width:"full"),o.$set("groups["+t+"].components["+n+"].html",""),o.$set("groups["+t+"].components["+n+"].description",""),o.loadComponent(o.groups[t].components[n])}},loadGroup:function(o){var t=this,e="./components/"+o.name;t.$http.get(e+"/"+o.name+".md?cb="+new Date).then(function(e){o.description=marked(e.data),t.areGroupsLoaded()},function(){t.logError("Description file for <strong>"+o.name+"</strong> group failed to load from <code>"+e+"/"+o.name+".md</code>")})},loadComponent:function(o){var t=this,e="./components/"+o.group+"/"+o.name+"/"+o.name;"uiComponents"===o.group&&(e="./patterns/"+o.name),t.$http.get(e+".html?cb="+new Date).then(function(e){o.html=e.data,t.areComponentsLoaded()},function(){t.logError("HTML file for <strong>"+o.name+"</strong> component failed to load from <code>"+e+"/"+o.name+".html</code>")}),t.$http.get(e+".md?cb="+new Date).then(function(e){o.description=marked(e.data),t.areComponentsLoaded()},function(){t.logError("Description file for <strong>"+o.name+"</strong> component failed to load from <code>"+e+"/"+o.name+".md</code>")})},areGroupsLoaded:function(){var o=this;o.groups_loaded_count+=1,o.groups_loaded_count===o.groups_count&&setTimeout(function(){o.groups_loaded=!0},1e3)},areComponentsLoaded:function(){var o=this;o.components_loaded_count+=1,o.components_loaded_count===2*o.components_count&&setTimeout(function(){o.loaded=!0},2e3)},addLog:function(o,t,e){e=void 0!==e?e:"error",t=void 0!==t?t:null,this.log[e].push(o),console[e]("[Pattern Library warn]: "+o),t&&console[e](t)},logError:function(o,t){this.addLog(o,t,"error")},logInfo:function(o,t){this.addLog(o,t,"info")},setScrollPosition:function(){var o=document.documentElement,t=o&&o.scrollTop||document.body.scrollTop;this.prev_scroll_position=this.scroll_position,this.scroll_position=t},getScrollDirection:function(){return this.prev_scroll_position<this.scroll_position?"down":"up"},scrollToHref:function(o){this.scrollTo(o.target.hash),this.active_page=null},scrollTo:function(o){var t=this,e=t.mobile_view?79:30;o&&(t.scrolling_to=!0,smoothScroll.animateScroll(o,null,{offset:e,callback:function(){t.scrolling_to=!1,t.open_nav=!1}}))},toggleNav:function(){this.open_nav=!this.open_nav},toggleOpenGroups:function(o){this.open_group=this.open_group==o.id?null:o.id,this.active_page=null},loadPage:function(o){var t=this;t.active_page=o,t.active_components=[],t.open_group=null,t.open_nav=!1,t.$http.get(o.file+"?cb="+new Date).then(function(o){t.$set("active_page.markup",marked(o.data)),t.applySyntaxHighlighting(document)}),t.updateHash(o.name)},trackResizing:function(){var o=this;o.resizing=!0,o.$broadcast("resizing",!0),new Date-o.rtime<o.delta?setTimeout(o.trackResizing,o.delta):(o.timeout=!1,setTimeout(function(){o.resizing=!1,o.$broadcast("resizing",!1)},1e3))},convertHexToRgb:function(o){o=o.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,function(o,t,e,n){return t+t+e+e+n+n});var t=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(o);return t?{r:parseInt(t[1],16),g:parseInt(t[2],16),b:parseInt(t[3],16)}:null},getColorBrightness:function(o){return Math.round((299*parseInt(o.r)+587*parseInt(o.g)+114*parseInt(o.b))/1e3)}}});