calendar widget and frontend fix

This commit is contained in:
Harry Bomrah 2015-06-02 17:22:05 +08:00
parent 5977370c98
commit 2508d70883
4 changed files with 44 additions and 100 deletions

View File

@ -23,6 +23,13 @@
text-align: center;
font-size: 0.8125rem;
}
.loading {
&:after {
content: '\f1ce';
font-family: FontAwesome;
animation: 2s linear 0s normal none infinite running fa-spin;
}
}
}
.w-calendar-table {
margin-bottom: 0;
@ -34,6 +41,7 @@
background: $theme-color-third;
color: $theme-white;
}
}
.w-calendar-nav {
@ -47,4 +55,12 @@
left: auto;
right: 10px;
}
}
@keyframes fa-spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
}

View File

@ -1,6 +1,9 @@
<div class="w-calendar widget-calendar-1">
<div class="w-calendar widget-calendar-1" data-module="calendar">
<div class='month_template'>
<h4 class="widget-title"></h4>
<h4 class="widget-title ">
<span class="text"></span>
<i class="fa fa-circle-o-notch fa-spin fa-fw loading hide"></i>
</h4>
<div class="w-calendar-nav">
<a href="#" class="w-calendar-nav-prev">
<i class="fa fa-chevron-left"></i>
@ -29,102 +32,27 @@
</div>
<script>
if(typeof CalendarModuleMonth == "undefined"){
var CalendarModuleMonth = function(month,year,month_template){
_this = this;
this.monthDom = $("<div data-year='"+year+"' data-month='"+month+"'></div>");
var template = month_template,
monthNames = ['January','February','March','April','May','June','July','August','September','October','November','December'],
firstDay = new Date(year,month,1),
lastDay = new Date(year,month+1,0),
last_inserted_date = 1;
var renderMonth = function(){
var num_of_rows = getNumberOfRows(year,month)
for(var i = 0; i < num_of_rows; i++){
var tr = null;
if(i == 0){
tr = makeRow("first");
}else if(i == (num_of_rows - 1)){
tr = makeRow("last");
}else{
tr = makeRow("middle");
if(document.getElementById("calendar-widget_module") == null){
var tag = document.createElement('script');
tag.setAttribute("id", "calendar-widget_module");
tag.src = "/assets/calendar_widget.js";
tag.onload = function(){
$("div[data-module=calendar]").each(function(index){
var calendar = $(this),
cmi = new CalendarModuleMonth(new Date(), calendar,calendar.data("subpart-id"));
cmi.currentMonth();
calendar.find("div.w-calendar-nav a").on("click",function(){
var el = $(this);
if(el.hasClass("w-calendar-nav-prev")){
cmi.prevMonth();
}else if(el.hasClass("w-calendar-nav-next")){
cmi.nextMonth();
}
if(tr == null){
break;
}
template.find("table.table tbody").append(tr);
template.find("h4").text(monthNames[firstDay.getMonth()] + " " + firstDay.getFullYear());
}
_this.monthDom.append(template);
return _this.monthDom;
}
function getNumberOfRows(year, month) {
var day = 1,
sat_counter = 0,
sunday_counter = 0,
date = new Date(year, month, day);
while(date.getMonth() === month) {
if(date.getDay() === 0) {
sunday_counter++;
}else if(date.getDay() === 6) {
sat_counter++;
}
day++;
date = new Date(year, month, day);
}
return (sunday_counter == 5 && sat_counter == 5 ? 6 : 5);
}
var makeRow = function(position){
if(last_inserted_date <= lastDay.getDate()){
var row = $("<tr></tr>");
switch (position){
case "first":
for(var i = 0;i < 7;i++){
var td = $("<td></td>");
if(i >= firstDay.getDay()){
td.text(last_inserted_date);
td.attr("data-date-node",last_inserted_date+"-"+firstDay.getMonth()+"-"+firstDay.getFullYear());
last_inserted_date++;
}
row.append(td);
}
break;
case "middle":
for(var i = 0;i < 7;i++){
var td = $("<td></td>");
td.text(last_inserted_date);
td.attr("data-date-node",last_inserted_date+"-"+firstDay.getMonth()+"-"+firstDay.getFullYear());
last_inserted_date++;
row.append(td);
}
break;
case "last":
for(var i = 0;i < 7;i++){
var td = $("<td></td>");
if(i <= lastDay.getDay()){
td.text(last_inserted_date);
td.attr("data-date-node",last_inserted_date+"-"+firstDay.getMonth()+"-"+firstDay.getFullYear());
last_inserted_date++;
}
row.append(td);
}
break;
}
}else{
var row = null;
}
return row;
}
return renderMonth();
return false;
})
})
}
var head = document.getElementsByTagName("head");
head[0].appendChild(tag);
}
var date = new Date();
$(".w-calendar[data-subpart-id={{subpart-id}}]").html(new CalendarModuleMonth(date.getMonth(),date.getFullYear(),$(".w-calendar[data-subpart-id={{subpart-id}}] .month_template")));
</script>

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.0 KiB

View File

@ -65,10 +65,10 @@
<div class="control-group">
<label class="control-label muted"><%= @widget_settings['override_category_with'].classify %> List :</label>
<div class="controls">
<% @custom.each do |c| %>
<% @custom.each do |cust| %>
<label class="checkbox">
<input type="checkbox" <%= @subpart.custom_array_field.include?(c.id.to_s) ? "checked='checked'" : "" rescue nil %> value="<%= c.id.to_s %>" name="page_part[sub_parts_attributes][<%= @select_number %>][custom_array_field][]">
<%= c["#{@display_field}"] %>
<input type="checkbox" <%= @subpart.custom_array_field.include?(cust.id.to_s) ? "checked='checked'" : "" rescue nil %> value="<%= cust.id.to_s %>" name="page_part[sub_parts_attributes][<%= @select_number %>][custom_array_field][]">
<%= cust.send(@display_field) rescue "" %>
</label>
<% end %>
</div>