Initial commit of slide manager plugin
This commit is contained in:
@@ -0,0 +1,409 @@
|
||||
/**
|
||||
* Hi-School Slide Manager - Admin Slides Dashboard Styles
|
||||
*/
|
||||
|
||||
/* General dashboard elements */
|
||||
.hssm-dashboard-main {
|
||||
background: #f0f2f5;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.hssm-tab-header h2 {
|
||||
color: #333;
|
||||
font-size: 20px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
/* Styles for the slide list within the 'Manage Slides' tab */
|
||||
.hssm-slides-list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
gap: 20px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.hssm-slide-item {
|
||||
background: #ffffff;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 8px;
|
||||
padding: 15px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
.hssm-slide-item:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.hssm-slide-item .hssm-slide-info {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.hssm-slide-item .hssm-slide-title {
|
||||
font-size: 1.1em !important;
|
||||
font-weight: 600;
|
||||
color: #2c3338 !important;
|
||||
margin-bottom: 5px !important;
|
||||
line-height: 1.3 !important;
|
||||
}
|
||||
|
||||
.hssm-slide-item .hssm-slide-subtitle {
|
||||
font-size: 0.9em;
|
||||
color: #555d66;
|
||||
margin-bottom: 10px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.hssm-slide-item .hssm-slide-meta {
|
||||
font-size: 0.85em;
|
||||
color: #72777c;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.hssm-slide-item .hssm-status-badge {
|
||||
display: inline-block;
|
||||
padding: 3px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 0.8em;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.hssm-slide-item .hssm-status-pending {
|
||||
background-color: #ffba00;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.hssm-slide-item .hssm-status-publish {
|
||||
background-color: #46b450;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.hssm-slide-item .hssm-slide-thumbnail {
|
||||
width: 100%;
|
||||
padding-bottom: 56.25%; /* 16:9 aspect ratio */
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-color: #f0f0f0;
|
||||
border-radius: 4px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.hssm-slide-item .hssm-slide-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
/* Styles for the slide forms in the 'Create Slides' tab */
|
||||
.hssm-slide-form {
|
||||
background: #ffffff;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
margin-bottom: 20px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.hssm-form-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.hssm-form-header h3 {
|
||||
margin: 0;
|
||||
font-size: 1.2em;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.hssm-remove-form {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #a00;
|
||||
cursor: pointer;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
.hssm-form-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.hssm-form-section h4 {
|
||||
font-size: 1em;
|
||||
color: #555d66;
|
||||
margin-top: 0;
|
||||
margin-bottom: 15px;
|
||||
padding-bottom: 5px;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.hssm-field-row {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.hssm-field-row .hssm-field {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.hssm-field label {
|
||||
display: block;
|
||||
font-weight: 500;
|
||||
margin-bottom: 5px;
|
||||
color: #333;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.hssm-input, .hssm-textarea, .hssm-select {
|
||||
width: 100%;
|
||||
padding: 8px 10px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
font-size: 0.9em;
|
||||
color: #333;
|
||||
background-color: #f9f9f9;
|
||||
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.07);
|
||||
}
|
||||
|
||||
.hssm-input[type="date"] {
|
||||
padding: 7px 10px;
|
||||
}
|
||||
|
||||
.hssm-input:focus, .hssm-textarea:focus, .hssm-select:focus {
|
||||
border-color: #007cba;
|
||||
box-shadow: 0 0 0 1px #007cba;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.hssm-textarea {
|
||||
min-height: 80px;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.hssm-image-preview-small {
|
||||
width: 100%;
|
||||
height: 120px; /* Smaller preview */
|
||||
background-color: #eee;
|
||||
border: 1px dashed #ccc;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
margin-bottom: 10px;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hssm-image-preview-small .hssm-placeholder {
|
||||
color: #888;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.hssm-image-preview-small img {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
display: block;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.hssm-image-controls {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.hssm-button-row-compact {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.hssm-button-row-compact .hssm-input-small {
|
||||
flex: 1;
|
||||
padding: 6px 8px;
|
||||
font-size: 0.85em;
|
||||
}
|
||||
|
||||
.hssm-btn-tiny {
|
||||
padding: 4px 8px;
|
||||
font-size: 0.8em;
|
||||
background-color: #dc3232;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.hssm-btn-tiny:hover {
|
||||
background-color: #b30000;
|
||||
}
|
||||
|
||||
.hssm-checkboxes-compact label {
|
||||
font-size: 0.9em;
|
||||
color: #333;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.hssm-checkbox-compact input[type="checkbox"] {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.hssm-form-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
margin-top: 20px;
|
||||
padding-top: 15px;
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
|
||||
/* Override some general plugin button styles for admin context if needed */
|
||||
.hssm-btn-primary {
|
||||
background-color: #007cba;
|
||||
color: #fff;
|
||||
border-color: #007cba;
|
||||
}
|
||||
|
||||
.hssm-btn-primary:hover {
|
||||
background-color: #006799;
|
||||
border-color: #006799;
|
||||
}
|
||||
|
||||
.hssm-btn-secondary {
|
||||
background-color: #6c757d;
|
||||
color: #fff;
|
||||
border-color: #6c757d;
|
||||
}
|
||||
|
||||
.hssm-btn-secondary:hover {
|
||||
background-color: #5a6268;
|
||||
border-color: #545b62;
|
||||
}
|
||||
|
||||
.hssm-btn-success {
|
||||
background-color: #28a745;
|
||||
color: #fff;
|
||||
border-color: #28a745;
|
||||
}
|
||||
|
||||
.hssm-btn-success:hover {
|
||||
background-color: #218838;
|
||||
border-color: #1e7e34;
|
||||
}
|
||||
|
||||
.hssm-btn-outline {
|
||||
background-color: transparent;
|
||||
color: #6c757d;
|
||||
border: 1px solid #6c757d;
|
||||
}
|
||||
|
||||
.hssm-btn-outline:hover {
|
||||
background-color: #6c757d;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.hssm-btn-large {
|
||||
padding: 12px 25px;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.hssm-btn-small {
|
||||
padding: 6px 12px;
|
||||
font-size: 0.85em;
|
||||
}
|
||||
|
||||
.hssm-btn .dashicons {
|
||||
vertical-align: middle;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
/* Specific overrides for the slide preview elements that should look like dashboard items */
|
||||
/* This applies to the list *below* the main slider preview on the slide preview page */
|
||||
body.page-template-page-slide-preview .hssm-slides-list.hssm-mt-20 .hssm-slide-item {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
padding: 15px;
|
||||
margin-bottom: 10px;
|
||||
background: #fdfdfd;
|
||||
border: 1px solid #eee;
|
||||
color: #333; /* Ensure general text is legible */
|
||||
}
|
||||
|
||||
body.page-template-page-slide-preview .hssm-slides-list.hssm-mt-20 .hssm-slide-thumbnail {
|
||||
width: 120px;
|
||||
min-width: 120px;
|
||||
height: 70px; /* Adjusted for smaller, list-like thumbnail */
|
||||
padding-bottom: 0;
|
||||
border-radius: 4px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
body.page-template-page-slide-preview .hssm-slides-list.hssm-mt-20 .hssm-slide-info {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
body.page-template-page-slide-preview .hssm-slides-list.hssm-mt-20 .hssm-slide-title {
|
||||
font-size: 1.1em !important;
|
||||
color: #23282d !important;
|
||||
margin-bottom: 3px !important;
|
||||
}
|
||||
|
||||
body.page-template-page-slide-preview .hssm-slides-list.hssm-mt-20 .hssm-slide-subtitle {
|
||||
font-size: 0.9em;
|
||||
color: #555d66;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
body.page-template-page-slide-preview .hssm-slides-list.hssm-mt-20 .hssm-slide-meta {
|
||||
font-size: 0.8em;
|
||||
color: #72777c;
|
||||
}
|
||||
|
||||
body.page-template-page-slide-preview .hssm-slides-list.hssm-mt-20 .hssm-slide-actions {
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
gap: 5px;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
body.page-template-page-slide-preview .hssm-slides-list.hssm-mt-20 .hssm-slide-item .hssm-slide-title {
|
||||
background-color: #007cba;
|
||||
color: #ffffff;
|
||||
padding: 5px 10px;
|
||||
border-radius: 4px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
body.page-template-page-slide-preview .hssm-slides-list.hssm-mt-20 .hssm-slide-item .hssm-slide-subtitle,
|
||||
body.page-template-page-slide-preview .hssm-slides-list.hssm-mt-20 .hssm-slide-item .hssm-slide-meta {
|
||||
background-color: #444;
|
||||
color: #ffffff;
|
||||
padding: 3px 8px;
|
||||
border-radius: 3px;
|
||||
display: inline-block;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
body.page-template-page-slide-preview .hssm-slides-list.hssm-mt-20 .hssm-btn {
|
||||
padding: 5px 10px;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
@@ -0,0 +1,75 @@
|
||||
/**
|
||||
* Hi-School Slide Manager - Admin Styles
|
||||
*/
|
||||
|
||||
.hssm-admin-page {
|
||||
max-width: 1200px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.hssm-admin-header {
|
||||
background: #fff;
|
||||
border: 1px solid #ccd0d4;
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
|
||||
padding: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.hssm-admin-header h1 {
|
||||
margin: 0;
|
||||
color: #23282d;
|
||||
}
|
||||
|
||||
.hssm-settings-form {
|
||||
background: #fff;
|
||||
border: 1px solid #ccd0d4;
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.hssm-form-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.hssm-form-group label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
font-weight: 600;
|
||||
color: #23282d;
|
||||
}
|
||||
|
||||
.hssm-form-group input,
|
||||
.hssm-form-group select,
|
||||
.hssm-form-group textarea {
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
padding: 8px 12px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.hssm-form-group textarea {
|
||||
min-height: 100px;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.hssm-btn {
|
||||
background: #0073aa;
|
||||
color: #fff;
|
||||
border: none;
|
||||
padding: 10px 20px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.hssm-btn:hover {
|
||||
background: #005a87;
|
||||
}
|
||||
|
||||
.hssm-btn:focus {
|
||||
outline: 2px solid #0073aa;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,61 @@
|
||||
/**
|
||||
* Hi-School Slide Manager - Frontend Styles
|
||||
*/
|
||||
|
||||
.hssm-slides-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.hssm-slide {
|
||||
background: #fff;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
flex: 1;
|
||||
min-width: 300px;
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
.hssm-slide:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.hssm-slide h3 {
|
||||
margin: 0 0 15px 0;
|
||||
color: #333;
|
||||
font-size: 1.4em;
|
||||
border-bottom: 2px solid #0073aa;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.hssm-slide-content {
|
||||
margin-bottom: 15px;
|
||||
line-height: 1.6;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.hssm-slide-image {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hssm-slide-image img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* Responsive design */
|
||||
@media (max-width: 768px) {
|
||||
.hssm-slides-container {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.hssm-slide {
|
||||
min-width: auto;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,296 @@
|
||||
/**
|
||||
* HSSM Slider Styles
|
||||
* Custom classes and styles based on client specifications
|
||||
* Optimized for Classic Divi environments
|
||||
*/
|
||||
|
||||
:root {
|
||||
--hssm-ratio: 42.85714%; /* 900 / 2100 * 100 */
|
||||
--hssm-red: #ff0000;
|
||||
--hssm-bg-overlay: rgba(0, 0, 0, 0.3);
|
||||
--hssm-shadow: 0.08em 0.08em 0px rgba(0, 0, 0, 0.6);
|
||||
|
||||
/* Default Sizes */
|
||||
--hssm-title-size: 32px;
|
||||
--hssm-subtitle-size: 20px;
|
||||
--hssm-content-size: 18px;
|
||||
--hssm-arrow-size: 50px;
|
||||
}
|
||||
|
||||
/* Force 80% width container */
|
||||
.hssm-slider-container {
|
||||
position: relative !important;
|
||||
width: 80% !important;
|
||||
max-width: 1980px !important;
|
||||
margin: 60px auto !important;
|
||||
box-sizing: border-box !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.hssm-slider {
|
||||
position: relative !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.hssm-viewport {
|
||||
position: relative !important;
|
||||
overflow: hidden !important;
|
||||
width: 100% !important;
|
||||
border-radius: 20px !important;
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35) !important;
|
||||
background: #000 !important;
|
||||
}
|
||||
|
||||
.hssm-track {
|
||||
display: flex !important;
|
||||
transition: transform 0.6s cubic-bezier(0.45, 0.05, 0.55, 0.95) !important;
|
||||
width: 100% !important;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.hssm-slide {
|
||||
flex: 0 0 100% !important;
|
||||
width: 100% !important;
|
||||
min-width: 100% !important;
|
||||
position: relative !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
/* Aspect Ratio Maintainer - Very Aggressive */
|
||||
.hssm-slide-inner {
|
||||
position: relative !important;
|
||||
width: 100% !important;
|
||||
height: 0 !important;
|
||||
padding-bottom: var(--hssm-ratio) !important;
|
||||
background-size: cover !important;
|
||||
background-position: center !important;
|
||||
background-repeat: no-repeat !important;
|
||||
overflow: hidden !important;
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
/* Fallback for modern browsers */
|
||||
@supports (aspect-ratio: 21 / 9) {
|
||||
.hssm-slide-inner {
|
||||
padding-bottom: 0 !important;
|
||||
height: auto !important;
|
||||
aspect-ratio: 2100 / 900 !important;
|
||||
min-height: 300px !important; /* Safety min-height */
|
||||
}
|
||||
}
|
||||
|
||||
.hssm-slide-content-wrapper {
|
||||
position: absolute !important;
|
||||
top: 0 !important;
|
||||
left: 0 !important;
|
||||
right: 0 !important;
|
||||
bottom: 0 !important;
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
justify-content: center !important;
|
||||
align-items: center !important;
|
||||
padding: 40px 5% !important;
|
||||
z-index: 5 !important;
|
||||
}
|
||||
|
||||
.hssm-slide-content {
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
align-items: center !important;
|
||||
text-align: center !important;
|
||||
width: 100% !important;
|
||||
margin: 0 auto !important;
|
||||
}
|
||||
|
||||
/* Spacing between rows */
|
||||
.hssm-slide-content > * {
|
||||
margin-bottom: 30px !important;
|
||||
}
|
||||
|
||||
.hssm-slide-content > *:last-child {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
/* Title Styles - 80% width */
|
||||
.hssm-slide-title {
|
||||
font-size: var(--hssm-title-size) !important;
|
||||
color: #ffffff !important;
|
||||
font-weight: 600 !important;
|
||||
line-height: 1.3em !important;
|
||||
letter-spacing: 1px !important;
|
||||
max-width: 80% !important;
|
||||
margin: 0 0 30px 0 !important;
|
||||
}
|
||||
|
||||
.hssm-slide-title span {
|
||||
background: var(--hssm-bg-overlay) !important;
|
||||
padding: 5px 15px !important;
|
||||
border-radius: 8px !important;
|
||||
text-shadow: var(--hssm-shadow) !important;
|
||||
display: inline-block !important;
|
||||
}
|
||||
|
||||
/* Subtitle Styles - 80% width */
|
||||
.hssm-slide-subtitle {
|
||||
font-size: var(--hssm-subtitle-size) !important;
|
||||
color: #ffffff !important;
|
||||
font-weight: 600 !important;
|
||||
line-height: 1em !important;
|
||||
letter-spacing: 1px !important;
|
||||
max-width: 80% !important;
|
||||
margin: 0 0 30px 0 !important;
|
||||
}
|
||||
|
||||
.hssm-slide-subtitle span {
|
||||
background: var(--hssm-bg-overlay) !important;
|
||||
padding: 5px 12px !important;
|
||||
border-radius: 6px !important;
|
||||
text-shadow: var(--hssm-shadow) !important;
|
||||
display: inline-block !important;
|
||||
}
|
||||
|
||||
/* Description / Content Styles - 50% width */
|
||||
.hssm-slide-description {
|
||||
font-size: var(--hssm-content-size) !important;
|
||||
color: #ffffff !important;
|
||||
font-weight: 500 !important;
|
||||
line-height: 1.6em !important;
|
||||
letter-spacing: 1px !important;
|
||||
max-width: 50% !important;
|
||||
margin: 0 0 30px 0 !important;
|
||||
}
|
||||
|
||||
.hssm-slide-description span {
|
||||
background: var(--hssm-bg-overlay) !important;
|
||||
padding: 10px 20px !important;
|
||||
border-radius: 8px !important;
|
||||
text-shadow: var(--hssm-shadow) !important;
|
||||
display: inline-block !important;
|
||||
}
|
||||
|
||||
/* Button Container */
|
||||
.hssm-button-container {
|
||||
display: flex !important;
|
||||
flex-wrap: wrap !important;
|
||||
gap: 15px !important;
|
||||
justify-content: center !important;
|
||||
}
|
||||
|
||||
.hssm-button {
|
||||
background: var(--hssm-red) !important;
|
||||
color: #ffffff !important;
|
||||
font-size: 16px !important;
|
||||
font-weight: 600 !important;
|
||||
padding: 12px 25px !important;
|
||||
border-radius: 8px !important;
|
||||
text-decoration: none !important;
|
||||
transition: transform 0.2s ease, background 0.2s ease !important;
|
||||
text-transform: uppercase !important;
|
||||
display: inline-block !important;
|
||||
border: none !important;
|
||||
box-shadow: 0 4px 10px rgba(0,0,0,0.2) !important;
|
||||
}
|
||||
|
||||
.hssm-button:hover {
|
||||
transform: scale(1.05) !important;
|
||||
background: #e60000 !important;
|
||||
}
|
||||
|
||||
/* Arrows */
|
||||
.hssm-arrow {
|
||||
position: absolute !important;
|
||||
top: 50% !important;
|
||||
transform: translateY(-50%) !important;
|
||||
width: var(--hssm-arrow-size) !important;
|
||||
height: var(--hssm-arrow-size) !important;
|
||||
background: var(--hssm-red) !important;
|
||||
border: none !important;
|
||||
border-radius: 50% !important;
|
||||
color: white !important;
|
||||
cursor: pointer !important;
|
||||
z-index: 10 !important;
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
|
||||
transition: all 0.3s ease !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.hssm-arrow:hover {
|
||||
background: #d00000 !important;
|
||||
transform: translateY(-50%) scale(1.1) !important;
|
||||
}
|
||||
|
||||
.hssm-arrow-prev { left: -25px !important; }
|
||||
.hssm-arrow-next { right: -25px !important; }
|
||||
|
||||
.hssm-arrow-icon {
|
||||
display: block !important;
|
||||
width: 14px !important;
|
||||
height: 14px !important;
|
||||
border-top: 4px solid white !important;
|
||||
border-right: 4px solid white !important;
|
||||
}
|
||||
|
||||
.hssm-arrow-prev .hssm-arrow-icon {
|
||||
transform: rotate(-135deg) !important;
|
||||
margin-left: 6px !important;
|
||||
}
|
||||
|
||||
.hssm-arrow-next .hssm-arrow-icon {
|
||||
transform: rotate(45deg) !important;
|
||||
margin-right: 4px !important;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
|
||||
/* X-Large Screen Breakpoint: 1921px and up */
|
||||
@media (min-width: 1921px) {
|
||||
:root {
|
||||
--hssm-title-size: 35.2px;
|
||||
--hssm-subtitle-size: 22px;
|
||||
--hssm-content-size: 19.8px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1400px) {
|
||||
.hssm-slider-container { width: 90% !important; }
|
||||
.hssm-slide-description { max-width: 70% !important; }
|
||||
}
|
||||
|
||||
@media (max-width: 980px) {
|
||||
:root {
|
||||
--hssm-arrow-size: 44px;
|
||||
}
|
||||
.hssm-slider-container { width: 92% !important; margin: 40px auto !important; }
|
||||
.hssm-slide-description { max-width: 85% !important; }
|
||||
.hssm-arrow-prev { left: -22px !important; }
|
||||
.hssm-arrow-next { right: -22px !important; }
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.hssm-slider-container { width: 95% !important; margin: 30px auto !important; }
|
||||
.hssm-viewport { border-radius: 12px !important; }
|
||||
.hssm-slide-description { max-width: 95% !important; }
|
||||
.hssm-slide-title, .hssm-slide-subtitle { max-width: 95% !important; }
|
||||
.hssm-arrow { width: 40px !important; height: 40px !important; }
|
||||
.hssm-arrow-prev { left: -15px !important; }
|
||||
.hssm-arrow-next { right: -15px !important; }
|
||||
|
||||
:root {
|
||||
--hssm-title-size: 24px;
|
||||
--hssm-subtitle-size: 16px;
|
||||
--hssm-content-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.hssm-slider-container { width: 100% !important; border-radius: 0 !important; margin: 20px 0 !important; }
|
||||
.hssm-viewport { border-radius: 0 !important; }
|
||||
.hssm-arrow { width: 32px !important; height: 32px !important; }
|
||||
.hssm-arrow-prev { left: 5px !important; }
|
||||
.hssm-arrow-next { right: 5px !important; }
|
||||
}
|
||||
@@ -0,0 +1,207 @@
|
||||
/**
|
||||
* Hi-School Slide Manager - Admin Sortable functionality
|
||||
*
|
||||
* Handles drag-and-drop ordering of slides in the admin list table
|
||||
*/
|
||||
|
||||
jQuery(document).ready(function($) {
|
||||
'use strict';
|
||||
|
||||
// Only initialize on the slides list page
|
||||
if (typeof hssmAjax === 'undefined' || !$('.wp-list-table tbody').length) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Initialize sortable functionality
|
||||
initializeSortable();
|
||||
|
||||
/**
|
||||
* Initialize jQuery UI sortable on the slides table
|
||||
*/
|
||||
function initializeSortable() {
|
||||
const $tbody = $('.wp-list-table tbody');
|
||||
|
||||
// Make the table body sortable
|
||||
$tbody.sortable({
|
||||
handle: '.hssm-drag-handle',
|
||||
placeholder: 'ui-sortable-placeholder',
|
||||
helper: function(e, tr) {
|
||||
var $helper = tr.clone();
|
||||
$helper.children().each(function(index) {
|
||||
$(this).width(tr.children().eq(index).width());
|
||||
});
|
||||
return $helper;
|
||||
},
|
||||
start: function(e, ui) {
|
||||
ui.placeholder.height(ui.item.height());
|
||||
ui.item.addClass('ui-sortable-helper');
|
||||
},
|
||||
stop: function(e, ui) {
|
||||
ui.item.removeClass('ui-sortable-helper');
|
||||
updateSlideOrder();
|
||||
},
|
||||
tolerance: 'pointer',
|
||||
cursor: 'move',
|
||||
opacity: 0.8,
|
||||
distance: 5
|
||||
});
|
||||
|
||||
// Add visual feedback
|
||||
$tbody.on('mouseenter', '.hssm-drag-handle', function() {
|
||||
$(this).closest('tr').addClass('hssm-sortable-hover');
|
||||
});
|
||||
|
||||
$tbody.on('mouseleave', '.hssm-drag-handle', function() {
|
||||
$(this).closest('tr').removeClass('hssm-sortable-hover');
|
||||
});
|
||||
|
||||
// Add CSS for hover effect
|
||||
if (!$('#hssm-sortable-styles').length) {
|
||||
$('<style id="hssm-sortable-styles">')
|
||||
.text(`
|
||||
.wp-list-table tbody tr.hssm-sortable-hover {
|
||||
background-color: #f0f8ff;
|
||||
}
|
||||
.wp-list-table .hssm-drag-handle {
|
||||
opacity: 0.6;
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
.wp-list-table .hssm-drag-handle:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
.wp-list-table tbody tr.ui-sortable-helper td {
|
||||
background-color: #f9f9f9;
|
||||
border-color: #0073aa;
|
||||
}
|
||||
`)
|
||||
.appendTo('head');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Update slide order via AJAX
|
||||
*/
|
||||
function updateSlideOrder() {
|
||||
const slideIds = [];
|
||||
|
||||
// Collect all slide IDs in their new order
|
||||
$('.wp-list-table tbody tr').each(function() {
|
||||
const postId = $(this).attr('id');
|
||||
if (postId && postId.startsWith('post-')) {
|
||||
const slideId = parseInt(postId.replace('post-', ''));
|
||||
if (slideId) {
|
||||
slideIds.push(slideId);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
if (slideIds.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Show loading indicator
|
||||
showLoadingIndicator();
|
||||
|
||||
// Send AJAX request to update order
|
||||
$.ajax({
|
||||
url: hssmAjax.ajaxurl,
|
||||
type: 'POST',
|
||||
data: {
|
||||
action: 'hssm_update_slide_order',
|
||||
nonce: hssmAjax.nonce,
|
||||
slide_ids: slideIds
|
||||
},
|
||||
success: function(response) {
|
||||
hideLoadingIndicator();
|
||||
|
||||
if (response.success) {
|
||||
showNotification('Slide order updated successfully!', 'success');
|
||||
|
||||
// Update the order column values
|
||||
updateOrderColumnValues(slideIds);
|
||||
} else {
|
||||
showNotification('Failed to update slide order: ' + (response.data?.message || 'Unknown error'), 'error');
|
||||
}
|
||||
},
|
||||
error: function(xhr, status, error) {
|
||||
hideLoadingIndicator();
|
||||
showNotification('Error updating slide order: ' + error, 'error');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Update the order column values in the table
|
||||
*/
|
||||
function updateOrderColumnValues(slideIds) {
|
||||
slideIds.forEach(function(slideId, index) {
|
||||
const $row = $('#post-' + slideId);
|
||||
const $orderCell = $row.find('.column-order');
|
||||
if ($orderCell.length) {
|
||||
$orderCell.text(index);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Show loading indicator
|
||||
*/
|
||||
function showLoadingIndicator() {
|
||||
if ($('#hssm-loading-indicator').length === 0) {
|
||||
$('<div id="hssm-loading-indicator" style="position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(0,0,0,0.8); color: white; padding: 20px; border-radius: 5px; z-index: 9999; font-size: 16px;">')
|
||||
.html('<span class="dashicons dashicons-update" style="animation: rotation 1s infinite linear; margin-right: 10px;"></span> Updating slide order...')
|
||||
.appendTo('body');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Hide loading indicator
|
||||
*/
|
||||
function hideLoadingIndicator() {
|
||||
$('#hssm-loading-indicator').remove();
|
||||
}
|
||||
|
||||
/**
|
||||
* Show notification message
|
||||
*/
|
||||
function showNotification(message, type) {
|
||||
const $notice = $('<div class="notice notice-' + type + ' is-dismissible hssm-notice">')
|
||||
.html('<p>' + message + '</p>')
|
||||
.hide();
|
||||
|
||||
// Insert after the page title
|
||||
$('.wrap h1').first().after($notice);
|
||||
|
||||
// Animate in
|
||||
$notice.slideDown(300);
|
||||
|
||||
// Add dismiss functionality
|
||||
$notice.on('click', '.notice-dismiss', function() {
|
||||
$notice.slideUp(300, function() {
|
||||
$(this).remove();
|
||||
});
|
||||
});
|
||||
|
||||
// Auto-dismiss success messages after 3 seconds
|
||||
if (type === 'success') {
|
||||
setTimeout(function() {
|
||||
$notice.find('.notice-dismiss').click();
|
||||
}, 3000);
|
||||
}
|
||||
}
|
||||
|
||||
// Add rotation animation for loading spinner
|
||||
if (!$('#hssm-animation-styles').length) {
|
||||
$('<style id="hssm-animation-styles">')
|
||||
.text(`
|
||||
@keyframes rotation {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(359deg); }
|
||||
}
|
||||
.hssm-notice {
|
||||
margin: 10px 0;
|
||||
}
|
||||
`)
|
||||
.appendTo('head');
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,223 @@
|
||||
/**
|
||||
* Hi-School Slide Manager - Admin JavaScript
|
||||
*/
|
||||
|
||||
jQuery(document).ready(function($) {
|
||||
'use strict';
|
||||
|
||||
// Initialize admin functionality
|
||||
initializeAdmin();
|
||||
|
||||
/**
|
||||
* Initialize admin functionality
|
||||
*/
|
||||
function initializeAdmin() {
|
||||
// Handle form submissions
|
||||
$('.hssm-settings-form').on('submit', handleFormSubmission);
|
||||
|
||||
// Handle media upload buttons
|
||||
$('.hssm-upload-button').on('click', handleMediaUpload);
|
||||
|
||||
// Handle slide preview
|
||||
$('.hssm-preview-button').on('click', handleSlidePreview);
|
||||
|
||||
// Initialize sortable slides if library is available
|
||||
if (typeof $.fn.sortable !== 'undefined') {
|
||||
initializeSortable();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle form submission
|
||||
*/
|
||||
function handleFormSubmission(e) {
|
||||
e.preventDefault();
|
||||
|
||||
var $form = $(this);
|
||||
var $submitBtn = $form.find('[type="submit"]');
|
||||
var originalText = $submitBtn.text();
|
||||
|
||||
// Show loading state
|
||||
$submitBtn.text('Saving...').prop('disabled', true);
|
||||
|
||||
// Simulate form processing (replace with actual AJAX call)
|
||||
setTimeout(function() {
|
||||
$submitBtn.text('Saved!').removeClass('hssm-btn').addClass('hssm-btn-success');
|
||||
|
||||
setTimeout(function() {
|
||||
$submitBtn.text(originalText).removeClass('hssm-btn-success').addClass('hssm-btn').prop('disabled', false);
|
||||
}, 2000);
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle media upload
|
||||
*/
|
||||
function handleMediaUpload(e) {
|
||||
e.preventDefault();
|
||||
|
||||
var $button = $(this);
|
||||
var $input = $button.siblings('input[type="hidden"]');
|
||||
var $preview = $button.siblings('.hssm-image-preview');
|
||||
|
||||
// WordPress media uploader
|
||||
if (typeof wp !== 'undefined' && wp.media) {
|
||||
var mediaUploader = wp.media({
|
||||
title: 'Choose Slide Image',
|
||||
button: {
|
||||
text: 'Use this image'
|
||||
},
|
||||
multiple: false
|
||||
});
|
||||
|
||||
mediaUploader.on('select', function() {
|
||||
var attachment = mediaUploader.state().get('selection').first().toJSON();
|
||||
$input.val(attachment.id);
|
||||
$preview.html('<img src="' + attachment.url + '" style="max-width: 200px; height: auto;">');
|
||||
});
|
||||
|
||||
mediaUploader.open();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle slide preview
|
||||
*/
|
||||
function handleSlidePreview(e) {
|
||||
e.preventDefault();
|
||||
|
||||
var $button = $(this);
|
||||
var slideData = gatherSlideData($button.closest('.hssm-slide-form'));
|
||||
|
||||
// Create preview modal
|
||||
var $modal = $('<div class="hssm-modal">');
|
||||
var $modalContent = $('<div class="hssm-modal-content">');
|
||||
var $closeBtn = $('<span class="hssm-modal-close">×</span>');
|
||||
|
||||
$modalContent.append($closeBtn);
|
||||
$modalContent.append('<h3>Slide Preview</h3>');
|
||||
$modalContent.append('<div class="hssm-slide-preview">' + generateSlideHTML(slideData) + '</div>');
|
||||
|
||||
$modal.append($modalContent);
|
||||
$('body').append($modal);
|
||||
|
||||
// Show modal
|
||||
$modal.fadeIn();
|
||||
|
||||
// Close modal handlers
|
||||
$closeBtn.on('click', function() {
|
||||
$modal.fadeOut(function() {
|
||||
$modal.remove();
|
||||
});
|
||||
});
|
||||
|
||||
$modal.on('click', function(e) {
|
||||
if (e.target === this) {
|
||||
$modal.fadeOut(function() {
|
||||
$modal.remove();
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize sortable slides
|
||||
*/
|
||||
function initializeSortable() {
|
||||
$('.hssm-slides-list').sortable({
|
||||
handle: '.hssm-slide-handle',
|
||||
placeholder: 'hssm-slide-placeholder',
|
||||
update: function(event, ui) {
|
||||
// Handle slide reordering
|
||||
updateSlideOrder();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Gather slide data from form
|
||||
*/
|
||||
function gatherSlideData($form) {
|
||||
return {
|
||||
title: $form.find('[name="slide_title"]').val(),
|
||||
content: $form.find('[name="slide_content"]').val(),
|
||||
image: $form.find('[name="slide_image"]').val()
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Generate slide HTML for preview
|
||||
*/
|
||||
function generateSlideHTML(data) {
|
||||
var html = '<div class="hssm-slide">';
|
||||
html += '<h3>' + (data.title || 'Untitled Slide') + '</h3>';
|
||||
html += '<div class="hssm-slide-content">' + (data.content || 'No content') + '</div>';
|
||||
if (data.image) {
|
||||
html += '<div class="hssm-slide-image"><img src="' + data.image + '" alt="Slide Image"></div>';
|
||||
}
|
||||
html += '</div>';
|
||||
return html;
|
||||
}
|
||||
|
||||
/**
|
||||
* Update slide order after sorting
|
||||
*/
|
||||
function updateSlideOrder() {
|
||||
var order = [];
|
||||
$('.hssm-slides-list .hssm-slide-item').each(function() {
|
||||
order.push($(this).data('slide-id'));
|
||||
});
|
||||
|
||||
// Send order to server (implement AJAX call)
|
||||
console.log('New slide order:', order);
|
||||
}
|
||||
});
|
||||
|
||||
// Add modal styles
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
var style = document.createElement('style');
|
||||
style.textContent = `
|
||||
.hssm-modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
z-index: 1000;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.hssm-modal-content {
|
||||
background-color: #fff;
|
||||
margin: 5% auto;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
width: 80%;
|
||||
max-width: 600px;
|
||||
position: relative;
|
||||
max-height: 80vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.hssm-modal-close {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 15px;
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
.hssm-modal-close:hover,
|
||||
.hssm-modal-close:focus {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.hssm-btn-success {
|
||||
background: #46b450 !important;
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
});
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,79 @@
|
||||
/**
|
||||
* Hi-School Slide Manager - Frontend JavaScript
|
||||
*/
|
||||
|
||||
jQuery(document).ready(function($) {
|
||||
'use strict';
|
||||
|
||||
// Initialize slide functionality
|
||||
initializeSlides();
|
||||
|
||||
/**
|
||||
* Initialize slide functionality
|
||||
*/
|
||||
function initializeSlides() {
|
||||
$('.hssm-slides-container').each(function() {
|
||||
var $container = $(this);
|
||||
var $slides = $container.find('.hssm-slide');
|
||||
|
||||
// Add fade-in animation
|
||||
$slides.each(function(index) {
|
||||
var $slide = $(this);
|
||||
setTimeout(function() {
|
||||
$slide.addClass('hssm-fade-in');
|
||||
}, index * 100);
|
||||
});
|
||||
|
||||
// Add click handlers for interactive slides
|
||||
$slides.on('click', function() {
|
||||
var $slide = $(this);
|
||||
$slide.toggleClass('hssm-slide-expanded');
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle slide interactions
|
||||
*/
|
||||
$(document).on('click', '.hssm-slide-toggle', function(e) {
|
||||
e.preventDefault();
|
||||
var $button = $(this);
|
||||
var $slide = $button.closest('.hssm-slide');
|
||||
var $content = $slide.find('.hssm-slide-content');
|
||||
|
||||
$content.slideToggle(300);
|
||||
$button.text($content.is(':visible') ? 'Hide' : 'Show');
|
||||
});
|
||||
|
||||
/**
|
||||
* Handle keyboard navigation
|
||||
*/
|
||||
$(document).on('keydown', '.hssm-slide', function(e) {
|
||||
if (e.which === 13 || e.which === 32) { // Enter or Space
|
||||
e.preventDefault();
|
||||
$(this).click();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Add CSS classes via JavaScript for animations
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
var style = document.createElement('style');
|
||||
style.textContent = `
|
||||
.hssm-slide {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
transition: opacity 0.5s ease, transform 0.5s ease;
|
||||
}
|
||||
|
||||
.hssm-slide.hssm-fade-in {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.hssm-slide.hssm-slide-expanded {
|
||||
transform: scale(1.02);
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
});
|
||||
@@ -0,0 +1,166 @@
|
||||
/**
|
||||
* Hi-School Slide Manager Preview JavaScript
|
||||
*
|
||||
* Handles interactions on the slide preview page
|
||||
*
|
||||
* @package Hi_School_Slide_Manager
|
||||
* @since 1.0.0
|
||||
*/
|
||||
|
||||
(function($) {
|
||||
'use strict';
|
||||
|
||||
// Preview object
|
||||
const HSSMPreview = {
|
||||
|
||||
// Initialize
|
||||
init: function() {
|
||||
this.bindEvents();
|
||||
this.initDatepicker();
|
||||
},
|
||||
|
||||
// Initialize Datepicker
|
||||
initDatepicker: function() {
|
||||
if ($('#hssm_date').length === 0) return;
|
||||
|
||||
$('#hssm_date').datepicker({
|
||||
dateFormat: 'yy-mm-dd',
|
||||
beforeShowDay: function(date) {
|
||||
var y = date.getFullYear();
|
||||
var m = date.getMonth() + 1;
|
||||
var d = date.getDate();
|
||||
|
||||
// Pad month and day
|
||||
var dateString = y + '-' + (m < 10 ? '0' : '') + m + '-' + (d < 10 ? '0' : '') + d;
|
||||
|
||||
if (typeof hssmEvents !== 'undefined' && hssmEvents[dateString]) {
|
||||
var classes = [];
|
||||
var events = hssmEvents[dateString];
|
||||
|
||||
if (events.indexOf('start') !== -1) {
|
||||
classes.push('hssm-datepicker-start');
|
||||
}
|
||||
if (events.indexOf('end') !== -1) {
|
||||
classes.push('hssm-datepicker-end');
|
||||
}
|
||||
|
||||
return [true, classes.join(' '), ''];
|
||||
}
|
||||
|
||||
return [true, '', ''];
|
||||
},
|
||||
onSelect: function(dateText) {
|
||||
// Trigger form submit
|
||||
$(this).closest('form').submit();
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// Bind event handlers
|
||||
bindEvents: function() {
|
||||
$(document).on('click', '#email-preview', this.emailPreview.bind(this));
|
||||
$(document).on('click', '#download-screenshot', this.downloadScreenshot.bind(this));
|
||||
$(document).on('click', '#copy-preview-link', this.copyPreviewLink.bind(this));
|
||||
$(document).on('click', '.hssm-approve-slide', this.approveSlide.bind(this));
|
||||
},
|
||||
|
||||
// Email preview functionality
|
||||
emailPreview: function(e) {
|
||||
e.preventDefault();
|
||||
this.showMessage('Email preview functionality coming soon!', 'info');
|
||||
},
|
||||
|
||||
// Download screenshot functionality
|
||||
downloadScreenshot: function(e) {
|
||||
e.preventDefault();
|
||||
this.showMessage('Screenshot download functionality coming soon!', 'info');
|
||||
},
|
||||
|
||||
// Copy preview link
|
||||
copyPreviewLink: function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
const previewUrl = window.location.href;
|
||||
|
||||
if (navigator.clipboard) {
|
||||
navigator.clipboard.writeText(previewUrl).then(() => {
|
||||
this.showMessage('Preview link copied to clipboard!', 'success');
|
||||
});
|
||||
} else {
|
||||
this.showMessage('Preview link: ' + previewUrl, 'info');
|
||||
}
|
||||
},
|
||||
|
||||
// Approve slide
|
||||
approveSlide: function(e) {
|
||||
e.preventDefault();
|
||||
const $btn = $(e.currentTarget);
|
||||
const slideId = $btn.data('id');
|
||||
|
||||
if (!confirm(hssmPreview.strings.approve_confirm)) {
|
||||
return;
|
||||
}
|
||||
|
||||
$btn.prop('disabled', true).addClass('hssm-loading');
|
||||
|
||||
$.ajax({
|
||||
url: hssmPreview.ajaxurl,
|
||||
type: 'POST',
|
||||
data: {
|
||||
action: 'hssm_approve_slide',
|
||||
nonce: hssmPreview.nonce,
|
||||
slide_id: slideId,
|
||||
approve_action: 'schedule' // Smart approve: schedules if future date exists, otherwise publishes
|
||||
},
|
||||
success: (response) => {
|
||||
if (response.success) {
|
||||
this.showMessage(hssmPreview.strings.approve_success, 'success');
|
||||
// Reload page to reflect changes
|
||||
setTimeout(() => {
|
||||
window.location.reload();
|
||||
}, 1500);
|
||||
} else {
|
||||
this.showMessage(response.data.message || hssmPreview.strings.approve_error, 'error');
|
||||
$btn.prop('disabled', false).removeClass('hssm-loading');
|
||||
}
|
||||
},
|
||||
error: () => {
|
||||
this.showMessage(hssmPreview.strings.approve_error, 'error');
|
||||
$btn.prop('disabled', false).removeClass('hssm-loading');
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// Show message to user
|
||||
showMessage: function(message, type = 'info') {
|
||||
// Create message container if it doesn't exist
|
||||
let $messages = $('#hssm-preview-messages');
|
||||
|
||||
if ($messages.length === 0) {
|
||||
$messages = $('<div id="hssm-preview-messages" class="hssm-messages"></div>');
|
||||
$('.hssm-preview-actions').before($messages);
|
||||
}
|
||||
|
||||
const messageHtml = `
|
||||
<div class="hssm-message ${type}">
|
||||
${message}
|
||||
</div>
|
||||
`;
|
||||
|
||||
$messages.append(messageHtml);
|
||||
|
||||
// Auto-remove after 5 seconds
|
||||
setTimeout(() => {
|
||||
$messages.find('.hssm-message').last().fadeOut(300, function() {
|
||||
$(this).remove();
|
||||
});
|
||||
}, 5000);
|
||||
}
|
||||
};
|
||||
|
||||
// Initialize when document is ready
|
||||
$(document).ready(function() {
|
||||
HSSMPreview.init();
|
||||
});
|
||||
|
||||
})(jQuery);
|
||||
@@ -0,0 +1,109 @@
|
||||
/**
|
||||
* HSSM Slider JavaScript
|
||||
* Handles navigation and autoplay for the [hssm_slider] shortcode
|
||||
* Custom classes version
|
||||
*/
|
||||
(function($) {
|
||||
'use strict';
|
||||
|
||||
var HSSMSlider = function(container) {
|
||||
this.$container = $(container);
|
||||
this.$track = this.$container.find('.hssm-track');
|
||||
this.$slides = this.$container.find('.hssm-slide');
|
||||
this.slideCount = this.$slides.length;
|
||||
this.currentIndex = 0;
|
||||
this.autoplay = this.$container.data('autoplay') === true || this.$container.data('autoplay') === 'true';
|
||||
this.interval = parseInt(this.$container.data('interval')) || 5000;
|
||||
this.timer = null;
|
||||
|
||||
if (this.slideCount <= 1) return;
|
||||
|
||||
this.init();
|
||||
};
|
||||
|
||||
HSSMSlider.prototype.init = function() {
|
||||
var self = this;
|
||||
|
||||
// Arrows
|
||||
this.$container.find('.hssm-arrow-next').on('click', function(e) {
|
||||
e.preventDefault();
|
||||
self.stopAutoplay();
|
||||
self.next();
|
||||
self.startAutoplay();
|
||||
});
|
||||
|
||||
this.$container.find('.hssm-arrow-prev').on('click', function(e) {
|
||||
e.preventDefault();
|
||||
self.stopAutoplay();
|
||||
self.prev();
|
||||
self.startAutoplay();
|
||||
});
|
||||
|
||||
// Touch swipe support
|
||||
var touchStartX = 0;
|
||||
var touchStartY = 0;
|
||||
|
||||
this.$container.on('touchstart', function(e) {
|
||||
touchStartX = e.originalEvent.touches[0].pageX;
|
||||
touchStartY = e.originalEvent.touches[0].pageY;
|
||||
});
|
||||
|
||||
this.$container.on('touchend', function(e) {
|
||||
var touchEndX = e.originalEvent.changedTouches[0].pageX;
|
||||
var touchEndY = e.originalEvent.changedTouches[0].pageY;
|
||||
|
||||
// Calculate distance
|
||||
var dx = touchStartX - touchEndX;
|
||||
var dy = touchStartY - touchEndY;
|
||||
|
||||
// Only swipe if horizontal movement is greater than vertical (prevents swipe on scroll)
|
||||
if (Math.abs(dx) > Math.abs(dy) && Math.abs(dx) > 50) {
|
||||
if (dx > 0) {
|
||||
self.next();
|
||||
} else {
|
||||
self.prev();
|
||||
}
|
||||
self.stopAutoplay();
|
||||
self.startAutoplay();
|
||||
}
|
||||
});
|
||||
|
||||
this.startAutoplay();
|
||||
};
|
||||
|
||||
HSSMSlider.prototype.update = function() {
|
||||
var offset = -this.currentIndex * 100;
|
||||
this.$track.css('transform', 'translateX(' + offset + '%)');
|
||||
};
|
||||
|
||||
HSSMSlider.prototype.next = function() {
|
||||
this.currentIndex = (this.currentIndex + 1) % this.slideCount;
|
||||
this.update();
|
||||
};
|
||||
|
||||
HSSMSlider.prototype.prev = function() {
|
||||
this.currentIndex = (this.currentIndex - 1 + this.slideCount) % this.slideCount;
|
||||
this.update();
|
||||
};
|
||||
|
||||
HSSMSlider.prototype.startAutoplay = function() {
|
||||
if (!this.autoplay) return;
|
||||
var self = this;
|
||||
this.timer = setInterval(function() {
|
||||
self.next();
|
||||
}, this.interval);
|
||||
};
|
||||
|
||||
HSSMSlider.prototype.stopAutoplay = function() {
|
||||
if (this.timer) {
|
||||
clearInterval(this.timer);
|
||||
}
|
||||
};
|
||||
|
||||
$(document).ready(function() {
|
||||
$('.hssm-slider-container').each(function() {
|
||||
new HSSMSlider(this);
|
||||
});
|
||||
});
|
||||
|
||||
})(jQuery);
|
||||
Reference in New Issue
Block a user