Nixyri/AntimatterDimensionsSourceCode
1
0
Fork 0
mirror of https://github.com/IvarK/AntimatterDimensionsSourceCode.git synced 2024-11-24 21:21:59 +00:00
Code Issues Packages Projects Releases Wiki Activity
1a83a13d07
AntimatterDimensionsSourceCode/slider_test.html

136 lines
10 KiB
HTML
Raw Normal View History

Added ad-slider-component, a nice slider. Started out from vue-slider-component. Was eventually pretty heavily modified from the original. Added slider_test.html to test various slider configurations.
2019-01-06 21:44:25 +00:00
<!doctype html>
<html>
<head>
<title>Antimatter Dimensions</title>
<link rel="icon" type="image/png" href="icon.png">
<meta name="Antimatter Dimensions" content="A game about huge numbers and watching them go up." charset="utf-8"/>
<script type="text/javascript" src='https://cdn1.kongregate.com/javascripts/kongregate_api.js'></script>
<script type="text/javascript" src="javascripts/lib/jquery-3.2.1.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=PT+Mono" rel="stylesheet">
add more customizations to ad-slider-component support for an in-dot (handle) slot support for an array of css classes instead of a single one
2019-01-15 04:26:57 +00:00
<link rel="stylesheet" type="text/css" href="stylesheets/ad-slider-component.css">
Added ad-slider-component, a nice slider. Started out from vue-slider-component. Was eventually pretty heavily modified from the original. Added slider_test.html to test various slider configurations.
2019-01-06 21:44:25 +00:00
<link rel="stylesheet" type="text/css" href="stylesheets/styles.css?3">
<link rel="stylesheet" type="text/css" href="stylesheets/time-studies.css">
<link rel="stylesheet" type="text/css" href="stylesheets/tooltips.css">
<link rel="stylesheet" type="text/css" href="stylesheets/vis.css">
</head>
<body>
Tooltips are shown to assist in validation. Boundaries are shown for clarity.
Incorporated most changes from feedback except CSS class names fix CSS style naming in new components replace use of == with === and != with !== in new code
2019-01-08 18:06:05 +00:00
<div id="ui" style="height: 100%; width: 100%; background:black;">
Added ad-slider-component, a nice slider. Started out from vue-slider-component. Was eventually pretty heavily modified from the original. Added slider_test.html to test various slider configurations.
2019-01-06 21:44:25 +00:00
<div style="border: 1px solid red !important; display: inline-block; height: 80px">
<ad-slider-component :min="-20" :max="20" :interval="1" :show="true" dot-size="2rem" width="20rem" tooltip-dir="bottom"
:value-in-dot="true" :plus-minus-buttons="true" dot-class="glyph-level-weight-slider-handle" bg-class="glyph-level-weight-slider-bg"
process-class="glyph-level-weight-slider-process"></ad-slider-component>
</div>
Incorporated most changes from feedback except CSS class names fix CSS style naming in new components replace use of == with === and != with !== in new code
2019-01-08 18:06:05 +00:00
<div style="border: 1px solid red !important; display: inline-block; height: 80px">
<ad-slider-component :piecewise-label="true" :label-style="{color: 'white'}" :data="['ace','b','car','doggy','ear']" :show="true" dot-width="3rem" width="20rem" tooltip-dir="top"
:value-in-dot="true" :plus-minus-buttons="true" dot-class="glyph-level-weight-slider-handle" bg-class="glyph-level-weight-slider-bg"
process-class="glyph-level-weight-slider-process"></ad-slider-component>
</div>
Added ad-slider-component, a nice slider. Started out from vue-slider-component. Was eventually pretty heavily modified from the original. Added slider_test.html to test various slider configurations.
2019-01-06 21:44:25 +00:00
<div style="border: 1px solid red !important; display: inline-block; height: 80px">
<ad-slider-component :min="-20" :max="20" :show="true" dot-size="2rem" width="20rem" tooltip-dir="bottom"
:value-in-dot="false" :plus-minus-buttons="true" dot-class="glyph-level-weight-slider-handle" bg-class="glyph-level-weight-slider-bg"
process-class="glyph-level-weight-slider-process"></ad-slider-component>
</div>
<div style="border: 1px solid red !important; display: inline-block; height: 80px">
<ad-slider-component :min="-20" :max="20" :show="true" dot-size="2rem" width="20rem" tooltip-dir="bottom"
:value-in-dot="true" :plus-minus-buttons="false" dot-class="glyph-level-weight-slider-handle" bg-class="glyph-level-weight-slider-bg"
process-class="glyph-level-weight-slider-process"></ad-slider-component>
</div>
<div style="border: 1px solid red !important; display: inline-block; width: 80px">
<ad-slider-component :min="-20" :max="20" :show="true" dot-size="2rem" width="1rem" height="20rem" tooltip-dir="right"
:value-in-dot="true" direction="vertical" :plus-minus-buttons="true" dot-class="glyph-level-weight-slider-handle"
bg-class="glyph-level-weight-slider-bg" process-class="glyph-level-weight-slider-process"></ad-slider-component>
</div>
<div style="border: 1px solid red !important; display: inline-block; width: 80px">
<ad-slider-component :min="-20" :max="20" :show="true" dot-size="2rem" width="6px" height="20rem" tooltip-dir="right"
:value-in-dot="true" direction="vertical" :plus-minus-buttons="false" dot-class="glyph-level-weight-slider-handle"
bg-class="glyph-level-weight-slider-bg" process-class="glyph-level-weight-slider-process"></ad-slider-component>
</div>
<div style="border: 1px solid red !important; display: block; width: 100%">
<ad-slider-component :min="-20" :max="20" :show="true" dot-size="2rem" width="100%" height="6px" tooltip-dir="bottom"
:value-in-dot="true" direction="horizontal" :plus-minus-buttons="false" dot-class="glyph-level-weight-slider-handle"
bg-class="glyph-level-weight-slider-bg" process-class="glyph-level-weight-slider-process"></ad-slider-component>
</div>
<div style="display:block; height: 80px"></div>
<div style="border: 1px solid red !important; display: inline-block; height: 80px">
<ad-slider-component :min="-20" :max="20" :value="[-2,2]" :show="true" dot-size="2rem" width="20rem" height="6px" tooltip-dir="bottom"
:value-in-dot="true" direction="horizontal" :plus-minus-buttons="false" dot-class="glyph-level-weight-slider-handle"
bg-class="glyph-level-weight-slider-bg" process-class="glyph-level-weight-slider-process"></ad-slider-component>
</div>
<div style="border: 1px solid red !important; display: inline-block; height: 80px">
<ad-slider-component :min="-20" :max="20" :value="[-4,4]" :show="true" dot-size="2rem" width="20rem" height="6px" tooltip-dir="bottom"
:value-in-dot="true" direction="horizontal" :plus-minus-buttons="false" dot-class="glyph-level-weight-slider-handle"
bg-class="glyph-level-weight-slider-bg" :fixed="true" :process-draggable="true" process-class="glyph-level-weight-slider-process"></ad-slider-component>
</div>
Incorporated most changes from feedback except CSS class names fix CSS style naming in new components replace use of == with === and != with !== in new code
2019-01-08 18:06:05 +00:00
<div style="border: 1px solid red !important; display: inline-block; height: 80px">
<ad-slider-component :min="-20" :max="20" :value="[-4,4]" :show="true" dot-size="2rem" width="20rem" height="6px" tooltip-dir="bottom"
:value-in-dot="true" direction="horizontal" :plus-minus-buttons="false" dot-class="glyph-level-weight-slider-handle"
:disabled="true" bg-class="glyph-level-weight-slider-bg" :fixed="true" :process-draggable="true" process-class="glyph-level-weight-slider-process"></ad-slider-component>
</div>
<div style="border: 1px solid red !important; display: inline-block; height: 80px">
<ad-slider-component :min="-20" :max="20" :value="[-2,2]" :show="true" dot-size="2rem" width="20rem" height="6px" tooltip-dir="bottom"
:value-in-dot="true" direction="horizontal" :plus-minus-buttons="false" dot-class="glyph-level-weight-slider-handle"
:enable-cross="false" bg-class="glyph-level-weight-slider-bg" process-class="glyph-level-weight-slider-process"></ad-slider-component>
</div>
add more customizations to ad-slider-component support for an in-dot (handle) slot support for an array of css classes instead of a single one
2019-01-15 04:26:57 +00:00
<br>
<div style="border: 1px solid red !important; display: inline-block; height: 80px">
<ad-slider-component :value="1" :min="1" :max="3" :interval="0.25" :show="true" dot-size="2rem" width="20rem" tooltip-dir="bottom"
dot-class="glyph-level-weight-slider-handle" bg-class="glyph-level-weight-slider-bg" :piecewise="true"
process-class="glyph-level-weight-slider-process">
<template slot="piecewise" slot-scope="{label}">
<div v-if="label % 0.5 == 0" style="height: 6px; width: 5rem; display:block; transform: translateX(9rem)"
:style="{background: (['white', '#43A047', '#2196F3', '#9C27B0'])[(label-1)*2]}"></div>
</template>
</ad-slider-component>
</div>
<div style="border: 1px solid red !important; display: inline-block; height: 80px; padding: 20px">
<ad-slider-component :value="1" :min="1" :max="3.5" :interval="0.125" :show="true" dot-size="4rem" width="30rem"
tooltip-dir="bottom" height="4rem" :bg-style="{'border-radius': '0.4rem !important', background:'black', 'box-sizing': 'content-box', border: '0.4rem double #0b600e'}" tooltip="never"
:slider-style="{border: '0.2rem outset gray', 'box-sizing': 'border-box', 'border-radius': '0.1rem !important', background:'black'}"
dot-class="glyph-level-weight-slider-handle" bg-class="glyph-level-weight-slider-bg" :process-style="{display: 'none'}">
<template slot="in-dot">
<div class="megaderp" style="font-size: 2.5rem; font-family: serif; color: #9C27B0;">Ξ</div>
</template>
</ad-slider-component>
</div>
<div style="border: 1px solid red !important; display: inline-block; height: 80px; padding: 20px">
<ad-slider-component :value="1" :min="1" :max="3.5" :interval="0.05" :show="true" dot-size="3rem" width="15rem"
tooltip-dir="bottom" height="3rem" :xformatter="e => ((e-1)*40).toFixed() + '%'"
:bg-style="{'border-radius': '0.1rem', background:'#0b600e', 'box-sizing': 'border-box'}" tooltip="hover"
:slider-style="{border: '0.2rem outset gray', 'box-sizing': 'border-box', 'border-radius': '0.1rem !important', background:'black'}"
dot-class="glyph-level-weight-slider-handle" bg-class="glyph-level-weight-slider-bg" :process-style="{display: 'none'}">
<template slot="in-dot">
<div class="megaderp" style="font-size: 2rem; font-family: serif; color: #9C27B0;">Ξ</div>
</template>
</ad-slider-component>
</div>
Added ad-slider-component, a nice slider. Started out from vue-slider-component. Was eventually pretty heavily modified from the original. Added slider_test.html to test various slider configurations.
2019-01-06 21:44:25 +00:00
</div>
</body>
<script type="text/javascript" src="javascripts/lib/vue.js"></script>
<script type="text/javascript" src="javascripts/lib/v-tooltip.min.js"></script>
<script type="text/javascript" src="javascripts/lib/vuedraggable.js"></script>
<script type="text/javascript" src="javascripts/lib/Tween.min.js"></script>
<script type="text/javascript" src="javascripts/DragDropTouch.js"></script>
<script type="text/javascript" src="javascripts/longpress.js"></script>
<script type="text/javascript" src="javascripts/core/polyfill.js"></script>
<script type="text/javascript" src="javascripts/core/extensions.js"></script>
Is this heck
2019-07-25 12:52:03 +00:00
<script type="text/javascript" src="javascripts/components/common/plus-minus-button.js"></script>
<script type="text/javascript" src="javascripts/components/common/ad-slider-component.js"></script>
Added ad-slider-component, a nice slider. Started out from vue-slider-component. Was eventually pretty heavily modified from the original. Added slider_test.html to test various slider configurations.
2019-01-06 21:44:25 +00:00
<script type="text/javascript" src="javascripts/core/app/ui.init.js"></script>
<script type="text/javascript" src="javascripts/core/app/player-progress.js"></script>
<script type="text/javascript" src="javascripts/core/app/modal.js"></script>
<script type="text/javascript" src="javascripts/core/app/themes.js"></script>
Chop notations.js into smaller files
2019-04-07 09:46:31 +00:00
Integrate ad-notations
2019-08-10 20:39:24 +00:00
<script type="text/javascript" src="javascripts/core/notations/notations.js"></script>
Chop notations.js into smaller files
2019-04-07 09:46:31 +00:00
Added ad-slider-component, a nice slider. Started out from vue-slider-component. Was eventually pretty heavily modified from the original. Added slider_test.html to test various slider configurations.
2019-01-06 21:44:25 +00:00
<script type="text/javascript" src="javascripts/core/app/options.js"></script>
Move event-hub.js upper in folder hierarchy
2019-04-14 20:42:09 +00:00
<script type="text/javascript" src="javascripts/core/event-hub.js"></script>
Added ad-slider-component, a nice slider. Started out from vue-slider-component. Was eventually pretty heavily modified from the original. Added slider_test.html to test various slider configurations.
2019-01-06 21:44:25 +00:00
<script type="text/javascript" src="javascripts/core/app/ui.js"></script>
<script type="text/javascript" src="javascripts/core/app/notify.js"></script>
</html>
Reference in New Issue Copy Permalink