fix: Update to readme, demo, added cdn scripts

frankpagan · frankpagan · commit 4196d9e35952 · 2021-04-27T17:40:55.000Z
diff --git a/demo/index.html b/demo/index.html
@@ -1,78 +1,15 @@
 <!DOCTYPE html>
 <html lang="en">
-
   <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="icon" href="https://cdn.cocreate.app/favicon.ico" type="image/ico" sizes="16x16">
-    <title>Parallax | CoCreate</title>
-  
-    <!-- CoCreate UI -->
-    
-    <link rel="stylesheet" href="https://cdn.cocreate.app/latest/CoCreate.min.css" type="text/css"/>
+    <title>Parallax | CoCreateJS</title>
     
-       
-    
-    <!-- Parallax -->
-    <link rel="stylesheet" href="https://server.cocreate.app/CoCreate-components/CoCreate-parallax/src/CoCreate-parallax.css" type="text/css" />    
-   
-    <style type="text/css">
-    </style> 
+    <!-- CoCreate Favicon -->
+    <link rel="icon" href="https://cdn.cocreate.app/favicon.ico" type="image/ico" sizes="16x16">
+    <!-- CoCreate CSS CDN -->
+    <link rel="stylesheet" href="https://cdn.cocreate.app/parallax/latest/CoCreate-parallax.min.css" type="text/css" />
   </head>
-
   <body>
-    <!-- Navbar effects: sticky-nav, hidden-nav -->
-    <div data-main_content_id="content" data-nav_effect="sticky-nav" data-nav_scroll="200" class="nav display:flex align-items-center bg-light-gray">
-      <!--<a href="#" class="logo">Navbar</a>-->
-      
-        <!-- Menu Icon Animations -->
-        <a aria-label="mobile menu" class="nav-toggle menu_icon--hamburger" data-toggle_sidenav="menuL">
-            <span></span>
-            <span></span>
-            <span></span>
-        </a>
-        
-        <!-- Horizontal Scroll Nav/Tabs -->
-        <ul class="cocreate-scroll display:inline-flex direction:rtl font-size:20px align-items-center list-style-type-none width:100% height:50px">
-        			
-        	<!-- Fullscreen toogle and icon transform -->
-        	<li class="margin-right:15px">
-        		<a data-fullscreen><i class="fas fa-expand" data-transform_to="fas fa-compress"></i></a>
-        	</li>
-        		
-        	<!-- Render Builder -->
-        	<li class="margin-right:15px">
-            <a data-window_url="render.html"
-            	 data-pass_collection="modules"
-            	 data-pass_module_id="" 
-            	 data-pass_prefix="" 
-            	 data-pass_to="builder" 
-               data-window_width="100%"
-               class="sessionAdminUI_Id">
-            		<i class="fas fa-palette"></i>
-          		 <div data-pass_collection="modules"
-            		   data-pass_module_id=""
-            	     data-pass_prefix=""
-            		   data-pass_to="render"
-            		   class="sessionBuilderUI_Id">
-          		 </div>
-             </a>
-          </li>
-      	  <li class="display:flex">
-			      <span class="cocreate-badge position:relative right-8px bottom-5px border-radius-5px">4</span>	
-            <a data-window_url="render.html" data-pass_collection="modules" data-pass_prefix="datatable_" data-pass_module_id="" data-pass_to="render" data-window_width="100%" data-window_height="100%" data-window_color="#229954">
-              <i class="fas fa-history"></i>
-			      </a>
-      	  </li>							     
-          <li class="display:flex">
-			      <span class="cocreate-badge position:relative right-8px bottom-5px border-radius-5px">4</span>	
-    				<a data-window_url="render.html" data-pass_collection="modules" data-pass_prefix="" data-pass_module_id="5dc846ebcddd6b0de2c40b80" data-pass_to="render" data-window_width="100%" data-window_height="100%" data-window_color="#229954">
-            	 <i class="fa fa-calendar" aria-hidden="true"></i>
-    				</a>
-      	  </li>
-      </ul>
-		  
+    
 		  <!-- Avatar -->
       <div class="avatar-wrapper margin:5px_0px margin-right:10px">
 				  <a class="avatar round" data-window_url="render.html" data-pass_collection="modules" data-pass_prefix="" data-pass_module_id="5dd010bccbc25f0cdb1a4d9f" data-pass_to="render" data-window_width="300px" data-window_height="375px" data-window_color="#229954">
