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
c7c04e664e
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;">
standardize units from px > rem
2020-04-18 05:42:09 +00:00
<div style="border: 0.1rem solid red !important; display: inline-block; height: 80px">
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
<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>
standardize units from px > rem
2020-04-18 05:42:09 +00:00
<div style="border: 0.1rem solid red !important; display: inline-block; height: 80px">
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
<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>
standardize units from px > rem
2020-04-18 05:42:09 +00:00
<div style="border: 0.1rem solid red !important; display: inline-block; height: 80px">
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
<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>
standardize units from px > rem
2020-04-18 05:42:09 +00:00
<div style="border: 0.1rem solid red !important; display: inline-block; height: 80px">
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
<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>
standardize units from px > rem
2020-04-18 05:42:09 +00:00
<div style="border: 0.1rem solid red !important; display: inline-block; width: 80px">
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
<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>
standardize units from px > rem
2020-04-18 05:42:09 +00:00
<div style="border: 0.1rem solid red !important; display: inline-block; width: 80px">
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
<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>
standardize units from px > rem
2020-04-18 05:42:09 +00:00
<div style="border: 0.1rem solid red !important; display: block; width: 100%">
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
<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>
standardize units from px > rem
2020-04-18 05:42:09 +00:00
<div style="border: 0.1rem solid red !important; display: inline-block; height: 80px">
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
<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>
standardize units from px > rem
2020-04-18 05:42:09 +00:00
<div style="border: 0.1rem solid red !important; display: inline-block; height: 80px">
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
<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>
standardize units from px > rem
2020-04-18 05:42:09 +00:00
<div style="border: 0.1rem solid red !important; display: inline-block; height: 80px">
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
<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>
standardize units from px > rem
2020-04-18 05:42:09 +00:00
<div style="border: 0.1rem solid red !important; display: inline-block; height: 80px">
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
<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>
standardize units from px > rem
2020-04-18 05:42:09 +00:00
<div style="border: 0.1rem solid red !important; display: inline-block; height: 80px">
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
<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>
standardize units from px > rem
2020-04-18 05:42:09 +00:00
<div style="border: 0.1rem solid red !important; display: inline-block; height: 80px; padding: 20px">
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
<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>
standardize units from px > rem
2020-04-18 05:42:09 +00:00
<div style="border: 0.1rem solid red !important; display: inline-block; height: 80px; padding: 20px">
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
<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
Nuke notations folder
2019-08-10 21:12:45 +00:00
<script type="text/javascript" src="javascripts/core/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