corrade-nucleus-nucleons – Diff between revs 20 and 27

Subversion Repositories:

?pathlinks?

Rev 20 – Rev 28 – Go to most recent revision – Details – Blame – Last modification – View Log

     <!-- Bootstrap core CSS -->
     <link href="/node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css">
     <!-- Corrade Nucleus Fonts -->
     <link href="/css/nucleus/fonts.css" rel="stylesheet" type="text/css">
-    <!-- Customized Nucleus style. -->
+    <!-- Customized bootstrap style. -->
+    <link href="/css/nucleus/nucleus.css" rel="stylesheet" type="text/css">
+    <!-- Manager for Windows. -->
-    <link href="/css/nucleus/nucleus.css" rel="stylesheet" type="text/css">
+    <link href="/css/wm/wm.css" rel="stylesheet" type="text/css">
     <!-- Script Kiddie style. -->
     <link href="/script-kiddie/css/style.css" rel="stylesheet" type="text/css">
                   <textarea id="message" class="form-control" rows="5" style="min-width: 100%; max-width: 100%; font-family: monospace; display: none;" readonly></textarea>
               </div>
           </div>
       </div>
+      <!-- Nucleons -->
+      <div class="panel panel-default draggable movable">
+          <div class="panel-heading">
+              <h3 class="panel-title">Nucleons</h3>
+          </div>
+          <div class="panel-body">
+              <div id="nucleons" class="row"></div>
+          </div>
+      </div>
     </div> <!-- /container -->
     <footer class="footer">
         <p>&copy; 2017 Wizardry and Steamworks</p>
     </footer>
+    <!-- jQuery -->
     <script src="/node_modules/jquery/dist/jquery.min.js" type="text/javascript"></script>
-    <!-- jQuery -->
+    <!-- Wizardry and Steamworks JavaScript Includes -->
-    <script src="/node_modules/jquery/dist/jquery.min.js" type="text/javascript"></script>
+    <script src="/node_modules/was/dist/was.min.js" type="text/javascript"></script>
     <!-- Bootstrap Javascript -->
     <script src="/node_modules/bootstrap/dist/js/bootstrap.min.js" type="text/javascript"></script>
     <!-- Beautify.JS -->
     <script src="/script-kiddie/node_modules/js-beautify/js/lib/beautify.js" type="text/javascript"></script>
     <!-- Velocity -->
     <script src="/script-kiddie/node_modules/velocity-animate/velocity.min.js" type="text/javascript"></script>
     <!-- Interact JS -->
-    <script src="/script-kiddie/node_modules/interactjs/dist/interact.min.js" type="text/javascript"></script>
+    <script src="/node_modules/interactjs/dist/interact.min.js" type="text/javascript"></script>
-    <!-- Wizardry and Steamworks JavaScript Includes -->
+    <!-- Manager for Windows. -->
+    <script src="/js/wm/wm.js" type="text/javascript"></script>
+    <!-- Nucleons Loader -->
-    <script src="/node_modules/was/dist/was.min.js" type="text/javascript"></script>
+    <script src="/js/nucleus/load-nucleons.js" type="text/javascript"></script>
     <script>
     $(document).ready(() => {
         // Auto-complete.
         ace.require("ace/ext/language_tools");
         // Save script on change.
         editor.getSession().on('change', function(e) {
             localStorage.setItem('nucleus-script-kiddie-script-body', editor.getSession().getValue());
         });
-        // Move windows to top on click.
-        $('.draggable').click(function() {
-            $(this).css('z-index', getTopWindowIndex() + 1);
-        });
-        // target elements with the "draggable" class
-        interact('.draggable')
-            .draggable({
-                // enable inertial throwing
-                inertia: true,
-                // keep the element within the area of it's parent
-                /*restrict: {
-                    // Let the user move the windows freely.
-                    restriction: "self",
-                    endOnly: true//,
-                    //elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
-                },*/
-                // enable autoScroll
-                autoScroll: true,
-                onmove: dragMoveListener,
-                onend: function (event) {
-                    event.target.style.opacity = 1;
-                },
-                onstart: function(event) {
-                    // Move windows to top on drag.
-                    event.target.style.zIndex = getTopWindowIndex() + 1;
-                    event.target.style.opacity = 0.5;
-                }
-            })
-            .allowFrom('.panel-heading')
-            .ignoreFrom('a, input, button, textarea');
-        function getTopWindowIndex() {
-            return Math.max.apply(null,
-                $.map($('.draggable'), function(e, n) {
-                    if ($(e).css('position') != 'static')
-                        return parseInt($(e).css('z-index')) || 1;
-                })
-            );
-        }
-        function dragMoveListener (event) {
-            var target = event.target,
-              // keep the dragged position in the data-x/data-y attributes
-              x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
-              y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
-            // translate the element
-            target.style.webkitTransform =
-              target.style.transform =
-              'translate(' + x + 'px, ' + y + 'px)';
-            // update the posiion attributes
-            target.setAttribute('data-x', x);
-            target.setAttribute('data-y', y);
-        }
-        // this is used later in the resizing and gesture demos
-        window.dragMoveListener = dragMoveListener;
         // Get the item name from the storage.
         var storeScriptUUID = localStorage.getItem('nucleus-script-kiddie-script-UUID');
         if (typeof storeScriptUUID == "string")