@@ -138,19 +75,11 @@ <h3 style="text-align:center;">Parallax Demo</h3>
     <script>
       var config = {
         apiKey: 'c2b08663-06e3-440c-ef6f-13978b42883a',
-                organization_Id: '5de0387b12e200ea63204d6c'
+        organization_Id: '5de0387b12e200ea63204d6c'
       }
     </script>
-  
-    <!-- CoCreateJS -->
-    <!--<script src="https://cdn.cocreate.app/latest/CoCreate.min.js" ></script>-->
-    <script src="https://cdn.cocreate.app/latest/CoCreate.min.js" ></script>
-   
-    <!-- CoCreateUI  -->
     
-    
-    <!-- CoCreate Parallax -->
-    <script src="https://server.cocreate.app/CoCreate-components/CoCreate-parallax/src/CoCreate-parallax.js"></script>
-
+    <!-- CoCreate JS CDN -->
+    <script src="https://cdn.cocreate.app/parallax/latest/CoCreate-parallax.min.js" ></script>
   </body>
 </html>
diff --git a/docs/index.html b/docs/index.html
@@ -11,12 +11,11 @@
         <meta name="robots" content="index,follow" />
        	<meta property="og:image" content="https://cdn.cocreate.app/docs/parallax.png">
         
-        <!-- CoCreate CSS -->
+        <!-- CoCreate CSS CDN -->
         <link rel="stylesheet" href="https://cdn.cocreate.app/latest/CoCreate.min.css" type="text/css"/>
-        <link rel="stylesheet" href="https://ws.cocreate.app/docs.css" data-collection="apples" data-document_id="6069ff5042ef8ff5175a5c8d" name="css" type="text/css"  />
     </head>
-
     <body>
+        
 		<nav class="nav display:flex align-items:center background:whitesmoke padding-top:10px padding-bottom:10px" data-main_content_id="content" data-scroll="sticky-nav,hide-nav" data-scroll_up="10" data-scroll_down="10" data-collection="components" data-document_id="60395ef42b3ac232657040fd" name="html">
 		</nav>
 		<sidenav id="menuL" class="cocreate-sidenav background:whitesmoke" data-main_content="content" sidenav-default_desktop="expanded" sidenav-default_tablet="offcanvas" sidenav-ontoggle_desktop="offcanvas" sidenav-ontoggle_tablet="expanded">
@@ -43,7 +42,7 @@ <h2>CoCreate-parallax</h2>
             <p class="max-width:500px margin:20px_10px line-height:1.5">A simple HTML5, CSS and pure javascript component. Easy configuration using data-attributes and highly styleable.</p>
             <div id="parallax-section" class="display:flex flex-wrap:wrap">
                 <div class="flex-grow:1 width:400px width:300px@xs padding:0px_10px margin-top:60px">
-                <div id="parallax-install" class="border-bottom:1px_solid_lightgrey" data-scroll data-scroll_intersect="color:dodgerblue" data-scroll_target="#boilerplate-install-section">
+                <div id="parallax-install" class="border-bottom:1px_solid_lightgrey" data-scroll data-scroll_intersect="color:dodgerblue" data-scroll_target="#parallax-install-section">
                         <span class="display:flex align-items:center width:fit-content" data-hover="display:block!important" data-hover_target='[href="#parallax-install"]'>
                             <h2 class="padding:5px_0px">Install</h2>
                             <a class="margin-left:10px display:none" href="#parallax-install"><i class="fas fa-link"></i></a>
@@ -53,7 +52,7 @@ <h2 class="padding:5px_0px">Install</h2>
                 <p class="padding:10px_0px line-height:1.5">Or you can use cdn link:</p>
                 <pre><code class="language-html">&lt;script&gt;https://cdn.cocreate.app/parallax/latest/CoCreate-parallax.min.js&lt;/script&gt;</code></pre>
 
-                <div id="parallax-usage" class="margin-top:80px border-bottom:1px_solid_lightgrey" data-scroll data-scroll_intersect="color:dodgerblue" data-scroll_target="#boilerplate-usage-section">
+                <div id="parallax-usage" class="margin-top:80px border-bottom:1px_solid_lightgrey" data-scroll data-scroll_intersect="color:dodgerblue" data-scroll_target="#parallax-usage-section">
                         <span class="display:flex align-items:center width:fit-content" data-hover="display:block!important" data-hover_target='[href="#parallax-usage"]'>
                             <h2 class="padding:5px_0px">Usage</h2>
                             <a class="margin-left:10px display:none" href="#parallax-usage"><i class="fas fa-link"></i></a>
@@ -68,7 +67,7 @@ <h2 class="padding:5px_0px">Usage</h2>
                         <p class="padding:10px_0px line-height:1.5">This is parallax usage</p>
                         <p class="padding:10px_0px line-height:1.5">This is parallax usage</p>
                     </div>
-                    <div id="parallax-attributes" class="margin-top:80px border-bottom:1px_solid_lightgrey" data-scroll data-scroll_intersect="color:dodgerblue" data-scroll_target="#boilerplate-attributes-section">
+                    <div id="parallax-attributes" class="margin-top:80px border-bottom:1px_solid_lightgrey" data-scroll data-scroll_intersect="color:dodgerblue" data-scroll_target="#parallax-attributes-section">
                         <span class="display:flex align-items:center width:fit-content" data-hover="display:block!important" data-hover_target='[href="#parallax-attributes"]'>
                             <h2 class="padding:5px_0px">Attributes</h2>
                             <a class="margin-left:10px display:none" href="#parallax-attributes"><i class="fas fa-link"></i></a>
@@ -88,7 +87,7 @@ <h4><span>data-parallax</span> <span class="cocreate-badge success">string</span
                 
                 <div class="flex-grow:1 width:300px padding:0px_10px margin-top:60px border-bottom:1px_solid_lightgrey">
                     <!-- SandBox -->
-                    <div id="parallax-demo" class="border-bottom:1px_solid_lightgrey" data-scroll data-scroll_intersect="color:dodgerblue" data-scroll_target="#boilerplate-demo-section">
+                    <div id="parallax-demo" class="border-bottom:1px_solid_lightgrey" data-scroll data-scroll_intersect="color:dodgerblue" data-scroll_target="#parallax-demo-section">
                         <span class="display:flex align-items:center width:fit-content" data-hover="display:block!important" data-hover_target='[href="#parallax-demo"]'>
                             <h2 class="padding:5px_0px">Demo</h2>
                             <a class="margin-left:10px display:none" href="#parallax-demo"><i class="fas fa-link"></i></a>
@@ -143,15 +142,19 @@ <h2 class="padding:5px_0px">Demo</h2>
                 </div>
                 
             </div>				
-        </main>
+        	<button href="https://github.com/CoCreate-app/CoCreate-parallax/tree/master/docs/index.html?message=docs%3A%20describe%20your%20change..." target="_blank" class="position:fixed bottom:15px right:15px padding:15px background:dodgerblue grow-hover border-radius:50%">
+		        <i class="fas fa-pencil-alt"></i>
+	        </button>
+		</main>
+        
         <script>
             var config = {
                 apiKey: 'c2b08663-06e3-440c-ef6f-13978b42883a',
                 organization_Id: '5de0387b12e200ea63204d6c'
             }
         </script>
     
-        <!--CoCreateJS-->
+        <!--CoCreateJS CDN-->
         <script src="https://cdn.cocreate.app/latest/CoCreate.min.js" ></script>
     </body>
 </html>
diff --git a/src/index.css b/src/index.css
diff --git a/src/index.js b/src/index.js
@@ -1,4 +1,4 @@
-import './CoCreate-parallax.css';
+import './index.css';
 
 function CoCreateParallax()
     {

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import './CoCreate-parallax.css';`
	`1`	`+import './index.css';`
`2`	`2`
`3`	`3`	`function CoCreateParallax()`
`4`	`4`	`{`